<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="showModal"
      title="查看编号记录"
    >
      <div>
        <el-row>
          <el-col :span="24">
            <Form
              inline
              onsubmit="return false"
              :label-width="60"
            >
              <label class="label-sign" />
              <Form-item class="search-item" label="规则:" style="width:300px">
                <el-input v-model="formObj.vary" placeholder="请输入规则" clearable @keyup.enter.native="_formSearch" />
              </Form-item>
              <Form-item class="search-btn">
                <el-button type="primary" @click="_formSearch">
                  搜索
                </el-button>
              </Form-item>
            </Form>
          </el-col>
          <el-col :span="24">
            <element-table
              ref="pageTable"
              :page-columns="pageColumns"
              :table-height="350"
              :get-page="getPage"
              @on-result-change="_tableResultChange"
            >
              <el-table-column
                v-for="item in pageColumns"
                :key="item.key"
                show-overflow-tooltip
                sortable
                :prop="item.key"
                :label="item.title"
                :fixed="item.fixed?item.fixed:undefined"
              >
                <template slot-scope="scope">
                  <div v-if="item.key==='sn'">
                    <div v-if="editIndex===scope.$index">
                      <el-input
                        v-model="scope.row.sn"
                        placeholder="请输入流水号"
                        size="medium"
                        @focus="_handleRow(scope)"
                      />
                    </div>
                    <div v-else>
                      {{ scope.row[item.key] }}
                    </div>
                  </div>
                  <div v-else>
                    {{ scope.row[item.key] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                slot="col"
                label="操作"
                align="center"
                :width="80"
                fixed="right"
              >
                <template slot-scope="scope">
                  <icon-list
                    :msg="editIndex===scope.$index?iconMsgSave:iconMsg"
                    :row-data="scope.row"
                    :row-index="scope.$index"
                    @on-result-change="_iconClick"
                  />
                </template>
              </el-table-column>
            </element-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/**
 * 添加编辑编号规则表
 */
import { codeRule } from '../../../api'

export default {
  data() {
    return {
      formObj: {
        sn: '',
        vary: '',
        codeRuleId: ''
      },
      showModal: false,
      pageColumns: [
        { title: '规则', key: 'vary' },
        { title: '流水号', key: 'sn' }
      ],
      iconMsg: [{ type: 'pt-edit', id: '', name: '编辑' }],
      iconMsgSave: [{ type: 'pt-check', id: '', name: '保存' }],
      getPage: {},
      editIndex: -1,
      currentRow: {}
    }
  },
  methods: {
    _open(id) {
      this.showModal = true
      this.$nextTick(() => {
        this.formObj = this.$resetFields(this.formObj)
        this.formObj.codeRuleId = id
        this._page()
      })
    },
    _page: async function() {
      this.editIndex = -1
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await codeRule.ruleRecord(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this._page()
          break
      }
    },
    _formSearch() {
      this.$refs.pageTable._pageChange(1)
    },
    _cancel() {
      this.showModal = false
    },
    _iconClick(res, data, componentName, rowIndex) {
      switch (res) {
        case '编辑':
          this.editIndex = rowIndex
          break
        case '保存':
          this._save()
          break
      }
    },
    _handleRow(data) {
      this.currentRow = data.row
    },
    // 添加、编辑保存
    _save: async function() {
      const tempData = {
        id: this.currentRow.id,
        sn: this.currentRow.sn
      }
      const result = await codeRule.editRuleRecord(tempData)
      if (result) {
        this.$message.success('保存成功!')
        this._page()
      }
    }
  }
}
</script>
