/*
 *@description:在途容器
 *@author: hudw
 *@date: 2023-06-12 17:35:09
*/
<template>
  <div class="pages">
    <inMoneyModal ref="modal" :visible.sync="inMoneyVisible" :mode="mTitle" :recordList="recordList" :record="currentData" :options="options" @ok="ok" />

    <orderEdit
      ref="orderEdit"
      :title="'在途容器-容器归还单'"
      :st="detailsState"
      :record="detailsState === 2 ? mainCurrent : null"
      v-show="detailsState === 2"
      :options="options"
      @back="onBack"
      @abnormal="(record) => handelOperation(record, '异常处理')"
      @edit="(record) => handelOperation(record, '在途容器-归还容器-修改')"
      @receipted="(record) => handelOperation(record, '在途容器-归还容器-签收')"
    />

    <!-- @clickRow="handleRowClick"
        @view="handleView"
        @print="handPrint" -->
    <div class="pages" v-show="detailsState === 0">
      <searchBar ref="searchBar" :span="12" :fromItems="queryFromItems" :options="options" @submit="searchSubmit" />
      <mainTable
        ref="mainTable"
        :rowKey="'_row_count'"
        :options="options"
        @clickRow="handleRowClick"
        :actioveTabKey="actioveTabKey"
        :disabledIds="disabledIds"
        @actioveTabChange="actioveTabChange"
        @selectChange="selectChange"
        :activeID="mainId"
        :tableExtendedField="tableExtendedField"
        :selectedRowKeys.sync="mainsSelectedRowKeys"
        :operation="{ width: 260 }"
      >
        <template #extra>
          <!-- :disabled="mainsSelectedRowKeys.length === 0"  -->
          <p-button type="primary" @click.stop="handelFeedback('在途容器-容器归还单', mainsSelectedRowKeys, 0)">容器归还单</p-button>
          <p-button type="primary" v-if="actioveTabKey == '2'" :disabled="mainsSelectedData.length === 0" @click.stop="handelOperation(mainsSelectedData, '归还容器')">归还容器</p-button>
        </template>
        <a-space slot="operation" v-if="actioveTabKey == '1'" slot-scope="props">
          <a href="javascript:;" :disabled="!props.record.abnormalStatus>0||!(props.record.status >= 3)" @click.stop="handelOperation(props.record, '异常处理')">异常处理</a>
          <a href="javascript:;" @click.stop="handelOperation(props.record, '日志')">日志</a>
        </a-space>
        <a-space slot="operation" v-else slot-scope="props">
          <a href="javascript:;" @click.stop="handelOperation([props.record], '归还容器')">归还容器</a>
        </a-space>
      </mainTable>
      <p-card v-if="actioveTabKey == '2'" :bordered="false">
        <a-space slot="title">
          <span>容器明细</span>
          <label style="font-size: 12px">托盘：{{ countListDetail.palletsNumbers }}</label>
          <label style="font-size: 12px">周转箱：{{ countListDetail.totesNumbers }}</label>
        </a-space>
        <goodsTable
          :rowSelectType="false"
          :autoColWidth="false"
          :doneBefore="doneBefore"
          :url="containerDetailsUrl"
          :tableColumnsList="continerCol"
          ref="containerTable"
          :options="options"
          :activeID="mainId"
        >
          <template slot="operation" slot-scope="props">
            <a href="javascript:;" @click.stop="handelFeedback([props.record.id])">关闭</a>
          </template>
        </goodsTable>
      </p-card>
    </div>
  </div>
</template>
<script>
import queryFormConfig from './searchBar/queryFormConfig';
import mainTable from './mainTable/index.mainTable.vue';
import searchBar from './searchBar/index.searchBar.vue';
import useMixin from '../$common/mixins/useMixin.js';
import dictionary from '../$common/mixins/dictionary.js';
import inMoneyModal from './inMoneyModal/index.inMoneyModal.vue'; /**内容查看 */
import orderEdit from './orderEdit/index.orderEdit.vue';
import { setContinerColumns } from './mainTable/tableConfig';
import { containerDetailsUrl } from './api';
function infoCountDetail() {
  return {
    palletsNumbers: 0,
    totesNumbers: 0,
  };
}
export default {
  mixins: [useMixin, dictionary],
  components: { searchBar,mainTable, inMoneyModal, orderEdit },
  data() {
    return {
      countListDetail: infoCountDetail(),
      containerDetailsUrl,
      currentData: null,
      detailsState: 0,
      mTitle: '',
      card_title: '',
      inMoneyVisible: false,
      queryFromItems: queryFormConfig(this, '1'),
      actioveTabKey: '1',
      continerCol: setContinerColumns(this, false),
      mainsSelectedData: [],
      recordList: [],
      disabledIds: null,
    };
  },
  mounted() {},

  methods: {
    doneBefore({data}) {
      data?.forEach((item, inde) => {
        if (item.containerType === 1) {
          this.countListDetail.palletsNumbers += 1;
        } else if (item.containerType === 2) {
          this.countListDetail.totesNumbers += 1;
        }
      }, this);
    },
    actioveTabChange(key) {
      this.mainId = '';
      this.countListDetail= infoCountDetail(),
      this.disabledIds = null;
      this.mainsSelectedData = [];
      this.mainsSelectedRowKeys = [];
      this.actioveTabKey = key;
      this.queryFromItems = queryFormConfig(this, key);
    },
    selectChange(selectKey, selectData) {
      this.mainsSelectedRowKeys = selectKey;
      this.mainsSelectedData = [...selectData];
      let value = this.mainsSelectedData;
      if (!value || value.length === 0) {
        //return false;
        this.disabledIds = null;
      } else {
        let o = value[0];
        this.disabledIds = o.consigneeName + o.shipperName;
      }
    },
    handelFeedback(title, data) {
      this.detailsState = 2;
      this.card_title = title;
      this.currentData = data;
    },
    handleRowClick(event, key, data) {

      if (this.actioveTabKey == '2') {
        this.countListDetail= infoCountDetail(),
        event?.stopPropagation();
        this.mainId = '';
        if (key && this.actioveTabKey == 2) {
          this.mainId = key;
          this.$refs.containerTable.reload({ data: { containerBillNos: data.containerBillNos } });
        } else {
          this.$refs.containerTable.dataSource = [];
        }
      }
    },
    ok(promise) {
      return promise?.then(() => {
        this.$refs.orderEdit.reload();
      });
    },

    handelOperation(record, name) {
      (this.currentData = null), (this.recordList = []);
      this.mTitle = name;
      this.inMoneyVisible = true;
      switch (name) {
        case '异常处理':
          this.currentData = record;
          return;
        case '日志':
          this.currentData = record;

          return;
        case '归还容器':
          if (Array.isArray(record)) {
            this.recordList = record;
            if (record.length > 1) {
              for (let i = 0; i < record.length; i++) {
                let pre = record[i + 1];
                pre = pre.consigneeName + pre.shipperName;
                let n = record[i].consigneeName + record[i].shipperName;
                if (pre != n) {
                  this.inMoneyVisible = false;
                  this.$exception({
                    message: '门店名称与发货方必须一致',
                    code: '200',
                  });
                  return false;
                }
              }
            }
          }
          return;
        case '在途容器-归还容器-修改':
        case '在途容器-归还容器-签收':
          record.containerBillNos = record.containerBillNo;
          this.recordList = [record];
          this.currentData = record;

        default:
          break;
      }
    },
  },
};
</script>
