<!--
@name: 已托运
@author: 张泽贤
@time: 2022-05-05
@doc: PROLOG_UPCloudSolutionForTMS__v1.2.1_调度管理_1.2.2.doc
-->
<template>
  <div class="pages">
    <p-spin :spinning="spinning" v-show="!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.loadingBillNo" />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="托运单状态">
                <p-select v-model="form.status" :options="options.LOADING_BILL_STATUS" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="6">
              <p-form-model-item label="创建时间">
                <p-range-picker v-model="date1" 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 :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>
                  <!-- <p-button type="primary" @click="onSeniorSearch">高级查询</p-button> -->
                </a-space>
              </p-form-model-item>
            </a-col>
          </a-row>
        </p-form-model>
      </p-card>

      <p-card title="托运单信息" style="margin-bottom: 10px">
        <a-space slot="extra">
          <p-button type="primary" @click="onAudit" :disabled="!selectedRowKeys.length">审核</p-button>
          <p-button type="danger" @click="onRevoke" :disabled="!selectedRowKeys.length">撤销</p-button>
          <a-dropdown>
            <template #overlay>
              <a-menu>
                <a-menu-item key="2">
                  <export-button
                    type="link"
                    :ids="selectedRowKeys"
                    :pages="mainPages"
                    :getSearchValue="() => 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-item type="link" key="3">
                  <p-button type="link" :disabled="!selectedRowKeys.length">打印</p-button>
                </a-menu-item>
              </a-menu>
            </template>
            <a-button>更多</a-button>
          </a-dropdown>
        </a-space>
        <t-table
          ref="masterTable"
          dragle
          bordered
          row-key="loadingBillId"
          :id="$route.meta.menuId + '_consigned'"
          :scroll="{ x: true}"
         :vScrollX="{enabled:true}"
         :vScrollY="{enabled:true,rows:10}"
          :columns="loading_columns"
          :data-source.sync="dataSource"
          :remote-url="listRemoteUrl"
          :remoteData="listParams"
          :rowSelectType="2"
          @selectChange="(selectKey, selectData)=>selectedRowKeys=selectKey"
          @clickRow="masterClickRow"
          :sign="true"
          :doneBefore="doneBefore"
        >
          <template slot="operation" slot-scope="text, record">
            <a-space>
              <a @click.stop="toView(record)">查看</a>
              <a @click.stop="toEdit(record)">修改</a>
              <a @click.stop="toAudit(record)" :disabled="record.status > 10">审核</a>
              <a @click.stop="toRevoke(record)" :disabled="record.status > 10">撤销</a>
            </a-space>
          </template>
        </t-table>
      </p-card>

      <p-card>
        <p-tabs :animated="false" :activeKey="activeKey" @tabClick="activeKey = $event">
          <a-tab-pane key="1" tab="配载运单" :forceRender="true">
            <waybillList ref="waybillList" :editData="waybillData" :options="options"></waybillList>
          </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'"
              :vScrollX="{enabled:false}"
              :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'"
              :vScrollX="{enabled:false}"
              :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>
        </p-tabs>
      </p-card>
    </p-spin>

    <Edit v-if="editType === 'edit' || editType === 'view'" :editType="editType" :editData="editData" :options="options" :mextendedField_list="mextendedField_list" @back="editType = ''"></Edit>
  </div>
</template>

<script>
import { initDictionary, resultExtendedField } from '@/blocks/utils'
import { UPCLOUD_RDC_TMS_BUSINESS_SERVICE } from '@/config/serviceSettings.js'
import exportButton from '@/blocks/components/export-modal/modal.index.vue'
import { setConsignedColumns, setGoodsColums, setPackColums } from '@/blocks/components/scheduling/js/table/tableConfig.js'

import { listRemoteUrl, goodsListRemoteUrl, packListRemoteUrl, Audit, Revoke } from './js/api'
import Edit from './modules/edit.vue'
import waybillList from './modules/waybillList.vue'

export default {
  components: { Map, Edit, waybillList, exportButton },
  computed: {
    date1: {
      get() {
        return [this.form.createStartTime, this.form.createEndTime]
      },
      set(value) {
        this.$set(this.form, 'createStartTime', value.length ? value[0] + ' 00:00:00' : '')
        this.$set(this.form, 'createEndTime', value.length ? value[1] + ' 23:59:59' : '')
      },
    },
  },
  data() {
    return {
      UPCLOUD_RDC_TMS_BUSINESS_SERVICE,
      spinning: false,
      editType: '', // 空-列表页 view-查看 edit-编辑
      activeKey: '1',

      form: {
        loadingBillNo: '',
        status: '',
        createStartTime: '',
        createEndTime: '',
      },
      options: {
        LOADING_BILL_STATUS: [],
        ORDER_BUSINESS_TYPE: [],
      },

       mainId: '',

      // 主表格
      dataSource: [],
      selectedRowKeys: [],
      listRemoteUrl,
      listParams: {},
      editData: {},
      waybillData: {},
      loading_columns: setConsignedColumns(this, this.tableExtendedField),
      mextendedField_list: [],
      tableExtendedField: [],
      mainPages: { pageNum: 1, pageSize: 15 },

      // 商品表格
      goodsDataSource: [],
      goodsListRemoteUrl,
      goodsListParams: {},
      goods_columns: setGoodsColums(this),

      // 包裹表格
      packDataSource: [],
      packListRemoteUrl,
      packListParams: {},
      pack_columns: setPackColums(this),
    }
  },
  watch: {
    activeKey(value) {
      switch (value) {
        case '1':
          this.mainId && this.$refs.waybillList.reload();
          break;
        case '2':
          this.mainId && this.$refs.goodsTable.reload({ data: { loadingBillId: this.mainId }});
          break;
        case '3':
          this.mainId && this.$refs.packTable.reload({ data: { loadingBillId: this.mainId }});
          break;
      }
    },
  },
  mounted() {
    initDictionary([{ objectcode: 'LOADING_BILL_STATUS' }, { objectcode: 'ORDER_BUSINESS_TYPE' }]).then((res) => {
      this.options.LOADING_BILL_STATUS = res.LOADING_BILL_STATUS.map((item) => {
        item.value = +item.value
        return item
      })
      this.options.ORDER_BUSINESS_TYPE = res.ORDER_BUSINESS_TYPE.map((item) => {
        item.value = +item.value
        return item
      })
    })
    // resultExtendedField({ extendedObjectCode: '13' }).then((res) => {
    //   if (res) {
    //     this.mextendedField_list = res.list
    //     this.tableExtendedField = res.table
    //   }
    // })
  },
  methods: {
    // 查询
    onSearch() {
      this.dataSource = []
      this.selectedRowKeys = []
      this.$refs.waybillList.waybillDataSource = []
      this.goodsDataSource = []
      this.packDataSource = []
      this.listParams = { ...this.form }
    },
    // 重置
    onReset() {
      this.form = {
        loadingBillNo: '',
        status: '',
        createStartTime: '',
        createEndTime: '',
      }
    },
    doneBefore(res) {
      const { pageNum, pageSize } = res.data
      this.mainPages = { pageNum, pageSize }
    },
    masterClickRow(event, activeID, rowRecord) {
      this.mainId = rowRecord.loadingBillId;
      switch (this.activeKey) {
        case '1':
          this.waybillData = { ...rowRecord };
          break;
        case '2':
          this.goodsListParams = { loadingBillId: rowRecord.loadingBillId };
          break;
        case '3':
          this.packListParams = { loadingBillId: rowRecord.loadingBillId };
          break;
      }
    },

    // 审核
    onAudit() {
      this.Audit(this.selectedRowKeys)
    },
    toAudit(record) {
      this.Audit([record.loadingBillId])
    },
    Audit(list) {
      let self = this
      this.$confirm({
        title: '是否审核？',
        onOk() {
          return new Promise((resolve, reject) => {
            self.spinning = true
            Audit(list)
              .then((res) => {
                self.spinning = false
                if (res.success) {
                  self.$message.success(res.message)
                  self.onSearch()
                  resolve()
                } else {
                  self.$exception(res)
                  resolve()
                }
              })
              .finally(() => {
                self.spinning = false
                reject()
              })
          })
        },
      })
    },

    // 撤销
    onRevoke() {
      this.Revoke(this.selectedRowKeys)
    },
    toRevoke(record) {
      this.Revoke([record.loadingBillId])
    },
    Revoke(list) {
      let self = this
      this.$confirm({
        title: '是否撤销？',
        onOk() {
          return new Promise((resolve, reject) => {
            self.spinning = true
            Revoke(list)
              .then((res) => {
                self.spinning = false
                if (res.success) {
                  self.$message.success(res.message)
                  self.onSearch()
                  resolve()
                } else {
                  self.$exception(res)
                  resolve()
                }
              })
              .finally(() => {
                self.spinning = false
                reject()
              })
          })
        },
      })
    },

    toView(record) {
      this.editData = { ...record }
      this.editType = 'view'
    },
    toEdit(record) {
      this.editData = { ...record }
      this.editType = 'edit'
    },
  },
}
</script>