<template>
  <div class="powerdialog">
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      @close="close"
      @open="open"
      width="30rem"
    >
      <div>
        <el-form
          ref="formInfo"
          :model="form"
          class="demo-form-inline"
          label-width="150px"
          :rules="rules"
        >
          <el-form-item label="设备名称：" prop="deviceName">
            <el-input v-model="form.deviceName"></el-input>
          </el-form-item>
          <el-form-item label="设备编号：" prop="deviceCode">
            <el-input v-model="form.deviceCode"></el-input>
          </el-form-item>
          <el-form-item label="楼层：" prop="floor">
            <el-input-number
              v-model="form.floor"
              controls-position="right"
              :min="-10"
              :max="100"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="所属站点：" prop="siteId">
            <el-select
              v-model="form.siteId"
              :disabled="
                dialogTitle !== '新增' &&
                form.siteId != null &&
                form.siteId != ''
                  ? true
                  : false
              "
              placeholder="请选择所属站点"
            >
              <el-option
                v-for="item in siteList"
                :key="item.value"
                :label="item.siteName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备安装位置：" prop="deviceAddress">
            <el-input v-model="form.deviceAddress"></el-input>
          </el-form-item>
          <el-form-item label="设备类型:" prop="deviceType">
            <el-select v-model="form.deviceType" placeholder="请选择设备类型">
              <el-option
                v-for="item in deviceType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="sim卡号：" prop="sim">
            <el-input v-model="form.sim"></el-input>
          </el-form-item>

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

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

export default defineComponent({
  name: 'Dialog',
  props: {
    dialogBool: Boolean,
    dialogTitle: String,

    dataList: Object,
    deviceNumDataContent: String,
  },
  setup(props, context) {
    const store = useStore()
    const dialogVisible = ref(false)
    const form = ref([])
    const siteList = ref([])
    const formInfo = ref(null)

    // open(): Dialog弹窗打开之前做的事
    const open = () => {
      form.value = props.dataList
      siteList.value = store.state.siteList
    }

    // close(): Dialog弹窗关闭之后做的事
    const close = () => {
      context.emit('show', false)
      dialogVisible.value = false
    }

    // 保存-修改操作
    const submitForm = () => {
      formInfo.value.validate((valid) => {
        if (valid) {
          form.value.floor == 0 ? (form.value.floor = 1) : form.value.floor
          if (props.dialogTitle == '新增') {
            api.correspondDeviceAdd(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增成功',
                  type: 'success',
                })
                close()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          } else {
            api.correspondDeviceUpdate(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '修改成功',
                  type: 'success',
                })
                close()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

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

    return {
      formInfo,
      siteList,
      dialogVisible,
      form,
      close,
      open,
      submitForm,

      rules: {
        deviceCode: [
          {
            required: true,
            message: '设备名称不能为空',
            trigger: 'blur',
          },
          {
            min: 5,
            max: 25,
            message: '设备名称长度不能小于5大于25',
            trigger: 'blur',
          },
        ],
        deviceName: [
          {
            required: true,
            message: '设备名称不能为空',
            trigger: 'blur',
          },
          {
            min: 5,
            max: 25,
            message: '设备名称长度不能小于5大于25',
            trigger: 'blur',
          },
        ],
        floor: [
          {
            required: true,
            message: '楼层不能为空',
            trigger: 'blur',
          },
        ],
        siteId: [
          {
            required: true,
            message: '请选择所属站点',
            trigger: 'blur',
          },
        ],
        deviceAddress: [
          {
            required: true,
            message: '请输入设备安装位置',
            trigger: 'blur',
          },
          {
            min: 5,
            max: 50,
            message: '设备安装位置长度不能小于5大于50',
            trigger: 'blur',
          },
        ],
        deviceType: [
          {
            required: true,
            message: '请选择设备类型',
            trigger: 'blur',
          },
        ],
      },
      deviceType: ref([
        {
          value: 1,
          label: '183用电设备',
        },
        {
          value: 2,
          label: '视频监控设备',
        },
        {
          value: 3,
          label: '171用电设备',
        },
        {
          value: 4,
          label: '173用电设备',
        },
        {
          value: 5,
          label: '158智能网关',
        },
        {
          value: 6,
          label: '其他',
        },
      ]),
    }
  },
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
a {
  color: #42b983;
}
.el-form-item:not(.user-layout .el-form-item) {
  margin: 0 auto 10px;
}
.fontText {
  font-size: 10px;
  margin-top: -5px;
  margin-bottom: -15px;
}
</style>
<style>
.powerdialog .el-form-item--small .el-form-item__content,
.powerdialog .el-form-item--small .el-form-item__label {
  line-height: 40px;
}
</style>