<!--数据字典管理-->
<template>
  <div>
    <Row :gutter="10">
      <i-col span="13">
        <Card dis-hover style="border:0">
        <template #title>
          <p style="height: 40px;text-align: center">
            <span style="float: left">字典类型</span>
           
          </p>
          <p style="height: 40px;text-align: left">
            <Input v-model="searchFormGroup.commonlyKey" style="width: 200px" placeholder="请输入类型关键字"></Input>
            <Button type="primary" @click="reloadDictGroupData()" ghost style="margin-left: 10px;">查询</Button>
             <Button type="primary" style="margin-left: 10px;" @click="dictGroupAdd" ghost >新增</Button>
          </p>
          </template>
          <div class="context-div">
            <Table ref="dictGroupTable" row-key="id" searchable search-place="top" :columns="dictGroupColumns"
                   :load-data="loadData"
                   height="600"
                   :data="dictGroupData" :loading="loadingGroup" highlight-row @on-current-change="clickDictGroup"
                   style="margin-top: 10px;" border>
              <template #actionsDictGroup slot-scope="{ row }">
                <!--<Button type="primary" size="small" @click="clickDictGroup(row)" ghost style="margin-right: 5px">字典</Button>-->
                <Button type="primary" size="small" @click="dictGroupAdd($event,row)" ghost style="margin-right: 5px">
                  新增下级
                </Button>
                <Button type="primary" size="small" @click="dictGroupEdit($event,row)" ghost style="margin-right: 5px">
                  修改
                </Button>
                <Poptip confirm transfer size="small"
                        placement="bottom"
                        width="180"
                        title="你确定要删除吗?"
                        @on-ok="dictGroupDelete(row)">
                  <Button type="primary" size="small" ghost>删除</Button>
                </Poptip>
              </template>
            </Table>
          </div>
        </Card>
      </i-col>
      <i-col span="11">
        <Card dis-hover style="border:0">
        <template #title>
          <p style="height: 40px;text-align: center">
            <span style="float: left">字典项</span>
          
          </p>
          <p style="height: 40px;text-align: left">
            <Input v-model="searchForm.commonlyKey" style="width: 200px" placeholder="请输入字典关键字"></Input>
            <Button type="primary" @click="reloadDictData()" ghost style="margin-left: 10px;">查询</Button>
              <Button type="primary" @click="dictAdd" ghost style="margin-left: 10px;">新增</Button>
          </p>
          </template>
          <div class="context-div">
            <Table ref="dictTable" row-key="id" searchable search-place="top" :columns="dictColumns" size="small"
                   :load-data="loadData"
                   height="600"
                   :data="dictData" :loading="loading" highlight-row @on-current-change="clickDict"
                   style="margin-top: 10px;" border>
              <template #actionsDict slot-scope="{ row }">
                <Button type="primary" size="small" @click="dictAdd($event,row)" ghost style="margin-right: 5px">新增下级
                </Button>
                <Button type="primary" size="small" @click="dictEdit($event,row)" ghost style="margin-right: 5px">修改
                </Button>
                <Poptip confirm transfer size="small"
                        placement="bottom"
                        width="180"
                        title="你确定要删除吗?"
                        @on-ok="dictDelete(row)">
                  <Button type="primary" size="small" ghost>删除</Button>
                </Poptip>
              </template>
            </Table>
          </div>
          <dictGroupEdit ref="dictGroupEdit" :show.sync="showDictGroupModal" :value="modalDictGroupParams"
                         @reload-data="reloadDictGroupData"></dictGroupEdit>
          <dictEdit ref="dictEdit" :show.sync="showDictModal" :value="modalDictParams"
                    @reload-data="reloadDictData"></dictEdit>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
  let $this
  import dictEdit from './dict-modal'
  import dictGroupEdit from './dictGroup-modal.vue'
  import { getDictTree, deleteDict } from '../../../../api/base/dict-api'
  import { getDictGroupTree, deleteDictGroup } from '../../../../api/base/dictGroup-api'

  export default {
    name: 'dictManage',
    components: {
      dictEdit,
      dictGroupEdit,
    },
    data () {
      return {
        searchFormGroup: {},
        searchForm: {},
        loadingGroup: false,
        loading: false,
        nowDictGroup: null,
        nowDict: null,
        showDictGroupModal: false,
        showDictModal: false,
        modalDictGroupParams: {},
        modalDictParams: {},
        dictGroupColumns: [
          { title: '类型名称', key: 'name', width: 180, sortable: true, show: true, tree: true },
          { title: '类型编码', key: 'code', width: 200, sortable: true, show: true },
          { title: '排序', key: 'sortNo', width: 90, sortable: true, show: true },
          { title: '状态', key: 'stateStr', width: 90, sortable: true, show: true },
          { title: '备注', key: 'remark', width: 160, sortable: true, show: true },
          { title: '操作', key: 'actionsDictGroup', width: 223, type: 'template', slot: 'actionsDictGroup', show: true }
        ],
        dictColumns: [
          { title: '字典名称', key: 'name', width: 180, sortable: true, show: true, tree: true },
          { title: '字典值', key: 'value', width: 210, sortable: true, show: true },
          { title: '排序', key: 'sortNo', width: 90, sortable: true, show: true },
          { title: '状态', key: 'stateStr', width: 90, sortable: true, show: true },
          /*{ title: '备注', key: 'remark', width: 80, sortable: true, show: true },*/
          { title: '操作', key: 'actionsDict', width: 223, type: 'template', slot: 'actionsDict', show: true }
        ],
        dictGroupData: [],
        dictData: [],
      }
    }, methods: {
      //处理一下子集合数据,造成异步加载的假象,因为iview的渲染性能低.很容易卡.
      handleChild (data) {
        data.forEach(n => {
          if (n.children && n.children.length > 0) {
            n._loading = false
            n.children1 = n.children
            n.children = []
          }
        })
      },
      reloadDictGroupData () {
        //表格加载中效果
        this.loadingGroup = true
        let params = Object.assign({}, this.searchFormGroup) // 这样不会改变原对象
        getDictGroupTree(params).then((res) => {
          if (res.data.result && res.data.result.length > 0) {
            this.handleChild(res.data.result)
            this.dictGroupData = res.data.result
          } else {
            this.dictGroupData = []
          }
          this.loadingGroup = false
        }).catch(err => {
          this.dictGroupData = []
          this.loadingGroup = false
          this.$Message.error('查询失败！')
          console.log(err)
        })
      },
      //假---异步加载
      loadData (item, callback) {
        this.handleChild(item.children1)
        callback(item.children1)
      },
      reloadDictData () {
        let params = Object.assign({}, this.searchForm) // 这样不会改变原对象
        if (this.nowDictGroup) {//将字典组别的id存入查询条件
          params.groupId = this.nowDictGroup.id
        }else {
          this.$Message.warning('请先选择字典类型！')
          return false
        }
        //表格加载中效果
        this.loading = true
        getDictTree(params).then((res) => {
          if (res.data.result && res.data.result.length > 0) {
            this.handleChild(res.data.result)
            this.dictData = res.data.result
          } else {
            this.dictData = []
          }
          this.loading = false
        }).catch(err => {
          this.dictData = []
          //this.loading = false;
          this.$Message.error('查询失败！')
          console.log(err)
        })
      },
      dictGroupAdd (e, row) {
        this.showDictGroupModal = true
        let bean = null
        if (row) {
          bean = { parentId: row.id, parentName: row.name, state: 1, sortNo: 1 }
        }
        this.modalDictGroupParams = { title: '添加', flag: 'add', bean: bean }
      },
      dictGroupEdit (e, row) {
        e.stopPropagation()
        this.showDictGroupModal = true
        this.modalDictGroupParams = { title: '修改', flag: 'edit', bean: row }
      },
      dictGroupDelete (row) {
        deleteDictGroup(row.id).then(data => {
          this.$Message.success('操作成功！')
          this.dictGroupData.splice(row._index, 1)
        }).catch(err => {
          this.$Message.error('操作失败！')
          console.log(err)
        })
      },
      dictAdd (e, row) {
        if (!this.nowDictGroup) {
          this.$Message.warning('请先选择字典类型！')
          return false
        }
        let bean = null
        if (row) {
          bean = {
            parentId: row.id, parentName: row.name,
            groupId: row.groupId, groupName: row.groupName,
            groupCode: row.groupCode, state: row.state, sortNo: 1
          }
        } else {
          bean = {
            groupId: this.nowDictGroup.id, groupName: this.nowDictGroup.name,
            groupCode: this.nowDictGroup.code, state: this.nowDictGroup.state, sortNo: 1
          }
        }
        this.showDictModal = true
        this.modalDictParams = { title: '添加', flag: 'add', bean: bean }
      },
      dictEdit (e, row) {
        e.stopPropagation()
        this.showDictModal = true
        this.modalDictParams = { title: '修改', flag: 'edit', bean: row }
      },
      dictDelete (row) {
        deleteDict(row.id).then(data => {
          this.$Message.success('操作成功！')
          this.dictData.splice(row._index, 1)
        }).catch(err => {
          this.$Message.error('操作失败！')
          console.log(err)
        })
      },
      clickDictGroup (currentRow, rowIndex, $event) {
        this.nowDictGroup = currentRow
        this.nowDict = null
        this.reloadDictData()
      },
      clickDict (currentRow, rowIndex, $event) {
        this.nowDict = currentRow
      },
    },
    mounted: function () {
      $this = this
      this.reloadDictGroupData()
    },
    watch: {}
  }
</script>

<style scoped>
  .context-div {
    height: 600px;
    overflow: auto;
  }
</style>
