<template>
    <p-card  class='full-card-panel' :loading='spinning'>
      <div slot='title' style='display: inline-block; cursor: pointer' @click='back'>
        <a-icon class='mr-10' style='color: #1990ff' type='arrow-left' />
        打印路由{{ typeTitle }}
      </div>
      <div slot='extra'>
        <p-button type='primary' v-if='type !== "view"' @click='onSubmit'>保存</p-button>
      </div>
      <p-form-model ref='formTarget' :label-col='{ span: 8 }' :model='form' :wrapper-col='{ span: 16 }' :rules="{
                        employeeId:[{required: true, message: '请输入工号', trigger: 'change'}],
                        routeName:[{required: true, message: '请输入路由名称', trigger: 'change'}],
                        warehouseName:[{required: true, message: '请选择仓库', trigger: 'change'}],
                        printerName:[{required: true, message: '请选择打印机', trigger: 'change'}],
                        warehouseName:[{required: true, message: '请选择仓库', trigger: 'change'}],
                    }"
                    class='plg-grid-from'>
        <a-row>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='工号' prop='employeeId'>
              <p-input v-model='form.employeeId' placeholder='请输入工号' :disabled="type === 'view'" :maxLength='32' />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='打印机路由名称' prop='routeName'>
              <p-input v-model='form.routeName' placeholder='请输入打印机路由名称' :disabled="type === 'view'"
                       :maxLength='32' />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='仓库' prop='warehouseName'>
              <p-search-modal v-model='form.warehouseName' v-bind='warehouseAttr'
                              :disabled="type === 'view'"
                              @change="(event, value) => onFormChange('warehouse',event, value)" />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='打印机名称' prop='printerName'>
              <p-search-modal v-model='form.printerName' v-bind='$data.$pageFormItems.printAttr'
                              :disabled="type === 'view'"
                              @change="(event, value) => onFormChange('print',event, value)" />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6' v-if='type !== "edit"'>
            <p-form-model-item label='打印机路由状态'>
              <p-switch v-model='form.status' :replaceFields='{true:"1",false:"0"}' :disabled="type === 'view'" />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='备注'>
              <p-input v-model='form.remark' :disabled="type === 'view'" :maxLength='128' />
            </p-form-model-item>
          </a-col>
        </a-row>
      </p-form-model>
    </p-card>
</template>

<script>
import { add, update } from './api'
import * as $pageFormItems from './js/form'
import { warehouseAttr } from '@/views/TMS/print/$common/modalConfig.js'

export default {
  props: {
    type: '',
    editData: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    if (this.editData.id) {
      this.form = { ...this.editData }
    }
  },
  computed: {
    typeTitle() {
      const dictionary = {
        add: '新增',
        edit: '编辑',
        view: '查看'
      }
      return dictionary[this.type] || this.type
    }
  },
  data() {
    return {
      warehouseAttr,
      $pageFormItems,
      spinning: false,
      form: {
        status: '1',
        printerCode: '',
        printerName: '',
        printerId: '',
        warehouseName: '',
        warehouseCode: '',
        warehouseId: ''
      }
    }
  },
  methods: {
    back() {
      this.$emit('back')
    },
    onSubmit() {
      this.$refs.formTarget.validate().then((flag) => {
        if (!flag) return
        if (this.type === 'add') return this.onAdd()
        if (this.type === 'edit') return this.onUpdate()
      })
    },
    //新增保存
    onAdd() {
      this.spinning = true
      const params = {
        ...this.form
      }
      add(params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.back()
        } else {
          this.$message.warn(res.message)
        }
      }).finally(() => {
        this.spinning = false
      })
    },
    //修改保存
    onUpdate() {
      this.spinning = true
      const params = {
        ...this.form
      }
      update(params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.back()
        } else {
          this.$message.warn(res.message)
        }
      }).finally(() => {
        this.spinning = false
      })
    },
    onFormChange(name, { selectData }, value) {
      if (!selectData) return
      selectData = Array.isArray(selectData) ? selectData[0] : selectData
      if (name === 'print') {
        if (!value) {
          Object.assign(this.form, { printerCode: '', printerName: '', printerId: '' })
          return
        }
        const { printerCode, printerName, id: printerId } = selectData
        Object.assign(this.form, { printerCode, printerName, printerId })
        return
      }
      if (name === 'warehouse') {
        if (!value) {
          Object.assign(this.form, { warehouseName: '', warehouseCode: '', warehouseId: '' })
          return
        }
        const { code:warehouseCode,name:warehouseName, id: warehouseId } = selectData
        Object.assign(this.form, { warehouseName, warehouseCode, warehouseId })
        return
      }
    }
  }
}
</script>

<style lang='less' scoped>
</style>
