<template>
  <div class="detail-container">
    <div class="map-container">
      <MapboxMap
        :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="图斑编号">{{ case_no }}</a-descriptions-item>
            <a-descriptions-item label="图斑类型">{{ typename }}</a-descriptions-item>
            <a-descriptions-item label="县区">{{ countyname }}</a-descriptions-item>
            <a-descriptions-item label="乡镇">{{ streetname }}</a-descriptions-item>
            <a-descriptions-item label="社区/村">{{ communityname }}</a-descriptions-item>
            <a-descriptions-item label="图斑面积(亩)">{{
              dataProcessing(area)
            }}</a-descriptions-item>
            <a-descriptions-item label="农用地面积(亩)">{{
              dataProcessing(nongyongdi_area)
            }}</a-descriptions-item>
            <a-descriptions-item label="耕地面积(亩)">{{
              dataProcessing(gengdi_area)
            }}</a-descriptions-item>
            <a-descriptions-item label="永农面积(亩)">{{
              dataProcessing(yongjiujibennongtian_area)
            }}</a-descriptions-item>
            <!-- <a-descriptions-item label="占重点区域面积(亩)">{{ dataProcessing(zhongdianquyu_area) }}</a-descriptions-item> -->
            <a-descriptions-item label="占生态红线面积(亩)">{{
              dataProcessing(shengtaibaohuhongxian_area)
            }}</a-descriptions-item>
            <!-- <a-descriptions-item label="占空间规划面积(亩)">{{ dataProcessing(guotukongjianguihua_area) }}</a-descriptions-item> -->
            <a-descriptions-item label="图斑描述">{{ case_description }}</a-descriptions-item>
            <!-- <a-descriptions-item label="图斑地址">{{ address }}</a-descriptions-item> -->
            <a-descriptions-item label="备注">{{ remark }}</a-descriptions-item>
            <a-descriptions-item label="经度">{{ lng }}</a-descriptions-item>
            <a-descriptions-item label="纬度">{{ lat }}</a-descriptions-item>
            <a-descriptions-item label="下发时间">{{ createtime }}</a-descriptions-item>
            <a-descriptions-item label="图斑照片">
              <div class="image-div">
                <template v-for="(imageItem, imageIndex) in casepicList" :key="imageIndex">
                  <a-image
                    v-if="imageItem"
                    width="100px"
                    height="100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                    :preview="{
                      getContainer,
                    }"
                  ></a-image>
                </template>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="接收人">{{ jieshou_people }}</a-descriptions-item>
            <a-descriptions-item label="接收时间">{{ jieshou_time?.split('.')[0] }}</a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane
          key="2"
          v-if="!['建设用地', '推堆土'].includes(typename)"
          tab="线索填报"
          force-render
        >
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',
            }"
          >
            <a-descriptions-item label="判定结果">{{
              getLabel('is_illegal', is_illegal)
            }}</a-descriptions-item>
            <a-descriptions-item v-if="is_illegal == 1" label="项目名称">{{
              xiangmumc
            }}</a-descriptions-item>
            <a-descriptions-item v-if="is_illegal == 1" label="项目主体">{{
              xiangmuzhuti
            }}</a-descriptions-item>
            <a-descriptions-item v-if="is_illegal == 1" label="实际用途">{{
              actual_use_to
            }}</a-descriptions-item>
            <a-descriptions-item v-if="is_illegal == 1" label="违法类型">{{
              getLabel('weifaleixing', weifaleixing)
            }}</a-descriptions-item>
            <a-descriptions-item v-if="is_illegal == 1" label="附件">
              <template v-for="(item, itemIndex) in fujianList" :key="itemIndex">
                <div v-if="item" style="margin-top: 10px">
                  <Icon
                    :style="`font-size: 30px; cursor: pointer;`"
                    icon="ion:document-attach-outline"
                    @click="downLoadFile(item)"
                  />
                  {{ item }}
                </div>
              </template>
            </a-descriptions-item>
            <a-descriptions-item v-if="is_illegal == 0" label="附件">
              <template v-for="(item, itemIndex) in hefafujianList" :key="itemIndex">
                <div v-if="item" style="margin-top: 10px">
                  <Icon
                    :style="`font-size: 30px; cursor: pointer;`"
                    icon="ion:document-attach-outline"
                    @click="downLoadFile(item)"
                  />
                  {{ item }}
                </div>
              </template>
            </a-descriptions-item>
            <a-descriptions-item v-if="is_illegal == 2" label="实际用途">{{
              getLabel('qita_use_to', qita_use_to)
            }}</a-descriptions-item>
            <a-descriptions-item v-if="is_illegal == 2" label="附件">
              <template v-for="(item, itemIndex) in qitafujianList" :key="itemIndex">
                <div v-if="item" style="margin-top: 10px">
                  <Icon
                    :style="`font-size: 30px; cursor: pointer;`"
                    icon="ion:document-attach-outline"
                    @click="downLoadFile(item)"
                  />
                  {{ item }}
                </div>
              </template>
            </a-descriptions-item>
            <a-descriptions-item label="判定依据说明">{{
              pandingyijushuoming
            }}</a-descriptions-item>
            <a-descriptions-item label="照片">
              <div class="image-div">
                <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,
                    }"
                  ></a-image>
                </template>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="填报人">{{ examiner_name }}</a-descriptions-item>
            <a-descriptions-item label="填报时间">{{ examine_time }}</a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane
          key="3"
          tab="整改情况"
          v-if="weifaleixing == 0 && !['建设用地', '推堆土'].includes(typename)"
        >
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',
            }"
          >
            <a-descriptions-item label="整改措施">{{
              getLabel('measure_name', measure_name)
            }}</a-descriptions-item>
            <a-descriptions-item v-if="measure_name == 0" label="附件">
              <template v-for="(item, itemIndex) in yanshoubiaoList" :key="itemIndex">
                <div v-if="item">
                  <Icon
                    :style="`font-size: 30px; cursor: pointer;`"
                    icon="ion:document-attach-outline"
                    @click="downLoadFile(item)"
                  />
                  {{ item }}
                </div>
              </template>
            </a-descriptions-item>
            <a-descriptions-item v-if="measure_name == 0" label="照片">
              <div class="image-div">
                <template
                  v-for="(imageItem, imageIndex) in chaichufugenghoupicList"
                  :key="imageIndex"
                >
                  <a-image
                    v-if="imageItem"
                    width="100px"
                    height="100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                    :preview="{
                      getContainer,
                    }"
                  ></a-image>
                </template>
              </div>
            </a-descriptions-item>
            <a-descriptions-item v-if="measure_name == 1" label="附件">
              <template v-for="(item, itemIndex) in zhenggaifujianList" :key="itemIndex">
                <div v-if="item">
                  <Icon
                    :style="`font-size: 30px; cursor: pointer;`"
                    icon="ion:document-attach-outline"
                    @click="downLoadFile(item)"
                  />
                  {{ item }}
                </div>
              </template>
              <!-- {{ zhenggaifujian }} -->
            </a-descriptions-item>
            <a-descriptions-item v-if="measure_name == 1" label="照片">
              <div class="image-div">
                <template v-for="(imageItem, imageIndex) in bubanzhaopianList" :key="imageIndex">
                  <a-image
                    v-if="imageItem"
                    width="100px"
                    height="100px"
                    :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem}`"
                    :preview="{
                      getContainer,
                    }"
                  ></a-image>
                </template>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="办理人">{{ transactor_name }}</a-descriptions-item>
            <a-descriptions-item label="办理时间">{{ transact_time }}</a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="4" v-if="!['建设用地', '推堆土'].includes(typename)" tab="区县审核">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',
            }"
          >
            <a-descriptions-item label="审核人">{{ verifyuser }}</a-descriptions-item>
            <a-descriptions-item label="审核时间">{{ verifytime }}</a-descriptions-item>
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="5" v-if="!['建设用地', '推堆土'].includes(typename)" tab="市局审核">
          <a-descriptions
            :column="2"
            bordered
            :contentStyle="{
              'text-align': 'center',
              'min-width': '250px',
              'word-break': 'break-all',
            }"
          >
            <a-descriptions-item label="审核人">{{ hexiaoren }}</a-descriptions-item>
            <a-descriptions-item label="审核时间">{{ hexiaotime?.split('.')[0] }}</a-descriptions-item>
            <a-descriptions-item v-if="weifaleixing == 0" label="无人机复飞照片">
              <div class="image-div">
                <a-image-preview-group
                  :preview="{
                    getContainer:getContainer,
                  }"
                  >
                  <template v-for="(imageItem, imageIndex) in wrjffzhaopianList" :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 xchczhaopianList" :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>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, ref, computed } from 'vue';
  import MapboxMap from '@/components/MapboxMaps/MapComponent.vue';
  import { getConfig } from '@/api/sys/layerManagement';
  import { getGeom } from '@/api/sys/layerManagement';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  import Icon from '@/components/Icon/Icon.vue';
  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
  import {
    mapTypeOptions,
    illegalTypeOptions,
    measureOptions,
    mapStatusOptions,
    markTypeOptions,
    illegalTypeList,
    resultOptions,
    qitaUseTOOptions,
  } from '@/utils/global';

  console.log('');

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

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

  console.log('showInfoData123', props.showInfoData);
  const geomsList = ref();
  const {
    id,
    case_no,
    case_name,
    case_description,
    start_time,
    end_time,
    address,
    lng,
    lat,
    typeid,
    typename,
    handle_status_id,
    handle_status_name,
    case_status_i,
    case_status_name,
    createtime,
    createuser,
    drone_no,
    deal_userid,
    deal_username,
    createusername,
    is_delete,
    countyid,
    countyname,
    streetid,
    streetname,
    communityid,
    communityname,
    remark,
    is_closed,
    area,
    is_illegal,
    close_user,
    close_time,
    identification_user,
    identification_time,
    is_intact,
    close_userid,
    identification_userid,
    verifyuserid,
    verifyuser,
    verifytime,
    is_improve,
    improve_reason,
    is_dispense,
    dispense_userid,
    dispense_time,
    dispense_username,
    verifystatus,
    verifystatusname,
    is_checked,
    deal_time,
    is_drawback,
    examiner_id,
    examiner_name,
    examine_time,
    measure_name,
    casepic,
    opinion,
    result,
    result_name,
    opinion_name,
    handletime,
    handleuser,
    handleusername,
    is_assist,
    measure_name_deal,
    qita_use_to,
    illegal_contact,
    illegal_shenfenzhenghao,
    investigation_type,
    investigation_result,
    registr_number,
    is_build_complete,
    actual_use_to,
    transactor_id,
    transactor_name,
    transact_time,
    geomid,
    nongyongdi_area,
    gengdi_area,
    yongjiujibennongtian_area,
    zhongdianquyu_area,
    shengtaibaohuhongxian_area,
    guotukongjianguihua_area,
    fujian,
    hefafujian,
    qitafujian,
    jieshou_people,
    jieshou_time,
    pandingyijushuoming,
    xiangmumc,
    xiangmuzhuti,
    weifaleixing,
    yanshoubiao,
    zhenggaifujian,
    chaichufugenghoupic,
    bubanzhaopian,
    is_jieshou,
    anjianzhaopian,
    hexiaoren,
    hexiaotime,
    wrjffzhaopian,
    xchczhaopian,
  } = props.showInfoData;
  const anjianzhaopianList = computed(() => {
    return anjianzhaopian ? anjianzhaopian.split(',') : [];
  });
  const casepicList = computed(() => {
    return casepic ? casepic.split(',') : [];
  });
  const chaichufugenghoupicList = computed(() => {
    return chaichufugenghoupic ? chaichufugenghoupic.split(',') : [];
  });
  const bubanzhaopianList = computed(() => {
    return bubanzhaopian ? bubanzhaopian.split(',') : [];
  });
  const fujianList = computed(() => {
    return fujian ? fujian.split(',') : [];
  });
  const hefafujianList = computed(() => {
    return hefafujian ? hefafujian.split(',') : [];
  });
  const qitafujianList = computed(() => {
    return qitafujian ? qitafujian.split(',') : [];
  });
  const zhenggaifujianList = computed(() => {
    return zhenggaifujian ? zhenggaifujian.split(',') : [];
  });
  const yanshoubiaoList = computed(() => {
    return yanshoubiao ? yanshoubiao.split(',') : [];
  });
  const wrjffzhaopianList = computed(() => {
    return wrjffzhaopian ? wrjffzhaopian.split(',') : [];
  });
  const xchczhaopianList = computed(() => {
    return xchczhaopian ? xchczhaopian.split(',') : [];
  });

  function onMapboxLoad() {
    changeTask();
  }
  const getLabel = (type, value) => {
    let result: any[] = [];
    let label = '';
    switch (type) {
      case 'is_illegal':
        result = mapTypeOptions;
        break;
      case 'weifaleixing':
        result = illegalTypeList;
        break;
      case 'measure_name':
        result = measureOptions;
        break;
      case 'result_name':
        result = resultOptions;
        break;
      case 'qita_use_to':
        result = qitaUseTOOptions;
        break;
    }
    result.forEach((item) => {
      if (item.value == value) {
        label = item.label;
      }
    });
    return label;
  };
  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('当前数据没有图斑！');
    }
  }
  const downLoadFile = (url) => {
    window.open(`${VITE_GLOB_INFO_IMAGE_URL}/${url}`, 'mozillaTab');
  };
  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);
    }
  };
</script>

<style lang="scss" scoped>
  .image-div {
    min-width: 340px;
    max-height: 200px;
    overflow: auto;
  }
  .detail-container {
    width: 100vw;
    height: calc(100vh - 120px);
    display: flex;
  }
  .detail-container::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: none;
  }
  .map-container {
    float: left;
    width: 50vw;
    height: calc(100vh - 100px);
    margin-right: 20px;
  }
  .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;
        bottom: 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>
