<!--
@name: 承运商应付管理-对账管理
@author: 张泽贤
@time: 2022-09-02
@doc:
-->
<template>
  <div class="pages">
    <p-spin :spinning="spinning" v-if="!editType">
      <a-page-header class="page-header" :title="'承运商应付管理-' + $route.meta.title" :bordered="false" style="background-color: #fff; margin-bottom: 10px">
        <a-space slot="extra">
          <p-button type="primary" @clickSync="onSearch" icon="search">查询</p-button>
          <p-button @click="onReset">重置</p-button>
          <!-- <p-button type="primary" @click="onSeniorSearch">高级查询</p-button> -->
        </a-space>
        <p-form-model ref="formTarget" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" class="plg-grid-from">
          <a-row>
            <a-col :span="6">
              <p-form-model-item label="货主">
                <p-input v-model="form.cargoOwnerName" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="订单号">
                <p-input v-model="form.orderNo" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="运单号">
                <p-input v-model="form.shipbillNo" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="业务类型">
                <p-select v-model="form.orderBusinessType" :options="options.ORDER_BUSINESS_TYPE" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="启运日期">
                <p-range-picker v-model="shipmentDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" style="width: 100%" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="送达日期">
                <p-range-picker v-model="deliveryDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" style="width: 100%" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="回单日期">
                <p-range-picker v-model="receiptDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" style="width: 100%" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="正本回单日期">
                <p-range-picker v-model="originalBackDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" style="width: 100%" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="完成日期">
                <p-range-picker v-model="completeDate" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" style="width: 100%" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="始发地">
                <p-input v-model="form.shipperProvinceCityDistrict" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="目的地">
                <p-input v-model="form.consigneeProvinceCityDistrict" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="费用名称">
                <p-input v-model="form.expenseName" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="费用单号">
                <p-input v-model="form.expenseNo" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="结算状态">
                <p-select v-model="form.checkStatus" :options="options.CHECK_STATUS" allowClear />
              </p-form-model-item>
            </a-col>
          </a-row>
        </p-form-model>
      </a-page-header>
      <p-card title="费用信息" style="margin-bottom: 10px">
        <a-space slot="extra">
          <p-button type="primary" @click="onSubmit" :disabled="!selectedRowKeys.length || disSubmit" v-action:submit>对账提交</p-button>
          <p-button type="primary" @click="onConfirm" :disabled="!selectedRowKeys.length" v-action:confirm>对账确认</p-button>
        </a-space>
        <t-table
          ref="masterTable"
          dragle
          bordered
          row-key="id"
          :id="$route.meta.menuId + '_reconciliationManage'"
          :scroll="{ x: true, y: 600 }"
          :columns="mx_columns"
          :data-source.sync="dataSource"
          :remote-url="listRemoteUrl"
          :remoteData="listParams"
          :rowSelectType="2"
          :selectedRowKeys.sync="selectedRowKeys"
        >
          <template slot="operation" slot-scope="text, record">
            <a-space>
              <a @click.stop="toSubmit(record)" :disabled="record.checkStatus > 0">对账提交</a>
              <a @click.stop="toConfirm(record)">对账确认</a>
            </a-space>
          </template>
        </t-table>
      </p-card>
    </p-spin>

    <orderView
      v-show="editType === 'view'"
      :st="1"
      :formExtendedField="formExtendedField"
      :goodsExtendedField="childrenTableExtendedField"
      :record="currentMainDataView"
      :mode="1"
      :options="options"
      :formName="'main'"
      @back="back"
    />
  </div>
</template>

<script>
import { initDictionary, resultExtendedField } from '@/blocks/utils/index.js';
// import { setMainColumns } from '@/blocks/components/scheduling/js/table/tableConfig.js'

import { listRemoteUrl, Confirm, Submit, page_detail_item, page_detail_package, viewUrl } from './js/api.js';
import { setMainColumns } from './js/tableConfig.js';

import orderView from '@/views/BMS/$common/model/orderView/index.orderView.vue'; /**内容查看 */

export default {
  components: { orderView },
  computed: {
    shipmentDate: {
      get() {
        return [this.form.startDate, this.form.endDate];
      },
      set(value) {
        this.$set(this.form, 'startDate', value.length ? value[0] + ' 00:00:00' : '');
        this.$set(this.form, 'endDate', value.length ? value[1] + ' 23:59:59' : '');
      },
    },
    deliveryDate: {
      get() {
        return [this.form.deliveryStartDate, this.form.deliveryEndDate];
      },
      set(value) {
        this.$set(this.form, 'deliveryStartDate', value.length ? value[0] + ' 00:00:00' : '');
        this.$set(this.form, 'deliveryEndDate', value.length ? value[1] + ' 23:59:59' : '');
      },
    },
    receiptDate: {
      get() {
        return [this.form.receiptStartDate, this.form.receiptEndDate];
      },
      set(value) {
        this.$set(this.form, 'receiptStartDate', value.length ? value[0] + ' 00:00:00' : '');
        this.$set(this.form, 'receiptEndDate', value.length ? value[1] + ' 23:59:59' : '');
      },
    },
    originalBackDate: {
      get() {
        return [this.form.originalBackStartDate, this.form.originalBackEndDate];
      },
      set(value) {
        this.$set(this.form, 'originalBackStartDate', value.length ? value[0] + ' 00:00:00' : '');
        this.$set(this.form, 'originalBackEndDate', value.length ? value[1] + ' 23:59:59' : '');
      },
    },
    completeDate: {
      get() {
        return [this.form.completeStartDate, this.form.completeEndDate];
      },
      set(value) {
        this.$set(this.form, 'completeStartDate', value.length ? value[0] + ' 00:00:00' : '');
        this.$set(this.form, 'completeEndDate', value.length ? value[1] + ' 23:59:59' : '');
      },
    },
    selectedRowKeysLength() {
      return this.selectedRowKeys.length;
    },
  },
  watch: {
    selectedRowKeysLength(v) {
      this.disSubmit = false;
      this.dataSource.forEach((item) => {
        if (this.selectedRowKeys.includes(item.id) && item.checkStatus > 0) {
          this.disSubmit = true;
        }
      });
    },
  },
  data() {
    return {
      spinning: false,
      editType: '', // 空-列表页 view-查看
      disSubmit: false,

      form: {
        cargoOwnerName: '',
        orderNo: '',
        shipbillNo: '',
        startDate: '',
        endDate: '',
        deliveryStartDate: '',
        deliveryEndDate: '',
        receiptStartDate: '',
        receiptEndDate: '',
        originalBackStartDate: '',
        originalBackEndDate: '',
        completeStartDate: '',
        completeEndDate: '',
        shipperProvinceCityDistrict: '',
        consigneeProvinceCityDistrict: '',
        expenseName: '',
        expenseNo: '',
        checkStatus: '',
      },
      options: {
        ORDER_BUSINESS_TYPE: [],
        CHECK_STATUS: [],
      },

      // 主表格
      dataSource: [],
      selectedRowKeys: [],
      listRemoteUrl,
      listParams: {},
      mx_columns: setMainColumns(this, this.tableExtendedField),
      tableExtendedField: [],

      page_detail_item,
      page_detail_package,

      formExtendedField: [],
      childrenTableExtendedField: [],
      currentMainDataView: null,
    };
  },
  mounted() {
    initDictionary([{ objectcode: 'ORDER_BUSINESS_TYPE' }, { objectcode: 'CHECK_STATUS', groupcode2: 'BMS2' }], true).then((res) => {
      for (const key in res) {
        this.options[key] = res[key];
      }
    });
    resultExtendedField({ extendedObjectCode: '13' }).then((res) => {
      if (res) {
        this.tableExtendedField = res.table;
      }
    });
    resultExtendedField({ extendedObjectCode: '15' }).then((res) => {
      if (res) {
        this.formExtendedField = res.form;
      }
    });
    resultExtendedField({ extendedObjectCode: '17' }).then((res) => {
      if (res) {
        this.childrenTableExtendedField = res.table;
      }
    });
  },
  methods: {
    viewUrl,
    // 查询
    onSearch() {
      this.listParams = { ...this.form };
    },
    // 重置
    onReset() {
      this.form = {
        cargoOwnerName: '',
        orderNo: '',
        shipbillNo: '',
        startDate: '',
        endDate: '',
        deliveryStartDate: '',
        deliveryEndDate: '',
        receiptStartDate: '',
        receiptEndDate: '',
        originalBackStartDate: '',
        originalBackEndDate: '',
        completeStartDate: '',
        completeEndDate: '',
        shipperProvinceCityDistrict: '',
        consigneeProvinceCityDistrict: '',
        expenseName: '',
      };
    },

    // 查看
    toView(editData) {
      this.currentMainDataView = { id: editData.shipbillId };
      this.editType = 'view';
    },

    onSubmit() {
      this.setRequest(this.selectedRowKeys, Submit);
    },
    toSubmit(editData) {
      this.setRequest([editData.id], Submit);
    },
    onConfirm() {
      this.setRequest(this.selectedRowKeys, Confirm);
    },
    toConfirm(editData) {
      this.setRequest([editData.id], Confirm);
    },
    setRequest(list, Method) {
      this.spinning = true;
      Method(list)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.$refs.masterTable.reload();
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    },

    back() {
      this.editType = '';
      this.$nextTick(() => {
        this.onSearch();
      });
    },
  },
};
</script>
