<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="isAudit ? '隐患审核' : '隐患详情'" @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="true" :rules="rules">
                  <el-form-item label="检查部门">
                    <el-input v-model="data.formData.founderDeptname" disabled style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="检查人员">
                    <el-input v-model="data.formData.founderName" disabled style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="被检查单位">
                    <el-input v-model="data.formData.founderOrgname" disabled style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="被检查对象">
                    <el-input v-model="data.formData.objname" disabled style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="受理类型">
                    <el-select v-model="data.formData.sourcetype" placeholder="请选择受理类型" style="width: 300px"
                      :disabled="isSelect">
                      <el-option v-for="item in D_BZ_YHLX" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="隐患级别">
                    <el-select v-model="data.formData.pitfallLevel" placeholder="请选择隐患级别" style="width: 300px"
                      :disabled="isSelect">
                      <el-option v-for="item in yhdjlist" :disabled="item.disabled" :key="item.value"
                        :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="隐患描述">
                    <el-input v-model="data.formData.pitfallDescribe" 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.formData.url" :key="index" :src="item" fit="scale-down"
                      :preview-src-list="data.formData.url" :initial-index="index" />
                  </el-form-item>
                </el-form>

                <!-- 审核相关 -->
                <template v-if="isAudit">
                  <el-divider>审核</el-divider>
                  <div style="margin:0 auto;">
                    <el-form :model="auditForm" label-width="140px" :rules="rules" ref="formRef" class="mosty-from-wrap"
                      inline>
                      <el-form-item v-if="rwlx == '71'" label="是否能自行整改：" prop="isSelfFix">
                        <el-radio-group v-model="auditForm.isSelfFix">
                          <el-radio label="1">是</el-radio>
                          <el-radio label="2" :disabled="data.formData.state == '19'">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <div class="mt15 mb15">
                        <!-- <span>审核意见：</span> -->
                        <el-form-item v-if="rwlx == '69'" label="审核意见" prop="msg">
                          <el-input v-model="auditForm.msg" style="width: 827px;" type="textarea" :rows="3"
                            show-word-limit maxlength="500"></el-input>
                        </el-form-item>
                        <el-form-item v-if="rwlx == '71' && auditForm.isSelfFix == '1'" label="协调情况" prop="msg">
                          <el-input v-model="auditForm.msg" style="width: 827px;" type="textarea" :rows="3"
                            show-word-limit maxlength="500"></el-input>
                        </el-form-item>
                      </div>
                    </el-form>
                  </div>
                </template>

              </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" :initial-index="index" />
                    </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">
              <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>
        </div>


      </template>
      <template #footer>
        <template v-if="isAudit">
          <el-button v-if="rwlx == '69'" type="primary" @click="doAudit('1')" :loading="loading">通过</el-button>
          <el-button v-if="rwlx == '69'" type="primary" @click="doAudit('2')" :loading="loading">不通过</el-button>
          <el-button v-if="rwlx == '71'" type="primary" @click="doAuditSave()" :loading="loading">保存</el-button>

        </template>

        <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 { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const { D_BZ_YHLX, D_DBZ_YHDJ } = proxy.$dict("D_BZ_YHLX", "D_DBZ_YHDJ");
const loading = ref(false);
const isSelect = ref(false); //是否是查看
const isShowTimeLine = ref(false); //是否显示时间线
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const ruleFormRef = ref();
const yhdjlist = ref([])
/**是否是审核 用 */
const isAudit = ref(false);
/** 任务类型 69：审核意见 71：协调情况（县安全员） */
const rwlx = ref("")
const emit = defineEmits("changePage");
const id = ref(null)

const formRef = ref();
/** 审核表单 */
const auditForm = ref({
  id: '',
  msg: ''
})
const rules = {
  msg: [
    { required: true, message: '审核意见不能为空', trigger: 'blur' }
  ]
};

const data = reactive({
  allFlowData: {}, //全流程数据
  formData: {},
  extendattr: {},
  config: {
    title: "",
    saveBtnShow: true
  },
  zgjdList: [] //整改进度数据
});
watchEffect(() => {
  if (props.editObj) {
    data.config = props.editObj;
    isSelect.value = true;
    isShowTimeLine.value = true;
  }
});
// 初始化
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

    }
  });
  id.value = props.editObj.pifallid ? props.editObj.pifallid : props.editObj.id
  isAudit.value = !!props.editObj?.isAudit
  rwlx.value = props.editObj?.rwlx
  if (rwlx.value == '71') auditForm.value.isSelfFix = '1'
  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;
    }
  });
};

function CloseEvent() {
  emit("changePage", 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;
      });
  }
}

/**
 * 审核 rwlx 69
 * @param type '1' 通过  0:不通过，
 */
const doAudit = (type) => {
  formRef.value.validate((valid) => {
    if (valid) {
      let params = {
        id: props.editObj.id,
        msg: auditForm.value.msg,
        status: type == '1' ? '1' : '2'
      }
      loading.value = true
      postApi(params, `/mosty-jcgl/yhb/auditYhInfo`).then(() => {
        ElMessage.success("审核完成");
        CloseEvent()
        emit("changePage", false, { refresh: true });
      }).finally(() => {
        loading.value = false
      })
    } else {
      ElMessage.error('请填写审核意见');
      return false;
    }
  })
}
/**
 * 审核 71
 * @param type '1' 通过  0:不通过，
 */
const doAuditSave = (type) => {
  formRef.value.validate((valid) => {
    if (valid) {
      let params = {
        id: props.editObj.id,
        msg: auditForm.value.msg,
        status: auditForm.value.isSelfFix
      }
      loading.value = true
      postApi(params, `/mosty-jcgl/yhb/coordinateYhInfo`).then(() => {
        ElMessage.success("审核完成");
        CloseEvent()
        emit("changePage", false, { refresh: true });
      }).finally(() => {
        loading.value = false
      })
    } else {
      ElMessage.error('请填写协调情况');
      return 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-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>
