<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showFormDia"
      width="85%"
      height="600px"
      :before-close="handleClose"
    >
      <el-form
        ref="formInfo"
        :rules="rules"
        :model="params"
        label-width="150px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备名称：" prop="name">
              <el-input
                size="mini"
                placeholder="请输入设备名称"
                v-model="params.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备代码：" prop="code">
              <el-input
                maxlength="18"
                size="mini"
                placeholder="请输入设备代码"
                v-model="params.code"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备类型：" prop="type">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.type"
                clearable
                placeholder="请选择设备类型"
              >
                <el-option
                  v-for="item in types"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备对象分类：" prop="objId">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.objId"
                clearable
                placeholder="请选择设备对象分类"
              >
                <el-option
                  v-for="item in objIds"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="设备应用分类：" prop="appTypeCodes">
              <el-select
                multiple
                @change="changeappType"
                style="width: 100%"
                size="mini"
                v-model="params.appTypeCodes"
                clearable
                placeholder="请选择设备应用分类"
              >
                <el-option
                  v-for="item in appTypeCodesType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="功能用途描述：" prop="deviceFun">
              <el-input
                size="mini"
                placeholder="请输入用途描述"
                v-model="params.deviceFun"
                maxlength="18"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备SN值：" prop="snNo">
              <el-input
                size="mini"
                placeholder="请输入设备SN值"
                v-model="params.snNo"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="上级设备：" prop="parentId">
              <el-select
                style="width: 100%"
                size="mini"
                v-model="params.parentId"
                clearable
                placeholder="请选择设备应用分类"
              >
                <el-option
                  v-for="item in parentIds"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备SIM卡号：" prop="simCard">
              <el-input
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                placeholder="请输入SIM卡号"
                v-model="params.simCard"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报汛频率(分钟)：" prop="floodHz">
              <el-input
                oninput="value=value.replace(/[^\d.]/g,'')"
                size="mini"
                placeholder="请输入报汛频率"
                v-model="params.floodHz"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="厂家名称：" prop="producerName">
              <el-input
                size="mini"
                placeholder="请输入厂家名称"
                v-model="params.producerName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="厂家联系人：" prop="producerLinkUser">
              <el-input
                size="mini"
                placeholder="请输入厂家联系人"
                v-model="params.producerLinkUser"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="厂家联系电话：" prop="producerLinkPhone">
              <el-input
                maxlength="11"
                size="mini"
                placeholder="请输入厂家联系人"
                v-model="params.producerLinkPhone"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="设备描述：" prop="remark">
            <el-input
              type="textarea"
              :autosize="{minRows: 2, maxRows: 4}"
              placeholder="请输入设备描述"
              v-model="params.remark"
            >
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goInfo">保 存</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ylStQuery from '@/api/monitor/resMonitor/ylStQuery.js'
import req from '@/request.js'
export default {
  name: 'deviceForm-dialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      params: {
        code: null,
        name: null,
        deviceFun: null,
        floodHz: null,
        objId: null,
        parentId: null,
        producerLinkPhone: null,
        producerLinkUser: null,
        producerName: null,
        remark: null,
        simCard: null,
        snNo: null,
        type: null,
        // appTypeCodes: [],
        // appTypeNames: [],
      },
      types: [], //设备类型
      objIds: [],
      parentIds: [], //上级设备数组
      // appTypeCodesType: [], //应用分类
      ifMainDams: [
        {name: '未知', value: '0'},
        {name: '是', value: '1'},
        {name: '否', value: '2'},
      ],
      elevSyss: [], //工程建设情况
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        code: [{required: true, message: '请输入代码', trigger: 'blur'}],
        type: [{required: true, message: '请选择类型', trigger: 'blur'}],
        objId: [{required: true, message: '请选择对象分类', trigger: 'blur'}],
      },
    }
  },
  created() {
    this.getDetailInfo()
    this.getSysDict()
    // 设备
    ylStQuery.getParaIds({}, (res) => {
      this.parentIds = res.value
    })
  },
  methods: {
    changeParentId(val) {
      this.params.parentId = '1'
    },
    // changeappType(val) {
    //    this.params.appTypeNames=[];
    //   this.appTypeCodesType.forEach((e, i) => {
    //     val.forEach((j) => {
    //       if (e.value == j) {
    //         this.params.appTypeNames.push(e.name)
    //       }
    //     })
    //   })
    //   // 去重
    //   this.params.appTypeNames = [...new Set(this.params.appTypeNames)]
    // },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        this.getSysDict()
        ylStQuery.detailId(this.pId, (res) => {
          this.params = res.value
          this.$set(this.params)
        })
      }
    },
    handleClose() {
      this.params = {
        code: null,
        name: null,
        deviceFun: null,
        floodHz: null,
        objId: null,
        parentId: null,
        producerLinkPhone: null,
        producerLinkUser: null,
        producerName: null,
        remark: null,
        simCard: null,
        snNo: null,
        type: null,
      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            let param = JSON.parse(JSON.stringify(this.params))
            // param.appTypeCodes = param.appTypeCodes.toString();
            // param.appTypeNames = param.appTypeNames.toString();
            ylStQuery.addSave(param, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '新增成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
                // this.$message.success(response.message)
              } else {
                //  this.$message.success(response.message)
              }
              // this.$emit('closeFormDiao')
              // this.$router.go(-1)
            })
          }
          if (this.title === '修改') {
            ylStQuery.upData(this.params, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '修改成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
                // this.$message.success(response.message)
              } else {
                //  this.$message.success(response.message)
              }
              // this.$emit('closeFormDiao')
              // this.$router.go(-1)
            })
          }
        } else {
          return false
        }
      })
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
            this.types = response.data.sblx;
            this.objIds = response.data.sbdxfl;
            this.appTypeCodesType = response.data.sbyyfl;
            if(this.title==='新增'){
              this.params.type=this.types[0].value;
              this.params.objId=this.objIds[0].value;
            }
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 24px 0 5px 0;
  height: 7px !important;
  background: #88b4dd !important;
  .el-divider__text {
    font-size: 16px !important;
  }
}
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }
</style>
