<template>
  <div class="emergency-supply-container">
    <BasicTable :tableData="tableData" :tableConfig="tableConfig">
      <template #changeType="scope">
        <span>{{ CHANGE_TYPE_MAP[scope.row.changeType] }}</span>
      </template>
      <template #changeQuantity="scope">
        <span v-if="scope.row.changeQuantity > 0">+</span>
        <span>{{ scope.row.changeQuantity }}</span>
      </template>
      <template #action="scope">
        <ActionButton text="报废详情" @click="handleViewDetail(scope.row)" />
      </template>
    </BasicTable>
    <el-drawer title="报废详情" v-model="drawerVisible" size="40%" :close-on-click-modal="true" :show-close="true">
      <div class="drawer-body">
        <div class="drawer-item">
          <span class="drawer-item-label">报废理由：</span>
          <span>{{ record?.scrapReason }}</span>
        </div>
        <div v-if="uploadedImages.length > 0" class="drawer-item">
          <span class="drawer-item-label">报废照片：</span>
          <div class="image-container">
            <div v-for="(image, index) in uploadedImages" :key="image" class="image-preview">
              <el-image
                :src="image"
                style="width: 100px; height: 100px"
                :preview-src-list="uploadedImages"
                show-progress
                :initial-index="index"
                fit="cover"
              />
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import BasicTable from '@/components/BasicTable.vue';
  import { CHANGE_RECORD_TABLE_COLUMNS, CHANGE_RECORD_TABLE_OPTIONS } from '../config';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { ChangeRecordListRes } from '@/types/emergency-supplier';
  import { getSupplyChangeRecord } from '@/api/emergency-supplier';
  import { CHANGE_TYPE_MAP } from '../constant';
  import ActionButton from '@/components/ActionButton.vue';
  import { unformatImage } from '@/components/UploadImages/utils';

  const { tableConfig } = useTableConfig(CHANGE_RECORD_TABLE_COLUMNS, CHANGE_RECORD_TABLE_OPTIONS, false);
  const props = defineProps<{
    id: number;
  }>();
  const tableData = ref<ChangeRecordListRes[]>([]);
  const getChangeRecord = async () => {
    tableConfig.loading = true;
    const res = await getSupplyChangeRecord(props.id);
    tableData.value = res;
    tableConfig.loading = false;
  };

  const uploadedImages = ref<string[]>([]);

  const drawerVisible = ref(false);
  const record = ref<ChangeRecordListRes>();
  const handleViewDetail = (row: ChangeRecordListRes) => {
    record.value = row;
    uploadedImages.value = unformatImage(row.scrapImage) || [];

    drawerVisible.value = true;
  };
  onMounted(() => {
    getChangeRecord();
  });
</script>

<style lang="scss" scoped>
  @use '../styles/info.scss' as *;
  .drawer-item {
    margin-bottom: 20px;
  }
  .drawer-item-label {
    color: rgba(0, 0, 0, 0.88);
  }
  .image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
  }
  .image-preview {
    width: 100px;
    height: 100px;
    border-radius: 4px;
  }
</style>
