<template>
  <a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
    <a-descriptions-item label="线索编号">{{ caseDetail.case_no }}</a-descriptions-item>
    <a-descriptions-item label="上报人">
      {{ caseDetail.identification_user }}
    </a-descriptions-item>
    <a-descriptions-item label="上报时间">
      {{ caseDetail.identification_time }}
    </a-descriptions-item>
    <a-descriptions-item label="线索状态">
      <a-tag color="warning" v-if="caseDetail.handle_status_id == 0">
        {{ caseDetail.handle_status_name }}
      </a-tag>
      <a-tag color="processing" v-else-if="caseDetail.handle_status_id == 1">
        {{ caseDetail.handle_status_name }}
      </a-tag>
      <a-tag color="success" v-else>{{ caseDetail.handle_status_name }}</a-tag>
    </a-descriptions-item>
    <a-descriptions-item label="行政区划">
      /&nbsp;{{ caseDetail.countyname }}&nbsp;/&nbsp;{{ caseDetail.streetname }}&nbsp; / &nbsp;{{
        caseDetail.communityname
      }}
    </a-descriptions-item>
    <a-descriptions-item label="线索地址">{{ caseDetail.address }}</a-descriptions-item>
    <a-descriptions-item label="经纬度"
      >{{ caseDetail.lng }} , {{ caseDetail.lat }}</a-descriptions-item
    >
    <a-descriptions-item label="线索地址">{{ caseDetail.area }}&nbsp;(m²)</a-descriptions-item>
    <a-descriptions-item label="线索类型">{{ caseDetail.typename }}</a-descriptions-item>
    <a-descriptions-item label="线索备注">{{ caseDetail.remark }}</a-descriptions-item>
    <a-descriptions-item label="线索描述">{{ caseDetail.case_description }}</a-descriptions-item>

    <a-descriptions-item label="线索图片">
      <div>
        <ImagePreview :imageList="imgList" />
      </div>
    </a-descriptions-item>
  </a-descriptions>
</template>
<script lang="ts" setup>
  import { reactive, watch, ref } from 'vue';
  import { ImagePreview } from '@/components/Preview';
  import { DetailModel, caseDetailObj } from '../model';
  const labelStyle = ref({
    width: '100px',
  });
  const caseDetail = ref<caseDetailObj>({});
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  if(Object.keys(props.data).length != 0){
    caseDetail.value = props.data.info;
  }
  const imgList = ref([
    'https://picsum.photos/id/66/346/216',
    'https://picsum.photos/id/67/346/216',
    'https://picsum.photos/id/68/346/216',
  ]);

  watch(
    () => props.data,
    (newVal, oldVal) => {
      caseDetail.value = newVal.info;
    },
  );
</script>
<style lang="less" scoped>
  ::v-deep .ant-image .ant-image-img {
    width: 85px;
    margin-bottom: 10px;
  }
</style>
