<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="data.config.title" @closeDialog="black">
      <template #content>
        <MOSTY.Assort :title="'基础信息'" />
        <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="210px" :model="data.fromObj" :inline="true"
          :rules="rules" :disabled="!data.config.saveBtnShow">
          <el-form-item label="'危险化学品名称:" prop="name">
            <MOSTY.ChemicalNamePicker v-model="data.fromObj.name" :width="'280px'" />
          </el-form-item>
          <el-form-item label="最大存储量:" prop="maxStorage">
            <el-input-number v-model="data.fromObj.maxStorage" :min="0" :max="99999999999999" :precision="4"
              style="width: 280px" />
          </el-form-item>
          <el-form-item label="最大存储量单位:" prop="maxStorageUnit">
            <el-select v-model="data.fromObj.maxStorageUnit" clearable style="width: 280px">
              <el-option label="L" value="L" />
              <el-option label="kg" value="kg" />
            </el-select>
          </el-form-item>
          <el-form-item label="年使用量:" prop="used">
            <el-input-number v-model="data.fromObj.used" :min="0" :max="99999999999999" :precision="4"
              style="width: 280px" />
          </el-form-item>
          <el-form-item label="年使用量单位:" prop="usedUnit">
            <el-select v-model="data.fromObj.usedUnit" clearable style="width: 280px">
              <el-option label="L" value="L" />
              <el-option label="kg" value="kg" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否属于剧毒品:" prop="highlyToxic">
            <el-select v-model="data.fromObj.highlyToxic" placeholder="请选择是否属于剧毒品" style="width: 280px">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否属于易制毒品:" prop="poisonMaking">
            <el-select v-model="data.fromObj.poisonMaking" placeholder="是否属于易制毒品" style="width: 280px">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否属于易制爆品:" prop="explosiveProducts">
            <el-select v-model="data.fromObj.explosiveProducts" placeholder="请选择是否属于易制爆品" style="width: 280px">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否构成重大危险源:" prop="majorHazard">
            <el-select v-model="data.fromObj.majorHazard" placeholder="请选择是否构成重大危险源" style="width: 280px">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否属重点监管危险化学名录:" prop="chemicalDirectory">
            <el-select v-model="data.fromObj.chemicalDirectory" placeholder="请选择是否属重点监管危险化学名录" style="width: 280px">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否属重点监管危险化工工艺:" prop="chemicalProcess">
            <el-select v-model="data.fromObj.chemicalProcess" placeholder="是否属重点监管危险化工工艺" style="width: 280px">
              <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年份:" prop="yearly">
            <el-date-picker v-model="data.fromObj.yearly" type="year" placeholder="选择年份" style="width: 280px"
              value-format="YYYY"> </el-date-picker>
          </el-form-item>
          <el-form-item label="备注:" style="width: 100%">
            <el-input v-model="data.fromObj.bz" type="textarea" show-word-limit maxlength="200" style="width: 1370px" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>

        <el-button type="primary" @click="submit(ruleFormRef)" v-if="data.config.saveBtnShow"><el-icon>
            <DocumentChecked />
          </el-icon>保存</el-button>
        <el-button @click="black"><el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </template>
      <template #dwbox>
        <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :leaderid="leaderid" @choosedUsers="getSonValue"
          :deptId="data.deptId"></ChooseUser>
      </template>
    </MOSTY.FromPage>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, onMounted, watch, nextTick } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const emit = defineEmits("changePage");
const data = reactive({
  fromObj: {},
  extendattr: {},
  config: {
    title: "",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  }
});
//点击带队领导选择按钮
const chooseUserVisible = ref(false); //选择领导弹窗
const singleShow = ref(true); //单选多选
const leaderid = ref("");
const zzlx = ref(null);
//点击带队领导选择按钮
function ChooesDdld(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = data.fromObj.userid;
    singleShow.value = true;
    chooseUserVisible.value = true;
  }
}
const getSonValue = (value) => {
  if (zzlx.value == "01") {
    data.fromObj.username = value[0].userName;
    data.fromObj.userid = value[0].id;
    data.fromObj.deptid = value[0].deptId;
    data.fromObj.deptname = value[0].deptName;
  }
};
const rules = reactive({
  name: [{ required: true, message: "请输入危险化学品名称", trigger: "blur" }],
  ...rule.znumberRule({ validator: true, require: true }, "maxStorage"),
  ...rule.znumberRule({ validator: true, require: true }, "used"),
  highlyToxic: [{ required: true, message: "请选择是否属于剧毒品", trigger: "change" }],
  poisonMaking: [{ required: true, message: "请选择是否属于易制毒品", trigger: "change" }],
  explosiveProducts: [{ required: true, message: "请选择是否属于易制爆品", trigger: "change" }],
  majorHazard: [{ required: true, message: "请选择是否构成重大危险源", trigger: "change" }],
  chemicalDirectory: [{ required: true, message: "请选择是否属重点监管危险化学名录", trigger: "change" }],
  chemicalProcess: [{ required: true, message: "请选择是否属重点监管危险化工工艺", trigger: "change" }],
  yearly: [{ required: true, message: "请选择年份", trigger: "change" }],
  maxStorageUnit: [{ required: true, message: "请选择最大存储量单位", trigger: "change" }],
  usedUnit: [{ required: true, message: "请选择年使用量单位", trigger: "change" }]
});
const ruleFormRef = ref();
// 保存
const submit = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      if (data.fromObj) {
        if (data.fromObj.id) {
          postApi(data.fromObj, "/mosty-jcgl/HazardousChemicals/updateHazardousChemicalsOne").then((res) => {
            ElMessage.success("修改成功");
            emit("changePage", "Main");
          });
        } else {
          postApi(data.fromObj, "/mosty-jcgl/HazardousChemicals/addHazardousChemicalsOne").then((res) => {
            ElMessage.success("新增成功");
            emit("changePage", "Main");
          });
        }
      }
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};

//获取详情
function getmain(id) {
  data.deptId = getItem("deptId").ssbmid;
  if (id) {
    getApi({ id: id }, "/mosty-jcgl/HazardousChemicals/queryHazardousChemicalsById").then((res) => {
      if (res) {
        data.fromObj = JSON.parse(JSON.stringify(res));
      }
    });
  }
}
const black = () => {
  if (data.config.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("changePage", "Main");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emit("changePage", "Main");
  }

};
onMounted(() => {
  getmain(props.editObj.id);
});
watchEffect(() => {
  if (props.editObj) {
    data.config = JSON.parse(JSON.stringify(props.editObj));
  }
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.box_cont {
  height: calc(100vh - 15vh);
  overflow-y: scroll;
}

.searchBox {
  width: 1200px;
  margin: 20px auto;
}

.ld_box {
  display: flex;
  margin-right: 30px;
}

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 10px auto;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  box-sizing: border-box;
}

.tabbox {
  max-height: 280px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}
</style>
