/*
 *@description：待装卸
 *@author: hudw
 *@date: 2022-06-16 11:35:37
*/
<template>
  <div class="pages">
    <orderView
      :formExtendedField="formExtendedField"
      v-show="detailsState === 1"
      :parcelTable="true"
      :remoteBefore="viewRemoteBefore"
      :st="1"
      :goods="goods"
      :parcel="parcel"
      :record="mainCurrent"
      :mainId="mainId"
      :options="options"
      :formName="'main'"
      @back="onViewBack"
    />
    <scanPage v-show="detailsState === 5" :st="detailsState" @back="onBack" :options="options" @view="handleView" />
    <div class="pages" v-show="detailsState === 0">
      <searchBar ref="searchBar" :options="options" :count="searchType" @submit="searchSubmit"></searchBar>
      <mainTable
        :exportUrls="exportUrls"
        ref="mainTable"
        title="运单信息"
        :mode="checkMode"
        :url="mainUrl"
        :options="options"
        :activeID="mainId"
        :tableExtendedField="tableExtendedField"
        :operation="{ width: 160 }"
        @clickRow="handleRowClick"
        @modeCheck="modeClick"
        @view="handleView"
        @selectChange="selectChange"
        @print="handPrint"
      >
        <template slot="afterBtn" slot-scope="prop">
          <p-button :type="checkMode === 6 ? 'primary' : 'default'" @click="prop.handelChecked($event, 6)">预约单模式</p-button>
        </template>
        <template #extra>
          <p-button type="primary" @click.stop="startScan()">装车扫描</p-button>
          <p-button type="primary" :disabled="mainsSelectedRowKeys.length === 0" @click.stop="start(mainsSelectedRowKeys)">开始装卸</p-button>
          <p-button type="primary" :disabled="mainsSelectedRowKeys.length === 0" @click.stop="complete(mainsSelectedRowKeys)">装卸完成</p-button>
        </template>

        <template slot="operation" slot-scope="props">
          <!-- 待装卸页面  预约模式  status=60，开始装卸亮，status=70,装卸完成亮 -->

          <template v-if="checkMode === 6">
            <a href="javascript:;" :disabled="props.record.status !== 60" @click.stop="start([props.record])">开始装卸</a>
            <a-divider type="vertical" />
            <a href="javascript:;" :disabled="props.record.status !== 70" @click.stop="complete([props.record])">装卸完成</a>
          </template>
          <template v-else>
            <a href="javascript:;" :disabled="!(checkMode === 2 || props.record.status == 70)" @click.stop="start([props.record])">开始装卸</a>
            <a-divider type="vertical" />
            <a href="javascript:;" :disabled="!(checkMode === 2 || props.record.status == 80)" @click.stop="complete([props.record])">装卸完成</a>
          </template>
        </template>
      </mainTable>
      <p-card :bordered="false">
        <a-tabs style="background-color: #fff" v-model="tabsKey">
          <a-tab-pane :key="1" tab="配载运单" v-if="checkMode != 1">
            <shipbillTable ref="shipbillTable" :url="shipbillTableUrl" :options="options" :tableExtendedField="tableExtendedField" />
          </a-tab-pane>
          <a-tab-pane :key="2" tab="配载商品">
            <goodsTable ref="goodsTable" :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 {
  mainTableAppointmentUrl,
  mainTableInfoUrl,
  mainTableNextInfoUrl,
  goodsTableUrl,
  packageTableUrl,
  shipbillTableUrl,
  completeArrangeGoods,
  startArrangeGoods,
  exportUrls,
  printUrl,
} from './api.js'

export default {
  components: {
    scanPage: () => import(/* webpackChunkName: "[request]" */ './models/scanPage/index.vue'),
  },
  mixins: [useMixin, dictionary],
  data() {
    const goods = {
      url: goodsTableUrl,
    }
    const parcel = {
      url: packageTableUrl,
    }
    return {
      exportUrls,
      printUrl,
      shipbillTableUrl,
      goodsTableUrl,
      packageTableUrl,
      goods,
      parcel,
      searchType: 1,
      mainUrl: [mainTableInfoUrl, mainTableNextInfoUrl, '', '', '', mainTableAppointmentUrl],
      checkMode: 1,
      tabsKey: 2,
      detailsState: 0 /**0=不显示, 1=新建，2=修改 ，3=查看 ，4=复制  */,
      lastDetailsState: 0,
    }
  },
  mounted() {},
  watch: {
    tabsKey(value) {
      if (this.mainCurrent) {
        this.handleRowClick(null, this.mainId, this.mainCurrent)
      }
    },
  },
  methods: {
    selectChange(selectKey, selectData) {
      this.selectedRowKeys=selectKey

      this.mainsSelectedRowKeys = selectData
    },

    startScan() {
      this.lastDetailsState = 5
      this.detailsState = 5
    },

    start(arr) {
      let record = arr.map((item) => {
        if (item.shipbillIds) {
          item.shipbillId = item.shipbillIds.split(',')
        }
        return item.shipbillId
      })

      record = record.flat();
      console.log(record)

      return startArrangeGoods(this, record)
    },
    complete(arr) {
      let record = arr.map((item) => {
        if (item.shipbillIds) {
          item.shipbillId = item.shipbillIds.split(',')
        }
        return item.shipbillId
      })
      record = record.flat();
      console.log(record)

      completeArrangeGoods(this, record)
    },

    modeClick(event, type) {
      this.searchType = 1
      if (type == 6) {
        this.searchType = type
      }
      this.checkMode = type
      this.clearChildrenTableAll(true)

      if (type === 1) {
        //运单模式
        this.tabsKey = 2
      } else if (type === 2 || type === 6) {
        //收货方模式\预约单模式
        this.tabsKey = 1
      }
      this.$refs.mainTable.clearTableData()
      type !== 6 &&
        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 || this.checkMode === 6) {
          shipbillIds = data.shipbillIds.split(',')
        }
        ref && ref.reload({ data: { shipbillIds } })
      }
    },

    onViewBack(formName, id, isReload) {
      this.detailsState = this.lastDetailsState
      this.currentMainData = null

      if (isReload) {
        if (this.$refs.childrenTable) {
          this.$refs.childrenTable.dataSource = []
        }
        this.clearChildrenTableAll()
        this.$refs[formName + 'Table'].reload().then(() => {
          if (id) {
            if (formName == 'main') {
              this.mainId = id
            } else {
              this.childrenId = id
            }
          }
        })
      }
    },
  },
}
</script>