<template>
  <div class="details">
    <!-- @tab-click="handleClick" -->
    <el-tabs v-model="activeName">
      <el-tab-pane
        label="基本信息"
        name="jbxx"
        v-if="!formde || route.query.dataType != '2'"
      >
        <el-descriptions :column="1">
          <el-descriptions-item
            v-for="(item, i) in jbxxs"
            :label="item.name"
            :key="i"
            >{{ infoObj[item.prop] }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane
        label="业务研判"
        name="ywyp"
        v-if="!formde || route.query.dataType != '1'"
      >
        <el-tabs v-model="ywyptab">
          <el-tab-pane
            v-for="ypitem in sheets"
            :label="ypitem.type"
            :name="ypitem.sheet"
            :key="ypitem.sheet"
          >
            <img :src="ypitem.photo" width="100%" />
            <el-row>
              <!-- <el-col :span="5">
                <el-button :plain="true" @click="open">2024年</el-button>
                <el-button :plain="true" @click="open">2024年</el-button>
                <el-button :plain="true" @click="open">2024年</el-button>
                <el-button :plain="true" @click="open">2024年</el-button>
              </el-col> -->
              <el-col :span="24">
                压占{{ ypitem.type }}面积共{{ ypitem.mjj }}平方米
                <!-- //，占图斑面积比为23.24%。 -->
                <el-table :data="ypitem.data_list">
                  <el-table-column
                    v-for="(item, i) in tdxzTable"
                    :key="i"
                    :label="item.label"
                    :prop="item.prop"
                    align="center"
                  >
                    <template #default="{ row }">
                      <div v-if="item.slot == 'ratio'">
                        {{ ((row.yzmj / ypitem.yzmj) * 100).toFixed(2) }}%
                      </div>
                      <div v-else-if="item.slot == 'action'">
                        <el-button link type="primary" @click="todetails(row)"
                          >查看
                        </el-button>
                      </div>
                      <span v-else>{{ row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="核查信息" name="hcxx" v-if="!formde">
        共3次外业核查
        <el-collapse v-model="hcxxtab" @change="handleChange">
          <el-collapse-item v-for="(hcit, hi) in hcxxList" :key="hi" name="1">
            <template #title>
              核查时间：{{ hcit.time }} 核查人员：{{ hcit.name }}
            </template>
            <div></div>
            <div>
              <Hcxx @updateParent="changeData" :jcbh="11"></Hcxx>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="业务记录" name="ywjl" v-if="!formde">
        <el-timeline>
          <el-timeline-item
            v-for="(acti, index) in activities"
            :key="index"
            :type="acti.successType == '0' ? 'primary' : ''"
            size="large"
            :hollow="true"
            :timestamp="acti.auditflowStepValue"
            placement="top"
          >
            <div class="timelinediv">
              <span class="name">[{{ acti.createBy }}] </span>
              <span class="operate">
                {{ audiText[acti.auditflowOperateType] || "" }}
              </span>
              <span class="time"> 于 {{ acti.createTime }}</span>
              <span
                v-if="['001', '002', '003'].includes(acti.auditflowOperateType)"
                class="time more"
                @click="moreAct(acti)"
                >更多</span
              >
            </div>
            <div
              v-if="['001', '002', '003'].includes(acti.auditflowOperateType)"
            >
              {{
                audiText[acti.auditflowOperateType].replace("合规性", "")
              }}结论：
              {{ acti.successType == "0" ? "通过" : "不通过" }}
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
    <div class="btns">
      <el-button
        type="primary"
        v-show="route.query.dataType != 'normal'"
        :disabled="!steps.find((x) => x.auditflowStep.includes('SH'))"
        @click="operate('SH')"
        >审核</el-button
      >
      <el-button
        type="warning"
        v-show="route.query.dataType == 'XJ'"
        :disabled="!steps.find((x) => x.auditflowStep.includes('XJHGX'))"
        @click="operate('HGX')"
        >合法性判定</el-button
      >
      <el-button
        type="success"
        v-show="['XJ', 'SJ'].includes(route.query.dataType)"
        :disabled="!steps.find((x) => x.auditflowStep.includes('TJ'))"
        @click="operate('TJ')"
        >提交</el-button
      >
    </div>
    <el-dialog :title="diatitle" v-model="open" width="500px" append-to-body>
      <div v-for="(note, nkey) in Object.keys(sheetinfos)" :key="nkey">
        {{ note }}：{{ sheetinfos[note] }}
      </div>
    </el-dialog>
    <shdialog ref="shdiaRef"></shdialog>
    <hgxdialog ref="hgxdiaRef"></hgxdialog>
    <tjdialog ref="tjdiaRef"></tjdialog>
  </div>
</template>
  
  <script setup name="details">
import Hcxx from "./hcxx.vue";
import shdialog from "./components/shdialog.vue";
import hgxdialog from "./components/hgxdialog.vue";
import tjdialog from "./components/tjdialog.vue";
import { getDetailsDk } from "@/api/rsmonitoring/dataEntry";
import {
  getDkjbxx,
  getDkjbywy,
  getAuditflow,
  getStep,
} from "@/api/rsmonitoring/dkjbxx";

import {
  jbxxs,
  tdxzTable,
  gtkjTable,
  gdTable,
  yjjbntTable,
  stbhTable,
  audiText,
} from "./config";

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const formde = ref(route.query.form == "dataEntry");
const props = defineProps({});
let nowObj = {};
const shdiaRef = ref(null);
const hgxdiaRef = ref(null);
const tjdiaRef = ref(null);

const data = reactive({
  activeName: "jbxx",
  infoObj: { name: "swed" },
  hcxxList: [{}],
  activities: [],
});
const steps = ref([]);

const { activeName, infoObj, hcxxList, activities } = toRefs(data);
const sheetdata = reactive({
  ywyptab: "1",
  sheets: [],
  open: false,
  diatitle: "",
  sheetinfos: [],
});

const { ywyptab, sheets, open, diatitle, sheetinfos } = toRefs(sheetdata);

function handleClick({ id }) {
  if (formde.value) {
    getDetailsDk(id).then((res) => {
      infoObj.value = res.data;
    });
  } else {
    // if (activeName.value == "jbxx")
    getDkjbxx(id).then((res) => {
      infoObj.value = res.data;
    });
    getDkjbywy(id).then((res) => {
      sheets.value = JSON.parse(res.data.sheetJson);
      ywyptab.value = sheets.value[0].sheet;
      console.log(sheets.value);
    });
    // else if (activeName.value == "ywjl")
    getAuditflow({ dkjdxxId: id }).then((res) => {
      activities.value = res.data;
    });
  }
  getStep({ dkjdxxId: id }).then((res) => {
    steps.value = res.data;
  });
}
function todetails(row) {
  open.value = true;
  diatitle.value = row.swid + "详情";
  sheetinfos.value = JSON.parse(row.sheetJson);
}
function getDetails({ pcsjid, id }) {
  activeName.value = "jbxx";
  infoObj.value = {};
  activities.value = [];
  // nowObj = { pcsjid, id };
  handleClick({ pcsjid, id });
}
function moreAct(actitem) {
  if (actitem.auditflowOperateType == "001")
    hgxdiaRef.value.moreAct(actitem, infoObj.value);
  else if (actitem.auditflowOperateType == "002")
    shdiaRef.value.moreAct(actitem, infoObj.value);
  else if (actitem.auditflowOperateType == "003")
    tjdiaRef.value.moreAct(actitem, infoObj.value);
}

function operate(oname) {
  let aStep = route.query.dataType + oname;
  if (oname == "SH") shdiaRef.value.operate(infoObj.value, aStep);
  else if (oname == "HGX") hgxdiaRef.value.operate(infoObj.value, aStep);
  else if (oname == "TJ") tjdiaRef.value.operate(infoObj.value, aStep);
}

defineExpose({ getDetails });
</script>
<style scoped lang="scss">
.details {
  .el-button {
    // margin: 0px !important;
    margin-bottom: 12px !important;
  }
  .btns {
    position: absolute;
    bottom: 20px;
    .el-button {
      margin-left: 20px !important;
    }
  }

  .timelinediv {
    .name {
      color: #95f204;
    }
    .operate {
      color: #f59a23;
    }
    .time {
      color: #5ba7f0;
    }
    .more {
      display: inline-block;
      position: absolute;
      right: 20px;
      cursor: pointer;
    }
  }
}
</style>
<style  lang="scss">
.details {
  height: calc(100% - 40px);
  overflow: hidden;
  .el-tabs {
    height: 100%;
  }
  .el-tabs__content {
    height: calc(100% - 100px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.usable {
  color: #3f93f5;
  cursor: pointer;
}
</style>
  