<template>
  <el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
    <el-container v-loading="loading">
      <el-main style="padding: 0 20px 20px 20px">
        <el-form ref="dialogForm" :model="form" :rules="rules" :disabled="mode == 'show'" label-width="100px">
          <el-row>
            <el-col :md="12" :sm="24">
              <el-form-item label="所属部门">
                <el-cascader v-model="form.belong_dept" :options="group" :props="groupsProps" clearable
                  :show-all-levels="false" style="width: 100%" @change="deptChange">
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="所属工段">
                <el-select v-model="form.mgroup" placeholder="所属工段" clearable style="width: 100%">
                  <el-option v-for="item in mgroups" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="form.name" placeholder="设备名称" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="设备编号" prop="number">
                <el-input v-model="form.number" placeholder="设备编号" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24" v-if="form.type == 10">
              <el-form-item
								label="表明工段运行的方式"
								label-width="160"
							>
              <el-select
									v-model="form.indicate_mgroup_running"
									style="width: 100%"
                  clearable
                  @clear="() => { form.indicate_mgroup_running=null } "
								>
									<el-option
										v-for="e in iMEnum.values"
										:key="e.key"
										:value="e.key"
										:label="e.text"
									></el-option>
								</el-select>
							</el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="状态">
                <el-select style="width: 100%" v-model="form.state" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-divider/>
            <el-col :md="12" :sm="24">
              <el-form-item label="设备分类">
                <el-select v-model="form.cate" placeholder="所属大类" clearable style="width: 100%">
                  <el-option v-for="item in cateOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="型号规格">
                <el-input v-model="form.model" placeholder="规格型号规格" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="生产厂">
                <el-input v-model="form.factory" placeholder="生产厂" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="生产日期">
                <el-date-picker v-model="form.production_date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
                  style="width:100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="出厂编号">
                <el-input placeholder="出厂编号" v-model="form.number_factory"/>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="购置日期">
                <el-date-picker v-model="form.buy_date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
                  style="width:100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="启用日期">
                <el-date-picker v-model="form.use_date" type="date" placeholder="启用日期" value-format="YYYY-MM-DD"
                  style="width:100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="用电功率">
                <el-input-number v-model="form.power_kw" :precision="2" :min="0" controls-position="right"
                  placeholder="用电功率" /><span style="margin-left:10px">(Kw)</span>

              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="责任人" prop="leader_name">
                <span style="display:flex">
                  <el-input readonly v-model="form.keeper_name"></el-input>
                  <ehsUserSelect :multiple="false" @submit="getReceptionist" />
                </span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="存放位置">
                <el-input v-model="form.place" placeholder="存放位置" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12" :sm="24">
              <el-form-item label="简要技术参数">
                <el-input type="textarea" :rows="3" v-model="form.parameter" placeholder="技术参数" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="备注">
                <el-input type="textarea" :rows="3" v-model="form.description" placeholder="备注" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider/>
          <el-row v-if="form.type==20">
            <el-col :md="12" :sm="24">
              <el-form-item label="仪表类型">
                <el-input v-model="form.meter_type" placeholder="仪表类型" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="量程范围">
                <el-input v-model="form.measurement_range" placeholder="量范" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="管理等级">
                <el-input v-model="form.management_level" placeholder="管理等级" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="精度等级">
                <el-input v-model="form.accuracy_level" placeholder="精度等级" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="检定周期(月)">
                <el-input-number v-model="form.cycle" :precision="1" :min="0" controls-position="right"
                  style="width: 100%;" placeholder="检定周期（月）" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider v-if="form.type==20"/>
          <el-row>
            <el-col>
              <el-form-item label="技术参数">
                <el-button @click="addJsonItem" type="primary" size="small">添加</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-for="(item, $index) in parameter_json" :key="item" :gutter="4">
            <el-col :span="11">
              <el-form-item label="参数名">
                <el-input v-model="item.key" placeholder="参数名" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="参数值">
                <el-input v-model="item.value" placeholder="参数值" />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button @click="delJsonItem($index)" type="danger" size="small">删除</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </el-footer>
    </el-container>
  </el-drawer>
</template>
<script>
import { genTree } from "@/utils/verificate";
import { iMEnum } from "@/utils/enum";
export default {
  emits: ["success", "closed"],
  data() {
    return {
      iMEnum,
      cateOptions:[],
      loading: false,
      mode: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
        show: "查看",
      },
      form: {
        type: 10
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        number: [{ required: true, message: "请输入", trigger: "blur" }],
        keeper_name: [{ required: true, message: "请输入", trigger: "blur" }],
        belong_dept: [{ required: true, message: "请选择所属部门", trigger: "blur" }]
      },
      options: [{
        value: 10,
        label: '完好'
      }, {
        value: 20,
        label: '限用'
      }, {
        value: 30,
        label: '在修'
      }, {
        value: 40,
        label: '禁用'
      }],
      parameter_json: [
        { key: '', value: '' }
      ],
      visible: false,
      isSaveing: false,
      keeperOptions: [],
      depOptions: [],
      selectionFilters: [],
      setFiltersVisible: false,
      belong_dept_options: [],
      group: [],
      mgroups: [],
      baseInfo: {},
      groupsProps: {
        // value: "id",
        multiple: false,
        emitPath: false,
        checkStrictly: true,
      },
    };
  },
  mounted() {
    this.getGroup();
    this.getBaseInfo();
    this.getCateOptions();
  },
  methods: {
    getCateOptions() {
      this.$API.em.ecate.list.req({page:0}).then(res => {
        this.cateOptions = res
      })
    },
    getBaseInfo() {
      this.baseInfo = this.$TOOL.data.get('BASE_INFO').base
      console.log(this.baseInfo)
    },
    //部门数据
    // getGroup() {
    //   this.$API.system.dept.list.req({ type: 'dept' }).then(res => {
    //     this.group = res.results;
    //   });
    // },
    getGroup() {
      let that = this;
      that.$API.system.dept.list.req({ page: 0, type: 'dept' }).then(res => {
        that.group = genTree(res);
      });
    },
    getReceptionist(data) {
      this.form.keeper = data.id;
      this.form.keeper_name = data.name
    },
    deptChange() {
      this.$API.mtm.mgroup.list.req({ page: 0, belong_dept: this.form.belong_dept }).then(res => {
        this.mgroups = res;
      });
    },
    //显示
    open(mode = "add", type) {
      this.mode = mode;
      this.visible = true;
      this.form.type = type;
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          try {
            var res;
            let obj = {};
            this.parameter_json.forEach(item => {
              obj[item.key] = item.value;
            })
            this.form.parameter_json = obj;
            if (this.mode == "add") {
              res = await this.$API.em.equipment.create.req(this.form);
            } else if (this.mode == "edit") {
              res = await this.$API.em.equipment.update.req(
                this.form.id,
                this.form
              );
            }
            this.isSaveing = false;
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
            return res;
          } catch (err) {
            //可以处理校验错误
            this.isSaveing = false;
            return err;
          }
        }
      });
    },
    addJsonItem() {
      this.parameter_json.push({ key: '', value: '' })
    },
    delJsonItem(index) {
      this.parameter_json.splice(index, 1)
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
      if (data.parameter_json != null) {
        let arr = [];
        for (let key in data.parameter_json) {
          let obj = {};
          obj.key = key;
          obj.value = data.parameter_json[key];
          arr.push(obj);
        }
        this.parameter_json = arr;
        this.deptChange()
      }
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>

<style></style>
