<template>
  <!-- 克隆 -->
  <el-dialog
    v-model="cloneDialog"
    title="变量克隆"
    width="30rem"
    @close="close"
    @open="open"
  >
    <div class="dialogOne">
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="克隆设备对象:" prop="deviceCode">
          <span>{{ DialogArray.deviceCode }}</span>
        </el-form-item>
        <el-form-item label="变量克隆至:" prop="cloneRadio">
          <el-radio-group v-model="form.type" size="medium">
            <el-radio :label="1">新设备</el-radio>
            <el-radio :label="2">已有设备</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="设备名:"
          prop="cloneInputName"
          v-if="form.type == 1"
        >
          <el-input
            v-model="form.cloneInputName"
            placeholder="请输入设备名"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="设备编号:"
          prop="cloneInputCode"
          v-if="form.type == 1"
        >
          <el-input
            v-model="form.cloneInputCode"
            placeholder="请输入设备编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="选择设备：" v-if="form.type != 1">
          <el-select
            filterable
            v-model="form.oldDeviceCode"
            placeholder="请选择所需克隆设备（可输入）"
          >
            <el-option
              v-for="list in deviceList"
              :key="list"
              :label="list.deviceName"
              :value="list.deviceCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- <div class="content">
        <span>*</span>
        模拟量:
        <el-input
          class="inputer"
          v-model="cloneInputModel"
          placeholder="请输入模拟量"
          clearable
        />
        状态量:
        <el-input
          class="inputer"
          v-model="cloneInputState"
          placeholder="请输入状态量"
          clearable
        />
      </div> -->
    </div>
    <template #footer>
      <span class="dialog-footer">
        <!-- <el-checkbox
          v-model="cloneChecked"
          label="连续克隆模式"
          style="margin-right: 10px"
        ></el-checkbox> -->
        <el-button @click="cloneDialog = false">取消</el-button>
        <el-button type="primary" @click="clone()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, ref, watchEffect } from 'vue'
import * as api from '@/api/deviceManage/powerEquip/communicateEquip'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'powerEquip',
  components: {},
  emits: ['closeNo', 'select'],
  props: {
    clone_Dialog: Boolean,
    DialogArray: Object,
  },
  setup(props, context) {
    const store = useStore()
    store

    const form = ref({
      type: 1,
      cloneInputName: '',
      cloneInputCode: '',
      oldDeviceCode: '',
    })

    const cloneDialog = ref(false) //克隆弹窗控制
    const cloneChecked = ref(false) //克隆复选框控制
    const cloneInputModel = ref('') //克隆input模拟量
    const cloneInputState = ref('') //克隆input状态量
    const ruleForm = ref(null)
    const deviceList = ref([])

    const clone = () => {
      let list = {}
      if (form.value.type == 1) {
        list = {
          type: form.value.type,
          oldDeviceCode: props.DialogArray.deviceCode,
          newDeviceCode: form.value.cloneInputCode,
          deviceName: form.value.cloneInputName,
        }
      } else {
        list = {
          type: form.value.type,
          newDeviceCode: form.value.oldDeviceCode,
          oldDeviceCode: props.DialogArray.deviceCode,
        }
      }
      ruleForm.value.validate((valid) => {
        if (valid) {
          api.variableCloning(list).then((requset) => {
            if (requset.status === 'SUCCESS') {
              ElMessage.success({
                message: '克隆成功',
                type: 'success',
              })
              close()
              context.emit('Select')
            } else {
              ElMessage.error(requset.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    //open
    const open = () => {
      select_deviceList()
    }

    // close(): Dialog弹窗关闭之后做的事
    const close = () => {
      form.value.cloneInputName = ''
      form.value.cloneInputCode = ''
      form.value.oldDeviceCode = ''
      context.emit('closeNo', false)
      cloneDialog.value = false
    }

    function select_deviceList() {
      api
        .deviceList({
          siteId: 0,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            deviceList.value = requset.data
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    watchEffect((fn, options) => {
      fn, options
      cloneDialog.value = props.clone_Dialog
    })

    return {
      open,
      close,
      clone,
      form,
      deviceList,
      cloneDialog,
      cloneChecked,
      cloneInputModel,
      cloneInputState,
      ruleForm,
      rules: {
        cloneInputCode: [
          {
            required: true,
            message: '设备名不能为空',
            trigger: 'blur',
          },
          {
            min: 5,
            max: 25,
            message: '设备名长度不能小于5大于25',
            trigger: 'blur',
          },
        ],
        cloneInputName: [
          {
            required: true,
            message: '设备编号不能为空',
            trigger: 'blur',
          },
          {
            min: 5,
            max: 25,
            message: '设备编号长度不能小于5大于25',
            trigger: 'blur',
          },
        ],
      },
    }
  },
})
</script>