<template>
  <div>
    <el-row ref="searchBox" class="search-box">
      <el-col :span="3">
        <el-input v-model="condition.name" placeholder="请输入词汇名称" clearable />
      </el-col>
      <el-col :span="3">
        <el-input v-model="condition.code" placeholder="请输入词汇编码" clearable />
      </el-col>
      <el-col :span="3">
        <el-button type="primary" icon="el-icon-search" @click="getPage">查询</el-button>
      </el-col>
    </el-row>
    <el-table
      ref="listTable"
      v-loading="loading"
      :data="tableData"
      :height="tableHeight"
      border
      row-key="id"
      :tree-props="treeProps"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column prop="name" label="词汇名称" show-overflow-tooltip />
      <el-table-column prop="value" label="词汇值" />
      <el-table-column prop="code" label="词汇编码" />
      <el-table-column prop="externalCode" label="外部标识" show-overflow-tooltip />
      <el-table-column prop="isEnable" label="是否启用">
        <template scope="scope">
          {{ format.formatBoolean(scope.row.isEnable) }}
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="序号" show-overflow-tooltip />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
          <!--          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-row class="footer-box">
      <el-col :span="12">
        <el-button type="primary" @click="handleEdit({parent:null,isEnable:true})">新增</el-button>
      </el-col>
      <el-col :span="12" />
    </el-row>

    <edit :show="showEdit" :item="item" @close="closeEdit" />

  </div>
</template>

<script>

import { getListPage, deleteById } from '../../api/system/vocabulary'
import Pagination from '../Pagination'
import edit from './edit'
import format from '../../utils/formatter'

export default {
  name: 'Index',
  // eslint-disable-next-line vue/no-unused-components
  components: { Pagination, edit },
  data() {
    return {
      format: format,
      tableHeight: window.innerHeight - 195,
      showEdit: false,
      loading: false,
      item: {},

      treeProps: {
        children: 'children'
      },

      condition: {
        name: null,
        code: null
      },
      tableData: []

    }
  },
  created() {
    this.getPage()
  },
  methods: {

    getPage() {
      this.loading = true
      getListPage(this.condition).then((reponse) => {
        this.tableData = reponse.data
      }).finally(() => {
        this.loading = false
      })
    },
    handleEdit(data) {
      this.showEdit = true
      this.item = data
    },
    handleDelete(row) {
      this.$confirm('请确认是否删除此数据', '提示', { type: 'warning' }).then(() => {
        deleteById(row.id).then((response) => {
          this.$message.success('删除成功')
          this.getPage()
        })
      })
    },

    closeEdit() {
      this.showEdit = false
      this.getPage()
    }

  }

}
</script>

<style scoped>

</style>
