`<!--
@name: 创建合托任务
@author: 李恒
@time: 2022-03-09 15:42:07
-->
<template>
  <div>
    <p-spin :spinning='spinning'>
      <p-card title='发起合托'>
        <div slot='extra'>
          <p-button icon='filter' @click='toggleFormTag = !toggleFormTag'>{{ toggleFormTag ? '隐藏' : '显示' }}</p-button>
          <p-button type='primary' class='ml-10' @click='toMerge'>发起合托</p-button>
        </div>
        <p-form-model v-show='toggleFormTag' ref='formTarget' :label-col='{ span: 8 }' :model='form'
                      :wrapper-col='{ span: 16 }' class='plg-grid-from'>
          <a-row>
            <a-col :span='8' :xxl='6'>
              <p-form-model-item label='物料名称'>
                <p-search-modal v-model='form.itemName' v-bind='formItems.itemAttr'
                                @change="(event, value) => onFormChange('item',event, value)" />
              </p-form-model-item>
            </a-col>
            <a-col :span='8' :xxl='6'>
              <p-form-model-item label='料框号'>
                <p-input v-model='form.containerNo' placeholder='请输入料框号' />
              </p-form-model-item>
            </a-col>
            <a-col :span='8' :xxl='6'>
              <p-form-model-item :wrapper-col='{ span: 16, offset: 8 }'>
                <p-button type='primary' icon='search' @click='onSubmit'>查询</p-button>
                <p-button class='ml-10' icon='redo' @click='onReset'>重置</p-button>
              </p-form-model-item>
            </a-col>
          </a-row>
        </p-form-model>
        <p-table :data-source.sync='dataSource'
                 :scroll='{x:true}'
                 :remote-url='listRemoteUrl' :remoteParams='listParams'
                 :selectedRowKeys.sync='selectedRowKeys' bordered dragle row-key='containerNo'>
          <p-table-column :width='140' data-index='containerNo' title='料框' />
          <p-table-column :width='140' data-index='layer' title='层' />
          <p-table-column :width='140' data-index='locationNo' title='位置' />
          <p-table-column :width='180' data-index='action' title='操作' fixed='right'>
            <template slot-scope='text, record'>
              <span>
                <a @click='toEdit("view",record)'>查看明细</a>
              </span>
            </template>
          </p-table-column>
        </p-table>
      </p-card>
    </p-spin>
    <!--选择站点弹窗-->
    <stationModal v-model='showStationModal' :editData='stationEditData' />
    <!--明细弹窗-->
    <detailModal v-model='showDetailModal' :editData='detailEditData' />
  </div>
</template>
<script>
import { listRemoteUrl } from './api'
import stationModal from './modules/stationModal'
import detailModal from './modules/detailModal'
import * as formItems from './js/form'

export default {
  components: { stationModal, detailModal },
  data() {
    return {
      formItems,
      spinning: false,
      toggleFormTag: true,
      form: {
        itemName: '',
        itemCode: '',
        itemId: ''
      },
      // 列表参数
      listRemoteUrl,
      listParams: {},
      dataSource: [],
      selectedRowKeys: [],
      // 合托确认&选择站点接口
      showStationModal: false,
      stationEditData: [],
      // 明细弹窗
      showDetailModal: false,
      detailEditData: {}
    }
  },
  methods: {
    // 查看详情
    toEdit(type, record = {}) {
      if (type === 'view') {
        this.showDetailModal = true
        this.detailEditData = { ...record }
        return
      }
    },
    toMerge() {
      const selectedRowKeys = this.selectedRowKeys
      const len = selectedRowKeys.length
      if (len === 0) return this.$message.warn('请选择要合托的数据')
      if (len === 1) return this.$message.warn('至少选择两条数据进行合托')
      this.stationEditData = this.dataSource.filter(_ => selectedRowKeys.includes(_.containerNo))
      this.showStationModal = true
    },
    onReset() {
      this.$refs.formTarget.resetFields()
      this.form = {}
      this.onSubmit()
    },
    onSubmit() {
      this.selectedRowKeys = []
      this.listParams = { ...this.form }
    },
    onFormChange(name, { selectData }, value) {
      if (!selectData) return
      selectData = Array.isArray(selectData) ? selectData[0] : selectData
      if (name === 'item') {
        if (!value) {
          Object.assign(this.form, { itemName: '', itemCode: '', itemId: '' })
          return
        }
        let { itemName, itemCode, itemId } = selectData
        Object.assign(this.form, { itemName, itemCode, itemId })
        return
      }
    }
  }
}
</script>
<style scoped>
.ml-10 {
  margin-left: 10px;
}
</style>`