<template>
  <div class="modal-content" id="reportviolations-show-modal">
    <a-descriptions title="上报信息" bordered :column="3" style="margin-bottom: 20px;">
        <a-descriptions-item
        v-for="item in showInfoColumn"
          :label="item.label"
          :span="item.span? item.span: 1"
        >
          <template v-if="item.key == 'scenePhotos'">
            <a-image-preview-group
              :preview="{
                getContainer: getContainer,
              }"
            >
              <template v-for="(imageItem, imageIndex) in props.modalData[item.key]" :key="imageIndex">
                <a-image
                  v-if="imageItem.image"
                  width="100px"
                  height="100px"
                  :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem.image}`"
                  :preview="{
                    getContainer,
                  }"
                ></a-image>
              </template>
            </a-image-preview-group>
          </template>
          <template v-else-if="item.key == 'vehicles'">
            <a-table :dataSource="props.modalData['vehicles']" :columns="vehiclesColumns" :pagination="false">
              <template #bodyCell="{ column, record, text }">
                <template v-if="column.key === 'type'">
                  {{  getLabel('type', text) }}
                </template>
                <template v-if="column.key === 'images'">
                  <a-image-preview-group
                    :preview="{
                      getContainer: getContainer,
                    }"
                  >
                    <template v-for="(imageItem, imageIndex) in text" :key="imageIndex">
                      <a-image
                        v-if="imageItem.image"
                        width="100px"
                        height="100px"
                        :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem.image}`"
                        :preview="{
                          getContainer,
                        }"
                      ></a-image>
                    </template>
                  </a-image-preview-group>
                </template>
              </template>
            </a-table>
          </template>
          <template v-else>{{ props.modalData[item.folder][item.key] }}</template>
        </a-descriptions-item>
    </a-descriptions>
    <a-descriptions title="提车信息" bordered :column="3" style="margin-bottom: 20px;">
      <a-descriptions-item label="发起人">
        {{ props.modalData.pickupInfo.initiatorName }}
      </a-descriptions-item>
      <a-descriptions-item label="发起时间">
        {{ props.modalData.pickupInfo.initiateTime }}
      </a-descriptions-item>
      <a-descriptions-item label="备注">
        {{ props.modalData.pickupInfo.remark }}
      </a-descriptions-item>
    </a-descriptions>
  </div>
  <div class="button-div" v-if="props.modalData.pickupInfo.status == 0">
    <a-input v-model:value="reviewValue" style="margin-right: 20px;" placeholder="请输入审核意见"/>
    <div style="display: flex;">
      <a-button style="margin-right: 20px;" class="save-button" type="error" @click="submit(false)">审核不通过</a-button>
      <a-button  class="save-button" type="success" @click="submit(true)">审核通过</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { PickUpAudit } from '@/api/illegalconstruction/getcar'
import { message } from "ant-design-vue";
import { getAppEnvConfig } from '@/utils/env';

const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
const props = defineProps(['modalType', 'modalData', 'carTypeOptions'])
const emits = defineEmits(['closeModal'])
const reviewValue = ref('')

const showInfoColumn = [
  { label: '巡查点', key: 'minePointName', folder: 'minePoint', },
  { label: '标题', key: 'title', folder: 'violationReport' },
  { label: '当事人姓名', key: 'partyName', folder: 'violationReport' },
  { label: '当事人电话', key: 'partyPhone', folder: 'violationReport' },
  { label: '违法类型', key: 'violationTypeName', folder: 'violationReport' },
  { label: '问题描述', key: 'problemDescription', folder: 'violationReport' },
  { label: '上报人', key: 'reporterName', folder: 'violationReport' },
  { label: '上报时间', key: 'reportTime', folder: 'violationReport' },
  { label: '上报单位', key: 'reportUnitName', folder: 'violationReport' },
  { label: '状态', key: 'statusName', folder: 'violationReport' },
  { label: '处理意见', key: 'handlingOpinion', folder: 'violationReport' },
  { label: '处理单位', key: 'handUnitName', folder: 'violationReport' },
  { label: '处理人', key: 'handlerName', folder: 'violationReport' },
  { label: '处理时间', key: 'handlingTime', folder: 'violationReport', },
  { label: '停车场编号', key: 'parkingCode', folder: 'parking', },
  { label: '停车场名称', key: 'parkingName', folder: 'parking', },
  { label: '停车场地址', key: 'address', folder: 'parking', },
  { label: '停车场电话', key: 'phone', folder: 'parking', },
  { label: '现场照片', key: 'scenePhotos', span: 3},
  { label: '车辆信息', key: 'vehicles', span: 3},
]
const vehiclesColumns = [
  { title: '身份证', dataIndex: 'idCard', key: 'idCard',},
  { title: '姓名', dataIndex: 'name', key: 'name',},
  { title: '联系方式', dataIndex: 'phone', key: 'phone',},
  { title: '类型', dataIndex: 'type', key: 'type',},
  { title: '牌照', dataIndex: 'licensePlate', key: 'licensePlate',},
  { title: '图片', dataIndex: 'images', key: 'images',},
]

onMounted(() => {
})

const cancel = () => {
  emits('closeModal')
}
const getContainer = () => {
  return document.getElementById('reportviolations-show-modal');
};
const submit = (isagree) => {
  let params = {
    id: props.modalData.pickupInfo.pickupId,
    isagree,
    reviewComments: reviewValue.value
  }
  PickUpAudit(params).then(res => {
    message.success('审核成功')
    emits('closeModal', true)
  })
}
const getLabel = (type, value) => {
  let result: any[] = [];
  let label = '';
  switch (type) {
    case 'type':
      result = props.carTypeOptions;
      break;
  }
  result.forEach((item) => {
    if (item.value == value) {
      label = item.label;
    }
  });
  return label;
};
</script>

<style lang="scss" scoped>
.modal-content{
  padding: 20px;
  max-height: calc(100vh - 132px);
  margin-bottom: 15px;
  overflow: auto;
  .content-form{
    margin-bottom: 20px;
  }
}
.button-div{
  display: flex;
  justify-content: end;
  padding-left: 20px;
  padding-right: 20px;
  .cancel-button{
    margin-right: 10px;
  }
}
</style>
