<template>
  <div class="detail-container">
    <div class="map-container">
      <MapboxMap
        :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="图斑编号">{{ caseInfo.case_no }}</a-descriptions-item>
            <a-descriptions-item label="所属年度">{{ caseInfo.syear_base }}</a-descriptions-item>
            <a-descriptions-item label="接收时间">{{ caseInfo.jieshou_time }}</a-descriptions-item>
            <a-descriptions-item label="发放批次">{{
              caseInfo.fafangpici_base
            }}</a-descriptions-item>
            <a-descriptions-item label="经纬度"
              >{{ caseInfo.centerlng_base }} / {{ caseInfo.centerlat_base }}</a-descriptions-item
            >
            <a-descriptions-item label="图斑来源">{{ caseInfo.tubanlaiyuan }}</a-descriptions-item>
            <a-descriptions-item label="疑似违法涉矿图斑面积(亩)">{{
              // dataProcessing(caseInfo.weifaarea_base)
              caseInfo.weifaarea_base
            }}</a-descriptions-item>
            <a-descriptions-item label="图斑描述">{{
              caseInfo.case_description
            }}</a-descriptions-item>
            <a-descriptions-item label="是否重点矿区">{{
              caseInfo.zhongdianflag_base
            }}</a-descriptions-item>
            <a-descriptions-item label="重点矿区名称">{{
              caseInfo.zhongdianname_base
            }}</a-descriptions-item>
            <a-descriptions-item label="是否在国家自然保护区范围内">{{
              caseInfo.ziranbaohuflag_base
            }}</a-descriptions-item>
            <a-descriptions-item label="所属国家自然保护区名称">{{
              caseInfo.ziranbaohuname_base
            }}</a-descriptions-item>
            <a-descriptions-item label="违法开采面积(亩)">{{
              caseInfo.weifakaicaiarea_base
            }}</a-descriptions-item>
            <a-descriptions-item label="下发时间">{{
              caseInfo.xiafatime_base
            }}</a-descriptions-item>
            <a-descriptions-item label="区/县">{{ caseInfo.countyname }}</a-descriptions-item>
            <a-descriptions-item label="镇/街">{{ caseInfo.streetname }}</a-descriptions-item>
            <a-descriptions-item label="村/社">{{ caseInfo.communityname }}</a-descriptions-item>
            <a-descriptions-item label="基本农田面积(加工)(平方米)">{{
              caseInfo.jbntarea_base
            }}</a-descriptions-item>
            <a-descriptions-item label="城市开发边界面积(加工)(平方米)">{{
              caseInfo.cskfbjarea_base
            }}</a-descriptions-item>
            <a-descriptions-item label="生态保护红线面积(加工)(平方米)">{{
              caseInfo.stbhhxarea_base
            }}</a-descriptions-item>
            <a-descriptions-item label="是否符合土地利用总体规划（加工）">{{
              caseInfo.tudiliyongflag_base
            }}</a-descriptions-item>
            <a-descriptions-item label="违法占地面积（加工）(亩)">{{
              caseInfo.weifazhandiarea_base
            }}</a-descriptions-item>
            <a-descriptions-item label="到期时限">{{
              caseInfo.chulishixian_base
            }}</a-descriptions-item>
            <a-descriptions-item label="图斑图片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                  }"
                >
                  <template v-for="(imageItem, imageIndex) in anjianzhaopianList" :key="imageIndex">
                    <a-image
                      v-if="imageItem"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    />
                  </template>
                </a-image-preview-group>
              </div>
            </a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="2" tab="填报" force-render>
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',
            }"
          >
            <a-descriptions-item label="图斑类型">{{ caseInfo.typename }}</a-descriptions-item>
            <a-descriptions-item label="合法性判定" v-if="caseInfo.typename">{{
              getLabel('hefapanding_fill', caseInfo.hefapanding_fill)
            }}</a-descriptions-item>
            <!-- 开采 -->
            <template v-if="caseInfo.typename == '开采'">
              <!-- 开采-合法 -->
              <template v-if="caseInfo.hefapanding_fill == 1">
                <a-descriptions-item label="合法情形（开采）">{{
                  getLabel('hefaqingxing_kcfill', caseInfo.hefaqingxing_kcfill)
                }}</a-descriptions-item>
                <a-descriptions-item label="审批类型（开采）">{{
                  caseInfo.shenpitype_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="审批时间（开采）">{{
                  caseInfo.shenpitime_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="审批文号（开采）">{{
                  caseInfo.shenpinum_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="有效期（开采）">{{
                  caseInfo.youxiaoqi_kcfill
                }}</a-descriptions-item>
              </template>
              <!-- 开采-违法 -->
              <template v-if="caseInfo.hefapanding_fill == 2">
                <a-descriptions-item label="违法类型（开采）">{{
                  getLabel('weifaleixing', caseInfo.weifaleixing)
                }}</a-descriptions-item>
                <a-descriptions-item label="是否属于国家规划矿区（开采）">{{
                  caseInfo.isguihua_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="是否重大典型问题（开采）">{{
                  caseInfo.iszhongda_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="是否重点敏感区域范围内（开采）">{{
                  caseInfo.iszhongdian_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="开采主体（开采）">{{
                  caseInfo.kaicaizhuti_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="主体类型（开采）">{{
                  getLabel('zhutitype_kcfill', caseInfo.zhutitype_kcfill)
                }}</a-descriptions-item>
                <a-descriptions-item label="发生时间（开采）">{{
                  caseInfo.fashentime_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="结束时间（开采）">{{
                  caseInfo.endtime_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="矿种">{{
                  caseInfo.kuangzhong_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="开采面积（开采）">{{
                  caseInfo.kaicaiarea_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="方量（开采）">{{
                  caseInfo.fangliang_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="采出的矿产品查封方量（开采）">{{
                  caseInfo.chafengliang_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="采出的矿产品价值（开采）">{{
                  caseInfo.caichujiazhi_kcfill
                }}</a-descriptions-item>
                <a-descriptions-item label="是否新增（开采）">{{
                  caseInfo.isnewadd_kcfill
                }}</a-descriptions-item>
              </template>
              <!-- 开采-其他 -->
              <template v-if="caseInfo.hefapanding_fill == 2">
                <a-descriptions-item label="是否河道采砂（开采）">{{
                  caseInfo.ishedaocaisha_kcfill
                }}</a-descriptions-item>
              </template>
            </template>
            <!-- 加工 -->
            <template v-if="caseInfo.typename == '加工'">
              <a-descriptions-item label="违法类型">{{
                getLabel('weifatype_jgfill', caseInfo.weifatype_jgfill)
              }}</a-descriptions-item>
              <a-descriptions-item label="设计产能（加工）">{{
                caseInfo.shejichanneng_base
              }}</a-descriptions-item>
            </template>
            <a-descriptions-item label="图斑变化情况说明">{{
              caseInfo.shuoming_fill
            }}</a-descriptions-item>
            <a-descriptions-item label="现场照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer: getContainer,
                    onVisibleChange: handlerImageChange,
                  }"
                >
                  <template
                    v-for="(imageItem, imageIndex) in xianchangzhaopianList"
                    :key="imageIndex"
                  >
                    <a-image
                      v-if="imageItem"
                      @click="handlerPreviewImage(imageIndex, imageItem)"
                      width="100px"
                      height="100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                      :preview="{
                        getContainer,
                      }"
                    />
                  </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 qitafujianList" :key="itemIndex">
                  <a-image
                    v-if="showImage(item)"
                    style="width: 100px; height: 100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                    :preview="{ getContainer }"
                  />
                  <div v-else>
                    <Icon
                      v-if="item"
                      :style="`font-size: 30px; cursor: pointer;`"
                      icon="ion:document-attach-outline"
                      @click="downLoadFile(item)"
                    />
                    {{ item }}
                  </div>
                </template>
              </a-image-preview-group>
            </a-descriptions-item>
            <a-descriptions-item label="填报人">{{ caseInfo.tianbaoren_fill }}</a-descriptions-item>
            <a-descriptions-item label="填报时间">{{
              caseInfo.tianbaotime_fill
            }}</a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <template v-if="caseInfo.typename == '开采' && caseInfo.hefapanding_fill == 2">
          <a-tab-pane key="4" tab="填报审核">
            <a-divider>县级审核</a-divider>
            <a-descriptions
              :column="2"
              bordered
              :contentStyle="{
                'text-align': 'center',
                'min-width': '250px',
                'word-break': 'break-all',
              }"
            >
              <a-descriptions-item label="审核结果">{{
                caseInfo.xianshenhejieguo_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核意见">{{
                caseInfo.xianbohuinote_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核人">{{
                caseInfo.xianshenheren_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核时间">{{
                caseInfo.xianshenhetime_fill
              }}</a-descriptions-item>
            </a-descriptions>
            <a-divider>市级审核</a-divider>
            <a-descriptions
              :column="2"
              bordered
              :contentStyle="{
                'text-align': 'center',
                'min-width': '250px',
                'word-break': 'break-all',
              }"
            >
              <a-descriptions-item label="市级审核人">{{
                caseInfo.shishenheren_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="市级审核时间">{{
                caseInfo.shishenhetime_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="是否通过">{{
                caseInfo.shishenhejieguo_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核意见">{{
                caseInfo.shibohuinote_fill
              }}</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="是否立案">{{
                caseInfo.islian_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="立案时间">{{
                caseInfo.liantime_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="立案机关">{{
                caseInfo.lianjiguan_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="是否结案">{{
                caseInfo.isjiean_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="违法主体">{{
                caseInfo.weifazhuti_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="违法开采矿产品数量（吨）">{{
                caseInfo.weifashuliang_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="违法开采矿产品价值（万元）">{{
                caseInfo.weifajiazhi_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="违法面积（亩）">{{
                caseInfo.weifaarea_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="相关地类">{{
                caseInfo.xiangguandilei_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="渉嫌犯罪移送司法机关">{{
                caseInfo.isyisongsifa_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="党纪政务处分情况">{{
                caseInfo.dangjichufen_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="是否作出行政处罚决定">{{
                caseInfo.isxingzhengchufa_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="行政处罚决定书编号">{{
                caseInfo.xingzhengchufanum_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="没收违法所得金额（万元)">{{
                caseInfo.moshoujine_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="罚款金额（万元)">{{
                caseInfo.fakuanjine_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="没收矿产品数量（吨)">{{
                caseInfo.moshoushuliang_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="处罚附件">
                <a-image-preview-group :preview="{ getContainer }">
                  <template v-for="(item, itemIndex) in chufafujianList" :key="itemIndex">
                    <a-image
                      v-if="showImage(item)"
                      style="width: 100px; height: 100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                      :preview="{ getContainer }"
                    />
                    <div v-else>
                      <Icon
                        v-if="item"
                        :style="`font-size: 30px; cursor: pointer;`"
                        icon="ion:document-attach-outline"
                        @click="downLoadFile(item)"
                      />
                      {{ item }}
                    </div>
                  </template>
                </a-image-preview-group>
              </a-descriptions-item>
              <a-descriptions-item label="落实到位文件">
                <a-image-preview-group :preview="{ getContainer }">
                  <template v-for="(item, itemIndex) in luoshidaoweiwenjianList" :key="itemIndex">
                    <a-image
                      v-if="showImage(item)"
                      style="width: 100px; height: 100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                      :preview="{ getContainer }"
                    />
                    <div v-else>
                      <Icon
                        v-if="item"
                        :style="`font-size: 30px; cursor: pointer;`"
                        icon="ion:document-attach-outline"
                        @click="downLoadFile(item)"
                      />
                      {{ item }}
                    </div>
                  </template>
                </a-image-preview-group>
              </a-descriptions-item>
              <a-descriptions-item label="是否移送法院强制执行">{{
                caseInfo.isqiangzhizhixing_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="查处人">{{
                caseInfo.chachuren_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="查处时间">{{
                caseInfo.chachutime_punish
              }}</a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
          <a-tab-pane key="6" tab="查处审核">
            <a-divider>县级审核</a-divider>
            <a-descriptions
              :column="2"
              bordered
              :contentStyle="{
                'text-align': 'center',
                'min-width': '250px',
                'word-break': 'break-all',
              }"
            >
              <a-descriptions-item label="审核结果">{{
                caseInfo.xianshenhejieguo_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="审核意见">{{
                caseInfo.xianbohuinote_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="审核人">{{
                caseInfo.xianshenheren_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="审核时间">{{
                caseInfo.xianshenhetime_punish
              }}</a-descriptions-item>
            </a-descriptions>
            <a-divider>市级审核</a-divider>
            <a-descriptions
              :column="2"
              bordered
              :contentStyle="{
                'text-align': 'center',
                'min-width': '250px',
                'word-break': 'break-all',
              }"
            >
              <a-descriptions-item label="审核结果">{{
                caseInfo.shishenhejieguo_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="审核意见">{{
                caseInfo.shibohuinote_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="市级审核人">{{
                caseInfo.shishenheren_punish
              }}</a-descriptions-item>
              <a-descriptions-item label="市级审核时间">{{
                caseInfo.shishenhetime_punish
              }}</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="情况说明">{{
                caseInfo.qingkuangnote_reform
              }}</a-descriptions-item>
              <a-descriptions-item label="现场照片">
                <div class="image-div">
                  <a-image-preview-group
                    :preview="{
                      getContainer: getContainer,
                      onVisibleChange: handlerImageChange,
                    }"
                  >
                    <template
                      v-for="(imageItem, imageIndex) in zhenggaizhaopianList"
                      :key="imageIndex"
                    >
                      <a-image
                        v-if="imageItem"
                        @click="handlerPreviewImage(imageIndex, imageItem)"
                        width="100px"
                        height="100px"
                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                        :preview="{
                          getContainer,
                        }"
                      />
                    </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 zhenggaifujianList" :key="itemIndex">
                    <a-image
                      v-if="showImage(item)"
                      style="width: 100px; height: 100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                      :preview="{ getContainer }"
                    />
                    <div v-else>
                      <Icon
                        v-if="item"
                        :style="`font-size: 30px; cursor: pointer;`"
                        icon="ion:document-attach-outline"
                        @click="downLoadFile(item)"
                      />
                      {{ item }}
                    </div>
                  </template>
                </a-image-preview-group>
              </a-descriptions-item>
              <a-descriptions-item label="整改人">{{
                caseInfo.zhenggairen_reform
              }}</a-descriptions-item>
              <a-descriptions-item label="整改时间">{{
                caseInfo.zhenggaitime_reform
              }}</a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
          <a-tab-pane key="8" tab="整改审核">
            <a-divider>县级审核</a-divider>
            <a-descriptions
              :column="2"
              bordered
              :contentStyle="{
                'text-align': 'center',
                'min-width': '250px',
                'word-break': 'break-all',
              }"
            >
              <a-descriptions-item label="审核结果">{{
                caseInfo.xianshenhejieguo_reform
              }}</a-descriptions-item>
              <a-descriptions-item label="审核意见">{{
                caseInfo.xianbohuinote_reform
              }}</a-descriptions-item>
              <a-descriptions-item label="审核人">{{
                caseInfo.xianshenheren_reform
              }}</a-descriptions-item>
              <a-descriptions-item label="审核时间">{{
                caseInfo.xianshenhetime_reform
              }}</a-descriptions-item>
            </a-descriptions>
            <a-divider>市级审核</a-divider>
            <a-descriptions
              :column="2"
              bordered
              :contentStyle="{
                'text-align': 'center',
                'min-width': '250px',
                'word-break': 'break-all',
              }"
            >
              <a-descriptions-item label="是否通过">{{
                caseInfo.shishenhejieguo_reform
              }}</a-descriptions-item>
              <a-descriptions-item label="审核意见">{{
                caseInfo.shibohuinote_reform
              }}</a-descriptions-item>
              <a-descriptions-item label="市级审核人">{{
                caseInfo.shishenheren_reform
              }}</a-descriptions-item>
              <a-descriptions-item label="市级审核时间">{{
                caseInfo.shishenhetime_reform
              }}</a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
        </template>
        <a-tab-pane
          key="3"
          tab="审核"
          v-if="caseInfo.typename == '开采' && caseInfo.hefapanding_fill != 2"
        >
          <a-divider>县级审核</a-divider>
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',
            }"
          >
            <a-descriptions-item label="县级审核人">{{
              caseInfo.xianshenheren_fill
            }}</a-descriptions-item>
            <a-descriptions-item label="县级审核时间">{{
              caseInfo.xianshenhetime_fill
            }}</a-descriptions-item>
            <a-descriptions-item label="是否通过">{{
              caseInfo.xianshenhejieguo_fill
            }}</a-descriptions-item>
            <a-descriptions-item label="审核意见">{{
              caseInfo.xianbohuinote_fill
            }}</a-descriptions-item>
          </a-descriptions>
          <a-divider>市级审核</a-divider>
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',
            }"
          >
            <a-descriptions-item label="市级审核人">{{
              caseInfo.shishenheren_fill
            }}</a-descriptions-item>
            <a-descriptions-item label="市级审核时间">{{
              caseInfo.shishenhetime_fill
            }}</a-descriptions-item>
            <a-descriptions-item label="是否通过">{{
              caseInfo.shishenhejieguo_fill
            }}</a-descriptions-item>
            <a-descriptions-item label="审核意见">{{
              caseInfo.shibohuinote_fill
            }}</a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>

        <!-- 整改类型（加工） -->
        <template v-if="caseInfo.typename == '加工' && caseInfo.hefapanding_jgfill == 2">
          <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="整改类型">{{
                caseInfo.zhenggaitype_jgzhg
              }}</a-descriptions-item>
              <a-descriptions-item label="保留承诺">{{
                caseInfo.baoliuchengnuo_jgzhg
              }}</a-descriptions-item>
              <a-descriptions-item label="单位或个人名称">{{
                caseInfo.danweiname_jgzhg
              }}</a-descriptions-item>
              <a-descriptions-item label="具体位置">{{
                caseInfo.jutiweizhi_jgzhg
              }}</a-descriptions-item>
              <a-descriptions-item label="存在问题">{{
                caseInfo.cunzaiwenti_jgzhg
              }}</a-descriptions-item>
              <a-descriptions-item label="图斑变化情况说明">{{
                caseInfo.shuoming_jgzhg
              }}</a-descriptions-item>
              <a-descriptions-item label="现场照片-整改前">
                <div class="image-div">
                  <a-image-preview-group
                    :preview="{
                      getContainer: getContainer,
                      onVisibleChange: handlerImageChange,
                    }"
                  >
                    <template
                      v-for="(imageItem, imageIndex) in zhenggaiqianzhaopianList"
                      :key="imageIndex"
                    >
                      <a-image
                        v-if="imageItem"
                        @click="handlerPreviewImage(imageIndex, imageItem)"
                        width="100px"
                        height="100px"
                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                        :preview="{
                          getContainer,
                        }"
                      />
                    </template>
                  </a-image-preview-group>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="现场照片-整改后">
                <div class="image-div">
                  <a-image-preview-group
                    :preview="{
                      getContainer: getContainer,
                      onVisibleChange: handlerImageChange,
                    }"
                  >
                    <template
                      v-for="(imageItem, imageIndex) in zhenggaihouzhaopianList"
                      :key="imageIndex"
                    >
                      <a-image
                        v-if="imageItem"
                        @click="handlerPreviewImage(imageIndex, imageItem)"
                        width="100px"
                        height="100px"
                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                        :preview="{
                          getContainer,
                        }"
                      />
                    </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 jiagongzhenggaifujianList" :key="itemIndex">
                    <a-image
                      v-if="showImage(item)"
                      style="width: 100px; height: 100px"
                      :src="`${VITE_GLOB_INFO_IMAGE_URL}/${item}`"
                      :preview="{ getContainer }"
                    />
                    <div v-else>
                      <Icon
                        v-if="item"
                        :style="`font-size: 30px; cursor: pointer;`"
                        icon="ion:document-attach-outline"
                        @click="downLoadFile(item)"
                      />
                      {{ item }}
                    </div>
                  </template>
                </a-image-preview-group>
              </a-descriptions-item>
              <a-descriptions-item label="整改确认人">{{
                caseInfo.zhenggairen_jgzhg
              }}</a-descriptions-item>
              <a-descriptions-item label="整改时间">{{
                caseInfo.zhenggaitime_jgzhg
              }}</a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
          <a-tab-pane key="10" tab="审核">
            <a-divider>县级审核</a-divider>
            <a-descriptions
              :column="2"
              bordered
              :contentStyle="{
                'text-align': 'center',
                'min-width': '250px',
                'word-break': 'break-all',
              }"
            >
              <a-descriptions-item label="审核结果">{{
                caseInfo.xianshenhejieguo_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核意见">{{
                caseInfo.xianbohuinote_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核人">{{
                caseInfo.xianshenheren_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核时间">{{
                caseInfo.xianshenhetime_fill
              }}</a-descriptions-item>
            </a-descriptions>
            <a-divider>市级审核</a-divider>
            <a-descriptions
              :column="2"
              bordered
              :contentStyle="{
                'text-align': 'center',
                'min-width': '250px',
                'word-break': 'break-all',
              }"
            >
              <a-descriptions-item label="审核结果">{{
                caseInfo.shishenhejieguo_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核意见">{{
                caseInfo.shibohuinote_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核人">{{
                caseInfo.shishenheren_fill
              }}</a-descriptions-item>
              <a-descriptions-item label="审核时间">{{
                caseInfo.shishenhetime_fill
              }}</a-descriptions-item>
            </a-descriptions>
          </a-tab-pane>
        </template>
      </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, ref, computed, onBeforeMount, onMounted } from 'vue';
  import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
  import { getConfig, getGeom } from '@/api/sys/layerManagement';
  import { getLoadCaseImgList } from '@/api/tiankongdi';
  import { useMessage } from '@/hooks/web/useMessage';
  import axios from 'axios';
  import Icon from '@/components/Icon/Icon.vue';
  import { getAppEnvConfig } from '@/utils/env';
  import { asyncGetOptions } from '@/utils/global';
  import { getCaseInfoById } from '@/api/minerals/index';

  const { createMessage } = useMessage();
  const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();

  const MapboxComponent = ref();
  const mapConfig = ref({});
  getConfig({ code: 'mapsetting' }).then((res) => {
    mapConfig.value = JSON.parse(res.codeValue);
  });

  const props = defineProps(['id']);
  const activeKey = ref('1');

  const geomsList = ref();
  const caseInfo: any = ref({});
  function getCaseInfo() {
    getCaseInfoById({ id: props.id }).then((res) => {
      console.log(res);
      caseInfo.value = res;
    });
  }
  onMounted(() => {
    getCaseInfo();
    getOptions();
  });
  const imageList = ref([]);
  async function getCaseImgList() {
    imageList.value = await getLoadCaseImgList({ caseid: props.id });

    // 匹配去除无效图片
    let zhengshiImageList = [];
    imageList.value?.forEach((item, index) => {
      let obj = anjianzhaopianList.value?.find((it, idx) => {
        return item.filePath == it;
      });
      if (obj) {
        zhengshiImageList.push(imageList.value[index]);
      }
    });

    // console.log("imageList",imageList.value);
    // console.log("anjianzhaopianList",anjianzhaopianList.value);
    // console.log("zhengshiImageList",zhengshiImageList);

    MapboxComponent.value.handlerLoadPictureAzimuth(zhengshiImageList);
  }

  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 {
    if (e && !isInitImageLisener.value) {
      setTimeout(function () {
        const targetNode = document.getElementsByClassName('ant-image-preview-img');
        // 创建一个观察器实例，并传入回调函数
        const observer = new MutationObserver((mutationsList) => {
          for (const mutation of mutationsList) {
            if (mutation.type === 'attributes') {
              if (targetNode[0].getAttribute(mutation.attributeName).match('http')) {
                handlerPreviewImage(0, targetNode[0].getAttribute(mutation.attributeName));
              }
            }
          }
        });
        // 配置观察选项
        const config = { attributes: true };
        // 开始观察目标节点
        observer.observe(targetNode[0], config);
        isInitImageLisener.value = true;
      }, 250);
    }
  }

  onBeforeMount(() => {});

  const anjianzhaopianList = computed(() => {
    getCaseImgList();
    return caseInfo.value.tubanpic_base ? caseInfo.value.tubanpic_base.split(',') : [];
  });
  const xianchangzhaopianList = computed(() => {
    return caseInfo.value.zhaopian_fill ? caseInfo.value.zhaopian_fill.split(',') : [];
  });
  const zhenggaizhaopianList = computed(() => {
    return caseInfo.value.zhaopian_reform ? caseInfo.value.zhaopian_reform.split(',') : [];
  });
  const zhenggaiqianzhaopianList = computed(() => {
    return caseInfo.value.zhaopianqian_jgzhg ? caseInfo.value.zhaopianqian_jgzhg.split(',') : [];
  });
  const zhenggaihouzhaopianList = computed(() => {
    return caseInfo.value.zhaopianhou_jgzhg ? caseInfo.value.zhaopianhou_jgzhg.split(',') : [];
  });

  const qitafujianList = computed(() => {
    return caseInfo.value.fujian ? caseInfo.value.fujian.split(',') : [];
  });
  const chufafujianList = computed(() => {
    return caseInfo.value.chufafile_punish ? caseInfo.value.chufafile_punish.split(',') : [];
  });
  const luoshidaoweiwenjianList = computed(() => {
    return caseInfo.value.luoshifile_punish ? caseInfo.value.luoshifile_punish.split(',') : [];
  });
  const zhenggaifujianList = computed(() => {
    return caseInfo.value.fujian_reform ? caseInfo.value.fujian_reform.split(',') : [];
  });
  const jiagongzhenggaifujianList = computed(() => {
    return caseInfo.value.fujian_jgzhg ? caseInfo.value.fujian_jgzhg.split(',') : [];
  });

  function onMapboxLoad() {
    changeTask();
  }
  const kcpandingjieguo = ref([]);
  const hefaqingxing = ref([]);
  const kaicaiweifa = ref([]);
  const zhutileixing = ref([]);
  const jiagongweifa = ref([]);
  async function getOptions() {
    kcpandingjieguo.value = await asyncGetOptions('kcpandingjieguo');
    hefaqingxing.value = await asyncGetOptions('hefaqingxing');
    kaicaiweifa.value = await asyncGetOptions('kaicaiweifa');
    zhutileixing.value = await asyncGetOptions('zhutileixing');
    jiagongweifa.value = await asyncGetOptions('jiagongweifa');
  }
  const getLabel = (type, value) => {
    let result: any[] = [];
    let label = '';
    switch (type) {
      case 'hefapanding_fill':
        result = kcpandingjieguo.value;
        break;
      case 'hefaqingxing_kcfill':
        result = hefaqingxing.value;
        break;
      case 'weifaleixing':
        result = kaicaiweifa.value;
        break;
      case 'zhutitype_kcfill':
        result = zhutileixing.value;
        break;
      case 'weifatype_jgfill':
        result = jiagongweifa.value;
        break;
    }
    result.forEach((item) => {
      if (item.value == value) {
        label = item.label;
      }
    });
    return label;
  };
  const getName = (value) => {
    let name = '';
    if (value == 1) {
      name = '是';
    } else if (value == 2) {
      name = '否';
    }
    return name;
  };
  async function changeTask() {
    let getGeomPrams = {
      TableName: 'drone_shp_data ',
      FieldName: 'gid',
      FieldValue: caseInfo.value.geomid?.split(','),
      page: 1,
      limit: 999,
      key: null,
    };
    if (caseInfo.value.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('当前数据没有图斑！');
    }
  }
  const downLoadFile = (url) => {
    if (url.indexOf('.pdf') !== -1) {
      axios({
        method: 'get',
        url: `${VITE_GLOB_INFO_IMAGE_URL}/${url}`,
        responseType: 'blob',
        headers: {
          'Content-Disposition': 'inline',
        },
      })
        .then((response) => {
          let blob = new Blob([response.data], { type: 'application/pdf' });
          let url = window.URL.createObjectURL(blob);
          window.open(url);
        })
        .catch((error) => {
          console.error(error);
        });
    } else {
      window.open(`${VITE_GLOB_INFO_IMAGE_URL}/${url}`, '_blank');
    }
  };
  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: 100vw;
    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>
