<template>
  <div class="case-view">
    <div class="case-view_step">
      <a-steps v-model:current="current" type="navigation" size="small" :style="stepStyle">
        <a-step
          v-for="(item, index) in flowLog"
          :key="index"
          :title="item.name"
          :status="item.state"
          :disabled="item.status == 0 ? true : false"
        />
      </a-steps>
    </div>
    <div class="case-view_content">
      <div class="file-box w-1/2 xl:w-1/2" v-if="caseHandleInfo">
        <CollapseContainer
          title="【图斑下发信息】"
          :canExpan="false"
          v-if="current == 0 || current == 4"
        >
          <Issue :data="detailData"></Issue>
        </CollapseContainer>

        <CollapseContainer
          title="【图斑核查信息】"
          :canExpan="false"
          v-if="current == 1 || current == 4"
        >
          <Inspect
            :data="caseHandleInfo"
            :playerOptions="playerOptions"
            :threadImageList="threadImageList"
          ></Inspect>
        </CollapseContainer>

        <CollapseContainer
          title="【图斑办理信息-合法举证】"
          :canExpan="false"
          v-if="
            (caseHandleInfo.is_illegal == '合法' && current == 2) ||
            (caseHandleInfo.is_illegal == '合法' && current == 4)
          "
        >
          <Evidence
            :data="caseHandleInfo"
            :evidenceFileList="evidenceFileList"
            :boundaryImageList="boundaryImageList"
          ></Evidence>
        </CollapseContainer>

        <CollapseContainer
          title="【图斑办理信息-伪变化】"
          :canExpan="false"
          v-if="
            (caseHandleInfo.is_illegal == '伪变化' && current == 2) ||
            (caseHandleInfo.is_illegal == '伪变化' && current == 4)
          "
        >
          <div> 伪变化没有图斑办理信息 </div>
        </CollapseContainer>

        <CollapseContainer
          title="【图斑办理信息-违法-拟拆除】"
          :canExpan="false"
          v-if="
            (caseHandleInfo.is_illegal == '违法' &&
              caseHandleInfo.info.measure_name == '拟拆除' &&
              current == 2) ||
            (caseHandleInfo.is_illegal == '违法' &&
              caseHandleInfo.info.measure_name == '拟拆除' &&
              current == 4)
          "
        >
          <Dismantle :data="caseHandleInfo" :videoOptions="videoOptions"></Dismantle>
        </CollapseContainer>

        <CollapseContainer
          title="【图斑办理信息-违法-查处】"
          :canExpan="false"
          v-if="
            (caseHandleInfo.is_illegal == '违法' &&
              caseHandleInfo.info.measure_name == '查处' &&
              current == 2) ||
            (caseHandleInfo.is_illegal == '违法' &&
              caseHandleInfo.info.measure_name == '查处' &&
              current == 4)
          "
        >
          <Investigate
            :data="caseHandleInfo"
            :paymentImageList="paymentImageList"
            :punishImageList="punishImageList"
          ></Investigate>
        </CollapseContainer>

        <CollapseContainer
          title="【图斑办理信息-违法-拟完善手续】"
          :canExpan="false"
          v-if="
            (caseHandleInfo.is_illegal == '违法' &&
              caseHandleInfo.info.measure_name == '拟完善手续' &&
              current == 2) ||
            (caseHandleInfo.is_illegal == '违法' &&
              caseHandleInfo.info.measure_name == '拟完善手续' &&
              current == 4)
          "
        >
          <Procedure
            :data="caseHandleInfo"
            :agreeImageList="agreeImageList"
            :checkoutImageList="checkoutImageList"
            :boundaryImageList="boundaryImageList"
          ></Procedure>
        </CollapseContainer>

        <CollapseContainer
          title="【图斑审核信息】"
          :canExpan="false"
          v-if="current == 3 || current == 4"
        >
          <Audit :data="flowLog[3]"></Audit>
        </CollapseContainer>

        <CollapseContainer
          title="【图斑退回描述】"
          :canExpan="false"
          v-if="detailData.is_drawback == 1"
        >
          <a-descriptions bordered :column="2" size="small" :labelStyle="labelStyle">
            <a-descriptions-item label="退回描述">
              {{ detailData.drawback_description }}
            </a-descriptions-item>
          </a-descriptions>
        </CollapseContainer>
      </div>
      <CollapseContainer title="地图位置" :canExpan="false" class="map-box ml-1 w-1/2 xl:w-1/2">
        <MapDetail :ruleForm="detailData" :isOnce="true"></MapDetail>
      </CollapseContainer>
    </div>
  </div>
</template>
<script lang="ts" setup>
  // 已归档 202205020912205393
  // 拟拆除 202404181541067344
  import { ref, onMounted, reactive, watch } from 'vue';
  import { getCaseFlowLog, getCaseInfo, getDroneCaseDeal } from '@/api/monitor/index';
  import { fileListModel, fileList } from '@/api/monitor/model/index';
  import { CollapseContainer } from '@/components/Container';
  import {
    Issue,
    Inspect,
    Audit,
    Dismantle,
    MapDetail,
    Evidence,
    Investigate,
    Procedure,
  } from '../index';
  const BASE_IMAGE_URL = ref('http://192.168.104:9011');
  const current = ref<number>(0);
  const stepStyle = ref({
    marginBottom: '60px',
    boxShadow: '0px -1px 0 0 #e8e8e8 inset',
  });
  const labelStyle = ref({
    width: '100px',
  });
  const props = defineProps({
    caseId: String,
  });
  console.log(props);
  watch(
    () => props.caseId,
    (newVal, oldVal) => {
      console.log(newVal);
      getCaseFlowLogData();
      loadDetailCaseInfo();
      getCaseHandleInfo();
    },
  );
  const detailData = ref();
  const caseHandleInfo = ref();
  const playerOptions = ref();
  //现场照片
  const threadImageList = ref<fileListModel>([]);
  // 整改后、处理后照片
  const threadAfterImageList = ref<any>([]);
  //   视频
  const videoOptions = ref();
  //合法举证材料列表
  const evidenceFileList = ref<fileListModel>([]);
  //   勘测定界图
  const boundaryImageList = ref<fileListModel>([]);
  //处罚通知书照片
  const punishImageList = ref<fileListModel>([]);
  //交罚款通知书照片
  const paymentImageList = ref<fileListModel>([]);
  //政府同意完善手续证明照片
  const agreeImageList = ref<fileListModel>([]);
  //办理手续证明照片
  const checkoutImageList = ref<fileListModel>([]);

  const flowLog = ref();
  //   获取步骤条数据
  async function getCaseFlowLogData() {
    current.value = 0;
    const data = await getCaseFlowLog({ id: props.caseId });
    flowLog.value = data;
    if (flowLog.value.length == 4 && flowLog.value[1].status == 1) {
      let obj = {
        name: '伪变化',
        status: 1,
        time: '',
        state: 'finish',
        user_name: '',
      };
      flowLog.value.splice(2, 0, obj);
    }
    current.value = 0;
    flowLog.value.forEach((item, index) => {
      current.value = current.value + item.status;
      if (flowLog.value[index].status == 1) {
        flowLog.value[index].state = 'finish';
      } else {
        flowLog.value[index].state = 'wait';
      }
    });
    if (current.value != 0) {
      current.value--;
    }
  }
  //   获取详情
  async function loadDetailCaseInfo() {
    const data = await getCaseInfo({ id: props.caseId });
    console.log(data);
    detailData.value = data;
  }
  //   获取处理详情
  async function getCaseHandleInfo() {
    const data = await getDroneCaseDeal({ caseid: props.caseId });
    console.log(data);
    caseHandleInfo.value = data;
    if (caseHandleInfo.value.is_illegal == 0) {
      caseHandleInfo.value.is_illegal = '合法';
    } else if (caseHandleInfo.value.is_illegal == 1) {
      caseHandleInfo.value.is_illegal = '违法';
    } else if (caseHandleInfo.value.is_illegal == 2) {
      caseHandleInfo.value.is_illegal = '伪变化';
    }
    // 视频
    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);
      });
    }
    // 现场照片
    if (data.pic_info_list.length > 0) {
      data.pic_info_list.forEach((item) => {
        threadImageList.value.push(item.filePath);
      });
      for (let i = 0; i < threadImageList.value.length; i++) {
        let obj = {
          filePath: BASE_IMAGE_URL + '/' + threadImageList.value[i],
          s_filePath: BASE_IMAGE_URL + '/S_' + threadImageList.value[i],
        };
        threadImageList.value[i] = obj;
      }
    }

    // 处理后照片 整改后照片 恢复后照片
    if (data.after_pic_list.length > 0) {
      threadAfterImageList.value = [];
      data.after_pic_list.forEach((item: fileList) => {
        threadAfterImageList.value.push(BASE_IMAGE_URL + '/S_' + item.filePath);
      });
    }

    // 处理后视频
    videoOptions.value = [];
    if (data.remove_video_list.length > 0) {
      videoOptions.value = [];
      data.remove_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, //全屏按钮
          },
        };
        videoOptions.value.push(options);
      });
    }
    // 合法 - 举证材料合法文件  evidence_file_list
    if (data.evidence_file_list.length > 0) {
      evidenceFileList.value = [];
      data.evidence_file_list.forEach((item: fileList) => {
        let obj = {
          filePath: BASE_IMAGE_URL + '/' + item.filePath,
          s_filePath: BASE_IMAGE_URL + '/' + item.filePath,
        };
        evidenceFileList.value.push(obj);
      });
    }

    if (data.boundary_pic_list.length > 0) {
      boundaryImageList.value = [];
      data.boundary_pic_list.forEach((item) => {
        let obj = {
          filePath: BASE_IMAGE_URL + '/' + item,
          s_filePath: BASE_IMAGE_URL + '/' + item,
        };
        boundaryImageList.value.push(obj);
      });
    }

    // 违法 查处 - 处罚通知书 punish_pic_list
    if (data.punish_pic_list.length > 0) {
      punishImageList.value = [];
      data.punish_pic_list.forEach((item) => {
        let obj = {
          filePath: BASE_IMAGE_URL + '/' + item,
          s_filePath: BASE_IMAGE_URL + '/S_' + item,
        };
        punishImageList.value.push(obj);
      });
    }

    // 违法 查处 - 交款通知书 payment_pic_list
    if (data.payment_pic_list.length > 0) {
      paymentImageList.value = [];
      data.payment_pic_list.forEach((item) => {
        let obj = {
          filePath: BASE_IMAGE_URL + '/' + item,
          s_filePath: BASE_IMAGE_URL + '/S_' + item,
        };
        paymentImageList.value.push(obj);
      });
    }

    // 违法 完善手续 - 政府同意完善手续证明 agree_checkout_pic_list
    if (data.agree_checkout_pic_list.length > 0) {
      agreeImageList.value = [];
      data.agree_checkout_pic_list.forEach((item) => {
        let obj = {
          filePath: BASE_IMAGE_URL + '/' + item,
          s_filePath: BASE_IMAGE_URL + '/S_' + item,
        };
        agreeImageList.value.push(obj);
      });
    }

    // 违法 完善手续 - 办理手续 checkout_pic_list
    if (data.checkout_pic_list.length > 0) {
      checkoutImageList.value = [];
      data.checkout_pic_list.forEach((item) => {
        let obj = {
          filePath: BASE_IMAGE_URL + '/' + item,
          s_filePath: BASE_IMAGE_URL + '/S_' + item,
        };
        checkoutImageList.value.push(obj);
      });
    }
  }

  onMounted(() => {
    getCaseFlowLogData();
    loadDetailCaseInfo();
    getCaseHandleInfo();
  });
</script>
<style lang="less" scoped>
  .case-view {
    padding: 20px 32px;
    background-color: @component-background;

    &__step {
      padding: 24px 40px;
      background-color: @app-content-background;
    }
    &_content {
      display: flex;
      height: 65vh;
      .file-box {
        overflow: auto;
      }
    }
  }
  .map-box {
    height: 100%;
  }
</style>
