<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="'新增隐患'" @closeDialog="CloseEvent">
      <template #content>
        <!-- <MOSTY.Assort :title="'隐患信息'" /> -->
        <div class="right" style="width: 100%">

          <div class="flex align-start">
            <div style="color: #333" class="box_cont">
              <div class="searchBox">
                <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="120px" :model="data.formData"
                  :inline="true" :disabled="false" :rules="rules">
                  <el-form-item label="隐患所属部门" prop="belongDeptname">
                    <inputDept v-model:ids="data.formData.belongDeptid" v-model:cName="data.formData.belongDeptname"
                      width="300"></inputDept>
                  </el-form-item>
                  <el-form-item label="被检查对象" prop="objname">
                    <el-input v-model="data.formData.objname" style="width: 300px" maxlength="50"></el-input>
                  </el-form-item>
                  <el-form-item label="发现人员" prop="founderName">
                    <inputUser v-model:ids="data.formData.founderId" Single v-model:cName="data.formData.founderName"
                      width="300" @change="founderChange"></inputUser>
                  </el-form-item>

                  <!-- 检查部门-仅展示用 -->
                  <el-form-item label="检查部门">
                    <el-input v-model="checkDeptName" disabled style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="发现时间" prop="founderTime">
                    <el-date-picker v-model="data.formData.founderTime" type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择发现时间"
                      style="width: 300px"></el-date-picker>
                  </el-form-item>
                  <!-- <el-form-item label="被检查单位" prop="founderOrgname">
                      <el-input v-model="data.formData.founderOrgname" disabled style="width: 300px"></el-input>
                    </el-form-item> -->
                  <el-form-item label="被检查对象类别" prop="objtype">
                    <el-select v-model="data.formData.objtype" placeholder="请选择被检查对象类别" style="width: 300px">
                      <el-option v-for="item in objTypeOpt" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="受理类型" prop="sourcetype">
                    <el-select v-model="data.formData.sourcetype" placeholder="请选择受理类型" style="width: 300px">
                      <el-option v-for="item in sourceTypeOpt" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item> -->
                  <el-form-item label="隐患级别" prop="pitfallLevel">
                    <el-select v-model="data.formData.pitfallLevel" placeholder="请选择隐患级别" style="width: 300px">
                      <el-option v-for="item in yhdjlist" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="隐患类别" prop="pitfallType">
                    <MOSTY.DictTree :zdbh="'D_TB_SBYHLB'" v-model="data.formData.pitfallType" :placeholder='"请选择隐患类别"'
                      style="width: 300px;" />
                  </el-form-item>
                  <el-form-item label="隐患描述" prop="pitfallDescribe">
                    <el-input v-model="data.formData.pitfallDescribe" type="textarea" :rows="3" show-word-limit
                      maxlength="200" style="width: 827px" />
                  </el-form-item>
                  <el-form-item label="检查小组" prop="overallObjid">
                    <div style="width: 827px">
                      <el-button type="primary" @click="chooseXz">选择小组</el-button>
                      <div v-if="xiaozObj.leadername">
                        <span>带队领导: {{ xiaozObj.leadername }}</span>
                        <span style="display: inline-block;margin-left: 15px;">检查组长: {{ xiaozObj.zzxm }}</span>
                        <span style="display: inline-block;margin-left: 15px;">检查成员: {{ xiaozObj.userListName }}</span>
                      </div>
                    </div>
                    <!-- <el-input v-model="data.formData.overallObjid" type="textarea" :rows="3" show-word-limit
                      maxlength="200" style="width: 827px" /> -->
                  </el-form-item>
                  <el-form-item label="图片:" prop="pics">
                    <MOSTY.Upload :width="'100%'" :limit="5" :nopicer="false" :isImg="true" :ShowfileList="false"
                      v-model="data.formData.pics" :nameshow='true' :gsgfList="['jpg', 'png']">
                    </MOSTY.Upload>
                  </el-form-item>
                </el-form>
              </div>

            </div>

          </div>
          <ChooseUser v-model="chooseUserVisible" :Single="true" :deptId="data.formData.belongDeptid" :data="memberList"
            @choosedUsers="choosedUsersOk"></ChooseUser>
          <ChooseXiaoz :xzid="props.row.id" :ids="data.formData.overallObjid" v-if="isShowXiaozTC" @ok="xiaozOk"
            @close="isShowXiaozTC = false" />
        </div>

      </template>
      <template #footer>
        <el-button :loading="isSaveLoading" type="primary" @click="save">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <Back />
          </el-icon>
          <span>返回</span>
        </el-button>
      </template>
    </MOSTY.FromPage>

  </div>
</template>

<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, onMounted } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import { getFileUrl } from "@/utils/getFile.js";
import { getSysDictByCode } from "@/api/sysDict";
import inputDept from "@/views/fxgk/jcss/components/MostCom/inputDept.vue";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import inputUser from "@/views/fxgk/jcss/components/MostCom/inputUser.vue";
import ChooseXiaoz from "./chooseXiaoz.vue";

const { proxy } = getCurrentInstance();
const { D_BZ_YHLX, D_DBZ_YHDJ, D_TB_SBYHLB } = proxy.$dict("D_BZ_YHLX", "D_DBZ_YHDJ", "D_TB_SBYHLB");
const loading = ref(false);
const isSelect = ref(false); //是否是查看
const isShowTimeLine = ref(false); //是否显示时间线
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  row: {
    type: Object,
    default: () => ({})
  }
});
const ruleFormRef = ref();
/**隐患级别下拉内容 */
const yhdjlist = ref([])
const emit = defineEmits("close", "ok");
const id = ref(null)
const isSaveLoading = ref(false)
const memberList = ref()
/** 展示小组选择器弹框 */
const isShowXiaozTC = ref(false)
/** 部门选择器 -部门 */
const bmDeptId = ref(getItem("deptId").ssbmdm); // ssdwdm , ssbmdm
const checkDeptName = ref('')
const chooseUserVisible = ref(false)
const xiaozObj = ref({})
const data = reactive({
  allFlowData: {}, //全流程数据
  formData: {
    sourcetype: '3',// 受理类型 1:岗位自查 , 2:部门检查 , 3:综合检查
  },
  extendattr: {},
  config: {
    title: "",
    saveBtnShow: true
  },
  zgjdList: [] //整改进度数据
});
const rules = {
  founderDeptname: [{ required: true, message: "请选择所属部门名称", trigger: "change" }],
  founderName: [{ required: true, message: "请选择发现人", trigger: "change" }],
  founderTime: [{ required: true, message: "请选择发现时间", trigger: "blur" }],
  objname: [{ required: true, message: "请输入检查对象", trigger: "blur" }],
  objtype: [{ required: true, message: "请选择隐患类别", trigger: "blur" }],

  pitfallDescribe: [{ required: true, message: "请填写隐患描述", trigger: "blur" }],
  overallObjid: [{ required: true, message: "请选择检查小组", trigger: "change" }],
  pitfallLevel: [{ required: true, message: "请选择隐患级别", trigger: "blur" }],
  pitfallType: [{ required: true, message: "请选择隐患类别", trigger: "blur" }],
  // sourcetype: [{ required: true, message: "请选择受理类型", trigger: "blur" }],


  // pics: [{ required: false, message: "请上传图片", trigger: "change" }],

};
// S-场所 P-部位 E-设备 R-办公区域 C-车辆
const objTypeOpt = [
  { label: "场所", value: "S" },
  { label: "部位", value: "P" },
  { label: "设备", value: "E" },
  { label: "办公区域", value: "R" },
  { label: "车辆", value: "C" },
]
// 受理类型 只要这三个	1-岗位自查 2-部门检查 3-综合检查
const sourceTypeOpt = [
  { label: "岗位自查", value: "1" },
  { label: "部门检查", value: "2" },
  { label: "综合检查", value: "3" },
]
watchEffect(() => {
  if (props.editObj) {
    data.config = props.editObj;
    isSelect.value = true;
    isShowTimeLine.value = true;
  }
});
const deptChange = (val) => {
  data.formData.founderName = ''
  data.formData.founderId = ''
}
const founderChange = (val) => {
  console.log('val: ', val);
  checkDeptName.value = val?.[0]?.deptName || ''
}
const chooseMan = () => {
  chooseUserVisible.value = true
}
const choosedUsersOk = (value) => {
  data.formData.founderName = value.map(item => {
    if (item.mobile) {
      return item.userName + '（' + item.mobile + '）'
    } else {
      return item.userName
    }
  }).toString();
  data.formData.founderId = value.map(item => {
    return item.id
  }).toString();
}
const chooseXz = () => {
  isShowXiaozTC.value = true
}
const xiaozOk = (id, obj) => {
  data.formData.overallObjid = id
  xiaozObj.value = obj || {}
  isShowXiaozTC.value = false
}
/** 设置隐患下拉内容 */
const setYhOptions = () => {
  getSysDictByCode({ dictCode: "D_DBZ_YHDJ" }).then((res) => {
    if (res) {
      res.itemList.forEach((item) => {
        item.label = item.zdmc;
        item.value = item.dm;
        if (item.dm == '4') {
          // filterqx('isaqbm') != '1' &&
          item.disabled = true
        } else {
          item.disabled = false
        }
      });
      yhdjlist.value = res.itemList

    }
  });
}
const test = () => {
  // data.formData = {
  //   "belongDeptid": "520052010019323",
  //   "belongDeptname": "办公室",
  //   "objname": "综合检查-隐患",
  //   "founderId": "5202140100001569",
  //   "founderName": "章德丽",
  //   "founderTime": "2025-04-08 00:00:00",
  //   "objtype": "R",
  //   "sourcetype": "2",
  //   "pitfallLevel": "2",
  //   "pitfallType": "20203",
  //   "pitfallDescribe": "综合检查描述",
  //   "pics": ["4bdf9507945242fbb9ebc781cb5a41a9"],
  //   "zhjcId": "520015b82f22e7c340a984f96a8e72441838"
  // }
}
// 初始化
onMounted(() => {
  setYhOptions();
  test();
  // id.value = props.editObj.pifallid ? props.editObj.pifallid : props.editObj.id
  // getMain(id.value);
  // if (isShowTimeLine.value) _getZgjdData(id.value);

});
//获取全部流程数据
const _getAllFlowData = (id) => {
  getApi({ id }, "/mosty-jcgl/yhb/getReformByYhId").then(async (res) => {
    if (res) {
      // 获取图片信息
      if (res.verifyPics) {
        let arr = res.verifyPics.split(",");
        let url = [];
        for (let i = 0; i < arr.length; i++) {
          url.push(await getFileUrl(arr[i]));
        }
        res.url = url;
      }
      data.allFlowData = res;
    }
  });
};
//获取进度数据
// const _getZgjdData = (id) => {
//   getApi({ id }, "/mosty-jcgl/yhb/getYhTimer").then((res) => {
//     if (res) {
//       for (let i = 0; i < res.length; i++) {
//         switch (res[i].state) {
//           case "01":
//             res[i].color = "blue";
//             break;
//           case "02":
//             res[i].color = "orange";
//             break;
//           case "03":
//             res[i].color = "red";
//             break;
//           case "04":
//             res[i].color = "green";
//             break;
//         }
//       }
//       data.zgjdList = res;
//     }
//   });
// };
const getPicData = () => {

}
function save() {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      const params = {
        ...data.formData,
        pics: data.formData.pics ? data.formData.pics.join(',') : '',
        zhjcId: props.row.id,
        sourcetype: '3', // 3:综合检查
      }
      isSaveLoading.value = true
      postApi(params, '/mosty-jcgl/yhb/addZhjcYh').then(res => {
        proxy.$message.success('添加成功')
        emit("ok", true);
      }).finally(() => {
        isSaveLoading.value = false
      })
    }
  })
  // emit("changePage", true);

}
function CloseEvent() {
  emit("close", false);

}

//获取详情
async function getMain(id) {
  loading.value = true;
  data.deptId = getItem("deptId").ssbmid;
  if (id) {
    await getApi({ id: id }, "/mosty-jcgl/yhb/getYhInfo").then(async (res) => {
      if (res) {
        // 获取图片信息
        if (res.pics) {
          let arr = res.pics.split(",");
          let url = [];
          for (let i = 0; i < arr.length; i++) {
            url.push(await getFileUrl(arr[i]));
          }
          res.url = url;
        }
        data.formData = res;
        data.formData.founderDeptname = res.founderDeptname ? res.founderDeptname : res.becheckedOrgname ? res.becheckedOrgname : res.belongCityname ? res.belongCityname : '贵州省烟草专卖局（公司）'
        data.formData.founderOrgname = res.founderOrgname ? res.founderOrgname : res.becheckedOrgname ? res.becheckedOrgname : res.belongCityname ? res.belongCityname : '贵州省烟草专卖局（公司）'
        _getAllFlowData(res.id);
      }
    })
      .finally(() => {
        loading.value = false;
      });
  }
}


</script>

<style lang="scss" scoped>
.box_cont {
  width: 1196px;
  background: #fff;
  margin: 0px auto;
  // overflow-y: scroll;
}

.box-left {
  width: 63%;
}

.pic_left {
  width: 110px;
  height: 130px;
  display: flex;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-left: 15px;
}

// .box_right ul li {
//   color: #000;
//   display: flex;
//   padding: 0 20px;
//   margin: 20px 0;
//   z-index: 99;
//   padding-left: 80px;
// }

// .box_right ul li div {
//   margin: 0 20px;
// }

.bigBox {
  display: flex;
  padding: 0px !important;


  .right {

    // margin: 0px 14px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .btnBox {
      justify-content: flex-end;
      margin: 20px;

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

.form_title {}

// ::-webkit-scrollbar {
//   width: 0 !important;
//   height: 0;
// }

.searchBox {
  width: 1000px;
  margin: 15px auto;
  color: #333;
}

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

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

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

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  box-sizing: border-box;
}

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

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

::v-deep .el-select-dropdown__wrap {
  background-color: #fff !important;
}

::v-deep .el-scrollbar {
  background-color: #fff;
}

// ::v-deep .el-select-dropdown__wrap {
//   background-color: #fff !important;
// }
// ::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-radio__label {
//   display: none;
// }</style>
