<template>
  <div>
    <p-card title='产成品编码配置'>
      <span slot='extra'>
        <p-button type='primary' @click='showModel("add")'>新增</p-button>
      </span>
      <p-form-model 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 :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
        ref='table'
        row-key='id'
        bordered
        :columns='columns'
        :remoteUrl='remoteUrl'
        :remoteParams='listParams'
        :selectedRowKey.sync='selectedRowKeys'
        :rowSelectType='2'
        :data-source='dataSource'
      >
        <template slot='operation' slot-scope='text, record'>
          <a @click='showModel("edit",record)'>配置</a>
          <a-divider type='vertical' />
          <a @click='del(record)'>删除</a>
        </template>
      </p-table>
    </p-card>
    <edit v-model='visible' :type='editType' :editData='editData' @back='back' />
  </div>
</template>

<script>
import { columns } from './config.js'
import { remoteUrl, del } from './api'
import edit from './edit'

export default {
  components: { edit },
  data() {
    return {
      columns,

      form: {},
      // 列表参数
      remoteUrl,
      listParams: {},
      dataSource: [],
      selectedRowKeys: [],
      visible: false,
      editType: '',
      editData: {}
    }
  },
  methods: {
    back() {
      this.$nextTick(() => {
        this.onSubmit()
      })
    },
    onReset() {
      this.$refs.formTarget.resetFields()
      this.form = {}
      this.onSubmit()
    },
    onSubmit() {
      this.listParams = { ...this.form }
    },
    del(record) {
      const { id } = record
      if (!id) return
      const self = this
      this.$confirm({
        title: '是否确定要删除?',
        onOk() {
          return new Promise(resolve => {
            del([id]).then(res => {
              if (res.success) {
                self.$message.success(res.message)
                self.onSubmit()
                resolve()
              } else {
                self.$message.error(res.message)
              }
            }).catch(() => {
              resolve()
            })
          })
        }
      })
    },
    //点击弹出
    showModel(type, record = {}) {
      this.editType = type
      this.editData = { ...record }
      this.visible = true
    }
  }
}
</script>

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