<template>
  <div>
    <van-nav-bar
      title="计划详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="body">
      <div class="listcontent" :style="`height:${bodyheight}px`">
        <van-collapse v-model="activeNames">
          <van-collapse-item class="citem" :title="`${  facilitieinfo.name }检测计划【${detection_status.filter((i) => i.value.toString() === detectioninfo.status.toString())[0]?.label ?? '-' }】`" name="1">
             <van-row>
            <van-col :span="12"
              >检测类型：{{
                detection_type.filter(
                  (i) => i.value === detectioninfo.detectionType + ""
                )[0]?.label ?? "-"
              }}</van-col
            >

            <van-col :span="12">年计划：{{ detectioninfo.detectionYear }}</van-col>
            <van-col :span="12"
              >月计划：{{ detectioninfo.detectionMonth }}</van-col
            >
            <van-col :span="12">周计划：{{ detectioninfo.detectionWeek }}</van-col>
            <van-col :span="24"
              >计划作业班组：{{}}{{ alldept
                  .filter(
                    (i) =>
                      (
                       detectioninfo.detectionDept
                      ).indexOf(i.deptId) != -1
                  )
                  .map((i) => i.deptName)
                  .join(",")}}</van-col
            >
            <van-col :span="24"
              >计划备注：{{ detectioninfo.detectionDes }}</van-col
            >
            <van-col :span="24"
              >备注：{{ detectioninfo.detectionRemark }}</van-col
            >
          </van-row>
          </van-collapse-item>
          <van-collapse-item class="citem" title="设施信息" name="5">
             <van-row>
            <van-col :span="12">台账序号：{{ facilitieinfo.exId }}</van-col>
            <van-col :span="12">所在道路：{{ facilitieinfo.roadName }}</van-col>
            <van-col :span="12">性质：{{ facilitieinfo.nature }}</van-col>
            <van-col :span="12">运维长度：{{ facilitieinfo.fLength }}</van-col>
            <van-col :span="12">设施名称：{{ facilitieinfo.name }}</van-col>
            <van-col :span="24"
              >设施起止点：{{ facilitieinfo.addrFrom }}-{{
                facilitieinfo.addrEnd
              }}</van-col
            >
          </van-row>

           </van-collapse-item>

          <van-collapse-item class="citem" title="派发信息" name="2" v-if="detectioninfo.status > 1">
             <van-row>
            <van-col :span="12"
              >负责人：{{
                allusers.filter(
                  (i) =>
                    i.userId.toString() ===
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 2
                      )[0].logDes
                    ).fzr.toString()
                )[0]?.nickName ?? "-"
              }}</van-col
            >
            <van-col :span="12"
              >联系方式：{{
                allusers.filter(
                  (i) =>
                    i.userId.toString() ===
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 2
                      )[0].logDes
                    ).fzr.toString()
                )[0]?.phonenumber ?? "-"
              }}</van-col
            >
            <van-col :span="24"
              >处置班组：{{
                alldept
                  .filter(
                    (i) =>
                      (
                        JSON.parse(
                          detectioninfo.detectionLogs.filter(
                            (ii) => ii.detectionStatus === 2
                          )[0].logDes
                        ).fzbz ?? []
                      ).indexOf(i.deptId) != -1
                  )
                  .map((i) => i.deptName)
                  .join(",")
              }}</van-col
            >
            <van-col :span="24"
              >派发时间：{{
                detectioninfo.detectionLogs.filter(
                  (ii) => ii.detectionStatus === 2
                )[0].createTime
              }}</van-col
            >
          </van-row>
          </van-collapse-item>
          <van-collapse-item class="citem" title="执行反馈" name="3" v-if="detectioninfo.status > 2">
<div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "作业组" }}
          </div>
          <div>
            <van-row>
              <van-col :span="24">
                负责人：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.fzr
                }}
              </van-col>
              <van-col :span="24">
                组员：
                {{
                  allusers
                    .filter(
                      (i) =>
                        (
                          JSON.parse(
                            detectioninfo.detectionLogs.filter(
                              (ii) => ii.detectionStatus === 3
                            )[0].logDes
                          ).gzz.zy ?? []
                        ).indexOf(i.userId) != -1
                    )
                    .map((i) => i.nickName)
                    .join(",")
                }}
              </van-col>
              <van-col :span="12">
                人数：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.rs
                }}
              </van-col>
              <van-col :span="12">
                开始时间：{{
                  moment(JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.starttime).format("YYYY-MM-DD")}}

              </van-col>
              <van-col :span="12">
                管线起点：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.addrstart
                }}
              </van-col>
              <van-col :span="12">
                管线终点：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.addrend
                }}
              </van-col>
              <van-col :span="12">
                城区：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.cq
                }}
              </van-col>

              <van-col :span="12">
                结束时间：{{
                  moment(JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.endtime).format("YYYY-MM-DD")
                }}
              </van-col>
              <van-col :span="12">
                作业地址：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.addr
                }}
              </van-col>
              <van-col :span="12">
                检测设备：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.jcsb
                }}
              </van-col>
              <van-col :span="12">
                车辆：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.cars
                }}
              </van-col>
              <van-col :span="12">
                车牌：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzz.carnumber
                }}
              </van-col>
              <van-col :span="24"> 作业照片： </van-col>

              <van-col :span="24">
                <ImagePreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzz.zyimages
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </van-col>
              <van-col :span="24"> 工作照片： </van-col>
              <van-col :span="24">
                <ImagePreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzz.gzimages
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </van-col>
            </van-row>
          </div>
          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "工作量" }}
          </div>
          <div>
            <van-row>
              <van-col :span="12"
                >检查井(座)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.jcj
                }}</van-col
              >
              <van-col :span="12"
                >雨水口(座)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.ysk
                }}</van-col
              >
              <van-col :span="12"
                >箅子(个)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.bz
                }}</van-col
              >
              <van-col :span="12"
                >主管(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.zg
                }}</van-col
              >
              <van-col :span="12"
                >接户管(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.jhg
                }}</van-col
              >
              <van-col :span="12"
                >雨水口支管(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.yskzg
                }}</van-col
              >
              <van-col :span="12"
                >总设施长度(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.zsscd
                }}</van-col
              >
              <van-col :span="12"
                >管径范围(mm)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.gjfw
                }}</van-col
              >
              <van-col :span="24"
                >备注：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.remark
                }}</van-col
              >
              <van-col :span="24"
                >未能作业原因：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.wnzyyy
                }}</van-col
              >
              <van-col :span="24"
                >备注：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 3
                    )[0].logDes ?? "{}"
                  ).gzl.remark1
                }}</van-col
              >
              <van-col :span="24">现场照片：</van-col>
              <van-col :span="24"
                ><ImagePreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 3
                      )[0].logDes ?? '{}'
                    ).gzl.images
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview
              ></van-col>
            </van-row>
          </div>
          </van-collapse-item>
          <van-collapse-item class="citem" title="检测成果" name="4" v-if="detectioninfo.status > 3">
            <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "报告信息" }}
          </div>
          <div>
            <van-row>
              <van-col :span="12">
                报告编号：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).bgxx.bgbh
                }}
              </van-col>
              <van-col :span="12">
                城区：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).bgxx.cq
                }}
              </van-col>
              <van-col :span="12">
                完成月份：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).bgxx.wcyf
                }}
              </van-col>
              <van-col :span="24">
                备注：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).bgxx.bz
                }}
              </van-col>

              <van-col :span="24"> 作业图纸： </van-col>

              <van-col :span="24">
                <div style="position: relative">
                  <div
                    style="position: absolute; top: 0; left: 60px; width: 100%"
                  >
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in JSON.parse(
                        detectioninfo.detectionLogs.filter(
                          (ii) => ii.detectionStatus === 4
                        )[0].logDes ?? '{}'
                      ).bgxx.tz?.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </van-col>
               <van-col :span="24"> 收单方： </van-col>
              <van-col :span="24">
                <div style="position: relative">
                  <div
                    style="position: absolute; top: 0; left: 60px; width: 100%"
                  >
                    <div
                      style="
                        margin-bottom: 10px;
                        color: #4f9eee;
                        display: inline-block;
                        margin-left: 10px;
                      "
                      v-for="i in JSON.parse(
                        detectioninfo.detectionLogs.filter(
                          (ii) => ii.detectionStatus === 4
                        )[0].logDes ?? '{}'
                      ).bgxx.sfd?.split(',') ?? []"
                    >
                      <a target="_blank" :href="`${STATICURL + i}`">
                        {{ i.split("/")[i.split("/").length - 1] }}
                      </a>
                    </div>
                  </div>
                </div>
              </van-col>
              <van-col :span="24"> 作业照片： </van-col>

              <van-col :span="24">
                <ImagePreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 4
                      )[0].logDes ?? '{}'
                    ).bgxx.zyzp
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </van-col>
               <van-col :span="24"> 作业视频： </van-col>
              <van-col :span="24">
                <VideoPreview
                  v-model:src="
                    JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 4
                      )[0].logDes ?? '{}'
                    ).bgxx.zysp
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></VideoPreview>
              </van-col>
            </van-row>
          </div>
          <div class="titleheader" :style="`${'margin-top:0px'}`">
            {{ "养护信息" }}
          </div>
          <div>
            <van-row>
              <van-col :span="24"
                >主管建议养护：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.zgjyyh
                }}
              </van-col>
              <van-col :span="12"
                >涉及检查井座：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.sjjcjz
                }}
              </van-col>
              <van-col :span="12"
                >养护长度(m)：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.yhcd
                }}</van-col
              >
              <van-col :span="12"
                >管径范围：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.gjfw
                }}</van-col>
              <van-col :span="24">主管缺陷分布图：</van-col>
              <van-col :span="24">
                 <ImagePreview
                  v-model:src="
                  JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 4
                      )[0].logDes ?? '{}'
                    ).yhxx.zgqxfbt
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </van-col>

              <van-col :span="12"
                >支管建议养护：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.zgjyyh1
                }}
              </van-col>
              <van-col :span="12"
                >支管三四级缺陷个数：
                {{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.zgqxssjs
                }}
              </van-col>
              <van-col :span="24"
                >养护备注：{{
                  JSON.parse(
                    detectioninfo.detectionLogs.filter(
                      (ii) => ii.detectionStatus === 4
                    )[0].logDes ?? "{}"
                  ).yhxx.remark
                }}</van-col
              >

              <van-col :span="24">支管缺陷分布图：</van-col>
              <van-col :span="24">
                 <ImagePreview
                  v-model:src="
                  JSON.parse(
                      detectioninfo.detectionLogs.filter(
                        (ii) => ii.detectionStatus === 4
                      )[0].logDes ?? '{}'
                    ).yhxx.zgqxfbt1
                  "
                  :height="'120px'"
                  :width="'120px'"
                ></ImagePreview>
              </van-col>

            </van-row>
          </div>
          </van-collapse-item>

        </van-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, ref, onMounted, watch } from "vue";
import { cloneDeep } from "lodash";
import { listDept, getDept } from "@/api/system/dept";
import ImagePreview from "@/components/ImagePreview";
import VideoPreview from "@/components/VideoPreview";
import { useDict } from "@/utils/dict";
import { useRoute } from "vue-router";
import moment from "moment";
import { listFacilities, getFacilities } from "@/api/system/facilities";
import {
  listDetection,
  getDetection,
  delDetection,
  addDetection,
  updateDetection,
} from "@/api/system/detection";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import router from "../../../../router";

const STATICURL = import.meta.env.VITE_APP_BASE_API;
const {
  detection_status,
  detection_type,

} = useDict(
  "detection_status",
  "detection_type",
);

const route = useRoute();
const bodyheight = ref(0);
bodyheight.value = document.body.clientHeight - 46;

const activeNames = ref(["1"]);

const alldept = ref([]);
listDept().then((response) => {
  alldept.value = cloneDeep(response.data);
});
const allusers = ref([]);
listUser({ pageSize: 1000 }).then((res) => {
  allusers.value = res.rows;
});
const detectioninfo = ref({
   createBy: "",
  createTime: null,
  detectionDept: "204,205",
  detectionDes: "sdfsd",
  detectionLogs: [],
  detectionMonth: "03",
  detectionRemark: "sdfsd",
  detectionType: 1,
  detectionWeek: "11",
  detectionYear: "2020",
  ext1: "",
  ext2: "",
  facilitiesId: 1,
  id: 3,
  params: {},
  remark: null,
  searchValue: null,
  status: 1,
  updateBy: "",
  updateTime: null,
});
const facilitieinfo = ref({
  addrEnd: "",
  addrFrom: "",
  areaAdDes: "",
  areaDes: "",
  createBy: null,
  createTime: null,
  exId: 1,
  exId1: "",
  ext1: null,
  fLength: "0",
  id: null,
  name: "",
  nature: "",
  params: {},
  remark: null,
  roadName: "",
  searchValue: null,
  updateBy: null,
  updateTime: null,
});
onMounted(() => {
  getDetection(Number(route.params.id)).then((res) => {
    detectioninfo.value = res.data;
  });
    getFacilities(detectioninfo.value.facilitiesId).then((rep) => {
      facilitieinfo.value = rep.data;
    });
});
const onClickLeft = () => {
  router.back();
};
</script>

<style lang="scss">
body {
  position: fixed;
  width: 100%;
  top: -1px;
}
.listcontent {
  overflow-y: auto;
  padding: 10px;
  .van-col{
    margin-bottom: 10px;
  }
  .citem {
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid rgba(209, 217, 221, 0.4);
    overflow: hidden;
    .content {
      font-size: 10px;

    }
    .titleheader{
        color:#3d6dc5;
        margin-bottom: 5px;
      }
  }
  .van-cell__title {
    color: #3d6dc5;
    font-weight: bold;
  }
}
</style>
