<template>
  <basic-form ref="formRef" :model="cloneData" :status-icon="true" v-bind="$attrs">
    <PreviewItem :item-data="itemData"></PreviewItem>
    <basic-form-item label="名称:" validate="required" prop="name">
      <el-input v-model="cloneData.name"></el-input>
    </basic-form-item>
    <basic-form-item label="网络标签:" validate="required" prop="portGroupId">
      <el-select v-model="cloneData.portGroupId" @change="getIpPool">
        <el-option :label="item.portGroupName" :value="item.id" v-for="(item, index) in networkRelations" :key="index"></el-option>
      </el-select>
    </basic-form-item>
    <basic-form-item label="IP地址池:" validate="required">
      <el-row>
        <el-col :span="24">
          <el-radio-group v-model="cloneData.ipPoolId" @change="getIp">
            <el-radio-button :label="item.id" v-for="(item, index) in ipPoolList" :key="index">{{ item.name }}</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="24" class="m-t-xs">
          <el-radio-group v-model="cloneData.ipPolicy" size="small" @change="getIp">
            <el-radio-button label="Auto">自动</el-radio-button>
            <el-radio-button label="Dhcp">DHCP</el-radio-button>
            <el-radio-button label="Manual">手动</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="24" class="m-t-xs" v-if="cloneData.ipPolicy === 'Manual'">
          <el-button type="text" @click="assignIp">分配IP</el-button>
        </el-col>
      </el-row>
    </basic-form-item>
    <basic-form-item label="加入堡垒机：" label-width="120px">
      <el-switch v-model="cloneData.isAddShterm" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </basic-form-item>
    <assign-ip :dialog="ipDialog" v-if="ipDialog.dialog" @back="setAddress"></assign-ip>
  </basic-form>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from '@vue/composition-api'
import { cloneDeep } from 'lodash-es'
import { conditionIp, vcCloneVm } from 'services/platform/index'
import { getPoolDetail } from 'services/platform/pool'
import PreviewItem from './PreviewItem.vue'
import AssignIp from '@/views/resource-apply/ecs/vc/assignIp.vue'
import { Message } from 'element-ui'

type IProps = {
  itemData: any
}
export default defineComponent({
  components: { AssignIp, PreviewItem },
  props: {
    itemData: {
      type: Object
    }
  },
  setup(props: IProps, context) {
    const cloneData = ref(cloneDeep(props.itemData))
    // 代码兼容处理
    if (typeof props.itemData.preview === 'string') {
      cloneData.value.preview = JSON.parse(props.itemData.preview)
    }
    const networkRelations = ref([])
    async function getNetworkRelations() {
      const { poolGroupId, ipPoolId } = cloneData.value
      if (!poolGroupId) return Message.error('该云主机下无资源池')
      const data = await getPoolDetail(poolGroupId)
      if (data.success) {
        const res: any = []
        data.data.networkRelations.map((item: any) => {
          const record = res.find((cell: any) => cell.portGroupName == item.portGroupName)
          if (record) {
            record.ips.push({ name: item.ipPoolName, cidr: item.ipPoolCidr, id: item.ipPoolId })
          } else {
            res.push({ portGroupName: item.portGroupName, id: item.portGroupId, ips: [{ name: item.ipPoolName, cidr: item.ipPoolCidr, id: item.ipPoolId }] })
          }
        })
        networkRelations.value = res
        if (ipPoolId) {
          getIpPool()
        }
      }
    }
    getNetworkRelations()
    // IP 地址池
    const ipPoolList: Ref<any[]> = ref([])
    function getIpPool() {
      const { portGroupId } = cloneData.value
      ipPoolList.value = (networkRelations.value as any[]).find((item: any) => item.id === portGroupId).ips
      cloneData.value.ipPoolId = cloneData.value.ipPoolId || ipPoolList.value[0]?.id || ''
      if (!cloneData.value.addresses.length) getIp()
    }
    function getIp() {
      const { ipPolicy, ipPoolId } = cloneData.value
      if (ipPolicy != 'Manual') return
      conditionIp({
        condition: JSON.stringify({
          condition: 'preAllocation',
          poolId: ipPoolId,
          count: 1
        })
      }).then((data) => {
        if (data.success) {
          cloneData.value.addresses = data.data.map((item: any) => {
            return item.ip
          })
        }
      })
    }
    // 分配IP
    const ipDialog = ref({
      dialog: false,
      address: cloneData.value.addresses,
      poolId: cloneData.value.ipPoolId
    })
    function assignIp() {
      ipDialog.value = {
        dialog: true,
        address: cloneData.value.addresses,
        poolId: cloneData.value.ipPoolId
      }
    }
    function setAddress(data: any) {
      cloneData.value.addresses = data.address
    }
    const formRef = ref()
    function getApplyData() {
      let data = false
      formRef.value.validate((valid: boolean) => {
        if (valid) {
          data = cloneData.value
        }
      })
      return data
    }
    return {
      networkRelations,
      cloneData,
      ipPoolList,
      getIpPool,
      ipDialog,
      getIp,
      assignIp,
      setAddress,
      formRef,
      getApplyData
    }
  }
})
</script>

<style></style>
