<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 == 'otherPersons'">
            <a-table :dataSource="props.modalData['otherPersons']" :columns="otherPropertiesColumns" :pagination="false">
              <template #bodyCell="{ column, record, text }">
                <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-if="item.key == 'vehicles'">
            <a-table :dataSource="props.modalData['vehicles']" :columns="vehiclesColumns" :pagination="false">
              <template #bodyCell="{ column, record, text }">

                <template v-if="column.key === 'vehicleImages'">
                  <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]? props.modalData[item.folder][item.key]: '' }}</template>
        </a-descriptions-item>
    </a-descriptions>
  </div>
  <div class="button-div">
    <a-input v-if="props.modalType == 'process'" v-model:value="processValue" style="margin-right: 20px;" placeholder="请输入处理意见"/>
    <div style="display: flex;">
      <a-button class="cancel-button" @click="cancel">取消</a-button>
      <a-button v-if="props.modalType == 'process'" class="save-button" type="primary" @click="submit">提交处理</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { ReportHandle } from '@/api/illegalconstruction/reportviolations'
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 processValue = 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: 'mineralTypes', 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: 'reviewerName', folder: 'violationReport', },
  { label: '初审时间', key: 'reviewTime', folder: 'violationReport', },
  { label: '初审内容', key: 'reviewComments', folder: 'violationReport', },
  { label: '复审人员', key: 'seReviewerName', folder: 'violationReport', },
  { label: '复审时间', key: 'seReviewTime', folder: 'violationReport', },
  { label: '复审内容', key: 'seReviewComments', 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: 'otherPersons', 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: 'typeName', key: 'typeName',},
  // { title: '牌照', dataIndex: 'licensePlate', key: 'licensePlate',},
  { title: '图片', dataIndex: 'vehicleImages', key: 'vehicleImages',},
]
const otherPropertiesColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name',},
  { title: '联系方式', dataIndex: 'phone', key: 'phone',},
  { title: '关系', dataIndex: 'relationShip', key: 'relationShip',},
  { title: '图片', dataIndex: 'images', key: 'images',},
]
onMounted(() => {
})

const cancel = () => {
  emits('closeModal')
}
const getContainer = () => {
  return document.getElementById('reportviolations-show-modal');
};
const submit = () => {
  let params = {
    id: props.modalData.violationReport.id,
    handlingOpinion: processValue.value
  }
  ReportHandle(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>
