<template>
  <p-card title="面单绑定">
    <a-form-model ref='formTarget' :rules="$data.$rules" :label-col='{ span: 8 }' :model='form' :wrapper-col='{ span: 16 }'
                class='plg-grid-from form-wrap'>
      <a-row>
        <a-col :span='6'>
          <a-form-model-item label='单据编号' prop="billNo">
            <a-input :disabled="dataSource.length !== 0" v-model='form.billNo' allowClear @pressEnter="onConfirmA"/>
          </a-form-model-item>
        </a-col>
        <a-col :span='6'>
          <a-form-model-item label='面单号' prop="faceOrder">
            <a-input ref="faceOrder" v-model='form.faceOrder' allowClear @pressEnter="onConfirmB"/>
          </a-form-model-item>
        </a-col>
        <a-col :span='6'>
          <a-form-model-item label='承运商' prop="carrierName">
            <p-select v-model='form.carrierName' :options='carrierTypeOptions'
            :replaceFields="{ label: 'carrierName', value: 'carrierCode' } " allowClear @change="onChange" />
          </a-form-model-item>
        </a-col>
        <a-col :span='6'>
          <a-form-model-item :wrapper-col='{ span: 24 }' style="text-align: center;">
            <p-button @click="onReset">重置</p-button>
            <p-button class="ml-10" type="primary" @click="onSave">保存</p-button>
            <p-button class="ml-10" type="primary" @click="onDel">删除</p-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>

    <p-table ref='dataSource' :data-source='dataSource'
              :scroll="{x:true}"
              rowSelectFixed
              @selectChange='selectChange'
              bordered
            row-key='id'>
      <p-table-column data-index='billNo' :ellipsis="true" title='单据编号' />
      <p-table-column data-index='faceOrder' :ellipsis="true" title='面单号' />
    </p-table>
  </p-card>
</template>

<script>
import { findAll, saveFaceOrder } from './api'
export default {
  data() {
    return {
      form: {
        faceOrder:'',
        billNo:'',
        carrierName:'',
        carrierCode:'',
      },
      
      dataSource:[],
      selectRows: {},
      carrierTypeOptions:[],

      $rules: {
        billNo: [{ required: true, message: '请输入单据编号', trigger: 'blur' }],
        // faceOrder: [{ required: true, message: '请输入面单号', trigger: 'blur' }],
        carrierName: [{ required: true, message: '请选择承运商', trigger: 'change' }],
      },
    }
  },
  mounted() {
    findAll({ isEnable: '1' }).then(res => {
      if (res.success) {
        this.carrierTypeOptions = res.data
      } else {
        this.$message.error(res.message)
      }
    })
  },
  methods: {
    onConfirmA() {
      this.$refs.faceOrder.focus();
    },
    onConfirmB() {
        if (!this.form.billNo) return this.$message.warn('请输入单据编号')
        let id = Math.random() * 10000000
        let obj = { billNo:this.form.billNo, faceOrder:this.form.faceOrder, id }
        this.dataSource.push(obj)
        this.form.faceOrder = ''

    },
    onReset() {
      this.form = {}
      this.dataSource = []
      this.selectRows = []
      this.$refs.formTarget.resetFields()
    },
    onSave() {
      if (this.dataSource.length === 0) return this.$message.warn('数据不能为空!')
      this.$refs.formTarget.validate(flag => {
        if (!flag) return
        let faceOrders = this.dataSource.map(item=>item.faceOrder)
        let par = {
          billNo:this.form.billNo,
          carrierCode: this.form.carrierCode,
          faceOrders
        }
        saveFaceOrder(par).then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.onReset()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    onDel() {
      if (this.selectRows.length === 0) return this.$message.warn('没有选中的数据!')
      let list = this.selectRows.map(t=>t.id)
      this.dataSource = this.dataSource.filter(item => !list.includes(item.id))
      this.selectRows = []
    },
    onChange(p1, p2, p3) {
      this.form.carrierName = p2
      this.form.carrierCode = p1
    },
    selectChange(p1, p2, p3) {
      this.selectRows = p2
    },
  }
}
</script>

<style>

</style>