<template>
    <!-- 工程管理 新增、编辑 表单组件 -->
    <div >
        <el-form
            v-loading="open"
            label-width="100px"
            size="medium"
            ref="deviceParamsRef"
            :model="deviceParams"
            :rules="deviceParamsRules"
        >
          <el-form-item label="设备类型" prop="devType">
            <el-select
              v-model="deviceParams.devType"
              allow-create
              clearable
              filterable
              placeholder="请选择设备类型"
            >
              <el-option
                v-for="item in deviceTypeRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="devName">
            <el-input v-model="deviceParams.devName" :maxlength="50" placeholder="请输入设备名称" />
          </el-form-item>
          <el-form-item label="设备编码" prop="devCode">
            <el-input v-model="deviceParams.devCode" :maxlength="50" placeholder="请输入设备编码" />
          </el-form-item>

          <el-form-item label="所属边带" prop="bdId">
            <el-select
              v-model="deviceParams.bdId"
              allow-create
              clearable
              filterable
              placeholder="请选择所属边带"
            >
              <el-option
                v-for="item in bdIdRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="预警配置" prop="configId">
            <el-select
              v-model="deviceParams.configId"
              allow-create
              clearable
              filterable
              placeholder="请选择预警配置"
            >
              <el-option
                v-for="item in configRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="设备状态" prop="devStatus">
            <el-select
              v-model="deviceParams.devStatus"
              allow-create
              clearable
              filterable
              placeholder="请选择设备状态"
            >
              <el-option
                v-for="item in this.deviceStatusRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item  style="display: flex; justify-content: right">
              <el-button type="success" @click="onSubmit">确认</el-button>
              <el-button
                  @click="
                      () => {
                          this.$emit('closeDialog')
                      }
                  "
                  >取消</el-button
              >
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {
  queryDeviceTypeApi,
  queryBdIdApi,
  queryConfigApi,
  addDeviceApi,
  editDeviceApi
} from '@/api/base/device'
export default {
    name: 'FormDevice',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    components: {  },
    created() {

    },
   async mounted() {
        this.open = true
       await this.getRanges()
        if (this.editParams) {
          await  Object.assign(this.deviceParams, this.editParams)
            this.subSort = 2
        } else {
            this.subSort = 1
        }
        this.open = false
    },
    data() {
        return {
            subSort: '', // 提交类型：新增 1 / 修改 2
            open: false,
            deviceParams: {
              // devId: undefined, // 设备id
              devType: undefined, //设备类型
              devName: undefined, //设备名称
              devCode: undefined, // 设备编码
              bdId: undefined, // 所属边带
              configId: undefined, //预警配置
              devStatus: undefined, //设备状态
            },
            deviceTypeRange: [], // 设备类型下拉选
            bdIdRange: [], // 所属边带下拉选
            configRange: [], // 预警配置下拉选
            // 校验规则
            deviceParamsRules: {
              devType: [
                  {
                      required: true,
                      message: '请选择设备类型',
                      trigger: 'change',
                  },
              ],
              devName: [
                {
                  required: true,
                  message: '请输入设备名称',
                  trigger: 'blur',
                },
              ],
              devCode: [
                {
                  required: true,
                  message: '请输入设备编码',
                  trigger: 'blur',
                },
              ],
              bdId: [
                {
                  required: true,
                  message: '请选择所属边带',
                  trigger: 'change',
                },
              ],
              configId: [
                {
                  required: true,
                  message: '请选择预警配置',
                  trigger: 'change',
                },
              ],
              devStatus: [
                {
                  required: true,
                  message: '请选择设备状态',
                  trigger: 'change',
                },
              ],
            },
            deviceStatusRange:[
              {
                label: '在线',
                value: 1
              },
              {
                label: '离线',
                value: 0
              }
            ],
            // 各类下拉

        }
    },
    methods: {
        /** 获取各类下拉框 */
        async getRanges() {
          // 获取设备类型下拉选
          const params = {'dictType': 'dev_type'}
          const paramsTwo = {'isAll': 0}
          let deviceTypeRes = await queryDeviceTypeApi(params)
          this.deviceTypeRange = deviceTypeRes.data.map(item => {
            return {
              label: item.dictLabel,
              value: item.dictCode+''
            }
          })
          console.log(this.deviceTypeRange)
          // 获取所属边带下拉选
          let bdIdRes = await queryBdIdApi()
          this.bdIdRange = bdIdRes.data.map(item => {
            return {
              label: item.devName,
              value: item.id
            }
          })
          // 获取预警配置下拉选
          let configRes = await queryConfigApi(paramsTwo)
          this.configRange = configRes.data.map(item => {
            return {
              label: item.configName+" "+item.typeName,
              value: item.id,
            }
          })
        },
        /** 改变树结构 */
        changeTree(leaf) {
          leaf.map(item => {
            item.value = item.id
            if(item.children) {
              this.changeTree(item.children)
            }
          })
          return leaf
        },
        // /** 项目部名称改变 */
        // departNameChange(e) {
        //   this.projRange.forEach(item => {
        //     if(e === item.label) {
        //       this.deviceParams.departType = item.departType
        //       this.deviceParams.areaId = item.areaId
        //       this.deviceParams.headUser = item.headUser
        //       this.deviceParams.headUserPhone = item.headUserPhone
        //       this.deviceParams.remarks = item.remarks
        //     }
        //   })
        // },
        /** 级联选择器改变 */
        handleCas(e) {
          this.deviceParams.impUnit = e[e.length - 1]
        },
        /** 确认按钮 */
        onSubmit() {
          console.log(this.deviceParams)
            this.$refs.deviceParamsRef.validate(valid => {
                if (valid) {
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                      addDeviceApi(this.deviceParams).then(res => {
                        this.$modal.msgSuccess('操作成功')
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog', true)
                      }).catch(err => {
                        console.log(err)
                      })
                    } else if(this.subSort === 2) {
                      editDeviceApi(this.deviceParams).then(res => {
                        this.$modal.msgSuccess('操作成功')
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog', true)
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                }
            })
        },
    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>
