<template>
  <a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
    <a-descriptions-item label="核查人">{{ caseConductInfo.examiner_name }}</a-descriptions-item>
    <a-descriptions-item label="核查时间">
      {{ caseConductInfo.examine_time }}
    </a-descriptions-item>
    <a-descriptions-item label="处理进度">
      {{ detailDataInfo.verifystatusname }}
    </a-descriptions-item>
    <a-descriptions-item label="是否违法">
      {{ caseHandleInfo.is_illegal }}
    </a-descriptions-item>
    <a-descriptions-item label="处理措施" v-if="caseHandleInfo.is_illegal == '是'">
      {{ caseConductInfo.measure_name }}
    </a-descriptions-item>

    <!-- 合法 -->
    <a-descriptions-item label="项目名称" v-if="caseHandleInfo.is_illegal == '合法'">
      {{ caseConductInfo.result_name }}
    </a-descriptions-item>
    <a-descriptions-item label="当事人" v-if="caseHandleInfo.is_illegal == '合法'">
      {{ caseConductInfo.contacts_people }}
    </a-descriptions-item>
    <a-descriptions-item label="联系电话" v-if="caseHandleInfo.is_illegal == '合法'">
      {{ caseConductInfo.contacts_phone }}
    </a-descriptions-item>
    <a-descriptions-item label="建设情况" v-if="caseHandleInfo.is_illegal == '合法'">
      {{ caseConductInfo.actual_scene_case }}
    </a-descriptions-item>
    <a-descriptions-item label="实际用途" v-if="caseHandleInfo.is_illegal == '合法'">
      {{ caseConductInfo.actual_use_to }}
    </a-descriptions-item>

    <!-- 伪变化 -->
    <a-descriptions-item label="伪变化原因" v-if="caseHandleInfo.is_illegal == '伪变化'">
      {{ caseConductInfo.pseudo_change_reason }}
    </a-descriptions-item>
    <a-descriptions-item label="实际用途" v-if="caseHandleInfo.is_illegal == '伪变化'">
      {{ caseConductInfo.actual_use_to }}
    </a-descriptions-item>
    <a-descriptions-item label="实际面积" v-if="caseHandleInfo.is_illegal == '伪变化'">
      {{ caseConductInfo.actual_area }}
    </a-descriptions-item>
    <a-descriptions-item label="是否有建筑物" v-if="caseHandleInfo.is_illegal == '伪变化'">
      {{ caseConductInfo.is_have_build == 1 ? '是' : '否' }}
    </a-descriptions-item>
    <a-descriptions-item label="是否永久性建筑" v-if="caseHandleInfo.is_illegal == '伪变化'">
      {{ caseConductInfo.is_forever_build == 1 ? '是' : '否' }}
    </a-descriptions-item>

    <!-- 案件违法 - 拆除 -->
    <a-descriptions-item
      label="处理办法"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟拆除'"
    >
      {{ caseConductInfo.measure_name }}
    </a-descriptions-item>
    <a-descriptions-item
      label="实际用途"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟拆除'"
    >
      {{ caseConductInfo.actual_use_to }}
    </a-descriptions-item>
    <a-descriptions-item
      label="当事人"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟拆除'"
    >
      {{ caseConductInfo.illegal_contact }}
    </a-descriptions-item>
    <a-descriptions-item
      label="联系电话"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟拆除'"
    >
      {{ caseConductInfo.illegal_contact_phone }}
    </a-descriptions-item>
    <a-descriptions-item
      label="建设情况"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟拆除'"
    >
      {{ caseConductInfo.is_build_complete == 1 ? '已建成' : '建设中' }}
    </a-descriptions-item>
    <a-descriptions-item
      label="建筑结构"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟拆除'"
    >
      {{ caseConductInfo.build_structure }}
    </a-descriptions-item>

    <!-- 案件违法 查处 -->
    <a-descriptions-item
      label="处理办法"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '查处'"
    >
      {{ caseConductInfo.measure_name }}
    </a-descriptions-item>
    <a-descriptions-item
      label="实际用途"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '查处'"
    >
      {{ caseConductInfo.actual_use_to }}
    </a-descriptions-item>
    <a-descriptions-item
      label="当事人"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '查处'"
    >
      {{ caseConductInfo.illegal_contact }}
    </a-descriptions-item>
    <a-descriptions-item
      label="联系电话"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '查处'"
    >
      {{ caseConductInfo.illegal_contact_phone }}
    </a-descriptions-item>
    <a-descriptions-item
      label="建筑结构"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '查处'"
    >
      {{ caseConductInfo.build_structure }}
    </a-descriptions-item>
    <a-descriptions-item
      label="违法类型"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '查处'"
    >
      {{ caseConductInfo.illegal_type }}
    </a-descriptions-item>

    <!-- 案件违法 完善手续 -->
    <a-descriptions-item
      label="处理办法"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟完善手续'"
    >
      {{ caseConductInfo.measure_name }}
    </a-descriptions-item>
    <a-descriptions-item
      label="实际用途"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟完善手续'"
    >
      {{ caseConductInfo.actual_use_to }}
    </a-descriptions-item>
    <a-descriptions-item
      label="当事人"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟完善手续'"
    >
      {{ caseConductInfo.illegal_contact }}
    </a-descriptions-item>
    <a-descriptions-item
      label="联系电话"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟完善手续'"
    >
      {{ caseConductInfo.illegal_contact_phone }}
    </a-descriptions-item>
    <a-descriptions-item
      label="拟完善手续名称"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟完善手续'"
    >
      {{ caseConductInfo.result_name }}
    </a-descriptions-item>
    <a-descriptions-item
      label="是否具备完善手续条件"
      v-if="caseHandleInfo.is_illegal == '违法' && caseConductInfo.measure_name == '拟完善手续'"
    >
      {{ caseConductInfo.is_have_checkout_condition == 1 ? '是' : '否' }}
    </a-descriptions-item>

    <a-descriptions-item label="备注">
      {{ caseConductInfo.remark }}
    </a-descriptions-item>

    <a-descriptions-item label="现场照片">
      <div v-if="threadImage.length > 0">
        <ImagePreview :imageList="threadImage" />
      </div>
      <div v-else>暂无现场照片</div>
    </a-descriptions-item>
    <a-descriptions-item label="现场视频">
      <div v-if="playerOptions.length > 0">
        <!-- <video-player
          class="video-player vjs-custom-skin"
          v-for="(item, index) in playerOptions"
          :key="index"
          ref="videoPlayer"
          :playsinline="true"
          :options="item"
          style="width: 200px"
        ></video-player> -->
        <!-- <video v-for="(item, index) in videoOptions" :src="item.sources[0].src" style="width: 200px"></video> -->
        <video
          ref="videoPlayer"
          class="video-js vjs-default-skin"
          controls
          preload="auto"
          width="1024"
          v-for="(item, index) in videoOptions"
          :key="index"
          style="width: 200px"
        >
          <source :src="item.sources[0].src" type="video/mp4" />
        </video>
      </div>
      <div v-else>暂无现场视频</div>
    </a-descriptions-item>
  </a-descriptions>
</template>
<script lang="ts" setup>
  import { watch, ref } from 'vue';
  import { ImagePreview } from '@/components/Preview';
  import { caseHandleInfoObj, infoObj } from '../model';
  import { videoPlayer } from 'vue-video-player/src';
  import 'vue-video-player/src/custom-theme.css';

  const labelStyle = ref({
    width: '100px',
  });
  const caseHandleInfo = ref<caseHandleInfoObj>({
    info: {},
  });
  const caseConductInfo = ref<infoObj>({});
  const detailData = ref({});
  const detailDataInfo = ref<infoObj>({});
  const videoOptions: any = ref([]);
  const threadImage: any = ref([]);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    detail: {
      type: Object,
      default: () => {
        return {};
      },
    },
    playerOptions: {
      type: Object,
      default: () => {
        return {};
      },
    },
    threadImageList: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  caseHandleInfo.value = props.data;
  caseConductInfo.value = props.data.info;
  detailData.value = props.detail;
  detailDataInfo.value = props.detail.info;
  videoOptions.value = props.playerOptions;
  threadImage.value = props.threadImageList;

  watch(
    () => props.data,
    (newVal) => {
      caseHandleInfo.value = newVal;
      caseConductInfo.value = newVal.info;
      detailData.value = props.detail;
      detailDataInfo.value = props.detail.info;
      videoOptions.value = props.playerOptions;
      threadImage.value = props.threadImageList;
    },
  );
</script>
<style lang="less" scoped>
  ::v-deep .ant-image .ant-image-img {
    width: 100px;
    margin-bottom: 10px;
  }
</style>
