<template>
  <div>
    <CollapseContainer title="【案件核查信息】" :canExpan="false">
      <a-descriptions bordered :column="1" size="small" :labelStyle="labelStyle">
        <a-descriptions-item label="核查人">{{
          caseHandlingData.createusername
        }}</a-descriptions-item>
        <a-descriptions-item label="核查时间">
          {{ caseHandlingData.createtime }}
        </a-descriptions-item>
        <a-descriptions-item label="是否违法">
          <span v-if="illegal == 0">合法</span>
          <span v-else-if="illegal == 1">违法</span>
          <span v-else-if="illegal == 2">伪变化</span>
        </a-descriptions-item>
        <a-descriptions-item label="现场照片">
          <div>
            <ImagePreview :imageList="imageList" />
          </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>
          </div>
        </a-descriptions-item>

        <a-descriptions-item label="处理措施" v-if="illegal == 1">
          {{ caseHandlingData.createtime }}
        </a-descriptions-item>

        <template v-if="illegal == 0">
          <a-descriptions-item label="项目名称">
            {{ caseHandlingData.result_name }}
          </a-descriptions-item>
          <a-descriptions-item label="建设情况">
            {{ caseHandlingData.actual_scene_case }}
          </a-descriptions-item>
          <a-descriptions-item label="建筑结构">
            {{ caseHandlingData.build_structure }}
          </a-descriptions-item>
          <a-descriptions-item label="实际用途">
            {{ caseHandlingData.actual_use_to }}
          </a-descriptions-item>
          <a-descriptions-item label="当事人">
            {{ caseHandlingData.illegal_contact }}
          </a-descriptions-item>
          <a-descriptions-item label="当事人电话">
            {{ caseHandlingData.illegal_contact_phone }}
          </a-descriptions-item>
        </template>
      </a-descriptions>
    </CollapseContainer>
    <CollapseContainer title="【案件办理信息-合法】" :canExpan="false" v-if="illegal == 0">
      <a-descriptions-item label="批准文件名称">
        {{ caseHandlingData.evidence_file_name }}
      </a-descriptions-item>
      <a-descriptions-item label="批准文件编号">
        {{ caseHandlingData.evidence_file_number }}
      </a-descriptions-item>
      <a-descriptions-item label="批准文件有效期">
        {{ caseHandlingData.evidence_file_indate }}
      </a-descriptions-item>
      <a-descriptions-item label="合法批准文件">
        <div>
          <ImagePreview :imageList="evidenceFileList" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="勘测定界图">
        <div>
          <ImagePreview :imageList="boundaryImageList" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="是否超范围">
        {{ caseHandlingData.is_out_boundary == 1 ? '是' : '否' }}
      </a-descriptions-item>
      <a-descriptions-item label="是否超层">
        {{ caseHandlingData.is_over_floor == 1 ? '是' : '否' }}
      </a-descriptions-item>
      <a-descriptions-item label="办理人">
        {{ caseHandlingData.transactor_name }}
      </a-descriptions-item>
      <a-descriptions-item label="办理时间">
        {{ caseHandlingData.transact_time }}
      </a-descriptions-item>
    </CollapseContainer>
    <CollapseContainer title="【案件办理信息-伪变化】" :canExpan="false" v-if="illegal == 2">
      <a-descriptions-item label="伪变化原因">
        {{ caseHandlingData.pseudo_change_reason }}
      </a-descriptions-item>
      <a-descriptions-item label="实际用途">
        {{ caseHandlingData.actual_use_to }}
      </a-descriptions-item>
      <a-descriptions-item label="实际面积">
        {{ caseHandlingData.actual_area }}
      </a-descriptions-item>
      <a-descriptions-item label="是否有建筑物">
        {{ caseHandlingData.is_have_build == 1 ? '是' : '否' }}
      </a-descriptions-item>
      <a-descriptions-item label="是否永久性建筑">
        {{ caseHandlingData.is_have_build == 1 ? '是' : '否' }}
      </a-descriptions-item>
      <a-descriptions-item label="办理人">
        {{ caseHandlingData.transactor_name }}
      </a-descriptions-item>
      <a-descriptions-item label="办理时间">
        {{ caseHandlingData.transact_time }}
      </a-descriptions-item>
    </CollapseContainer>
    <CollapseContainer
      title="【案件办理信息-拟拆除】"
      :canExpan="false"
      v-if="illegal == 1 && caseHandlingData.measure_name == '拟拆除'"
    >
      <a-descriptions-item label="实际用途">
        {{ caseHandlingData.actual_use_to }}
      </a-descriptions-item>
      <a-descriptions-item label="当事人">
        {{ caseHandlingData.illegal_contact }}
      </a-descriptions-item>
      <a-descriptions-item label="当事人电话">
        {{ caseHandlingData.illegal_contact_phone }}
      </a-descriptions-item>
      <a-descriptions-item label="建设情况">
        {{ caseHandlingData.is_build_complete == 1 ? '已建成' : '建设中' }}
      </a-descriptions-item>
      <a-descriptions-item label="建筑结构">
        {{ caseHandlingData.build_structure }}
      </a-descriptions-item>
      <a-descriptions-item label="拆除后照片">
        <div>
          <ImagePreview :imageList="afterImageList" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="办理人">
        {{ caseHandlingData.transactor_name }}
      </a-descriptions-item>
      <a-descriptions-item label="办理时间">
        {{ caseHandlingData.transact_time }}
      </a-descriptions-item>
    </CollapseContainer>
    <CollapseContainer
      title="【案件办理信息-查处】"
      :canExpan="false"
      v-if="illegal == 1 && caseHandlingData.measure_name == '查处'"
    >
      <a-descriptions-item label="实际用途">
        {{ caseHandlingData.actual_use_to }}
      </a-descriptions-item>
      <a-descriptions-item label="当事人">
        {{ caseHandlingData.illegal_contact }}
      </a-descriptions-item>
      <a-descriptions-item label="当事人电话">
        {{ caseHandlingData.illegal_contact_phone }}
      </a-descriptions-item>
      <a-descriptions-item label="身份证号码">
        {{ caseHandlingData.illegal_contact_idcard }}
      </a-descriptions-item>
      <a-descriptions-item label="违法类型">
        {{ caseHandlingData.illegal_type }}
      </a-descriptions-item>
      <a-descriptions-item label="立案号">
        {{ caseHandlingData.build_structure }}
      </a-descriptions-item>
      <a-descriptions-item label="处罚通知书">
        <div>
          <ImagePreview :imageList="punishImageList" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="交款通知书">
        <div>
          <ImagePreview :imageList="paymentImagesList" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="办理人">
        {{ caseHandlingData.transactor_name }}
      </a-descriptions-item>
      <a-descriptions-item label="办理时间">
        {{ caseHandlingData.transact_time }}
      </a-descriptions-item>
    </CollapseContainer>
    <CollapseContainer
      title="【案件办理信息-拟完善手续】"
      :canExpan="false"
      v-if="illegal == 1 && caseHandlingData.measure_name == '拟完善手续'"
    >
      <a-descriptions-item label="实际用途">
        {{ caseHandlingData.actual_use_to }}
      </a-descriptions-item>
      <a-descriptions-item label="当事人">
        {{ caseHandlingData.illegal_contact }}
      </a-descriptions-item>
      <a-descriptions-item label="当事人电话">
        {{ caseHandlingData.illegal_contact_phone }}
      </a-descriptions-item>
      <a-descriptions-item label="拟完善手续名称">
        {{ caseHandlingData.result_name }}
      </a-descriptions-item>
      <a-descriptions-item label="完善手续条件">
        {{ caseHandlingData.is_have_checkout_condition == 1 ? '是' : '否' }}
      </a-descriptions-item>
      <a-descriptions-item label="违法类型">
        {{ caseHandlingData.illegal_type }}
      </a-descriptions-item>

      <a-descriptions-item label="政府同意完善手续证明">
        <div>
          <ImagePreview :imageList="agreeImageList" />
        </div>
      </a-descriptions-item>

      <a-descriptions-item label="办理手续照片">
        <div>
          <ImagePreview :imageList="checkoutImageList" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="勘测定界图">
        <div>
          <ImagePreview :imageList="boundaryImageList" />
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="手续有效期">
        {{ caseHandlingData.procedure_indate }}
      </a-descriptions-item>
      <a-descriptions-item label="办理人">
        {{ caseHandlingData.transactor_name }}
      </a-descriptions-item>
      <a-descriptions-item label="办理时间">
        {{ caseHandlingData.transact_time }}
      </a-descriptions-item>
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, watch, ref , onMounted} from 'vue';
  import { ImagePreview } from '@/components/Preview';
  import { CollapseContainer } from '@/components/Container';
  import { caseHandleInfoObj } from '../model';
  import { getDroneCaseDeal } from '@/api/monitor/index'
  const illegal = ref(0);
  const labelStyle = ref({
    width: '100px',
  });
  const caseHandlingData = ref({});
  const playerOptions = ref([]);
  const imageList = ref([
    'https://picsum.photos/id/66/346/216',
    'https://picsum.photos/id/67/346/216',
    'https://picsum.photos/id/68/346/216',
  ]);
  const evidenceFileList = ref([
    'https://picsum.photos/id/66/346/216',
    'https://picsum.photos/id/67/346/216',
    'https://picsum.photos/id/68/346/216',
  ]);
  const boundaryImageList = ref([
    'https://picsum.photos/id/66/346/216',
    'https://picsum.photos/id/67/346/216',
    'https://picsum.photos/id/68/346/216',
  ]);
  const afterImageList = ref([
    'https://picsum.photos/id/66/346/216',
    'https://picsum.photos/id/67/346/216',
    'https://picsum.photos/id/68/346/216',
  ]);
  const punishImageList = ref([]);
  const paymentImagesList = ref([]);
  const agreeImageList = ref([]);
  const checkoutImageList = ref([]);

  const props = defineProps({
    id: String
  });
  watch(
    () => props.id,
    (newVal, oldVal) => {
      getCaseHandlingDetail()
    },
  );
  onMounted(() => {
    getCaseHandlingDetail();
  });
  async function getCaseHandlingDetail() {
    const data = await getDroneCaseDeal({ caseid: props.id });
    illegal.value = data.is_illegal;
    caseHandlingData.value = data.info;
    imageList.value = [];
    if (data.pic_info_list.length > 0) {
      data.pic_info_list.forEach((item) => {
        item.s_filePath = BASE_IMAGE_URL + '/S_' + item.filePath;
        item.filePath = BASE_IMAGE_URL + '/' + item.filePath;
        imageList.value.push(item);
      });
    }

    afterImageList.value = [];
    if (data.after_pic_list.length > 0) {
      data.after_pic_list.forEach((item) => {
        item.s_filePath = BASE_IMAGE_URL + '/S_' + item.filePath;
        item.filePath = BASE_IMAGE_URL + '/' + item.filePath;
        afterImageList.value.push(item);
      });
    }

    // 证明材料
    evidenceFileList.value = [];
    if (data.evidence_file_list.length > 0) {
      data.evidence_file_list.forEach((item) => {
        item.s_filePath = BASE_IMAGE_URL + '/S_' + item.filePath;
        item.filePath = BASE_IMAGE_URL + '/' + item.filePath;
        evidenceFileList.value.push(item);
      });
    }
    // 罚款通知书
    if (data.punish_pic_list.length > 0) {
     punishImageList.value = this.handleImageArray(data.punish_pic_list);
    }
    // 交款通知单
    if (data.payment_pic_list.length > 0) {
      paymentImagesList.value = this.handleImageArray(data.payment_pic_list);
    }
    // 政府同意证明
    if (data.agree_checkout_pic_list.length > 0) {
     agreeImageList.value = this.handleImageArray(data.agree_checkout_pic_list);
    }
    // 办理手续
    if (data.checkout_pic_list.length > 0) {
      checkoutImageList.value = this.handleImageArray(data.checkout_pic_list);
    }

    // 勘测定界照片
    if (data.boundary_pic_list.length > 0) {
     boundaryImageList.value = this.handleImageArray(data.boundary_pic_list);
    }

    playerOptions.value = [];
    if (data.video_list.length > 0) {
      data.video_list.forEach((item, index) => {
        let options = {
          playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
              type: '',
              src: BASE_IMAGE_URL + '/' + item, //url地址
            },
          ],
          poster: '', //你的封面地址
          // width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, //当前时间和持续时间的分隔符
            durationDisplay: true, //显示持续时间
            remainingTimeDisplay: false, //是否显示剩余时间功能
            fullscreenToggle: true, //全屏按钮
          },
        };
        playerOptions.value.push(options);
      });
    
    }
  }
</script>
<style lang="less" scoped>
  ::v-deep .ant-image .ant-image-img {
    width: 85px;
    margin-bottom: 10px;
  }
</style>
