<template>
  <div :class="`${prefixCls}`">
    <div :class="`${prefixCls}-tabbox`">
      <div :class="`${prefixCls}-tabbox-right`" v-if="auditingVisible">
        <div :class="`${prefixCls}-tabbox-right-header`">
          <div
            :class="`${prefixCls}-tabbox-right-header-tabs`"
            v-for="(item, index) in tabsArr"
            :key="index"
          >
            <div
              :class="tabsActiveIndex == index ? 'active' : 'tabsnormal'"
              @click="tabsClick(index)"
              >{{ item }}</div
            >
          </div>
          <div :class="`${prefixCls}-tabbox-right-header-close`" @click="auditingClose"
            ><CloseOutlined
          /></div>
        </div>
        <div :class="`${prefixCls}-tabbox-right-content`">
          <BasicForm ref="formRef" @register="registerForm" v-show="tabsActiveIndex == 0">
            <template #imgSlot>
              <div
                v-for="(item, num) in fileList"
                :key="num"
                style="
                  position: relative;
                  width: 125px;
                  height: 90px;
                  overflow: hidden;
                  float: left;
                  background: #f9f9f9;
                  margin-left: 6px;
                  margin-bottom: 6px;
                "
              >
                <a-image :width="125" :src="item.url" />
              </div>
              <a-empty v-show="fileList.length <= 0">
                <template #description>
                  <span>暂无图片</span>
                </template>
              </a-empty>
            </template>
            <template #videoSlot>
              <video
                width="240"
                height="150"
                controls
                v-for="(item, index) in videoList"
                :key="index"
              >
                <source :src="item" type="video/mp4" />
                您的浏览器不支持Video标签。
              </video>
              <a-empty v-show="videoList.length <= 0">
                <template #description>
                  <span>暂无视频</span>
                </template>
              </a-empty>
            </template>
          </BasicForm>
          <HandleCase :id="selectRowDetail.id" v-show="tabsActiveIndex == 1" />
        </div>
        <div :class="`${prefixCls}-tabbox-right-footer`">
          <a-input class="ml-3" v-model:value="caseBackReason" placeholder="案件退回原因" />
          <!-- <a-button type="error" class="ml-3" @click="handleCaseBack"> 退回 </a-button> -->
          <!-- <a-button type="primary" class="ml-3" @click="handlePassForm"> 通过 </a-button> -->
        </div>
      </div>
    </div>
    <div :class="`${prefixCls}-mapbox`">
      <MapDetail :ruleForm="selectRowDetail"></MapDetail>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, h } from 'vue';
  import HandleCase from './HandleCase.vue';
  import { BasicForm, useForm } from '@/components/Form';
  import { caseAudiSteps, caseBackSteps, getCaseDataDetail } from '@/api/caseauditing/index';
  import { formSchema } from './index.data';
  import { useMessage } from '@/hooks/web/useMessage';
  import { MapDetail } from '@/views/demo/summaryverification/index';
  import { useGlobSetting } from '@/hooks/setting';

  const { uploadUrl } = useGlobSetting();
  const tabsArr: any = ref(['案件信息', '核查办理']);
  const { createMessage } = useMessage();
  const tabsActiveIndex: any = ref('0');
  const auditingVisible: any = ref(false);
  const selectRowDetail: any = ref({});
  const caseBackReason: any = ref();
  const videoList: any = ref([]);

  const fileList: any = ref([]);

  const [registerForm, { setFieldsValue }] = useForm({
    labelWidth: 120,
    labelAlign: 'right',
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: { lg: 24, md: 24 },
  });
  function tabsClick(index: any) {
    tabsActiveIndex.value = index;
  }
  async function agree() {
    const param = {
      id: selectRowDetail.value.id,
    };
    await caseAudiSteps(param).then((res) => {
      if (res) {
        return true;
      } else {
        return false;
      }
    });
  }

  async function disagree() {
    console.log('不同意');
    if (!caseBackReason.value) {
      createMessage.error('案件退回原因不能为空');
      return false;
    }
    const param = {
      id: selectRowDetail.value.id,
      drawbackReason: caseBackReason.value,
    };
    await caseBackSteps(param).then((res) => {
      if (res) {
        return true;
      } else {
        createMessage.error('此案件未办理，无需退回。');
        return false;
      }
    });
  }
  async function getDetial() {
    const param = {
      id: '1d23430c-e8ed-4a13-9806-dc729bac55bf',
    };
    getCaseDataDetail(param).then((res: any) => {
      let formData = res.info;
      caseBackReason.value = null;
      formData.homeAddress =
        formData.countyname + formData.streetname + formData.communityname + formData.address;
      formData.lngLat = formData.lng + ' , ' + formData.lat;
      auditingVisible.value = true;
      selectRowDetail.value = formData;
      console.log(formData);
      setTimeout(() => {
        setFieldsValue(formData);
      }, 100);

      fileList.value = [];
      videoList.value = [];
      if (res.pic_list.length > 0) {
        res.pic_list.forEach((item) => {
          fileList.value.push({
            url: 'http://60.213.14.14:6070/' + item,
          });
        });
      }
      if (res.video_list.length > 0) {
        res.video_list.forEach((item) => {
          videoList.value.push(uploadUrl + '/' + item);
        });
      }
    });
  }
  onMounted(() => {
    getDetial();
  });
  defineExpose({
    agree,
    disagree,
  });
  const prefixCls = 'form-box';
</script>
<style lang="less" scoped>
  .form-box {
    width: 100%;
    height: 74vh;
    display: flex;

    &-tabbox {
      width: 50%;
      display: flex;
      justify-content: space-between;

      &-left {
        border: 1px solid #eee;

        &-collenction {
          display: flex;
          flex-direction: column;
          height: 100%;

          &-header {
            padding: 0 10px;
            height: 50px;
            overflow: auto;
            border-bottom: 1px solid #eee;
            display: flex;
            background: #fff;
            align-items: center;
            justify-content: space-between;

            &-close {
              cursor: pointer;
            }
          }
        }
      }

      &-right {
        width: 100%;
        margin-left: 15px;
        margin-bottom: 15px;
        border: 1px solid #eee;
        background: #fff;

        &-header {
          position: relative;
          padding: 0 10px;
          height: 50px;
          overflow: auto;
          border-bottom: 1px solid #eee;
          display: flex;

          &-tabs {
            cursor: pointer;
            margin: 0 10px;

            .active {
              color: #409eff;
              height: 100%;
              display: flex;
              align-items: center;
            }

            .tabsnormal {
              height: 100%;
              display: flex;
              align-items: center;
              &:hover {
                color: #409eff;
                border-bottom: 1px solid #409eff;
              }
            }
          }

          &-close {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translate(0, -50%);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        &-content {
          height: 58vh;
          overflow: auto;
          padding: 15px 20px 15px 10px;
          margin: 10px 0;
        }

        &-footer {
          height: 60px;
          border-top: 1px solid #eee;
          display: flex;
          align-items: center;
          padding-right: 15px;
        }
      }
    }

    &-mapbox {
      width: calc(50% - 20px);
      margin: 0 15px 15px 15px;
      border: 1px solid #eee;
    }
  }
</style>
