<!--
@name: 取号管理-按预约单
@author: 张泽贤
@time: 2022-07-15
@doc:
-->
<template>
  <div class="pages">
    <p-spin :spinning="spinning" v-if="!editType">
      <p-card style="margin-bottom: 10px">
        <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.reserveNumber" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="预约类型">
                <p-select v-model="form.appointmentType" :options="options.APPOINTMENT_TYPE" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="12">
              <p-form-model-item :wrapper-col="{ span: 24 }" style="text-align: right">
                <a-space>
                  <p-button type="primary" @clickSync="onSearch" icon="search">查询</p-button>
                  <p-button @click="onReset">重置</p-button>
                </a-space>
              </p-form-model-item>
            </a-col>
          </a-row>
          <a-row> </a-row>
        </p-form-model>
      </p-card>
      <p-card title="预约信息" style="margin-bottom: 10px">
        <a-space slot="extra">
          <!-- <p-button type="primary" @click="onTake" :disabled="!selectedRowKeys.length">取号</p-button> -->
          <!-- <a-dropdown>
            <template #overlay>
              <a-menu>
                <a-menu-item key="2">
                  <export-button
                    type="link"
                    :ids="selectedRowKeys"
                    :pages="listParams"
                    downloadFileName="取号管理-按预约单"
                    :allUrl="UPCLOUD_RDC_TMS_BUSINESS_SERVICE + '/trailer/trailer_export_all'"
                    :currentUrl="UPCLOUD_RDC_TMS_BUSINESS_SERVICE + '/trailer/trailer_export_page'"
                    :selectUrl="UPCLOUD_RDC_TMS_BUSINESS_SERVICE + '/trailer/trailer_export_choose'"
                    >导出</export-button
                  >
                </a-menu-item>
              </a-menu>
            </template>
            <a-button>更多</a-button>
          </a-dropdown> -->
        </a-space>
        <t-table
          ref="masterTable"
          dragle
          bordered
          row-key="appointmentId"
          :id="$route.meta.menuId + '_reserve'"
          :scroll="{ x: true }"
          :vScrollX="{enabled:true}"
          :vScrollY="{enabled:true,rows:4}"
          @selectChange="selectKey=>selectedRowKeys=selectKey"
          :columns="mx_columns"
          :data-source.sync="dataSource"
          :remote-url="listRemoteUrl"
          :remoteData="listParams"
          :rowSelectType="2"
          @clickRow="masterClickRow"
          :autoLoad="false"
          :pagination="false"
        >
          <template slot="operation" slot-scope="text, record">
            <a-space>
              <a @click.stop="toTake(record)">取号</a>
            </a-space>
          </template>
        </t-table>
      </p-card>
      <p-card>
        <a-tabs style="background-color: #fff">
          <a-tab-pane :key="1" tab="配载运单" :forceRender="true">
            <t-table
              ref="waybillTable"
              dragle
              bordered
              row-key="shipbillId"
              :id="$route.meta.menuId + '_waybillTable'"
              :scroll="{ x: true }"
         :vScrollX="{enabled:true}"
        :vScrollY="{enabled:true,rows:4}"
                      :columns="waybill_columns"
              :data-source.sync="waybillDataSource"
              :remote-url="waybillListRemoteUrl"
              :remoteData="waybillListParams"
              :rowSelectType="false"
              :autoLoad="false"
            >
            </t-table>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="配载商品" :forceRender="true">
            <t-table
              ref="goodsTable"
              dragle
              bordered
              row-key="id"
              :id="$route.meta.menuId + '_goodsTable'"
              :scroll="{ x: true }"
         :vScrollX="{enabled:true}"
        :vScrollY="{enabled:true,rows:4}"
                      :columns="goods_columns"
              :data-source.sync="goodsDataSource"
              :remote-url="goodsListRemoteUrl"
              :remoteData="goodsListParams"
              :rowSelectType="false"
              :autoLoad="false"
            >
            </t-table>
          </a-tab-pane>
          <a-tab-pane :key="3" tab="配载包裹" :forceRender="true">
            <t-table
              ref="packTable"
              dragle
              bordered
              row-key="id"
              :id="$route.meta.menuId + '_packTable'"
              :scroll="{ x: true }"
         :vScrollX="{enabled:true}"
        :vScrollY="{enabled:true,rows:4}"
                      :columns="pack_columns"
              :data-source.sync="packDataSource"
              :remote-url="packListRemoteUrl"
              :remoteData="packListParams"
              :rowSelectType="false"
              :autoLoad="false"
            >
            </t-table>
          </a-tab-pane>
        </a-tabs>
      </p-card>
    </p-spin>

    <takeNumber v-if="editType" :type="'1'" :editData="editData" :reserveData="selectedData" @back="toBack" :waybill2_columns="waybill2_columns" />
  </div>
</template>

<script>
import { UPCLOUD_RDC_TMS_BUSINESS_SERVICE } from '@/config/serviceSettings.js'
import exportButton from '@/blocks/components/export-modal/modal.index.vue'

import { reserveListRemoteUrl, queryAppointDetail, queryAppointItem, queryAppointPack, take_number_page } from '../js/api'
import takeNumber from './takeNumber.vue'

export default {
  components: { exportButton, takeNumber },
  props: {
    editData: {
      type: Object,
      default: () => ({}),
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mx_columns: {
      type: Array,
      default: () => [],
    },
    waybill_columns: {
      type: Array,
      default: () => [],
    },
    goods_columns: {
      type: Array,
      default: () => [],
    },
    pack_columns: {
      type: Array,
      default: () => [],
    },
    waybill2_columns: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      UPCLOUD_RDC_TMS_BUSINESS_SERVICE,
      spinning: false,
      editType: '',

      form: {},

      // 主表格
      dataSource: [],
      selectedRowKeys: [],
      listRemoteUrl: reserveListRemoteUrl,
      listParams: {},
      selectedData: {},

      // 运单表格
      waybillDataSource: [],
      waybillListRemoteUrl: queryAppointDetail,
      waybillListParams: {},

      // 商品表格
      goodsDataSource: [],
      goodsListRemoteUrl: queryAppointItem,
      goodsListParams: {},

      // 包裹表格
      packDataSource: [],
      packListRemoteUrl: queryAppointPack,
      packListParams: {},

      mextendedField_list: [],
    }
  },
  mounted() {
    this.form = { ...this.editData }
    take_number_page({ ...this.form }).then((res) => {
      if (res.data.length) {
        this.dataSource = [...res.data]
      } else {
        this.$emit('goWaybill', '2')
      }
    })
  },
  methods: {
    // 查询
    onSearch() {
      this.waybillDataSource = []
      this.goodsDataSource = []
      this.packDataSource = []
      this.listParams = { ...this.form, ...this.editData }
    },
    // 重置
    onReset() {
      this.form = {}
    },

    onTake() {},
    toTake(record) {
      console.log(record, this.editType)
      this.selectedData = record
      this.editType = '3'
    },

    masterClickRow(event, activeID, rowRecord) {
      this.waybillListParams = { appointmentId: rowRecord.appointmentId }
      this.goodsListParams = { appointmentId: rowRecord.appointmentId }
      this.packListParams = { appointmentId: rowRecord.appointmentId }
    },

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