<!--
@name: 订单下发
@author: 李恒
@time: 2022-03-10 20:52:14
-->
<template>
  <div>
    <p-card title='订单下发'>
      <span slot='extra'>
        <p-button icon='filter' @click='toggleFormTag = !toggleFormTag'>{{ toggleFormTag ? '隐藏' : '显示' }}</p-button>
        <p-button class='ml-10' :disabled='autoGroup' type='primary' @click='onBroadcast'>计划下发</p-button>
        <span class='ml-10'>
          <p-switch v-model='autoGroup' @change='autoGroupChange' />自动组单
        </span>
      </span>
      <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-range-picker v-model='billDateRange' :placeholder="['请输入开始日期','请输入结束日期']" separator='-'
                              valueFormat='YYYY-MM-DD' />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='订单号'>
              <p-input v-model='form.orderCode' placeholder='请输入订单号' />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='单据类型'>
              <p-select v-model='form.bizType' remoteUrl='' :options='billtypeOptions' placeholder='请选择单据类型' />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='产成品编码'>
              <p-input v-model='form.productNumber' placeholder='请输入产成品编码' />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='WMS任务号'>
              <p-input v-model='form.taskCode' placeholder='请输入WMS任务号' />
            </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'
               :remote-url='listRemoteUrl'
               :selectedRowKeys.sync='selectedRowKeys'
               :remoteParams='listParams'
               :scroll='{x:true}'
               bordered dragle row-key='id'>
        <p-table-column data-index='orderCode' title='单号' />
        <p-table-column data-index='taskCode' title='上级任务号' />
        <p-table-column data-index='referOrderNo' title='上级关联号' />
        <p-table-column data-index='bizType' title='业务类型' />
        <p-table-column data-index='productNumber' title='产成品编码' />
        <p-table-column data-index='createTime' title='创建时间' />
        <p-table-column data-index='state' title='订单状态'>
          <template slot-scope='text, record'>
              <span>
                <span v-if='text === 0'>已创建</span>
                <span v-else-if='text === 1'>待下发</span>
                <span v-else-if='text === 2'>已下发</span>
                <span v-else-if='text === 3'>已完成</span>
                <span v-else>{{ text }}</span>
              </span>
          </template>
        </p-table-column>
        <p-table-column :width='160' data-index='operation' title='操作' fixed='right'>
          <template slot-scope='text, record'>
              <span>
                <a @click='toEdit("view",record)'>查看明细</a>
              </span>
          </template>
        </p-table-column>
      </p-table>
    </p-card>
    <edit v-model='showDetailModal' :editData='editData' />
  </div>
</template>

<script>
import { listRemoteUrl, broadcast, getBroadcastType, updateBroadcastType, getDictionaryOptions } from './api'
import edit from './edit'

export default {
  components: { edit },
  data() {
    return {
      toggleFormTag: true,
      autoGroup: false, // 自动组单
      autoGroupData: {},
      form: {},
      // 列表参数
      listRemoteUrl,
      listParams: {},
      dataSource: [],
      selectedRowKeys: [],

      showDetailModal: false,
      editType: '',
      editData: {},

      // 字典
      billtypeOptions: []
    }
  },
  computed: {
    billDateRange: {
      get() {
        return [this.form.startTime, this.form.endTime]
      },
      set(value) {
        this.$set(this.form, 'startTime', value[0])
        this.$set(this.form, 'endTime', value[1])
      }
    }
  },
  methods: {
    toEdit(type, row = {}) {
      this.showDetailModal = true
      this.editType = type
      this.editData = { ...row }
    },
    onReset() {
      this.$refs.formTarget.resetFields()
      this.form = {}
      this.onSubmit()
    },
    onSubmit() {
      this.listParams = { ...this.form }
    },
    autoGroupChange(checked) {
      const code = checked ? '1' : '0'
      this.updateBroadcastType(code)
    },
    // 获取字典
    getDictionaryOptions() {
      getDictionaryOptions().then(res => {
        if (res.success) {
          this.billtypeOptions = res.data.map(item => {
            const { dictId, dictName } = item
            return { label: dictName, value: dictId }
          })
        }
      })
    },
    // 获取下发类型
    getBroadcastType() {
      const params = {
        warehouseId: '1',
        cargoOwnerId: '1'
      }
      getBroadcastType(params).then(res => {
        if (res.success) {
          const { code } = res.data
          this.autoGroupData = res.data
          // 自动组单 1-是、0-否
          this.autoGroup = (code === '1')
        } else {
          this.$message.error(res.message)

        }
      })
    },
    // 更新下发类型
    updateBroadcastType(code) {
      const params = {
        ...this.autoGroupData,
        warehouseId: '1',
        cargoOwnerId: '1',
        code
      }
      updateBroadcastType(params).then(res => {
        if (res.success) {
          // nothing
        } else {
          this.$message.error(res.message)
          this.getBroadcastType()
        }
      })
    },
    // 计划下发
    onBroadcast() {
      const selectedRowKeys = this.selectedRowKeys
      if (selectedRowKeys.length === 0) return this.$message.warn('请选择要下发的订单')
      const selectRows = this.dataSource.filter(_ => selectedRowKeys.includes(_.id))
      const self = this
      this.$confirm({
        title: '是否确认下发',
        onOk() {
          return new Promise((resolve, reject) => {
            broadcast(selectRows).then(res => {
              if (res.success) {
                self.onSubmit()
                self.$message.success(res.message)
                resolve()
              } else {
                self.$message.error(res.message)
                resolve()
              }
            }).catch(() => {
              resolve()
            })
          })
        }
      })
    }
  },
  created() {
    this.getBroadcastType()
    this.getDictionaryOptions()
  }
}
</script>

<style lang='less' scoped>
.ml-10 {
  margin-left: 10px;
}
</style>
