<template>
  <el-dialog :model-value="props.showes" width="70%" >
    <avue-crud ref="crudRef" :data="props.listData" :option="state.option"></avue-crud>
    <div class="btnList">
      <el-button type="primary" @click="emits('generateDocuments')">生成通知单</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import {defineProps, reactive, defineEmits, computed} from 'vue';
const emits = defineEmits(['generateDocuments'])
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();
const props = defineProps({
  listData:{
    type: Array,
    default: () => []
  },
  showes:{
    type: Boolean,
    default: false
  }
});
const state = reactive({
  dialogVisible: true,
  option: {
    tip: false,
    selection: true,
    index: true,
    menu: false,
    menuWidth: 150,
    border: true,
    delBtn: false,
    editBtn: false,
    align: 'center',
    searchLabelWidth: 140,
    searchMenuSpan: 6,
    addBtn: false,
    column: [
      { label: computed(() => t('message.list.MaterialCode')), prop: 'FMaterialId', width: 200, search: true },
      { label: computed(() => t('message.list.MaterialName')), prop: 'FMaterialName', width: 200, search: true },
      { label: computed(() => t('message.list.Specification')), prop: 'FModel', width: 200, search: true },
      { label: computed(() => t('message.list.PurchaseUnit')), prop: 'FUnitId', width: 200, search: true },
      { label: computed(() => t('message.list.QTY')), prop: 'FPrice', width: 200 },
      { label: computed(() => t('message.list.UP')), prop: 'FTaxPrice', width: 200 },
      { label: computed(() => t('message.list.TotalAmount')), prop: 'FEntryAmount', width: 200 },
      { label: computed(() => t('message.list.TotalAmountTaxInclusive')), prop: 'FAllAmount', width: 200 },
      { label: computed(() => t('message.list.AccumulatedReceiptQTY')), prop: 'FReceiveQty', width: 200 },
      {
        label: computed(() => t('message.list.DemondDate')),
        prop: 'FDeliveryDate',
        width: 200,
        search: true,
        type: 'datetime',
        searchSpan: 12,
        searchRange: true,
        searchLabelWidth: 150,
      },
      { label: computed(() => t('message.list.TaxAmount')), prop: 'TaxAmount', width: 200 },
      {
        label: computed(() => t('message.list.CommittedDeliveryDate')),
        prop: 'FSupDueDate',
        width: 200,
        search: true,
        type: 'datetime',
        searchSpan: 12,
        searchRange: true,
        searchLabelWidth: 150,
      },
      {
        label: computed(() => t('message.list.LatestCommittedDeliveryDate')),
        prop: 'FSupDueNewDate',
        width: 200,
        search: true,
        type: 'datetime',
        searchSpan: 12,
        searchRange: true,
        searchLabelWidth: 150,
      },
      { label: computed(() => t('message.list.Comments2')), prop: 'FNote', width: 200 },
    ],
  },
});
</script>
<style scoped lang="scss">
.btnList{
  margin-top: 26px;
  display: flex;
  justify-content: center;
}
</style>