<template>
  <div class="app-container dic_setup">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-alert
          :closable="false"
          title="字典类别"
          type="success"/>
        <div class="filter-container">
          <el-button v-permission="'HY_addL'" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_addL">添加</el-button>
        </div>
        <el-table
          v-loading="loadingL"
          :data="dicLLists"
          border
          stripe
          highlight-current-row
          @row-click="handleTableClick">
          <el-table-column type="index" label="编号" align="center" fixed width="80"/>
          <el-table-column prop="F_ValueCode" label="字典标识" align="center" min-width=""/>
          <el-table-column prop="F_Value" label="字典名称" align="center" min-width=""/>
          <el-table-column label="操作" width="160" align="center" class-name="oparate_btn" fixed="right">
            <template slot-scope="scope">
              <el-button v-permission="'HY_editL'" size="mini" plain type="primary" @click.stop="btn_editL(scope.row.F_ValueId)">编辑</el-button>
              <el-button v-permission="'HY_deleteL'" size="mini" plain type="danger" @click.stop="btn_deleteL(scope.row.F_ValueId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="pageParamsL.total > 0"
          :total="pageParamsL.total"
          :pageindex.sync="pageParamsL.pageindex"
          :pagesize.sync="pageParamsL.pagesize"
          class="pagination"
          @pagination="getListL" />
      </el-col>
      <el-col :span="12">
        <el-alert
          :closable="false"
          title="字典项列表"
          type="success"/>
        <div class="filter-container">
          <el-input v-model="keyword" placeholder="请输入字典项名称" class="filter-item"/>
          <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_search">搜索</el-button>
          <el-button v-permission="'HY_addR'" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_addR">添加</el-button>
          <el-button v-permission="'HY_deletesR'" type="primary" class="filter-item" icon="el-icon-delete" @click="btn_deletesR()">批量删除</el-button>
        </div>
        <el-table v-loading="loadingR" :data="dicRLists" border stripe @selection-change="changeSelects">
          <el-table-column type="selection" width="40"/>
          <el-table-column type="index" label="编号" align="center" fixed width="80"/>
          <el-table-column prop="F_ValueCode" label="字典标识" align="center" min-width=""/>
          <el-table-column prop="F_Value" label="字典项名称" align="center" min-width=""/>
          <el-table-column prop="F_Remark" label="备注" align="center" min-width=""/>
          <el-table-column prop="F_Sort" label="排序编号" align="center" min-width=""/>
          <el-table-column label="操作" width="160" align="center" class-name="oparate_btn" fixed="right">
            <template slot-scope="scope">
              <el-button v-permission="'HY_editR'" size="mini" plain type="primary" @click.stop="btn_editR(scope.row.F_ValueId)">编辑</el-button>
              <el-button v-permission="'HY_deleteR'" size="mini" plain type="danger" @click.stop="btn_deleteR(scope.row.F_ValueId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="pageParamsR.total > 0"
          :total="pageParamsR.total"
          :pageindex.sync="pageParamsR.pageindex"
          :pagesize.sync="pageParamsR.pagesize"
          class="pagination"
          @pagination="getListR" />
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getDicLists, deleteDic, getDicRLists } from '@/api/systemSetup/sysSetting/dataDictionary'
import addOrEditInfo from './addOrEditInfo'
import addOrEditType from './addOrEditType'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装

export default {
  name: 'DataDictionary',
  components: {
    Pagination
  },
  data() {
    return {
      loadingL: false,
      loadingR: false,
      dicLLists: [],
      dicRLists: [],
      keyword: '',
      pageParamsL: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      },
      pageParamsR: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      },
      multipleSelection: [], // 选中的数据
      dic_id: '', // 字典类别id
      dic_code: '' // 字典类别标识
    }
  },
  created() {
    this.getListL().then(() => {
    })
    document.onkeyup = (e) => {
      if (e.keyCode === 13) {
        this.getListR()
      }
    }
  },
  methods: {
    getListL() {
      this.loadingL = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParamsL.pageindex, // 第几页
          pagesize: this.pageParamsL.pagesize, // 每页几条信息
          isleaf: false,
        }
        getDicLists(params).then(response => {
          this.loadingL = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParamsL.total = response.data.Totals
            this.dicLLists = response.data.Rows
          }
        })
        resolve()
      })
    },
    // 点击某一行的table
    handleTableClick(row, event, column) {
      this.dic_id = row.F_ValueId
      this.dic_code = row.F_ValueCode
      this.getListR()
    },
    btn_addL() {
      this.$layer.iframe({
        content: {
          content: addOrEditType, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': '' }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['40%', '300px'],
        shadeClose: false,
        title: '添加字典类别'
      })
    },
    btn_editL(dicid) {
      this.$layer.iframe({
        content: {
          content: addOrEditType, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': dicid }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['40%', '300px'],
        shadeClose: false,
        title: '编辑字典类别'
      })
    },
    btn_deleteL(dicid) {
      this.$confirm('此操作将永久删除当前字典类别及其字典项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDic(dicid).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.getListL()
            this.dicRLists = []
            this.$message.success('删除成功!')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    getListR() {
      this.loadingR = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParamsR.pageindex, // 第几页
          pagesize: this.pageParamsR.pagesize, // 每页几条信息
          keyword: this.keyword.replace(/\s+/g, ''),
          isleaf: true,
          code: this.dic_code
        }
        getDicLists(params).then(response => {
          this.loadingR = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParamsR.total = response.data.Totals
            this.dicRLists = response.data.Rows
          }
        })
        resolve()
      })
    },
    // 复选框状态改变
    changeSelects(val) {
      this.multipleSelection = val
    },
    btn_search() {
      this.pageParamsR.pageindex = 1
      this.getListR()
    },
    btn_addR() {
      if (!this.dic_code) {
        this.$message.warning('请先选择要添加的字典类别!')
        return
      }
      this.$layer.iframe({
        content: {
          content: addOrEditInfo, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'row_dicid': this.dic_id, 'row_diccode': this.dic_code }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['40%', '380px'],
        shadeClose: false,
        title: '添加字典项'
      })
    },
    btn_editR(dicid) {
      this.$layer.iframe({
        content: {
          content: addOrEditInfo, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': dicid }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['40%', '380px'],
        shadeClose: false,
        title: '编辑字典项'
      })
    },
    btn_deleteR(dicid) {
      this.$confirm('此操作将永久删除当前字典项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDic(dicid).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.getListR()
            this.$message.success('删除成功!')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    btn_deletesR() {
      const ids = []
      for (let i = 0, len = this.multipleSelection.length; i < len; i++) {
        ids.push(this.multipleSelection[i].F_ValueId)
      }
      if (ids.length <= 0) {
        this.$message.warning('没有可删除的选项')
        return
      }
      this.btn_deleteR(ids)
    }
  }
}
</script>

<!-- 需要注意的是，修改elementUI的默认样式的css不能使用scoped. -->
<style rel="stylesheet/scss" lang="scss">
	.dic_setup{
		.el-table tr{
			cursor: pointer;
		}
		.el-table__body tr.current-row>td {
			background: rgba(185, 221, 249, .75);
		}
		.filter-container {
			padding-top: 15px;
		}
	}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
