<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="{
                        printerCode:[{required: true, message: '请输入打印机编码', trigger: 'change'}],
                        printerName:[{required: true, message: '请输入打印机名称', trigger: 'change'}],
                        printerType:[{required: true, message: '请选择打印机类型', trigger: 'change'}],
                        printerStatus: [{ 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='printerCode'>
              <p-input v-model='form.printerCode' placeholder='请输入打印机编码' :maxLength='64'
                       :disabled="type !== 'add'" />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='打印机名称' prop='printerName'>
              <p-input v-model='form.printerName' placeholder='请输入打印机名称' :maxLength='64'
                       :disabled="type === 'view'" />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='TCP/IP地址'>
              <p-input v-model='form.ip' :maxLength='32' :disabled="type === 'view'" />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='打印机类型' prop='printerType'>
              <p-select v-model='form.printerType' placeholder='请选择打印机类型' :options='printerTypeOptions'
                        allowClear
                        style='width: 100%' :disabled="type === 'view'" />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='打印机状态' prop='printerStatus'>
              <p-select v-model='form.printerStatus' placeholder='请选择打印机状态' :options='printerStatusOptions'
                        allowClear
                        style='width: 100%' :disabled="type === 'view'" />
            </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' :disabled="type === 'view'"
                              v-bind='warehouseAttr'
                              @change="(event, value) => onFormChange('warehouse',event, value)" />
            </p-form-model-item>
          </a-col>
          <a-col :span='8' :xxl='6'>
            <p-form-model-item label='备注'>
              <p-input v-model='form.remark' :maxLength='128' :disabled="type === 'view'" />
            </p-form-model-item>
          </a-col>
        </a-row>
      </p-form-model>
    </p-card>
</template>

<script>
import { add, getDetail, update } from './api'
import { warehouseAttr } from '@/views/TMS/print/$common/modalConfig.js'
export default {
  props: {
    type: '',
    editData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    typeTitle() {
      const dictionary = {
        add: '新增',
        edit: '编辑',
        view: '查看'
      }
      return dictionary[this.type] || this.type
    }
  },
  data() {
    return {
      warehouseAttr,
      spinning: false,
      form: {
        warehouseName: '',
        warehouseCode: '',
        warehouseId: ''
      },
      // 字典
      printerTypeOptions: [
        { label: '纸单', value: '0' },
        { label: '标签', value: '1' }
      ],
      printerStatusOptions: [
        { label: '已连接', value: '1' },
        { label: '断开连接', value: '0' }
      ],
      statusOptions: [
        { label: '启用', value: '1' },
        { label: '停用', value: '0' }
      ]
    }
  },
  mounted() {
    if (this.editData.id) {
      this.getDetail()
    }
  },
  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,
        warehouseCode: '111',
        warehouseId: '111'
      }
      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,
        warehouseCode: '111',
        warehouseId: '111'
      }
      update(params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.back()
        } else {
          this.$error({
            title: '错误',
            content: res.message
          })
        }
      }).finally(() => {
        this.spinning = false
      })
    },
    getDetail() {
      const { id } = this.editData
      const params = { id }
      this.spinning = true
      getDetail(params).then(res => {
        if (res.success) {
          this.form = { ...res.data }
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.spinning = false
      })
    },
    onFormChange(name, { selectData }, value) {
      selectData = Array.isArray(selectData) ? selectData[0] : selectData
      if (name === 'warehouse') {
        if (!value) {
          Object.assign(this.form, { warehouseName: '', warehouseCode: '', warehouseId: '' })
          return
        }
        const { name:warehouseName,code:warehouseCode, id:warehouseId } = selectData
        Object.assign(this.form, { warehouseName, warehouseCode, warehouseId })
        return
      }
    }
  }
}
</script>


