<template>
  <div class="app-container">
    <!-- 字典列表 -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px">
        <el-card class="box-card">
          <el-form ref="searchForm" :model="searchForm" label-width="80px">
            <div style="margin-bottom: 10px;">
              <el-row style="line-height: 40px; text-align: right;">
                <el-col :span="3"><label class="search-label">字典名称</label></el-col>
                <el-col :span="8">
                  <el-input v-model.trim="searchForm.name" placeholder="请输入字典名称" clearable @keyup.enter.native="listDict" />
                </el-col>
                <el-col :offset="8" :span="4">
                  <el-button size="small" type="primary" icon="el-icon-search" @click="listDict">搜索</el-button>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <el-row>
            <white-board>
              <el-row>
                <el-col :span="2" :offset="20" style="text-align: right;">
                  <el-button size="small" icon="el-icon-plus" type="success" plain @click="handleAdd">新增</el-button>
                </el-col>
              </el-row>

              <el-row style="padding: 10px 0px;">
                <el-table :data="tableData" style="width: 100%;" highlight-current-row stripe @current-change="handleSelectChange">
                  <el-table-column prop="id" label="标识" width="150" />
                  <el-table-column prop="name" label="字典名称" show-overflow-tooltip />
                  <el-table-column prop="remarks" label="备注" show-overflow-tooltip />
                  <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                      <el-button size="small" type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                      <el-button v-if="!scope.row.isDel" size="small" type="danger" plain @click="handleIsDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </white-board>
          </el-row>

          <el-row>
            <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="total" small @size-change="changeSizeChange" @current-change="changeCurrentChange" />
          </el-row>
        </el-card>
      </el-col>
      <!-- 字典详情列表 -->
      <el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典详情</span>
          </div>
          <el-row>
            <white-board>
              <el-row>
                <el-col :span="2" :offset="21" style="text-align: right;">
                  <el-button size="small" icon="el-icon-plus" type="success" plain @click="handleEntryAdd">新增</el-button>
                </el-col>
              </el-row>

              <el-row style="padding: 10px 0px;">
                <el-table :data="eTableData" style="width: 100%;" highlight-current-row stripe>
                  <el-table-column prop="id" label="标识" width="150" />
                  <el-table-column prop="dictId" label="字典标识" show-overflow-tooltip />
                  <el-table-column prop="name" label="字典名称" show-overflow-tooltip />
                  <el-table-column prop="value" label="字典值" show-overflow-tooltip />
                  <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                      <el-button size="small" type="primary" plain @click="handleEntryEdit(scope.$index, scope.row)">编辑</el-button>
                      <el-button v-if="!scope.row.isDel" size="small" type="danger" plain @click="handleEntryIsDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </white-board>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <edit-dict-dialog :visible="dialogVisible" :dialog-title="dialogTitle" :form="form" @cancelDialog="cancelDialog" @refresh="listDict" />
    <edit-entry-dialog :visible="eDialogVisible" :dialog-title="dialogTitle" :form="entryForm" @cancelDialog="cancelDialog" @refresh="listEntry" />
  </div>
</template>

<script>
import dictApi from '@/api/platform/dictApi'
import editDictDialog from '@/views/platform/system/dict/editDictDialog'
import editEntryDialog from '@/views/platform/system/dict/editDictEntryDialog'

export default {
  name: 'DictIndex',
  components: {
    'edit-dict-dialog': editDictDialog,
    'edit-entry-dialog': editEntryDialog
  },
  data() {
    return {
      dialogVisible: false,
      eDialogVisible: false,
      dialogTitle: '',
      total: 0,
      form: {
        id: '',
        name: '',
        remarks: ''
      },
      entryForm: {
        id: '',
        dictId: '',
        name: '',
        value: '',
        sort: 0
      },
      searchForm: {
        name: '',
        isDel: false,
        page: 1,
        size: 50
      },
      entrySearchForm: {
        dictId: '',
        isDel: false
      },
      tableData: [], // 字典
      eTableData: [] // 部门实体
    }
  },
  mounted() {
    this.listDict()
  },
  methods: {
    listDict() {
      this.tableData = []
      dictApi.page(this.searchForm).then(data => {
        this.total = data.total
        this.tableData = data.data
      })
      // 清空部门实体表
      this.entrySearchForm.dictId = ''
      this.eTableData = []
    },
    handleEdit(index, row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogTitle = '编辑'
      this.dialogVisible = true
    },
    handleEntryEdit(index, row) {
      this.entryForm = JSON.parse(JSON.stringify(row))
      this.dialogTitle = '编辑'
      this.eDialogVisible = true
    },
    cancelDialog(visible) {
      this.dialogVisible = visible
      this.eDialogVisible = visible
    },
    handleAdd() {
      this.form = {
        id: '',
        name: '',
        remarks: ''
      }
      this.dialogTitle = '新增'
      this.dialogVisible = true
    },
    handleEntryAdd() {
      if (this.entrySearchForm.dictId === '') {
        this.$message('请先选择字典')
        return
      }
      this.entryForm = {
        id: '',
        dictId: this.entrySearchForm.dictId,
        name: '',
        value: '',
        sort: 0
      }
      this.dialogTitle = '新增'
      this.eDialogVisible = true
    },
    handleIsDel(index, row) {
      dictApi.handleIsDel(row.id).then(data => {
        this.listDict()
      })
    },
    handleEntryIsDel(index, row) {
      dictApi.entryHandleIsDel(row.id).then(data => {
        this.listEntry()
      })
    },
    changeSizeChange(val) {
      this.searchForm.size = val
      this.listDict()
    },
    changeCurrentChange(val) {
      this.searchForm.page = val
      this.listDict()
    },
    listEntry() {
      dictApi.entryList(this.entrySearchForm).then(data => {
        this.eTableData = data
      })
    },
    handleSelectChange(val) {
      this.entrySearchForm.dictId = val.id
      this.listEntry()
    }
  }
}
</script>

<style scoped>
</style>
