<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :useWrapper="false"
    :canFullscreen="false"
    :defaultFullscreen="true"
    :showCancelBtn="false"
    :showOkBtn="false"
    :centered="true"
    :draggable="false"
    title="案件详情"
    @cancel="closeModalClick"
  >
    <div class="form-box">
      <div>
        <a-steps
          v-model:current="current"
          type="navigation"
          size="small"
          status="finish"
          :items="flowLog"
          @change="changeSteps"
        />
        <a-row>
          <!-- 左侧信息 -->
          <a-col :span="props.isShowMap ? 14 : 24" style="height: 100%; overflow-y: auto">
            <!-- 下发：【案件下发信息】 -->
            <a-divider orientation="left" v-if="speed == 1 || speed == 5">
              【案件下发信息】
            </a-divider>
            <a-descriptions
              v-if="speed == 1 || speed == 5"
              class="margin-top"
              :column="2"
              bordered
              size="small"
            >
              <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="error" 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="案件图片">
                <!-- <a-image
                  v-show="imageList.length > 0"
                  v-for="(item, index) in imageList"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :key="index"
                  :src="item.filePath"
                  :preview="{
                    src: 'item.filePath',
                  }"
                /> -->
                <ImagePreview :imageList="imageList" />
              </a-descriptions-item>
            </a-descriptions>

            <!-- 核查：【案件核查信息】 -->
            <a-divider orientation="left" v-if="speed == 2 || speed == 5">
              【案件核查信息】
            </a-divider>
            <a-descriptions
              v-if="speed == 2 || speed == 5"
              class="margin-top"
              :column="2"
              bordered
              size="small"
            >
              <a-descriptions-item label="核查人">
                {{ caseHandleInfo.info.createusername }}
              </a-descriptions-item>
              <a-descriptions-item label="核查时间">
                {{ caseHandleInfo.info.createtime }}
              </a-descriptions-item>
              <a-descriptions-item label="处理进度">
                {{ caseDetail.verifystatusname }}
              </a-descriptions-item>
              <a-descriptions-item label="是否违法">
                {{ caseHandleInfo.is_illegal }}
              </a-descriptions-item>
              <a-descriptions-item label="处理措施" v-if="caseHandleInfo.is_illegal == '是'">
                {{ caseHandleInfo.info.measure_name }}
              </a-descriptions-item>

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

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

              <!-- 案件违法 - 拆除 -->
              <a-descriptions-item
                label="处理办法"
                v-if="
                  caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除'
                "
                >{{ caseHandleInfo.info.measure_name }}
              </a-descriptions-item>
              <a-descriptions-item
                label="实际用途"
                v-if="
                  caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除'
                "
              >
                {{ caseHandleInfo.info.actual_use_to }}
              </a-descriptions-item>

              <a-descriptions-item
                label="当事人"
                v-if="
                  caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除'
                "
              >
                {{ caseHandleInfo.info.illegal_contact }}
              </a-descriptions-item>
              <a-descriptions-item
                label="联系电话"
                v-if="
                  caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除'
                "
              >
                {{ caseHandleInfo.info.illegal_contact_phone }}
              </a-descriptions-item>
              <a-descriptions-item
                label="建设情况"
                v-if="
                  caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除'
                "
              >
                {{ caseHandleInfo.info.is_build_complete == 1 ? '已建成' : '建设中' }}
              </a-descriptions-item>
              <a-descriptions-item
                label="建筑结构"
                v-if="
                  caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除'
                "
              >
                {{ caseHandleInfo.info.build_structure }}
              </a-descriptions-item>

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

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

              <a-descriptions-item label="现场照片">
                <!-- <a-image
                  v-show="threadImageList.length > 0"
                  v-for="(item, index) in threadImageList"
                  :key="index"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :src="item.s_filePath"
                  :preview="{
                    src: item.filePath,
                  }"
                  @click="lookCurrentImage(item)"
                /> -->
                <ImagePreview :imageList="threadImageList" />
              </a-descriptions-item>
              <a-descriptions-item label="现场视频">
                <div>
                  <video
                    ref="videoPlayer"
                    class="video-js vjs-default-skin"
                    width="1024"
                    controls
                    preload="auto"
                    style="width: 200px"
                    v-for="(item, index) in playerOptions"
                    :key="index"
                    :options="item"
                  >
                    <source :src="item.sources[0].src" type="video/mp4" />
                    您的浏览器不支持Video标签。
                  </video>
                  <a-empty v-show="playerOptions.length <= 0">
                    <template #description>
                      <span>暂无视频</span>
                    </template>
                  </a-empty>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="备注">
                {{ caseHandleInfo.info.remark }}
              </a-descriptions-item>
            </a-descriptions>

            <!-- 【案件办理信息-合法举证】 -->
            <a-divider
              orientation="left"
              v-if="
                (caseHandleInfo.is_illegal == '合法' && speed == 3) ||
                (caseHandleInfo.is_illegal == '合法' && speed == 5)
              "
            >
              【案件办理信息-合法举证】
            </a-divider>
            <a-descriptions
              v-if="
                (caseHandleInfo.is_illegal == '合法' && speed == 3) ||
                (caseHandleInfo.is_illegal == '合法' && speed == 5)
              "
              class="margin-top"
              :column="2"
              bordered
              size="small"
            >
              <a-descriptions-item label="办理人">
                {{ caseHandleInfo.info.transactor_name }}
              </a-descriptions-item>
              <a-descriptions-item label="办理时间">
                {{ caseHandleInfo.info.transact_time }}
              </a-descriptions-item>
              <a-descriptions-item label="批准文件名称">
                {{ caseHandleInfo.info.evidence_file_name }}
              </a-descriptions-item>
              <a-descriptions-item label="批准文件编号">
                {{ caseHandleInfo.info.evidence_file_number }}
              </a-descriptions-item>
              <a-descriptions-item label="批文有效日期">
                {{ caseHandleInfo.info.evidence_file_indate }}
              </a-descriptions-item>
              <a-descriptions-item label="合法举证材料">
                <!-- <a-image
                  v-show="evidenceFileList.length > 0"
                  v-for="(item, index) in evidenceFileList"
                  :key="index"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :src="item.s_filePath"
                  :preview="{
                    src: item.filePath,
                  }"
                /> -->
                <ImagePreview :imageList="evidenceFileList" />
              </a-descriptions-item>
              <a-descriptions-item label="勘测定界图">
                <!-- <a-image
                  v-show="boundaryImageList.length > 0"
                  v-for="(item, index) in boundaryImageList"
                  :key="index"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :src="item.s_filePath"
                  :preview="{
                    src: item.filePath,
                  }"
                /> -->
                <ImagePreview :imageList="boundaryImageList" />
              </a-descriptions-item>
            </a-descriptions>

            <!-- 【案件办理信息-伪变化】 -->
            <a-divider
              orientation="left"
              v-if="
                (caseHandleInfo.is_illegal == '伪变化' && speed == 3) ||
                (caseHandleInfo.is_illegal == '伪变化' && speed == 5)
              "
            >
              【案件办理信息-伪变化】
            </a-divider>
            <div
              v-if="
                (caseHandleInfo.is_illegal == '伪变化' && speed == 3) ||
                (caseHandleInfo.is_illegal == '伪变化' && speed == 5)
              "
            >
              伪变化没有案件办理信息
            </div>

            <!-- 【案件办理信息-违法-拟拆除】 -->
            <a-divider
              orientation="left"
              v-if="
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除' &&
                  speed == 3) ||
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除' &&
                  speed == 5)
              "
            >
              【案件办理信息-违法-拟拆除】
            </a-divider>
            <a-descriptions
              v-if="
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除' &&
                  speed == 3) ||
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟拆除' &&
                  speed == 5)
              "
              class="margin-top"
              :column="2"
              bordered
              size="small"
            >
              <a-descriptions-item label="办理人">
                {{ caseHandleInfo.info.transactor_name }}
              </a-descriptions-item>

              <a-descriptions-item label="办理时间">
                {{ caseHandleInfo.info.transact_time }}
              </a-descriptions-item>
              <a-descriptions-item label="拟拆除后照片">
                <!-- <a-image
                  v-show="threadAfterImageList.length > 0"
                  v-for="(item, index) in threadAfterImageList"
                  :key="index"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :src="item.s_filePath"
                  :preview="{
                    src: item.filePath,
                  }"
                /> -->
                <ImagePreview :imageList="threadAfterImageList" />
              </a-descriptions-item>
              <a-descriptions-item label="视频">
                <video
                  ref="videoPlayer"
                  class="video-js vjs-default-skin"
                  width="1024"
                  controls
                  preload="auto"
                  style="width: 200px"
                  v-for="(item, index) in videoOptions"
                  :key="index"
                  :options="item"
                >
                  <source :src="item.sources[0].src" type="video/mp4" />
                  您的浏览器不支持Video标签。
                </video>
                <a-empty v-show="videoOptions.length <= 0">
                  <template #description>
                    <span>暂无视频</span>
                  </template>
                </a-empty>
              </a-descriptions-item>
            </a-descriptions>

            <!-- 【案件办理信息-违法-查处】 -->
            <a-divider
              orientation="left"
              v-if="
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '查处' &&
                  speed == 3) ||
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '查处' &&
                  speed == 5)
              "
            >
              【案件办理信息-违法-查处】
            </a-divider>
            <a-descriptions
              v-if="
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '查处' &&
                  speed == 3) ||
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '查处' &&
                  speed == 5)
              "
              class="margin-top"
              :column="2"
              bordered
              size="small"
            >
              <a-descriptions-item label="办理人">
                {{ caseHandleInfo.info.transactor_name }}
              </a-descriptions-item>
              <a-descriptions-item label="办理时间">
                {{ caseHandleInfo.info.transact_time }}
              </a-descriptions-item>
              <a-descriptions-item label="立案号">
                {{ caseHandleInfo.info.registr_number }}
              </a-descriptions-item>
              <a-descriptions-item label="当事人姓名">
                {{ caseHandleInfo.info.illegal_contact }}
              </a-descriptions-item>
              <a-descriptions-item label="身份证号码">
                {{ caseHandleInfo.info.illegal_contact_idcard }}
              </a-descriptions-item>
              <a-descriptions-item label="违法类型">
                {{ caseHandleInfo.info.illegal_type }}
              </a-descriptions-item>
              <a-descriptions-item label="处罚通知书">
                <!-- <a-image
                  v-show="punishImageList.length > 0"
                  v-for="(item, index) in punishImageList"
                  :key="index"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :src="item.s_filePath"
                  :preview="{
                    src: item.filePath,
                  }"
                /> -->
                <ImagePreview :imageList="punishImageList" />
              </a-descriptions-item>
              <a-descriptions-item label="交款通知单">
                <!-- <a-image
                  v-show="paymentImageList.length > 0"
                  v-for="(item, index) in paymentImageList"
                  :key="index"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :src="item.s_filePath"
                  :preview="{
                    src: item.filePath,
                  }"
                /> -->
                <ImagePreview :imageList="paymentImageList" />
              </a-descriptions-item>
            </a-descriptions>

            <!-- 【案件办理信息-违法-拟完善手续】 -->
            <a-divider
              orientation="left"
              v-if="
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟完善手续' &&
                  speed == 3) ||
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟完善手续' &&
                  speed == 5)
              "
            >
              【案件办理信息-违法-拟完善手续】
            </a-divider>
            <a-descriptions
              v-if="
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟完善手续' &&
                  speed == 3) ||
                (caseHandleInfo.is_illegal == '违法' &&
                  caseHandleInfo.info.measure_name == '拟完善手续' &&
                  speed == 5)
              "
              class="margin-top"
              :column="2"
              bordered
              size="small"
            >
              <a-descriptions-item label="办理人">
                {{ caseHandleInfo.info.transactor_name }}
              </a-descriptions-item>
              <a-descriptions-item label="办理时间">
                {{ caseHandleInfo.info.transact_time }}
              </a-descriptions-item>
              <a-descriptions-item label="政府统一完善手续证明">
                <!-- <a-image
                  v-show="agreeImageList.length > 0"
                  v-for="(item, index) in agreeImageList"
                  :key="index"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :src="item.s_filePath"
                  :preview="{
                    src: item.filePath,
                  }"
                /> -->
                <ImagePreview :imageList="agreeImageList" />
              </a-descriptions-item>
              <a-descriptions-item label="办理手续照片">
                <!-- <a-image
                  v-show="checkoutImageList.length > 0"
                  v-for="(item, index) in checkoutImageList"
                  :key="index"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :src="item.s_filePath"
                  :preview="{
                    src: item.filePath,
                  }"
                /> -->
                <ImagePreview :imageList="checkoutImageList" />
              </a-descriptions-item>
              <a-descriptions-item label="手续有效期">
                {{ caseHandleInfo.info.procedure_indate }}
              </a-descriptions-item>
              <a-descriptions-item label="勘测定界图">
                <!-- <a-image
                  v-show="boundaryImageList.length > 0"
                  v-for="(item, index) in boundaryImageList"
                  :key="index"
                  style="width: 85px; height: 112px; margin-right: 8px"
                  :src="item.s_filePath"
                  :preview="{
                    src: item.filePath,
                  }"
                /> -->
                <ImagePreview :imageList="boundaryImageList" />
              </a-descriptions-item>
            </a-descriptions>

            <!-- 【案件审核信息】 -->
            <a-divider orientation="left" v-if="speed == 4 || speed == 5">
              【案件审核信息】
            </a-divider>
            <a-descriptions
              v-if="speed == 4 || speed == 5"
              class="margin-top"
              :column="2"
              bordered
              size="small"
            >
              <a-descriptions-item label="审核人">
                {{ flowLog[3].user_name }}
              </a-descriptions-item>
              <a-descriptions-item label="审核时间">
                {{ flowLog[3].time }}
              </a-descriptions-item>
            </a-descriptions>

            <!--【案件退回描述】 -->
            <a-divider orientation="left" v-if="caseDetail.is_drawback == 1">
              【案件退回描述】
            </a-divider>
            <a-descriptions
              v-if="caseDetail.is_drawback == 1"
              class="margin-top"
              :column="2"
              bordered
              size="small"
            >
              <a-descriptions-item label="退回描述">
                {{ caseDetail.drawback_description }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <!-- 右侧地图 -->
          <a-col :span="props.isShowMap ? 10 : 0">
            <div style="width: 40%; position: fixed">
              <!--【地图位置】 -->
              <a-divider orientation="left" v-if="isShowMap"> 【地图位置】 </a-divider>
              <div style="width: 100%; height: calc(100% - 50px); margin: 20px" v-if="isShowMap">
                <MapDetail :ruleForm="caseDetail" :isOnce="true" />
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  // vue
  import { ref, watch } from 'vue';
  // vben
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ImagePreview } from '@/components/Preview';
  import { videoPlayer } from 'vue-video-player/src';
  import MapDetail from './mapDetail.vue';
  // 文件拼地址
  import { useGlobSetting } from '@/hooks/setting';
  // api
  import { fun_getCaseInfo, fun_GetCaseFlowLog, fun_GetDroneCaseDeal } from '@/api/demo/query';

  // 图片拼地址
  const { uploadUrl } = useGlobSetting();

  // 定义props
  const props = defineProps({
    isShowMap: {
      type: Boolean,
      default: () => true,
    },
  });
  // 当前指向页面
  const current = ref<number>(0);
  let speed = ref<number>(1);
  // 监视当前指向页面
  watch(
    () => current.value,
    () => {
      speed.value = current.value + 1;
    },
  );

  // 参数
  const caseHandleInfo = ref({
    info: {},
  });
  let imageList = [];
  let imageList_a = [];
  let videoList = [];
  let threadImageList = []; //现场照片
  let threadImageList_a = [];
  let threadAfterImageList = []; // 整改后、处理后照片
  let threadAfterImageList_a = [];
  let punishImageList = []; //处罚通知书照片
  let punishImageList_a = [];
  let paymentImageList = []; //交罚款通知书照片
  let paymentImageList_a = [];
  let agreeImageList = []; //政府同意完善手续证明照片
  let agreeImageList_a = [];
  let checkoutImageList = []; //办理手续证明照片
  let evidenceFileList = []; //合法举证材料列表
  let evidenceFileList_a = [];
  let boundaryImageList = [];
  let boundaryImageList_a = [];
  const caseDetail = ref({});
  let playerOptions = [];
  let caselog = [];
  let flowLog = [
    { title: '下发', status: 'process', disabled: false, state: 1 },
    { title: '核查', status: 'process', disabled: false, state: 0 },
    { title: '审核', status: 'process', disabled: true, state: 0 },
    { title: '归档', status: 'finish', disabled: true, state: 0 },
  ];
  // 视频
  let videoOptions = [];

  // 详情数据
  const [registerModal, { closeModal }] = useModalInner((data: any) => {
    // 打开页面步骤条为5
    changeSteps(current.value);
    // 传过来的数据
    caseDetail.value = data.record;
    // 初始化步骤条
    getCaseFlowLog(caseDetail.value.id);
    // 案件下发信息
    loadDetailCaseInfo(caseDetail.value.id);
    // 案件核查信息
    loadCaseHandleInfo(caseDetail.value.id);
  });

  // 关闭窗口
  function closeModalClick() {
    current.value = 0;
    speed.value = 1;
    flowLog = [
      { title: '下发', status: 'process', disabled: false, state: 1 },
      { title: '核查', status: 'process', disabled: false, state: 0 },
      { title: '审核', status: 'process', disabled: true, state: 0 },
      { title: '归档', status: 'finish', disabled: true, state: 0 },
    ];
    closeModal();
  }
  // 案件下发信息
  function loadDetailCaseInfo(caseDetailId) {
    fun_getCaseInfo({ id: caseDetailId }).then((res) => {
      if (res) {
        caseDetail.value = res.info;
        imageList = [];
        res.pic_list.forEach((item) => {
          imageList.push(uploadUrl + '/' + item);
        });
      }
    });
  }
  // 案件核查信息
  function loadCaseHandleInfo(caseDetailId) {
    fun_GetDroneCaseDeal({ caseid: caseDetailId }).then((res) => {
      if (res) {
        caseHandleInfo.value = res;
        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 = [];
        if (res.video_list.length > 0) {
          res.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: uploadUrl + '/' + item, //url地址
                },
              ],
              poster: '', //你的封面地址
              // width: document.documentElement.clientWidth,
              notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar: {
                timeDivider: true, //当前时间和持续时间的分隔符
                durationDisplay: true, //显示持续时间
                remainingTimeDisplay: false, //是否显示剩余时间功能
                fullscreenToggle: true, //全屏按钮
              },
            };
            playerOptions.push(options);
          });
        }
        // 现场照片
        if (res.pic_info_list.length > 0) {
          threadImageList = [];
          res.pic_info_list.forEach((item) => {
            threadImageList.push(uploadUrl + '/' + item.filePath);
          });
        }

        // 处理后照片 整改后照片 恢复后照片
        if (res.after_pic_list.length > 0) {
          threadAfterImageList = [];
          res.after_pic_list.forEach((item) => {
            threadAfterImageList.push(uploadUrl + '/' + item.filePath);
          });
        }
        // 处理后视频
        videoOptions = [];
        if (res.remove_video_list.length > 0) {
          res.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: uploadUrl + '/' + 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 (res.evidence_file_list.length > 0) {
          evidenceFileList = [];
          res.evidence_file_list.forEach((item) => {
            evidenceFileList.push(uploadUrl + '/' + item.filePath);
          });
        }
        if (res.boundary_pic_list.length > 0) {
          boundaryImageList = [];
          res.boundary_pic_list.forEach((item) => {
            boundaryImageList.push(uploadUrl + '/' + item);
          });
        }

        // 违法 查处 - 处罚通知书 punish_pic_list
        if (res.punish_pic_list.length > 0) {
          punishImageList = [];
          res.punish_pic_list.forEach((item) => {
            punishImageList.push(uploadUrl + '/' + item);
          });
        }

        // 违法 查处 - 交款通知书 payment_pic_list
        if (res.payment_pic_list.length > 0) {
          paymentImageList = [];
          res.payment_pic_list.forEach((item) => {
            paymentImageList.push(uploadUrl + '/' + item);
          });
        }

        // 违法 完善手续 - 政府同意完善手续证明 agree_checkout_pic_list
        if (res.agree_checkout_pic_list.length > 0) {
          agreeImageList = [];
          res.agree_checkout_pic_list.forEach((item) => {
            agreeImageList.push(uploadUrl + '/' + item);
          });
        }

        // 违法 完善手续 - 办理手续 checkout_pic_list
        if (res.checkout_pic_list.length > 0) {
          checkoutImageList = [];
          res.checkout_pic_list.forEach((item) => {
            checkoutImageList.push(uploadUrl + '/' + item);
          });
        }
      }
    });
  }
  // 初始化步骤条
  function getCaseFlowLog(caseDetailId) {
    fun_GetCaseFlowLog({ id: caseDetailId }).then((res) => {
      if (res) {
        flowLog = res;
        if (flowLog.length == 4 && flowLog[1].status == 1) {
          let obj = {
            name: '伪变化',
            title: '伪变化',
            status: 1,
            state: 1,
            time: '',
            user_name: '',
          };
          flowLog.splice(2, 0, obj);
        }
        speed.value = 0;
        flowLog.forEach((item, index) => {
          flowLog[index].title = flowLog[index].name;
          speed.value = speed.value + item.status;
          if (flowLog[index].status == 1) {
            flowLog[index].status = 'process';
            flowLog[index].disabled = false;
            flowLog[index].state = 1;
          } else {
            flowLog[index].status = 'wait';
            flowLog[index].disabled = true;
            flowLog[index].state = 0;
          }
        });
        if (speed.value == 0) {
          speed.value = 1;
        }
        current.value = speed.value - 1;
        flowLog[speed.value - 1].status = 'finish';
      }
    });
  }
  // 步骤条改变状态
  function changeSteps(current) {
    flowLog.forEach((item, index) => {
      if (index === current) {
        flowLog[index].status = 'finish';
        flowLog[index].disabled = false;
      } else if (flowLog[index].state == 1) {
        flowLog[index].status = 'process';
        flowLog[index].disabled = false;
      } else {
        flowLog[index].status = 'wait';
        flowLog[index].disabled = true;
      }
    });
  }
</script>
<style lang="less" scoped>
  .form-box {
    background-color: @component-background;
  }
  ::v-deep .ant-image .ant-image-img {
    width: 100px;
    margin-bottom: 10px;
  }
</style>
