<template>
	<div class="system-user-container layout-padding">
		<el-card class="layout-padding-auto" shadow="hover">
			<avue-crud
          ref="crudRef"
          :data="state.data"
          :option="state.option"
          v-model:page="state.page"
          v-model:search="state.formData"
          @on-load="onLoadFun"
          @search-change="searchChange"
          @search-reset="resetChange"
      >
				<template #status>
					<div>未发货</div>
				</template>
        <template #menu="{row}">
					<el-button type="text" icon="el-icon-pie-chart" @click="toPurchaseDetails(row)">查看</el-button>
				</template>
			</avue-crud>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import {reactive, onMounted, computed,defineProps} from 'vue';
import { formatTime } from '../../utils/index'
import { useRouter } from 'vue-router'
import { listApi } from '../../api/list/index'
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();
const router = useRouter()
const props = defineProps({

})
// 定义变量内容
const state = reactive({
	page: {
		total: 1000,
		currentPage: 1,
		pageSize: 10,
	},
	option: {
		index: false,
		menuWidth: 150,
		border: true,
		delBtn: false,
		editBtn: false,
		align: 'center',
    searchLabelWidth:100,
    searchMenuSpan:6,
    addBtn:false,
		column: [
			{ label: computed(() => t('message.list.PONumber')), prop: 'fBillNo', width: 200,search: true },
			{ label: computed(() => t('message.list.SupplierCode')), prop: 'supplierId', width: 200 },
			{ label: computed(() => t('message.list.SupplierName')), prop: 'supplierName', width: 200 },
			{ label: computed(() => t('message.list.Buyer')), prop: 'purchaser', width: 200 },
			{ label: computed(() => t('message.list.SettlementMode')), prop: 'paymentMethod', width: 200,search: true },
			{ label: computed(() => t('message.list.Currency')), prop: 'settlementCcurrency', width: 200,search: true },
			{ label: computed(() => t('message.list.PaymentTerms')), prop: 'paymentTerms', width: 200 },
			{ label: computed(() => t('message.list.ExchangeRateType')), prop: 'exchangeRateType', width: 200,search: true },
			{ label: computed(() => t('message.list.ExchangeRate')), prop: 'exchangeRate', width: 200 },
			{ label: computed(() => t('message.list.OrderCreater')), prop: 'creater', width: 200 },
			{ label: computed(() => t('message.list.DocStatus')), prop: 'status', width: 200,search: true,type: 'select'},
			{ label: computed(() => t('message.list.PurchaseDate')), prop: 'fDate', width: 200,search: true,type: 'datetime', searchSpan: 12,searchRange: true,},
			{ label: computed(() => t('message.list.Comments')), prop: 'remark', width: 200 },
		],
	},
	data: [],
  formData:{}
});

const onLoadFun = (e:any) => {
  state.page.currentPage = e.currentPage
  state.page.pageSize = e.pageSize
  getList()
}
const searchChange = (params:any, done:any) => {
  console.log(params)
  done()
  if(params.fDate?.length){
    console.log(11111)
  }
}
const resetChange = () => {
  
}
const toPurchaseDetails = (item:any) => {
  console.log(item)
  router.push({
    path: '/purchaseDetails',
    query:{
      topId:item.fiD
    }
  })
}
const getList = () => {
  listApi().getPageList({
    ...state.formData,
    pageSize:state.page.pageSize,
    page:state.page.currentPage,
  }).then((res:any) => {
    if(res.resultCode === 0){
      state.data = res.data.dataList
      state.page.total = res.data.total
    }
  })
}
// 页面加载时
onMounted(() => {
  getList()
});
</script>

<style lang="scss" scoped>
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}
:deep(.el-col){
  margin-bottom: 16px;
}
</style>
