<template>
    <super-dialog
      v-bind="$attrs"
      v-if="dialogVisible"
      v-model="dialogVisible"
      width="70%"
      title="私有云资源申请明细"
      :modal="false"
      top="5vh"
      @closed="handleClose"
    >
      <div v-loading="formLoading" class="form-content" element-loading-background="rgba(10 ,38 ,61, 0.95)"
           element-loading-text="数据加载中...">
        <el-form ref="applyform" :model="applyform" class="form-style" :rules="applyformRules">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <template slot="title">
                <div class="collapase-title">
                  <i class="header-icon el-icon-info"></i>
                  <span>私有云资源申请明细基本信息</span>
                </div>
              </template>
              <el-descriptions
                class="margin-top"
                :labelStyle="{width: '150px'}"
                :column="2"
                size="medium"
                border
              >
                <el-descriptions-item :span="2">
                  <template slot="label">
                    <i class="require-start">*</i>
                    资源所属云平台
                  </template>
                  <el-form-item>
                    <el-radio-group
                      v-model="applyform.cloudType"
                      size="medium"
                      disabled
                    >
                      <el-radio
                        v-for="item in cloudType"
                        :key="item.id"
                        :label="parseInt(item.value)"
                      >{{ item.name }}</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="require-start">*</i>
                    虚拟机名称
                  </template>
                  <el-form-item
                    prop="virtualMachineName"
                    v-if="editType === 'edit'"
                  >
                    <el-input
                      size="medium"
                      v-model="applyform.virtualMachineName"
                      placeholder="请填写虚拟机名称"
                    ></el-input>
                  </el-form-item>
                  <div class="read-text" v-else>
                    {{ applyform.virtualMachineName || '-' }}
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="require-start">*</i>
                    操作系统版本
                  </template>
                  <el-form-item prop="system" v-if="editType === 'edit'">
                    <el-input
                      size="medium"
                      v-model="applyform.system"
                      placeholder="请填写操作系统版本"
                    ></el-input>
                  </el-form-item>
                  <div class="read-text" v-else>
                    {{ applyform.system || '-' }}
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="require-start" v-if="editType === 'excute'"
                    >*</i
                    >
                    外网IP
                  </template>
                  <el-form-item prop="externalIp" v-if="editType === 'excute'">
                    <dict-select
                      dictCode="cloud_apply_wwIP"
                      :hasDefaultOption="true"
                      clearable
                      placeholder="请选择外网IP"
                      v-model="applyform.externalIp"
                    />
                  </el-form-item>
                  <div class="read-text" v-else>
                    {{ applyform.externalIp || '-' }}
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="require-start">*</i>
                    内网IP
                  </template>
                  <el-form-item prop="intranetIp" v-if="editType !== ''">
                    <el-input
                      size="medium"
                      v-model="applyform.intranetIp"
                      placeholder="请填写内网IP"
                    ></el-input>
                  </el-form-item>
                  <div class="read-text" v-else>
                    {{ applyform.intranetIp || '-' }}
                  </div>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="require-start">*</i>
                    CPU
                  </template>
                  <el-form-item prop="cpuNum">
                    <el-input-number
                      v-if="editType === 'edit'"
                      :min="0"
                      :controls="false"
                      v-model="applyform.cpuNum"
                    ></el-input-number>
                    <span class="read-text" v-else>{{
                        applyform.cpuNum || '-'
                      }}</span>
                    核
                  </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="require-start">*</i>
                    内存容量
                  </template>
                  <el-form-item prop="memoryCapacity">
                    <el-input-number
                      v-if="editType === 'edit'"
                      :min="0"
                      :controls="false"
                      v-model="applyform.memoryCapacity"
                    ></el-input-number>
                    <span class="read-text" v-else>
                                    {{ applyform.memoryCapacity || '-' }}
                                </span>
                    G
                  </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="require-start">*</i>
                    数据盘容量
                  </template>
                  <el-form-item prop="sysCapacity">
                    <el-input-number
                      v-if="editType === 'edit'"
                      :min="0"
                      :controls="false"
                      v-model="applyform.sysCapacity"
                    ></el-input-number>
                    <span class="read-text" v-else>
                                    {{ applyform.sysCapacity || '-' }}
                                </span>
                    G
                  </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="require-start">*</i>
                    数据盘存储容量
                  </template>
                  <el-form-item prop="dataCapacity">
                    <el-input-number
                      v-if="editType === 'edit'"
                      :min="0"
                      :controls="false"
                      v-model="applyform.dataCapacity"
                    ></el-input-number>
                    <span class="read-text" v-else>
                                    {{ applyform.dataCapacity || '-' }}
                                </span>
                    G
                  </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item :div="2">
                  <template slot="label"> 其他要求及说明 </template>
                  <el-form-item
                    prop="其他要求及说明"
                    v-if="editType === 'edit'"
                  >
                    <el-input
                      type="textarea"
                      size="medium"
                      v-model="applyform.otherRequirements"
                      placeholder="其他要求及说明"
                    ></el-input>
                  </el-form-item>
                  <div class="read-text" v-else>
                    {{ applyform.otherRequirements || '-' }}
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template slot="title">
                <div class="collapase-title">
                  <i class="header-icon el-icon-info"></i>
                  <span>私有云资源申请端口映射列表</span>
                </div>
              </template>
              <div v-if="editType === 'edit'">
                <el-button type="primary" @click="handleAddPort">新增</el-button>
              </div>
              <div class="table-wrapper">
                <el-table
                  border
                  stripe
                  height="300"
                  :data="applyform.cloudApplyDetailPorts"
                >
                  <el-table-column
                    width="55"
                    align="center"
                    type="index"
                    label="序号"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="协议类型"
                    width="120px"
                    prop="intranetAgreement"
                  >
                    <template slot-scope="{row, $index}">
                      <el-form-item
                        v-if="editType !== ''"
                        label-width="0"
                        :prop="`cloudApplyDetailPorts.${$index}.intranetAgreement`"
                        :rules="applyformRules.intranetAgreement"
                      >
                        <dict-select
                          dictCode="cloud_apply_agreement"
                          :hasDefaultOption="true"
                          clearable
                          placeholder="请选择协议类型"
                          v-model="row.intranetAgreement"
                        />
                      </el-form-item>
                      <div class="read-text" v-else>
                        {{
                          getDictName(
                            'cloud_apply_agreement',
                            row.intranetAgreement
                          )
                        }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="内网端口"
                    width="160px"
                    prop="intranetPort"
                  >
                    <template slot-scope="{row, $index}">
                      <el-form-item
                        v-if="editType !== ''"
                        label-width="0"
                        :prop="`cloudApplyDetailPorts.${$index}.intranetPort`"
                        :rules="applyformRules.intranetPort"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入内网端口"
                          v-model="row.intranetPort"
                        />
                      </el-form-item>
                      <div class="read-text" v-else>
                        {{ row.intranetPort || '-' }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="外网端口"
                    width="160px"
                    prop="networkPort"
                  >
                    <template slot-scope="{row, $index}">
                      <el-form-item
                        v-if="editType === 'excute'"
                        label-width="0"
                        :prop="`cloudApplyDetailPorts.${$index}.networkPort`"
                        :rules="applyformRules.networkPort"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入外网端口"
                          v-model="row.networkPort"
                        />
                      </el-form-item>
                      <div class="read-text" v-else>
                        {{ row.networkPort || '-' }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="端口用途"
                    prop="portPurpose"
                  >
                    <template slot-scope="{row, $index}">
                      <el-form-item
                        v-if="editType !== ''"
                        label-width="0"
                        :prop="`cloudApplyDetailPorts.${$index}.portPurpose`"
                        :rules="applyformRules.portPurpose"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入端口用途"
                          v-model="row.portPurpose"
                        />
                      </el-form-item>
                      <div
                        class="read-text"
                        v-else
                        :title="row.portPurpose"
                      >
                        {{ row.portPurpose || '-' }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="备注" prop="remarks">
                    <template slot-scope="{row, $index}">
                      <el-form-item
                        v-if="editType !== ''"
                        label-width="0"
                        :prop="`cloudApplyDetailPorts.${$index}.remarks`"
                      >
                        <el-input
                          size="small"
                          placeholder="请输入备注"
                          v-model="row.remarks"
                        />
                      </el-form-item>
                      <div class="read-text" v-else :title="row.remarks">
                        {{ row.remarks || '-' }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="操作"
                    width="80"
                    v-if="editType === 'edit'"
                  >
                    <template slot-scope="{row, $index}">
                      <el-button
                        type="danger"
                        size="mini"
                        @click="handleDelPort(row, $index)"
                      >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </div>
      <div slot="footer" class="footer">
          <el-button :loading="saving" @click="handleClose">取 消</el-button>
          <el-button
              :loading="saving"
              type="primary"
              @click="handleSaveBasic"
              v-if="type !== 'readOnly'"
              >确 定</el-button
          >
      </div>
    </super-dialog>
</template>
<script>
import utils from '@/utils/utils'
import _ from 'lodash'
import SuperDialog from '@/components/SuperDialog/index.vue'
import {getDictionaryByCode} from '@/utils/dictionary'
import {addApplyDetail, deleteDetailPorts, editApplyDetail} from '@/api/publicBasic/resourceBid'
export default {
    name: 'applyDetailForm',
    components: {SuperDialog},
    data() {
        return {
            formLoading:false,
            dialogVisible: false,
            activeNames: ['1', '2'],
            type: '',
            saving: false,
            applyform: {
                cloudType: null,
                intranetIp: '172.16.200.',
                cloudApplyDetailPorts: [],
            },
            applyformRules: {
                cloudType: [
                    {
                        required: true,
                        message: '请选择资源所属云平台',
                        trigger: ['blur', 'change'],
                    },
                ],
                system: [
                    {
                        required: true,
                        message: '请输入操作系统版本',
                        trigger: ['blur', 'change'],
                    },
                ],
                virtualMachineName: [
                    {
                        required: true,
                        message: '请输入虚拟机名称',
                        trigger: ['blur', 'change'],
                    },
                ],
                externalIp: [
                    {
                        required: true,
                        message: '请选择外网IP',
                        trigger: ['blur', 'change'],
                    },
                ],
                intranetIp: [
                    {
                        required: true,
                        message: '请输入内网IP',
                        trigger: ['blur', 'change'],
                    },
                    // {
                    //     pattern:
                    //         /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/,
                    //     message: 'IP格式不正确',
                    //     trigger: ['blur', 'change'],
                    // },
                ],
                cpuNum: [
                    {
                        required: true,
                        message: '请输入CPU核心数',
                        trigger: ['blur', 'change'],
                    },
                ],
                memoryCapacity: [
                    {
                        required: true,
                        message: '请输入内存容量',
                        trigger: ['blur', 'change'],
                    },
                ],
                sysCapacity: [
                    {
                        required: true,
                        message: '请输入数据盘容量',
                        trigger: ['blur', 'change'],
                    },
                ],
                dataCapacity: [
                    {
                        required: true,
                        message: '请输入数据盘存储容量',
                        trigger: ['blur', 'change'],
                    },
                ],
                intranetAgreement: [
                    {
                        required: true,
                        message: '请选择协议类型',
                        trigger: ['blur', 'change'],
                    },
                ],
                intranetPort: [
                    {
                        required: true,
                        message: '请输入内网端口',
                        trigger: ['blur', 'change'],
                    },
                ],
                networkPort: [
                    {
                        required: true,
                        message: '请输入外网端口',
                        trigger: ['blur', 'change'],
                    },
                ],
                portPurpose: [
                    {
                        required: true,
                        message: '请输入端口用途',
                        trigger: ['blur', 'change'],
                    },
                ],
            },
            cloudType: [],
            id: '',
            privateCloudApplyId: '',
            pageType: '',
            editType: '',
            detailPortData: [],
        }
    },
    created() {},
    methods: {
        getDictionaryByCode,
        handleInitDict() {
            this.cloudType = this.getDictionaryByCode('zy-ssypt')
            if (this.cloudType.length) {
                this.applyform.cloudType = parseInt(this.cloudType[0].value)
            }
        },
        handleOpen(pageType, type, privateCloudApplyId, applyData) {
            this.pageType = pageType
            this.type = type
            this.privateCloudApplyId = privateCloudApplyId
            this.applyform.privateCloudApplyId = privateCloudApplyId
            this.handleInitDict()
            if (this.pageType === 'apply') {
                if (this.type === 'excute' || this.type === 'readOnly') {
                    this.editType = ''
                } else if (this.type === 'edit' || this.type === 'add') {
                    this.editType = 'edit'
                }
            } else if (this.pageType === 'excute') {
                this.editType = 'excute'
            } else if (this.pageType === 'audit') {
                this.editType = ''
            }
            if (type === 'add') {
                this.applyform.cloudType = applyData.cloudType
                this.dialogVisible = true
            } else {
                this.id = applyData.cloudApplyDetail.id
                let cloudApplyDetailPorts = [
                    {
                        uuid: utils.uuid(),
                        intranetAgreement: '1',
                        intranetPort: '',
                        networkPort: '',
                        portPurpose: '',
                        remarks: '',
                    },
                ]

                if (
                    applyData.cloudApplyDetailPorts &&
                    applyData.cloudApplyDetailPorts.length
                ) {
                    cloudApplyDetailPorts = applyData.cloudApplyDetailPorts.map(
                        (item) => {
                            item.uuid = utils.uuid()
                            return item
                        }
                    )
                }

                let data = {
                    ...applyData.cloudApplyDetail,
                    cloudApplyDetailPorts,
                }

                this.applyform = data
                this.dialogVisible = true
            }
        },
        handleSaveBasic() {
            this.saving = true
            this.$refs.applyform.validate((bool, object) => {
                if (bool) {
                    //端口映射删除uuid字段
                    let cloudApplyDetailPorts = this.applyform.cloudApplyDetailPorts.map(
                      (item) => {
                        delete item.uuid
                        return item
                      }
                    )
                    //详情信息删除端口映射arr
                    let cloudApplyDetail = _.cloneDeep(this.applyform)
                    delete cloudApplyDetail.cloudApplyDetailPorts
                    let submitData = {
                      cloudApplyDetailPorts,
                      cloudApplyDetail,
                    }
                    const {state,value,message} = this.type === 'add' ? addApplyDetail(submitData) : editApplyDetail(submitData)
                    if(state){
                      this.saving = false
                      this.id = value
                      this.$message.success('云资源明细保存成功！')
                      this.$emit('save')
                      this.handleClose()
                    }else{
                      this.saving = false
                      this.$message.warning(message)
                    }
                } else {
                    this.$message.warning(
                        `有${
                            Object.keys(object).length
                        }个字段未通过校验，请正确填写表单内容。`
                    )
                    this.saving = false
                }
            })
        },
        handleClose() {
            this.id = ''
            this.type = ''
            this.privateCloudApplyId = ''
            this.applyform = {
                cloudType: null,
                intranetIp: '172.16.200.',
                cloudApplyDetailPorts: [],
            }
            this.pageType = ''
            this.editType = ''
            this.activeNames = ['1', '2']
            this.dialogVisible = false
        },
        handleAddPort() {
            let newData = {
                uuid: utils.uuid(),
                intranetAgreement: '1',
                intranetPort: '',
                networkPort: '',
                portPurpose: '',
                remarks: '',
            }
            let length = this.applyform.cloudApplyDetailPorts.length
            this.applyform.cloudApplyDetailPorts.splice(length + 1, 0, newData)
        },
        handleDelPort(row, $index) {
            if (row.id) {
              const {state,message} = deleteDetailPorts(row.id)
              if(state){
                this.$message.success('删除成功！')
                this.applyform.cloudApplyDetailPorts.splice($index, 1)
              }else{
                this.$message.warning(message || '删除失败')
              }
            } else {
                this.applyform.cloudApplyDetailPorts.splice($index, 1)
                this.$message.success('删除成功！')
            }
        },
        handleSelectionChange(selection) {
            this.detailPortData = selection
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep .super-dialog-content{
  max-height: 75vh;
  overflow-y: auto;
}
.dialog-footer{
  padding-top: 20px;
}
.form-style{
  padding: 0 20px;
}
.require-start{
    color: #f56c6c;
    padding-right: 4px;
    font-size: 14px;
}
.read-text{
    margin: 16px 10px;
    font-size: 14px;
}
.collapase-title{
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    i{
        color: #409eff;
    }
    span{
        color: #409eff;
        font-size: 14px;
        font-weight: bold;
    }
}

.table-wrapper{
    margin-top: 10px;
}
::v-deep.el-table--small td.el-table__cell{
    padding: 0;
}
::v-deep.cell .el-button--mini.el-button--danger{
    color: #FFFFFF;
    background-color: #F56C6C!important;
    border-color: #F56C6C;
}
</style>
