<template>
  <div class="detail-container">
    <div class="map-container" v-if="!props.hiddenInfoMap">
      <MapboxMap
        :caseno="props.showInfoData.case_no"
        :countyname="props.showInfoData.countyname"
        :imageList="imageList"
        :geomsList="geomsList"
        :mapConfig="mapConfig"
        @handlerDrawComplete="handlerDrawComplete"
        @mapOnLoad="onMapboxLoad"
        ref="MapboxComponent"
      />
    </div>
    <div class="info-container" id="info-container">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="项目信息">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="项目编号">
              {{ props.showInfoData.xiangmu_no }}
            </a-descriptions-item>
            <a-descriptions-item label="项目名称">
              {{ props.showInfoData.xiangmu_name }}
            </a-descriptions-item>
            <a-descriptions-item label="乡镇">
              {{ props.showInfoData.streetname }}
            </a-descriptions-item>
            <a-descriptions-item label="村庄">
              {{ props.showInfoData.communityname }}
            </a-descriptions-item>
            <a-descriptions-item label="权力人">
              {{ props.showInfoData.quanliren }}
            </a-descriptions-item>
            <a-descriptions-item label="行政区划">
              {{ props.showInfoData.xingzhengquhua }}
            </a-descriptions-item>
            <a-descriptions-item label="备案编号">
              {{ props.showInfoData.beian_no }}
            </a-descriptions-item>
            <a-descriptions-item label="项目开始时间">
              {{ props.showInfoData.start_time }}
            </a-descriptions-item>
            <a-descriptions-item label="项目结束时间">
              {{ props.showInfoData.end_time }}
            </a-descriptions-item>
            <a-descriptions-item label="项目当前用途">
              {{ props.showInfoData.xiangmu_yt }}
            </a-descriptions-item>
            <a-descriptions-item label="设施农业申请用地面积(公顷)">
              {{ props.showInfoData.shenqing_area }}
            </a-descriptions-item>
            <a-descriptions-item label="生产设施用地(公顷)">
              {{ props.showInfoData.shengchan_area }}
            </a-descriptions-item>
            <a-descriptions-item label="辅助设施用地(公顷)">
              {{ props.showInfoData.fuzhu_area }}
            </a-descriptions-item>
            <a-descriptions-item label="下发时间">
              {{ props.showInfoData.xiafatime }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="2" tab="开工核查">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="是否存在问题">
              {{ props.showInfoData.iswnti_kg }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_kg == '是'" label="问题类型">
              {{ props.showInfoData.wentileixing_kg }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_kg == '是'" label="其他情况说明">
              {{ props.showInfoData.qtqksm_kg }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_kg == '是'" label="整改方式">
              {{ props.showInfoData.zgfs_kg }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_kg == '是'" label="整改期限">
              {{ props.showInfoData.zgqx_kg }}
            </a-descriptions-item>
            <a-descriptions-item label="现场外景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in wjzp_kgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="现场内景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in njzp_kgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image-preview-group :preview="{ getContainer }">
                <template v-for="(item, itemIndex) in fujian_kgList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  ></a-image>
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="hanlderPreViewFile(item)"
                    />
                    {{ handlerDealFileName(item) }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="核查人员">
              {{ props.showInfoData.hechauser_kg }}
            </a-descriptions-item>
            <a-descriptions-item label="核查时间">
              {{ props.showInfoData.hechatime_kg }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="3" tab="整改情况">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="整改方式">
              {{ props.showInfoData.zgfs_kgzg }}
            </a-descriptions-item>
            <a-descriptions-item label="现场外景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in wjzp_kgzgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="现场内景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in njzp_kgzgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image-preview-group :preview="{ getContainer }">
                <template v-for="(item, itemIndex) in fujian_kgzgList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  ></a-image>
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="hanlderPreViewFile(item)"
                    />
                    {{ handlerDealFileName(item) }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="办理人员">
              {{ props.showInfoData.hechauser_kgzg }}
            </a-descriptions-item>
            <a-descriptions-item label="办理时间">
              {{ props.showInfoData.hechatime_kgzg }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="4" tab="建中核查">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="是否存在问题">
              {{ props.showInfoData.iswnti_jz }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_jz == '是'" label="问题类型">
              {{ props.showInfoData.wentileixing_jz }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_jz == '是'" label="其他情况说明">
              {{ props.showInfoData.qtqksm_jz }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_jz == '是'" label="整改方式">
              {{ props.showInfoData.zgfs_jz }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_jz == '是'" label="整改期限">
              {{ props.showInfoData.zgqx_jz }}
            </a-descriptions-item>
            <a-descriptions-item label="现场外景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in wjzp_jzList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="现场内景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in njzp_jzList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image-preview-group :preview="{ getContainer }">
                <template v-for="(item, itemIndex) in fujian_jzList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  ></a-image>
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="hanlderPreViewFile(item)"
                    />
                    {{ handlerDealFileName(item) }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="核查人员">
              {{ props.showInfoData.hechauser_jz }}
            </a-descriptions-item>
            <a-descriptions-item label="核查时间">
              {{ props.showInfoData.hechatime_jz }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="5" tab="整改情况">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="整改方式">
              {{ props.showInfoData.zgfs_jzzg }}
            </a-descriptions-item>
            <a-descriptions-item label="现场外景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in wjzp_jzzgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="现场内景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in njzp_jzzgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image-preview-group :preview="{ getContainer }">
                <template v-for="(item, itemIndex) in fujian_jzzgList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  ></a-image>
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="hanlderPreViewFile(item)"
                    />
                    {{ handlerDealFileName(item) }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="办理人员">
              {{ props.showInfoData.hechauser_jzzg }}
            </a-descriptions-item>
            <a-descriptions-item label="办理时间">
              {{ props.showInfoData.hechatime_jzzg }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="6" tab="完工核查">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="是否存在问题">
              {{ props.showInfoData.iswnti_wg }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_wg == '是'" label="问题类型">
              {{ props.showInfoData.wentileixing_wg }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_wg == '是'" label="其他情况说明">
              {{ props.showInfoData.qtqksm_wg }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_wg == '是'" label="整改方式">
              {{ props.showInfoData.zgfs_wg }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_wg == '是'" label="整改期限">
              {{ props.showInfoData.zgqx_wg }}
            </a-descriptions-item>
            <a-descriptions-item label="现场外景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in wjzp_wgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="现场内景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in njzp_wgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image-preview-group :preview="{ getContainer }">
                <template v-for="(item, itemIndex) in fujian_wgList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  ></a-image>
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="hanlderPreViewFile(item)"
                    />
                    {{ handlerDealFileName(item) }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="核查人员">
              {{ props.showInfoData.hechauser_wg }}
            </a-descriptions-item>
            <a-descriptions-item label="核查时间">
              {{ props.showInfoData.hechatime_wg }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="7" tab="整改情况">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="整改方式">
              {{ props.showInfoData.zgfs_wgzg }}
            </a-descriptions-item>
            <a-descriptions-item label="现场外景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in wjzp_wgzgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="现场内景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in njzp_wgzgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image-preview-group :preview="{ getContainer }">
                <template v-for="(item, itemIndex) in fujian_wgzgList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  ></a-image>
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="hanlderPreViewFile(item)"
                    />
                    {{ handlerDealFileName(item) }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="办理人员">
              {{ props.showInfoData.hechauser_wgzg }}
            </a-descriptions-item>
            <a-descriptions-item label="办理时间">
              {{ props.showInfoData.hechatime_wgzg }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="8" tab="日常监管">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="是否存在问题">
              {{ props.showInfoData.iswnti_rc }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_rc == '是'" label="问题类型">
              {{ props.showInfoData.wentileixing_rc }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_rc == '是'" label="其他情况说明">
              {{ props.showInfoData.qtqksm_rc }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_rc == '是'" label="整改方式">
              {{ props.showInfoData.zgfs_rc }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswnti_rc == '是'" label="整改期限">
              {{ props.showInfoData.zgqx_rc }}
            </a-descriptions-item>
            <a-descriptions-item label="现场外景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in wjzp_rcList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="现场内景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in njzp_rcList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image-preview-group :preview="{ getContainer }">
                <template v-for="(item, itemIndex) in fujian_rcList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  ></a-image>
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="hanlderPreViewFile(item)"
                    />
                    {{ handlerDealFileName(item) }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="核查人员">
              {{ props.showInfoData.hechauser_rc }}
            </a-descriptions-item>
            <a-descriptions-item label="核查时间">
              {{ props.showInfoData.hechatime_rc }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="9" tab="项目整改">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="整改方式">
              {{ props.showInfoData.zgfs_rczg }}
            </a-descriptions-item>
            <a-descriptions-item label="现场外景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in wjzp_rczgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="现场内景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in njzp_rczgList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image-preview-group :preview="{ getContainer }">
                <template v-for="(item, itemIndex) in fujian_rczgList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  ></a-image>
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="hanlderPreViewFile(item)"
                    />
                    {{ handlerDealFileName(item) }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="办理人员">
              {{ props.showInfoData.hechauser_rczg }}
            </a-descriptions-item>
            <a-descriptions-item label="办理时间">
              {{ props.showInfoData.hechatime_rczg }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="10" tab="现场复核">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',}"
          >
            <a-descriptions-item label="是否整改完成">
              {{ props.showInfoData.iswenti_rcfh }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswenti_rcfh == '否'" label="问题类型">
              {{ props.showInfoData.wentileixing_rcfh }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswenti_rcfh == '否'" label="其他情况说明">
              {{ props.showInfoData.qtqksm_rcfh }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswenti_rcfh == '否'" label="整改方式">
              {{ props.showInfoData.zgfs_rcfh }}
            </a-descriptions-item>
            <a-descriptions-item v-if="props.showInfoData.iswenti_rcfh == '否'" label="整改期限">
              {{ props.showInfoData.zgqx_rcfh }}
            </a-descriptions-item>
            <a-descriptions-item label="现场外景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in wjzp_rcfhList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="现场内景照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in njzp_rcfhList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    ></a-image>
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image-preview-group :preview="{ getContainer }">
                <template v-for="(item, itemIndex) in fujian_rcfhList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  ></a-image>
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="hanlderPreViewFile(item)"
                    />
                    {{ handlerDealFileName(item) }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="复核人员">
              {{ props.showInfoData.hechauser_rcfh }}
            </a-descriptions-item>
            <a-descriptions-item label="复核时间">
              {{ props.showInfoData.hechatime_rcfh }}
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
      </a-tabs>
    </div>
      <!-- File Preview && Download Start -->
      <a-modal
        v-model:open="previewFileModalVisible"
        style="width: 100vw"
        title="文件预览"
        wrap-class-name="full-modal"
      >
        <FilePreview v-if="previewFileModalVisible" :fileUrl="previewFileUrl"></FilePreview>
        <template #footer>
          <a-button key="cancel" @click="handleCancelPreviewFile">取消</a-button>
          <a-button key="confirm" type="primary" @click="handlerDownloadFle">下载</a-button>
        </template>
      </a-modal>
    <!--File Preview && Download End -->
  </div>
</template>

<script setup lang="ts">
  import { defineProps, ref, computed, onBeforeMount, watch } from 'vue';
  import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
  import { getConfig } from '@/api/sys/layerManagement';
  import { getGeom } from '@/api/sys/layerManagement';
  import { getLoadCaseImgList } from '@/api/tiankongdi';
  import { useMessage } from '@/hooks/web/useMessage';
  import axios from 'axios';
  const { createMessage } = useMessage();
  import Icon from '@/components/Icon/Icon.vue';
  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
  const MapboxComponent = ref();
  const mapConfig = ref({});
  const props = defineProps(['showInfoData','hiddenInfoMap']);
  const activeKey = ref('1');
  const geomsList = ref();
  const imageList = ref([]);
  console.log('props',props.showInfoData)
  watch(
    () => props.showInfoData,
    () => {
      getConfig({ code: 'mapsetting' }).then((res) => {
        mapConfig.value = JSON.parse(res.codeValue);
      });
      changeTask();
    },
  );
  async function getCaseImgList() {
    imageList.value = await getLoadCaseImgList({ caseid: props.showInfoData.id,category:'违法用地' });
    MapboxComponent.value.handlerLoadPictureAzimuth(imageList.value);
  }

  function handlerDealFileName(path) {
    const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
    const matchStr = path.match(regex);
    if (matchStr?.length) {
      return matchStr[0];
    }
  }

  function handlerPreviewImage(index, url) {
    const regex = /([^/\\]+)(?=\.[^/\\]*$|$)/;
    const match = url.match(regex);
    if (match) {
      MapboxComponent.value.handlerCurrentImageChange(match[1]);
    }
  }

  const isInitImageLisener = ref<Boolean>(false);
  // 监听预览图片地址变化进行箭头切换
  function handlerImageChange(e): void {
    isInitImageLisener.value = false;
    if (e && !isInitImageLisener.value) {
      setTimeout(function () {
        const targetNode = document.getElementsByClassName('ant-image-preview-img');
        targetNode?.forEach((node,index)=>{
          let imageObserver = new MutationObserver((mutationsList)=>{
            for(const mutation of mutationsList){
              if (node.getAttribute(mutation.attributeName).match('http')){
                handlerPreviewImage(0, node.getAttribute(mutation.attributeName));
              }
            }
          })
          const config = { attributes: true };
          imageObserver.observe(node, config);
          isInitImageLisener.value = true;
        })
      }, 250);
    }
  }

  onBeforeMount(() => {});

  const wjzp_kgList = computed(() => {
    return props.showInfoData.wjzp_kg ? props.showInfoData.wjzp_kg.split(',') : [];
  });
  const njzp_kgList = computed(() => {
    return props.showInfoData.njzp_kg ? props.showInfoData.njzp_kg.split(',') : [];
  });
  const fujian_kgList = computed(() => {
    return props.showInfoData.fujian_kg ? props.showInfoData.fujian_kg.split(',') : [];
  });
  const wjzp_kgzgList = computed(() => {
    return props.showInfoData.wjzp_kgzg ? props.showInfoData.wjzp_kgzg.split(',') : [];
  });
  const njzp_kgzgList = computed(() => {
    return props.showInfoData.njzp_kgzg ? props.showInfoData.njzp_kgzg.split(',') : [];
  });
  const fujian_kgzgList = computed(() => {
    return props.showInfoData.fujian_kgzg ? props.showInfoData.fujian_kgzg.split(',') : [];
  });
  const wjzp_jzList = computed(() => {
    return props.showInfoData.wjzp_jz ? props.showInfoData.wjzp_jz.split(',') : [];
  });
  const njzp_jzList = computed(() => {
    return props.showInfoData.njzp_jz ? props.showInfoData.njzp_jz.split(',') : [];
  });
  const fujian_jzList = computed(() => {
    return props.showInfoData.fujian_jz ? props.showInfoData.fujian_jz.split(',') : [];
  });
  const wjzp_jzzgList = computed(() => {
    return props.showInfoData.wjzp_jzzg ? props.showInfoData.wjzp_jzzg.split(',') : [];
  });
  const njzp_jzzgList = computed(() => {
    return props.showInfoData.njzp_jzzg ? props.showInfoData.njzp_jzzg.split(',') : [];
  });
  const fujian_jzzgList = computed(() => {
    return props.showInfoData.fujian_jzzg ? props.showInfoData.fujian_jzzg.split(',') : [];
  });
  const wjzp_wgList = computed(() => {
    return props.showInfoData.wjzp_wg ? props.showInfoData.wjzp_wg.split(',') : [];
  });
  const njzp_wgList = computed(() => {
    return props.showInfoData.njzp_wg ? props.showInfoData.njzp_wg.split(',') : [];
  });
  const fujian_wgList = computed(() => {
    return props.showInfoData.fujian_wg ? props.showInfoData.fujian_wg.split(',') : [];
  });
  const wjzp_wgzgList = computed(() => {
    return props.showInfoData.wjzp_wgzg ? props.showInfoData.wjzp_wgzg.split(',') : [];
  });
  const njzp_wgzgList = computed(() => {
    return props.showInfoData.njzp_wgzg ? props.showInfoData.njzp_wgzg.split(',') : [];
  });
  const fujian_wgzgList = computed(() => {
    return props.showInfoData.fujian_wgzg ? props.showInfoData.fujian_wgzg.split(',') : [];
  });
  const wjzp_rcList = computed(() => {
    return props.showInfoData.wjzp_rc ? props.showInfoData.wjzp_rc.split(',') : [];
  });
  const njzp_rcList = computed(() => {
    return props.showInfoData.njzp_rc ? props.showInfoData.njzp_rc.split(',') : [];
  });
  const fujian_rcList = computed(() => {
    return props.showInfoData.fujian_rc ? props.showInfoData.fujian_rc.split(',') : [];
  });
  const wjzp_rczgList = computed(() => {
    return props.showInfoData.wjzp_rczg ? props.showInfoData.wjzp_rczg.split(',') : [];
  });
  const njzp_rczgList = computed(() => {
    return props.showInfoData.njzp_rczg ? props.showInfoData.njzp_rczg.split(',') : [];
  });
  const fujian_rczgList = computed(() => {
    return props.showInfoData.fujian_rczg ? props.showInfoData.fujian_rczg.split(',') : [];
  });
  const wjzp_rcfhList = computed(() => {
    return props.showInfoData.wjzp_rcfh ? props.showInfoData.wjzp_rcfh.split(',') : [];
  });
  const njzp_rcfhList = computed(() => {
    return props.showInfoData.njzp_rcfh ? props.showInfoData.njzp_rcfh.split(',') : [];
  });
  const fujian_rcfhList = computed(() => {
    return props.showInfoData.fujian_rcfh ? props.showInfoData.fujian_rcfh.split(',') : [];
  });
  function onMapboxLoad() {
    changeTask();
  }
  async function changeTask() {
    let getGeomPrams = {
      TableName: 'drone_shp_data ',
      FieldName: 'gid',
      FieldValue: props.showInfoData.geomid?.split(','),
      page: 1,
      limit: 999,
      key: null,
    };
    if (props.showInfoData.geomid) {
      getGeom(getGeomPrams).then((res) => {
        let geoms = [];
        if (res) {
          if (res.items?.length > 0) {
            res.items.forEach((item, index) => {
              let geom = {
                key: item.gid,
                mapgeom: item.geometry,
              };
              geoms.push(geom);
              geomsList.value = geoms;
            });
          }
          // MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
          MapboxComponent.value.handlerDraw('Details', geoms, false);
        } else {
          geomsList.value = null;
          createMessage.error('当前数据没有图斑！');
        }
      });
    } else {
      createMessage.error('当前数据没有图斑！');
    }
  }

  import FilePreview from '@/components/Upload/src/components/FilePreview.vue';

  const previewFileModalVisible = ref(false);
  const previewFileUrl = ref("");

  const hanlderPreViewFile = (url)=>{
    previewFileUrl.value = `${VITE_GLOB_INFO_IMAGE_URL}/${url}`;
    previewFileModalVisible.value = true;
  }

  const handlerDownloadFle = ()=>{
    window.open(previewFileUrl.value, 'mozillaTab');
  }

  const handleCancelPreviewFile = ()=>{
    previewFileModalVisible.value = false;
  }
  
  const getContainer = () => {
    return document.getElementById('info-container');
  };
  const dataProcessing = (value) => {
    if (!value) {
      return '0';
    }
    if (value.indexOf('.') == -1) {
      return value;
    } else {
      if (value.split('.')[1].length <= 2) {
        return value;
      }
      let resultString = value.replace('㎡', '');
      return Number(resultString).toFixed(2);
    }
  };
  const showImage = (url) => {
    if (url.indexOf('.png') !== -1 || url.indexOf('.jpg') !== -1 || url.indexOf('.jpeg') !== -1) {
      return true;
    } else {
      return false;
    }
  };
</script>

<style lang="scss" scoped>
  .image-div {
    min-width: 340px;
    max-height: 220px;
    overflow: auto;
  }
  .detail-container {
    width: 100%;
    height: calc(100vh - 120px);
    display: flex;
    padding: 0px 20px;
  }
  .detail-container::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: none;
  }
  .map-container {
    float: left;
    width: 45vw;
    height: calc(100vh - 100px);
    margin-right: 20px;
  }
  :deep(.ant-image) {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  :deep(.ant-image-preview-switch-left) {
    position: absolute;
  }
  :deep(.ant-image-preview-switch-right) {
    position: absolute;
  }
  .info-container {
    // float: left;
    position: relative;
    flex: 1;
    :deep(.ant-image-preview-wrap) {
      position: absolute;
    }
    :deep(.ant-image-preview-mask) {
      position: absolute;
    }
    :deep(.ant-image-preview-operations-wrapper) {
      height: 100%;
      position: absolute;
      .ant-image-preview-operations {
        position: absolute;
        top: 0;
        width: 100%;
        .ant-image-preview-operations-operation {
          // flex:1;
        }
      }
      .ant-image-preview-operations-operation:nth-last-child(1) {
        display: none;
      }
      .ant-image-preview-operations-operation:nth-last-child(2) {
        display: none;
      }
    }
  }
  ::v-deep .ant-tabs .ant-tabs-content-holder {
    overflow: auto;
    height: 80vh;
    overflow: auto;
    padding-right: 10px;
  }
</style>
