<script setup lang="ts">
import { ref } from "vue";
import {
  inv_status_list,
  pay_status_list,
  send_status_list
} from "/@/utils/status";

import {
  cgd_status,
  preview_columns,
  cgd_type,
  cgd_source,
  product_type,
  send_type,
  inv_status,
  pay_status
} from "./columns";

const visible = ref(false);
const data = ref<any>({});

defineExpose({
  onDisplay: _data => {
    visible.value = true;
    data.value = _data;
  }
});
</script>

<template>
  <el-dialog v-model="visible" title="采购单详情" center>
    <el-descriptions :column="2" border size="small">
      <el-descriptions-item
        v-for="(item, index) in preview_columns"
        :label="item.label"
        :key="index"
      >
        <el-tag v-if="item.field === 'status'">
          {{ cgd_status.find(c => data[item.field] === c.value)?.label }}
        </el-tag>

        <el-tag v-else-if="item.field === 'cgdType'">
          {{ cgd_type.find(c => data[item.field] === c.value)?.label }}
        </el-tag>

        <el-tag v-else-if="item.field === 'cgdSource'">
          {{ cgd_source.find(c => data[item.field] === c.value)?.label }}
        </el-tag>

        <el-tag v-else-if="item.field === 'goodType'">
          {{ product_type.find(c => data[item.field] === c.value)?.label }}
        </el-tag>

        <el-tag v-else-if="item.field === 'sendType'">
          {{ send_type.find(c => data[item.field] === c.value)?.label }}
        </el-tag>

        <el-tag v-else-if="item.field === 'pay_status'">
          {{ pay_status.find(c => data[item.field] === c.value)?.label }}
        </el-tag>

        <el-tag v-else-if="item.field === 'sendStatus'">
          {{ send_status_list.find(c => data[item.field] === c.value)?.label }}
        </el-tag>

        <el-tag v-else-if="item.field === 'inv_status'">
          {{ inv_status.find(c => data[item.field] === c.value)?.label }}
        </el-tag>

        <span v-else>{{ data[item.field] }}</span>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>
