<!--
@name: 入库订单管理
@author: 李恒
@time: 2022-05-31 08:50:04
-->
<template>
  <div>
    <p-card title="主单信息" v-show="!editType">
      <div slot="extra">
        <p-button icon="filter" @click="toggleFormTag = !toggleFormTag">{{ toggleFormTag ? "隐藏" : "显示" }}</p-button>
        <p-button type="primary" class="ml-10" @click="toEdit('add')">新增订单</p-button>
      </div>
      <p-grid-form
        v-show="toggleFormTag"
        ref="formTarget"
        :span="6"
        :labelCol="{ span: 6 }"
        :items="items"
        @submit="handleSubmit"
      />
      <p-card title="订单列表">
        <p-table
          ref="masterTable"
          dragle
          bordered
          :scroll="{ x: true }"
          row-key="billid"
          :autoLoad="false"
          :columns="masterColumns"
          :dataSource.sync="masterDataList"
          :remoteUrl="masterRemoteUrl"
          :remoteParams="masterRemoteData"
          :selectedRowKeys.sync="selectedRowKeys"
          @clickRow="rowClick"
        >
          <span slot="action" slot-scope="text, record">
            <div>
              <a @click="toEdit('edit', record)">修改</a>
              <a class="ml-10" @click="onNullify(record)">作废</a>
            </div>
          </span>
        </p-table>
      </p-card>
      <p-card title="订单明细列表">
        <p-table
          ref="detailsTable"
          dragle
          bordered
          row-key="lineid"
          :scroll="{ x: true }"
          :autoLoad="false"
          :rowSelectType="false"
          :columns="detailsColumns"
          :dataSource.sync="detailsDataList"
          :remote-url="detailsRemoteUrl"
          :remoteParams="detailsRemoteData"
        />
      </p-card>
    </p-card>
    <edit v-if="editType" :data="editData" :type="editType" @back="back" />
  </div>
</template>

<script>
import { masterColumns, detailsColumns, items } from "./js/config";
import { deleteOmsPoBillH, detailsRemoteUrl, masterRemoteUrl } from "./api";
import edit from "./edit";
import { getDefaultCargoOwner } from "@/views/kzyWMS/utils/setCargoOwner";

export default {
  components: { edit },
  data() {
    return {
      toggleFormTag: true,
      form: {},
      items: items(this),
      // 页面状态
      editType: "",
      editData: {},
      // 订单列表
      masterColumns,
      masterDataList: [],
      masterRemoteUrl,
      selectedRowKeys: [],
      masterRemoteData: {},
      // 明细列表
      detailsColumns,
      detailsDataList: [],
      detailsRemoteUrl,
      detailsRemoteData: {},
    };
  },
  mounted() {
    this.setDefaultData();
  },
  methods: {
    // 设置默认数据
    async setDefaultData() {
      // 设置仓库
      const { warehouseId, warehouseCode, warehouseName } = this.$store.getters.warehouse || {};
      this.$refs.formTarget.form.setFieldsValue({
        branchid: warehouseId,
        branchcode: warehouseCode,
        branchname: warehouseName,
      });
      // 设置货主
      const cargoOwner = await getDefaultCargoOwner();
      if (!!cargoOwner) {
        const { companyCode, companyId, companyName } = cargoOwner;
        this.$refs.formTarget.form.setFieldsValue({
          consignorid: companyId,
          consignorcode: companyCode,
          consignorname: companyName,
        });
        this.$refs.formTarget.form.disableItem("consignorname");
      }
    },
    toEdit(type, record = {}) {
      this.editData = { ...record };
      this.editType = type;
    },
    back() {
      this.editType = "";
      this.masterDataList = [];
      this.detailsDataList = [];
    },
    // 查询事件
    handleSubmit(event, form) {
      event.preventDefault();
      this.detailsDataList = [];
      form.validateFields((error, values) => {
        if (!!error) return;
        console.log(values);
        // delete values.adata;
        // delete values.bdata;
        // values.branchid = values.warehouseId;
        // values.branchcode = values.warehouseCode;
        // values.branchname = values.warehouseName;
        // values.consignorid = values.cargoOwnerId;
        // values.consignorcode = values.cargoOwnerCode;
        // values.consignorname = values.cargoOwnerName;
        // values.shipperId = values.supplierId;
        // console.log(values);
        this.masterRemoteData = { ...this.masterRemoteData, ...values };
      });
    },
    // 订单作废
    onNullify(record) {
      const { billid } = record;
      if (!billid) return;
      const params = { billid, closedReason: "" };
      const self = this;
      this.$confirm({
        title: "确定是否要删除?",
        onOk() {
          return new Promise((resolve, reject) => {
            deleteOmsPoBillH(params)
              .then((res) => {
                if (res.success) {
                  self.$message.success(res.message);
                  self.$refs.masterTable.reload();
                  resolve();
                } else {
                  self.$message.warn(res.message);
                  reject();
                }
              })
              .catch(() => {
                reject();
              });
          });
        },
      });
    },
    rowClick(selectedRowKeys, record) {
      if (!record) return;
      this.detailsDataList = [];
      this.detailsRemoteData = { billId: record };
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .date-range {
  .ant-calendar-picker {
    width: 100% !important;
  }
}
</style>
