<!--
@name: 打印路由配置
@author:
@time: 2022-03-28 09:06:44
-->
<template>
    <p-card v-if='!editType' :title='$route.meta.title' class='full-card-panel'>
      <div slot='extra'>
        <p-button icon='filter' @click='toggleFormTag = !toggleFormTag'>{{ toggleFormTag ? '隐藏' : '显示' }}</p-button>
        <p-button type='primary' class='ml-10' @click="toEdit('add')">新增</p-button>
      </div>
      <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='6'>
            <p-form-model-item label='工号'>
              <p-input v-model='form.employeeId' placeholder='请输入工号' @pressEnter='onSubmit' />
            </p-form-model-item>
          </a-col>
          <a-col :span='6'>
            <p-form-model-item label='仓库'>
              <p-search-modal v-model='form.warehouseName' v-bind='warehouseAttr'
                              @change="(event, value) => onFormChange('warehouse',event, value)" />
            </p-form-model-item>
          </a-col>
          <a-col :span='6'>
            <p-form-model-item :wrapper-col='{ span: 16, offset: 8 }'>
              <p-button type='primary' @click='onSubmit'>查询</p-button>
              <p-button class='ml-10' @click='onReset'>重置</p-button>
            </p-form-model-item>
          </a-col>
        </a-row>
      </p-form-model>
      <p-table
        ref='dataSource'
        :id="$route.meta.menuId+'_4246'"
        :data-source.sync='dataSource'
        :scroll='scroll'
        :remote-url='listRemoteUrl'
        :remoteData='listParams'
        :loading='spinning'
        :rowSelectType='false' bordered dragle row-key='id'>
        <p-table-column data-index='employeeId' title='员工号' />
        <p-table-column data-index='warehouseName' title='仓库' />
        <p-table-column data-index='printerName' title='打印机名称' />
        <p-table-column data-index='remark' title='备注' />
        <p-table-column data-index='createdBy' title='创建人' />
        <p-table-column data-index='createdDate' title='创建时间' />
        <p-table-column data-index='lastModifiedBy' title='最后修改人' />
        <p-table-column data-index='status' title='是否启用' :width='80'>
          <template slot-scope='text, record'>
            <p-switch v-model='record.status' :replaceFields='{true:"1",false:"0"}'
                      @click='statusChange(record,$event)' />
          </template>
        </p-table-column>
        <p-table-column :width='150' align='center'  fixed='right' data-index='action' title='操作'>
          <a-space slot-scope='text, record'>
              <a @click="toEdit('view',record)">详情</a>
              <a :disabled='record.status === "1"' @click="toEdit('edit',record)">修改</a>
              <a :disabled='record.status === "1"' @click='del(record)'>删除</a>
          </a-space>
        </p-table-column>
      </p-table>
    </p-card>
    <edit v-else :editData='editData' :type='editType' @back='back' />
</template>
<script>
import { del, update, listRemoteUrl } from './api'
import edit from './edit'
//import calcHeight from '@/blocks/calcHeight'


export default {
//  mixins: [calcHeight],
  components: { edit },
  data() {
    return {
      warehouseAttr:{},
      spinning: false,
      toggleFormTag: true,
      form: {
        warehouseName: '',
        warehouseCode: '',
        warehouseId: ''
      },
      // 列表参数
      listRemoteUrl,
      listParams: {},
      dataSource: [],

      editType: '',
      editData: {}
    }
  },
  methods: {
    toEdit(type, record = {}) {
      this.editType = type
      this.editData = { ...record }
    },
    // 删除
    del(record) {
      let { id } = record
      let self = this
      this.$confirm({
        title: '是否确认删除?',
        onOk() {
          return new Promise((resolve, reject) => {
            del({ ids: [id] }).then(res => {
              if (res.success) {
                self.$message.success('删除成功')
                self.onSubmit()
                resolve()
              } else {
                self.$message.warn(res.message)
                resolve()
              }
            }).catch(() => {
              resolve()
            })
          })
        }
      })
    },
    // 停启用修改
    statusChange(record, checked) {
      this.spinning = true
      const params = { ...record }
      update(params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.warn(res.message)
          record.status = checked === '1' ? '0' : '1'
          this.dataSource = [...this.dataSource]
        }
      }).catch(() => {
        record.status = checked === '1' ? '0' : '1'
        this.dataSource = [...this.dataSource]
      }).finally(() => {
        this.spinning = false
      })
    },
    onReset() {
      this.$refs.formTarget.resetFields()
      this.form = {}
      this.onSubmit()
    },
    onSubmit() {
      this.$refs.formTarget.validate(flag => {
        if (!flag) return
        this.listParams = { ...this.form }
      })
    },
    back() {
      this.editType = ''
      this.$nextTick(() => this.onSubmit())
    },
    onFormChange(name, { selectData }, value) {
      if (!selectData) return
      selectData = Array.isArray(selectData) ? selectData[0] : selectData
      if (name === 'warehouse') {
        if (!value) {
          Object.assign(this.form, { warehouseName: '', warehouseCode: '', warehouseId: '' })
          return
        }
        const { warehouseCode, warehouseName, id: warehouseId } = selectData
        Object.assign(this.form, { warehouseName, warehouseCode, warehouseId })
        return
      }
    }
  }
}
</script>
<style></style>
