<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="640px"
    @close="closeDialog()"
    @open="open"
  >
    <el-form
      ref="formInfo"
      :model="form"
      class="demo-form-inline"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="设备编号：" prop="deviceCode">
        <el-input v-model="form.deviceCode"></el-input>
      </el-form-item>
      <el-form-item label="变量名：" prop="variableName">
        <el-input v-model="form.variableName"></el-input>
      </el-form-item>
      <el-form-item label="变量编码：" prop="variableCoding">
        <el-input v-model="form.variableCoding"></el-input>
      </el-form-item>

      <el-form-item label="监控设备：" prop="monitoringEquipment">
        <el-select
          v-model="form.monitoringEquipment"
       
          collapse-tags
          placeholder="请选择"
        >
          <el-option
            v-for="item in deviceNewsListBoxData"
            :key="item.value"
            :label="item.monitorDeviceName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="通信设备：" prop="communicationEquipment">
        <el-select
          v-model="form.communicationEquipment"
     
          collapse-tags
          placeholder="请选择"
        >
          <el-option
            v-for="item in deviceListData"
            :key="item.id"
            :label="item.deviceName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="数据地址：" prop="dataAddress">
        <el-input v-model="form.dataAddress"></el-input>
      </el-form-item>
      <el-form-item label="数据类型：" prop="dataType">
        <el-input v-model="form.dataType"></el-input>
      </el-form-item>
      <el-form-item label="系数：" prop="coefficient">
        <el-input v-model="form.coefficient"></el-input>
      </el-form-item>
      <el-form-item label="存盘周期（分钟）：" prop="saveCycle">
        <el-input v-model="form.saveCycle"></el-input>
      </el-form-item>
      <el-form-item label="状态：" prop="dataArea">
        <el-radio-group v-model="form.dataArea">
          <el-radio label="1">模拟量</el-radio>
          <el-radio label="2">状态量</el-radio>
          <el-radio label="3">参数量</el-radio>
        </el-radio-group>
      </el-form-item>

      <br />
      <br />
      <br />
      <div style="text-align: right">
        <el-button @click="closeDialog(0)">取消</el-button>
        <el-button type="primary" @click="submitForm()">保存</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

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

export default defineComponent({
  name: 'DialogComponent',
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
    siteId: Number,
  },
  setup(props, context) {
    context
    // const store = useStore()
    const dialogVisible = ref(false)
    const formInfo = ref(null)
    const deviceListData = ref([])
    const deviceNewsListBoxData = ref([])
    const form = ref([])

    const siteList = ref([])

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      form.value = props.itemInfo.value
       console.log('open时传过来的详情值form.value')
      console.log(form.value)
      deviceList()
      deviceNewsListBox()
    }

    // 关闭弹框
    const closeDialog = () => {
      resetForm()
      context.emit('closeDialog', false)
      dialogVisible.value = false
    }
    function resetForm() {
      formInfo.value.resetFields()
    }

    watchEffect((fn, options) => {
      fn, options
      dialogVisible.value = props.flag
    })

    const roleValid = (rule, value, callback) => {
      rule
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }

    //通信设备下拉
    function deviceList() {
      api
        .deviceList({
          siteId: props.siteId,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            deviceListData.value = requset.data
            console.log('请求接口下拉时的 通信设备下拉deviceListData.value')
              console.log(deviceListData.value)
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    //监控设备下拉
    function deviceNewsListBox() {
      api
        .deviceNewsListBox({
          siteId: props.siteId,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            deviceNewsListBoxData.value = requset.data
            // console.log('deviceNewsListBoxData.value')
            // console.log(deviceNewsListBoxData.value)
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    // 保存-修改操作
    const submitForm = () => {
      formInfo.value.validate((valid) => {
        if (valid) {
          if (props.dialogTitle === '新增') {
            api.variableAdd(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          } else {
            api.variableListUpdate(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '修改成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    onMounted(() => {
      // deviceList()
      // deviceNewsListBox()
    })

    return {
      closeDialog,
      dialogVisible,
      roleValid,
      formInfo,
      siteList,
      deviceList,
      deviceNewsListBox,

      form,
      open,

      deviceListData,
      deviceNewsListBoxData,
      submitForm,
      rules: {
        deviceCode: [
          { required: true, message: '请输入设备编号', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '设备编号长度在 1 到 20 个字符',
            trigger: 'blur',
          },
        ],
        variableName: [
          { required: true, message: '请输入变量名', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '变量名长度在 1 到 20 个字符',
            trigger: 'blur',
          },
        ],
        variableCoding: [
          { required: true, message: '请输入变量编码', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '变量编码长度在 1 到 20 个字符',
            trigger: 'blur',
          },
        ],
        monitoringEquipment: [
          { required: true, message: '请选择监控设备', trigger: 'blur' },
        ],
        communicationEquipment: [
          { required: true, message: '请选择通信设备', trigger: 'blur' },
        ],
        dataAddress: [
          { required: true, message: '请输入数据地址', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '数据地址长度在 1 到 20 个字符',
            trigger: 'blur',
          },
        ],
        dataType: [
          { required: true, message: '请输入数据类型', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '数据类型长度在 1 到 20 个字符',
            trigger: 'blur',
          },
        ],
        coefficient: [
          { required: true, message: '请输入系数', trigger: 'blur' },
        ],
        saveCycle: [
          { required: true, message: '请输入存盘周期', trigger: 'blur' },
        ],
        dataArea: [
          { required: true, message: '请选中状态', trigger: 'blur' },
        ],
      },
    }
  },
})
</script>
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

// label样式
.el-form-item__label {
  width: 150px;
}
.el-form-item__content {
  margin-left: 150px;
}
</style>