<template>
  <div class="bigBox" :style="{ height: bigHeight }" v-loading="loading">
    <MOSTY.FromPage :title="data.config.title" @closeDialog="black">
      <template #content>

        <div class="flex align-start mt10" style="justify-content: center;">
          <div style="color: #333" class="box_cont">
            <MOSTY.Assort :title="titleInfo" />
            <div class="searchBox">
              <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="120px" :model="data.formData"
                :inline="true" label-suffix="：" :rules="rules">
                <el-form-item label="记录位置">
                  <el-input v-model="data.formData.sitename" disabled style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="记录人">
                  <el-input v-model="data.formData.username" disabled style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="记录时间">
                  <el-input v-model="data.formData.observetime" disabled style="width: 300px"></el-input>
                </el-form-item>
                <!-- data.config -->
                <el-form-item label="受理类型" prop="disposetype">
                  <MOSTY.Select v-model="data.formData.disposetype" placeholder="请选择受理类型" style="width: 300px"
                    :disabled="isSelect || data.config.disposeType == '3'" :options="options">
                    <!-- <el-option v-for="item in options" :key="item.value" :label="item.label"
                      :value="item.value"></el-option> -->
                  </MOSTY.Select>
                </el-form-item>
                <el-form-item label="隐患级别:" prop="pitfallLevel" v-if="data.formData.disposetype != '2'">
                  <MOSTY.Select v-model="data.formData.pitfallLevel" style="width: 300px" :disabled="isSelect" :options="yhdjlist">
                    <!-- <el-option v-for="item in yhdjlist" :disabled="item.disabled" :key="item.value" :label="item.label"
                      :value="item.value"></el-option> -->
                  </MOSTY.Select>
                </el-form-item>
                <el-form-item label="隐患类别:" prop="pitfallType" v-if="data.formData.disposetype != '2'">
                  <MOSTY.DictTree :zdbh="'D_TB_SBYHLB'" v-model="data.formData.pitfallType" :placeholder='"请选择隐患类别"'
                    style="width: 300px;" :disabled="isSelect" />
                </el-form-item>
                <el-form-item label="所属单位：">
                  <el-input v-model="data.formData.siteorgname" disabled style="width: 300px"></el-input>
                </el-form-item>
                  <el-form-item label="隐患所属部门" prop="sitedeptname" v-if="['1','3'].includes(data.formData.disposetype)">
                    <el-input v-model="data.formData.sitedeptname" :disabled="isSelect" placeholder="请选择隐患所属部门" readonly
                      style="position: relative;width: 300px">
                      <template #append>
                        <el-button class='cursor' :disabled="isSelect" @click="chooseDept('01')">选择</el-button></template>
                    </el-input>
                    <div v-if="data.formData.sitedeptname" style="position:absolute;bottom:-25px;left:0px;color:red; margin-left:10px;">注：此部门为隐患整改部门</div>
                  </el-form-item>

                <el-form-item label="描述">
                  <el-input v-model="data.formData.observedescribe" disabled type="textarea" :rows="3" show-word-limit
                    maxlength="200" style="width: 827px" />
                </el-form-item>
                <el-form-item label="受理意见" prop="disposedescribe">
                  <el-input v-model="data.formData.disposedescribe" type="textarea" show-word-limit maxlength="200"
                    style="width: 827px" :disabled="isSelect" />
                </el-form-item>
                <el-form-item label="图片:">
                  <el-image v-for="(item, index) in data.formData.url" :key="index" :src="item" fit="scale-down"
                    :preview-src-list="data.formData.url" />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="data.allFlowData.dutyUsername">
              <MOSTY.Assort :title="'整改措施(方案)信息'" />
              <div class="searchBox">
                <el-form class="mosty-from-wrap" :model="data.allFlowData" :inline="true" label-width="120px"
                  label-suffix="：" :rules="rules">
                  <el-form-item label="隐患分析">
                    <el-input v-model="data.allFlowData.reason" disabled type="textarea" :rows="3" show-word-limit
                      maxlength="200" style="width: 827px" />
                  </el-form-item>
                  <el-form-item label="整改期限">
                    <el-input v-model="data.allFlowData.planOvertime" disabled style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="整改负责人">
                    <el-input v-model="data.allFlowData.dutyUsername" disabled style="width: 300px"></el-input>
                  </el-form-item>

                  <el-form-item label="整改措施">
                    <el-input v-model="data.allFlowData.reformMeasure" disabled type="textarea" :rows="3"
                      show-word-limit maxlength="200" style="width: 827px" />
                  </el-form-item>
                  <el-form-item label="临时控制">
                    <el-input v-model="data.allFlowData.existingControls" disabled type="textarea" :rows="3"
                      show-word-limit maxlength="200" style="width: 827px" />
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <!-- <div v-if="data.allFlowData.checkResult">
              <MOSTY.Assort :title="'整改措施(方案)审查'" />
              <div class="searchBox">
                <el-form class="mosty-from-wrap" label-width="120px" :model="data.allFlowData" :inline="true"
                  label-suffix="：" :rules="rules">
                  <el-form-item label="审核结果">
                    <div style="width: 827px">
                      <span v-if="data.allFlowData.checkResult === 'Y'" style="color: green">通过</span>
                      <span v-else style="color: red">驳回</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="审核意见">
                    <el-input v-model="data.allFlowData.checkOpinion" disabled type="textarea" :rows="3" show-word-limit
                      maxlength="200" style="width: 827px" />
                  </el-form-item>
                  <el-form-item label="审核人">
                    <el-input v-model="data.allFlowData.checkUsername" disabled style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="审核部门">
                    <el-input v-model="data.allFlowData.checkDeptname" disabled style="width: 300px"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div> -->
            <div v-if="data.allFlowData.verifyContent">
              <MOSTY.Assort :title="'整改落实信息'" />
              <div class="searchBox">
                <el-form class="mosty-from-wrap" label-width="120px" :model="data.allFlowData" :inline="true"
                  label-suffix="：" :rules="rules">
                  <el-form-item label="整改说明">
                    <el-input v-model="data.allFlowData.verifyContent" disabled type="textarea" :rows="3"
                      show-word-limit maxlength="200" style="width: 827px" />
                  </el-form-item>
                  <el-form-item label="图片:">
                    <el-image v-for="(item, index) in data.allFlowData.url" :key="index" :src="item" fit="scale-down"
                      :preview-src-list="data.allFlowData.url" />
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div v-if="data.allFlowData.signResult">
              <MOSTY.Assort :title="'整改落实验证'" />
              <div class="searchBox">
                <el-form class="mosty-from-wrap" label-width="120px" :model="data.allFlowData" :inline="true"
                  label-suffix="：" :rules="rules">
                  <el-form-item label="验证人">
                    <div style="width: 827px">
                      {{ data.allFlowData.signUsername }}
                    </div>
                  </el-form-item>
                  <el-form-item label="是否通过">
                    <div style="width: 827px">
                      <span v-if="data.allFlowData.signResult === 'Y'" style="color: green">通过</span>
                      <span v-else style="color: red">驳回</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="整改说明">
                    <el-input v-model="data.allFlowData.signOpinion" disabled type="textarea" :rows="3" show-word-limit
                      maxlength="200" style="width: 827px" />
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <!--  -->
          <div class="pr15 pb15 pl40 ww20 hh100 scrollbar mt15" v-if="isShowTimeLine && data.zgjdList.length > 0">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in data.zgjdList" :key="index" type="primary" placement="top"
                :color="activity.color" :timestamp="activity.time">
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" @click="submit(ruleFormRef)" v-if="data.config.saveBtnShow"><el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span></el-button>
        <el-button @click="black"><el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </template>
    </MOSTY.FromPage>

    <!-- 选择隐患所属部门 -->
    <ChooseDept :formInfo="data.formData" :showDdld="showDept" @closezzjg="closeDept" @listdata="getSonValue"
      :zzlx="zzlx" />
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect, getCurrentInstance, onMounted } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import ChooseDept from "@/components/MyComponents/ChooseDept/index.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import { getSysDictByCode } from "@/api/sysDict";
import { getFileUrl } from "@/utils/getFile.js";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const { D_BZ_YHLX, D_DBZ_YHDJ } = proxy.$dict("D_BZ_YHLX", "D_DBZ_YHDJ");

const route = useRoute();
const titleInfo = ref(route.path=='/fxgk/yhbg'?'隐患报告信息':'随手拍信息');
const showDept = ref(false);
const yhdjlist = ref([])
const loading = ref(false);
const isSelect = ref(false); //是否是查看
const isShowTimeLine = ref(false); //是否显示时间线
const options = ref([
  { value: '1', label: '隐患' },
  { value: '2', label: '靓点' },
])
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const zzlx = ref("");
const ruleFormRef = ref();
const emit = defineEmits("changePage");
// 验证参数
const rules = ref({
  disposetype: [
    { required: true, message: "请选择受理类型", trigger: "change" }
  ],
  pitfallLevel: [
    { required: true, message: "请选择隐患级别", trigger: "change" }
  ],
  pitfallType: [
    { required: true, message: "请选择隐患类别", trigger: "change" }
  ],
  // pitfallLevel
  sitedeptname: [
    { required: true, message: "请选择隐患所属部门", trigger: "change" }
  ],
  disposedescribe: [
    { required: true, message: "请填写受理意见", trigger: "blur" }
  ]
});
const data = reactive({
  allFlowData: {}, //全流程数据
  formData: {},
  extendattr: {},
  config: {
    title: "",
    saveBtnShow: true
  },
  zgjdList: [] //整改进度数据
});
// 初始化
onMounted(() => {
  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

    }
  });
  if (data.config.disposeType == '3') {
    data.formData.disposetype = '3'
    options.value = [{ value: '3', label: '隐患报告' },]
  } else {
    options.value = [{ value: '1', label: '隐患' },
    { value: '2', label: '靓点' },]
  }
  getMain(data.config.id);
  if (isShowTimeLine.value) _getZgjdData(data.config.id);
});
//获取全部流程数据
const _getAllFlowData = (id) => {
  getApi({ id }, "/mosty-jcgl/process/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/process/getTimer").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;
    }
  });
};
// 点击选择部门弹窗
function chooseDept(val) {
  zzlx.value = val;
  if (val == "01") {
    showDept.value = true;
    data.formData.leaderid = data.formData.sitedeptid;
  }
}
// 关闭弹窗
const closeDept = () => {
  showDept.value = false;
};
// 获取部门数据
const getSonValue = (value) => {
  if (zzlx.value == "01") {
    data.formData.sitedeptid = value.id;
    data.formData.sitedeptname = value.orgName;
  }
};
// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (data.formData.disposetype == '2') {
        data.formData.pitfallLevel = null
        data.formData.pitfallType = null
      }
      postApi(data.formData, "/mosty-jcgl/safetyobserve/dispose").then(() => {
        ElMessage.success("受理成功");
        emit("changePage", "Main");
      });
    }
  });
};
//获取详情
async function getMain(id) {
  loading.value = true;
  data.deptId = getItem("deptId").ssbmid;
  if (id) {
    await getApi({ id: id }, "/mosty-jcgl/safetyobserve/getInfo")
      .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;
          _getAllFlowData(res.id);
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
}
const black = () => {
  if (data.config.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emit("changePage", "Main");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emit("changePage", "Main");
  }

};
watchEffect(() => {
  if (props.editObj) {
    data.config = props.editObj;
    if (props.editObj.type === "ck" || props.editObj.type === "zgjd")
      isSelect.value = true;
    if (props.editObj.type === "zgjd") isShowTimeLine.value = true;
  }
  //测试数据
  // data.config = {
  //   saveBtnShow: true,
  //   title: "整改进度",
  //   type: "zgjd",
  //   id: "52032fe50efaff5c4d59a50bbc806533b5fb"
  // };
});
</script>

<style lang="scss" scoped>
.form_title {}

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

.box_cont {
  height: 70vh;
  overflow-y: scroll;
  width: 1000px;
}

.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;
  padding: 0 14px;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  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-radio__label {
  display: none;
}
</style>
