/*
 *@description:待回单
 *@author: hudw
 *@date: 2022-06-16 11:35:37
*/
<template>
  <div class="pages">
    <updateFormModal
      ref="updateFormModal"
      :onValuesChange="onValuesChange"
      rowKey="shipbillId"
      :visible.sync="visible"
      :view="2"
      :count="8"
      @ok="handle_ok"
      :title="card_title"
      :currentData="currentData"
      :formItems="updateFormItems"
    />
    <orderView
      :goodsTableColumn="v_goodsTableColumn"
      v-show="detailsState === 1"
      :remoteBefore="viewRemoteBefore"
      :parcelTable="true"
      :st="1"
      :goods="goods"
      :parcel="parcel"
      :record="mainCurrent"
      :mainId="mainId"
      :options="options"
      :formName="'main'"
      @back="onBack"
    />
    <div class="pages" v-show="detailsState === 0">
      <searchBar ref="searchBar" :options="options" :count="1" @submit="searchSubmit"></searchBar>
      <mainTable
        deliveryTime
        :exportUrls="exportUrls"
        ref="mainTable"
        rowKey="_row_count"
        title="运单信息"
        :mode="checkMode"
        :url="mainUrl"
        :tableColumnsList="[null,setMainShipbillColumns]"
        :options="options"
        :activeID="mainId"
        :tableExtendedField="tableExtendedField"
        :operation="{ width: 100 }"
        @clickRow="handleRowClick"
        @modeCheck="modeClick"
        @view="handleView"
        @print="handPrint"
        @selectChange="selectChange"
      >
        <!-- :selectedRowKeys.sync="mainsSelectedRowKeys" -->

        <template #extra>
          <p-button type="primary" :disabled="mainsSelectedRowKeys.length === 0" @click.stop="handelFeedback('正本回单确认', mainsSelectedRowKeys)">正本回单确认</p-button>
        </template>
        <template slot="operation" slot-scope="props">
          <a href="javascript:;" @click.stop="handelFeedback('正本回单确认', props.record)">正本回单确认</a>
        </template>
      </mainTable>
      <p-card :bordered="false">
        <a-tabs style="background-color: #fff" v-model="tabsKey">
          <a-tab-pane :key="1" tab="配载运单" v-if="checkMode === 2">
            <shipbillTable ref="shipbillTable" :url="shipbillTableUrl" :options="options" :tableExtendedField="tableExtendedField" />
          </a-tab-pane>
          <a-tab-pane :key="2" tab="配载商品">
            <goodsTable ref="goodsTable" :tableColumnsList="m_tableColumnsList" :url="goodsTableUrl" :options="options" :tableExtendedField="goodsExtendedField" />
          </a-tab-pane>
          <a-tab-pane :key="3" tab="配载包裹">
            <parcelTable ref="parcelTable" :url="packageTableUrl" :options="options" :tableExtendedField="tableExtendedField" />
          </a-tab-pane>
        </a-tabs>
      </p-card>
    </div>
  </div>
</template>
<script>
import useMixin from '../$common/mixins/useMixin.js'
import dictionary from '../$common/mixins/dictionary.js'
import { mainTableInfoUrl, mainTableNextInfoUrl, goodsTableUrl, packageTableUrl, shipbillTableUrl, completeArrangeGoods, exportUrls, printUrl, receiptPicture } from './api.js'
import { setUpdateForm } from './config.js'
import { setViewGoodsColumns,setGoodsColumns } from './goodsTableConfig.js'
import { setMainShipbillColumns } from './mainTableConfig.js'

export default {
  mixins: [useMixin, dictionary],
  data() {
    const goods = {
      url: goodsTableUrl,
    }
    const parcel = {
      url: packageTableUrl,
    }
    this.$watch('goodsExtendedField', (value) => {
      if (value.length > 0) {
        this.m_tableColumnsList = setGoodsColumns(this, value)
      }
    });
    this.$watch('formExtendedField.formTable', (value) => {
      //运单详情商品扩展字段
      if (value.length > 0) {
        this.v_goodsTableColumn = setViewGoodsColumns(this, value)
      }
    });
    this.$watch('tableExtendedField', (value) => {
      //运单扩展字段
      if (value.length > 0) {
        this.mainTableColumns = setMainShipbillColumns(this, value)
      }
    });
    return {
      setMainShipbillColumns,
      m_tableColumnsList: setGoodsColumns(this),//明细表商品配置
      v_goodsTableColumn: setViewGoodsColumns(this),
      exportUrls,
      printUrl,
      shipbillTableUrl,
      goodsTableUrl,
      packageTableUrl,
      goods,
      parcel,
      mainUrl: [mainTableInfoUrl, mainTableNextInfoUrl],
      checkMode: 1,
      tabsKey: 2,
      detailsState: 0 /**0=不显示, 1=新建，2=修改 ，3=查看 ，4=复制  */,
      card_title: '',
      visible: false,
      updateFormItems: null,
      currentData: null,
    }
  },
  mounted() {},
  watch: {
    tabsKey(value) {
      if (this.mainCurrent) {
        this.handleRowClick(null, this.mainId, this.mainCurrent)
      }
    },
  },
  methods: {
    selectChange(selectKey, selectData) {
      this.mainsSelectedRowKeys = selectData
    },
    handelFeedback(title, data) {
      this.card_title = title;
      let shipbillId = [];
      if (Array.isArray(data)) {
        data.forEach((item) => {
          shipbillId.push(this.checkMode === 2 ? item.shipbillIds : item.shipbillId);
        });
        data = {
          shipbillId: shipbillId.join(','),
        };
      } else {
        if (data.shipbillIds) {
          data.shipbillId = data.shipbillIds;
        }
        shipbillId.push(data.shipbillId);
      }

      this.spinning = true;
      receiptPicture(shipbillId)
        .then((res) => {
          if (res.success) {
            // "894594298137853952.png,894594374235111424.jpg"
            this.currentData = { ...data, picUrls: res.data.picUrls };
            this.updateFormItems = setUpdateForm(this, title);
            this.$nextTick(() => {
              this.visible = true;
            });
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    },
    handle_ok(submit, close) {

      return completeArrangeGoods(this,submit, close)

    },

    modeClick(event, type) {
      this.checkMode = type
      this.clearChildrenTableAll(true)
      if (type === 1) {
        //运单模式
        this.tabsKey = 2
      } else if (type === 2) {
        //收货方模式
        this.tabsKey = 1
      }
      this.$nextTick(() => {
        this.$refs.mainTable.reload()
      })
    },
    handleRowClick(event, key, data) {
      this.clearChildrenTableAll(true)
      this.mainId = key

      if (key) {
        this.mainCurrent = data
        const { goodsTable, parcelTable, shipbillTable } = this.$refs
        let ref = [null, shipbillTable, goodsTable, parcelTable]
        ref = ref[this.tabsKey]
        let shipbillIds = [data.shipbillId]
        if (this.checkMode === 2) {
          if (!data.shipbillIds) {
            return this.$exception({ message: 'shipbillIds is undefined', code: 'data.shipbillIds' })
          }
          shipbillIds = data.shipbillIds.split(',')
        }
        ref && ref.reload({ data: { shipbillIds } })
      }
    },
    onValuesChange({ form }, values) {
      const { deliveryStatus } = values
      if (deliveryStatus) {
        form.setFieldsValue({ deliveryFailureReason: undefined, deliveryStrandedReason: undefined })
        form.setItemProps('deliveryFailureReason', {
          required: false,
          hidden: true,
        })
        form.setItemProps('deliveryStrandedReason', {
          required: false,
          hidden: true,
        })
        switch (deliveryStatus) {
          case 10: //配送失败
            form.setItemProps('deliveryFailureReason', {
              required: true,
              hidden: false,
            })
            break
          case 20: //配送滞留
            form.setItemProps('deliveryStrandedReason', {
              required: true,
              hidden: false,
            })
            break
          case 30: //配送成功
        }
      }
    },
  },
}
</script>

