<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>
      <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-input v-model='form.productId' placeholder='请输入产成品编码' />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='工序'>
              <p-input v-model='form.process' placeholder='请输入工序' />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='工序描述'>
              <p-input v-model='form.char1' placeholder='请输入工序描述' />
            </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 label='出库口区域'>
              <a-radio-group v-model='form.targetArea'>
                <a-radio :value='1'>生产车间出、入区域</a-radio>
                <a-radio :value='2'>用料车间出、入区域</a-radio>
              </a-radio-group>
            </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='containerId'>
        <p-table-column data-index='productId' title='产成品编码' />
        <p-table-column data-index='process' title='工序' />
        <p-table-column data-index='char4' title='工序描述' />
        <p-table-column data-index='containerNo' title='订单框' />
        <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>
    <!--明细弹窗-->
    <detailModal v-model='showDetailModal' :editData='detailEditData' />
  </div>
</template>

<script>
import { listRemoteUrl, broadcast } from './api'
import detailModal from './modules/detailModal'

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

      // 明细弹窗
      showDetailModal: false,
      detailEditData: {},
      // 字典
      billtypeOptions: []
    }
  },
  computed: {
    billDateRange: {
      get() {
        return [this.form.startDate, this.form.endDate]
      },
      set(value) {
        this.$set(this.form, 'startDate', value[0])
        this.$set(this.form, 'endDate', value[1])
      }
    }
  },
  methods: {
    toEdit(type, record = {}) {
      if (type === 'view') {
        this.showDetailModal = true
        this.detailEditData = { ...record }
        return
      }
    },
    onReset() {
      this.$refs.formTarget.resetFields()
      this.form = {}
      this.onSubmit()
    },
    onSubmit() {
      this.listParams = { ...this.form }
    },
    // 计划下发
    onBroadcast() {
      const selectedRowKeys = this.selectedRowKeys
      const { targetArea } = this.form
      if (selectedRowKeys.length === 0) return this.$message.warn('请选择要下发的订单')
      if (!targetArea) return this.$message.warn('请选择出库口区域')
      const selectedRows = this.dataSource.filter(_ => selectedRowKeys.includes(_.containerId)).map(_ => {
        return { head: { ..._, targetArea } }
      })
      const self = this
      this.$confirm({
        title: '是否确认下发',
        onOk() {
          return new Promise((resolve, reject) => {
            broadcast(selectedRows).then(res => {
              if (res.success) {
                self.onSubmit()
                self.$message.success(res.message)
                resolve()
              } else {
                self.$message.error(res.message)
                resolve()
              }
            }).catch(() => {
              resolve()
            })
          })
        }
      })
    }
  }
}
</script>

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