<template>
  <a-layout>
    <a-page-header title="物料采购订单跟踪" />
    <a-layout-content style="padding: 24px;">
      <a-form layout="inline" :model="purchaseOrderLineQueryParam">
        <a-form-item label="关键字">
          <a-input v-model:value="purchaseOrderLineQueryParam.condition" placeholder="请输入关键字，包括工作令、存货名称、存货编码、规格型号" />
        </a-form-item>
        <a-form-item v-if="purchaseOrderLineQueryParam.advancedQuery" label="下单时间">
          <a-date-picker v-model:value="startTime" format="YYYY-MM-DD" />
          <a-date-picker v-model:value="endTime" format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="采购订单编号">
          <a-input v-model:value="purchaseOrderLineQueryParam.documentNo" placeholder="输入采购订单编号" />
        </a-form-item>
        <a-space>
          <a-button type="primary" @click="searchPurchaseOrderLine">搜索</a-button>
          <a-button @click="purchaseOrderLineQueryParam.advancedQuery =!purchaseOrderLineQueryParam.advancedQuery">
            {{ purchaseOrderLineQueryParam.advancedQuery ? '关闭高级搜索' : '高级搜索' }}
          </a-button>
          <a-button @click="clean">清空搜索条件</a-button>
          <a-button-group>
            <a-button :class="{ 'ant-btn-primary': status === 0 }" @click="chooseStatus(0)">全部</a-button>
            <a-button :class="{ 'ant-btn-primary': status === 1 }" @click="chooseStatus(1)">已到货</a-button>
            <a-button :class="{ 'ant-btn-primary': status === 2 }" @click="chooseStatus(2)">未到货</a-button>
          </a-button-group>
        </a-space>
      </a-form>
      <a-table
        :data-source="purchaseOrderLines"
        :columns="columns"
        :row-key="record => record.id"
        :pagination="pagination"
        @change="handleTableChange"
      />
    </a-layout-content>
  </a-layout>
</template>

<script>
import Common from '../common/Common.js';

export default {
  data() {
    return {
      purchaseOrderLineQueryParam: {
        condition: '',
        orderStartTime: null,
        orderEndTime: null,
        documentNo: '',
        advancedQuery: false,
        status: 0,
        range: {
          start: 0,
          length: 20,
        },
      },
      defaultStartTime: new Date(),
      defaultEndTime: new Date(),
      startTime: '',
      endTime: '',
      status: 0,
      pagination: {
        current: 1,
        pageSize: Common.pageSize,
        total: 0,
      },
      purchaseOrderLines: [],
      columns: [
        { title: '序号', dataIndex: 'index' },
        { title: '存货编码', dataIndex: 'invCode' },
        { title: '存货名称', dataIndex: 'invName' },
        { title: '规格型号', dataIndex: 'invType' },
        { title: '工作令', dataIndex: 'projectInvName' },
        { title: '所属部件', dataIndex: 'componentInvName' },
        { title: '主关件', dataIndex: 'importantComponent' },
        { title: '加急件', dataIndex: 'urgentComponent' },
        { title: '计划到货日期', dataIndex: 'estimateArrivalDate' },
        { title: '订单数量', dataIndex: 'quantity' },
        { title: '已到货数量', dataIndex: 'receivedQuatity' },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.defaultStartTime.setFullYear(2000);
      this.purchaseOrderLineQueryParam.orderStartTime = this.defaultStartTime;
      this.purchaseOrderLineQueryParam.orderEndTime = this.defaultEndTime;
    },
    searchPurchaseOrderLine() {
      this.purchaseOrderLines = [];
      this.purchaseOrderLineQueryParam.orderStartTime = this.defaultStartTime;
      this.purchaseOrderLineQueryParam.orderEndTime = this.defaultEndTime;
      this.purchaseOrderLineQueryParam.range.start = (this.pagination.current - 1) * this.pagination.pageSize;
      this.purchaseOrderLineQueryParam.range.length = this.pagination.pageSize;

      if (this.purchaseOrderLineQueryParam.advancedQuery) {
        if (this.startTime) {
          this.purchaseOrderLineQueryParam.orderStartTime = this.startTime;
        }
        if (this.endTime) {
          this.purchaseOrderLineQueryParam.orderEndTime = this.endTime;
        }
      }
      $.ajax({
        url: Common.getApiURL('PurchaseOrderLineResource/queryByParams'),
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        beforeSend: request => {
          Common.addTokenToRequest(request);
        },
        data: JSON.stringify(this.purchaseOrderLineQueryParam),
        success: data => {
          this.purchaseOrderLines = data.purchaseOrderLineTraceEditDtos;
          this.pagination.total = data.totalCount;
        },
        error: (XMLHttpRequest, textStatus, errorThrown) => {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    clean() {
      this.purchaseOrderLineQueryParam.condition = '';
      this.startTime = '';
      this.endTime = '';
      this.purchaseOrderLineQueryParam.documentNo = '';
      this.defaultStartTime = new Date();
      this.defaultStartTime.setFullYear(2000);
      this.defaultEndTime = new Date();
    },
    chooseStatus(status) {
      this.status = status;
      this.purchaseOrderLineQueryParam.status = status;
      this.pagination.current = 1;
      this.searchPurchaseOrderLine();
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.searchPurchaseOrderLine();
    },
  },
};
</script>

<style scoped>
/* 可根据需要添加自定义样式 */
</style>