<template>
  <a-card :bordered="false">
    <!-- 左侧面板 -->
    <div class="table-page-search-wrapper">
      <div class="table-page-search-wrapper search_box">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :span="7">
              <a-form-item label="字典名称" :labelCol="{ span: 3 }" :wrapperCol="{ span: 14, offset: 0 }">
                <a-input placeholder="请输入字典名称" v-model="queryParam.dictName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <div class="for_item2">
                <a-form-item label="字典编号" :labelCol="{ span: 3 }" :wrapperCol="{ span: 14, offset: 0 }">
                  <a-input placeholder="请输入字典编号" v-model="queryParam.dictCode"></a-input>

                  <!-- <a-input-search
                    placeholder="请输入字典编号"
                    size="large"
                    v-model="queryParam.dictCode"
                    @search="searchQuery"
                  >

                    <a-button slot="enterButton" class="searchBut">搜索</a-button>
                  </a-input-search> -->
                  <!-- </a-input-search> -->
                </a-form-item>
              </div>
            </a-col>
            <a-col :span="2">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" class="searchBut">搜索</a-button>
                <a-button @click="searchReset" class="resetBut">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- 按钮区域 -->
      <a-row :gutter="15" type="flex" justify="space-between" align="middle">
        <a-col> </a-col>
        <a-col>
          <div class="table-operator">
            <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>
            <a-button type="primary" icon="download" @click="handleExportXls('字典信息')">导出</a-button>
            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
              :action="importExcelUrl" @change="handleImportExcel">
              <a-button type="primary" icon="import">导入</a-button>
            </a-upload>
            <a-button type="primary" icon="sync" @click="refleshCache()">刷新缓存</a-button>

            <a-button class="last" type="primary" icon="hdd" @click="openDeleteList">回收站</a-button>
          </div>
        </a-col>
      </a-row>
      <!-- table区域 -->
      <a-table ref="table" rowKey="id" size="middle" :columns="columns" :dataSource="dataSource" :pagination="false"
        :loading="loading" @change="handleTableChange">
        <span slot="action" slot-scope="text, record" class="action">
          <a @click="handleEdit(record)">
            <a-icon type="edit" />
            编辑
          </a>
          <a-divider type="vertical" />
          <a @click="editDictItem(record)"><a-icon type="setting" /> 字典配置</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" overlayClassName="popDete">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
      <div class="myPagination">
        <el-pagination ref="elpagination" @current-change="changeNum" :current-page="ipagination.current" background
          :page-size="ipagination.pageSize" layout="prev, pager, next,jumper, slot ,total " :total="ipagination.total">
          <el-button class="btn-sure" size="mini">确定</el-button>
        </el-pagination>
      </div>
    </div>
    <dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal>
    <!-- 字典类型 -->
    <dict-item-list ref="dictItemList"></dict-item-list>
    <dict-delete-list ref="dictDeleteList" @refresh="() => loadData()"></dict-delete-list>
  </a-card>
</template>

<script>
import { filterObj } from '@/utils/util'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import DictModal from './modules/DictModal'
import DictItemList from './DictItemList'
import DictDeleteList from './DictDeleteList'
import { getAction } from '@/api/manage'
import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
import Vue from 'vue'

export default {
  name: 'DictList',
  mixins: [JeecgListMixin],
  components: { DictModal, DictItemList, DictDeleteList },
  data () {
    return {
      description: '这是数据字典页面',
      visible: false,
      // 查询条件
      queryParam: {
        dictCode: '',
        dictName: '',
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 120,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '字典名称',
          align: 'left',
          dataIndex: 'dictName',
        },
        {
          title: '字典编号',
          align: 'left',
          dataIndex: 'dictCode',
        },
        {
          title: '描述',
          align: 'left',
          dataIndex: 'description',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dict: '',
      labelCol: {
        xs: { span: 8 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 16 },
        sm: { span: 19 },
      },
      url: {
        list: '/sys/dict/list',
        delete: '/sys/dict/delete',
        exportXlsUrl: 'sys/dict/exportXls',
        importExcelUrl: 'sys/dict/importExcel',
        refleshCache: 'sys/dict/refleshCache',
        queryAllDictItems: 'sys/dict/queryAllDictItems',
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    getQueryParams () {
      var param = Object.assign({}, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      if (this.superQueryParams) {
        param['superQueryParams'] = encodeURI(this.superQueryParams)
        param['superQueryMatchType'] = this.superQueryMatchType
      }
      return filterObj(param)
    },
    //取消选择
    cancelDict () {
      this.dict = ''
      this.visible = false
      this.loadData()
    },
    //编辑字典数据
    editDictItem (record) {
      this.$refs.dictItemList.edit(record)
    },
    // 重置字典类型搜索框的内容
    searchReset () {
      var that = this
      that.queryParam.dictName = ''
      that.queryParam.dictCode = ''
      that.loadData(this.ipagination.current)
    },
    openDeleteList () {
      this.$refs.dictDeleteList.show()
    },
    refleshCache () {
      getAction(this.url.refleshCache)
        .then((res) => {
          if (res.success) {
            //重新加载缓存
            getAction(this.url.queryAllDictItems).then((res) => {
              if (res.success) {
                Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
                Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
              }
            })
            this.$message.success('刷新缓存完成！')
          }
        })
        .catch((e) => {
          this.$message.warn('刷新缓存失败！')
          console.log('刷新失败', e)
        })
    },
    changeNum (val) {
      this.ipagination.current = val
      this.loadData()
    },
  },
  watch: {
    openKeys (val) {
      console.log('openKeys', val)
    },
  },
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
@import '~@assets/less/shaDow.less';
@import '~@assets/less/tableCommon.less';

// 搜索框
.search_box {
  ::v-deep .ant-input-group .ant-input {
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    border-radius: 2px;
  }

  .searchBut {
    
    border-radius: 0px 2px 2px 0px;
    opacity: 1;
    

    height: 38px;
    line-height: 38px;
    font-size: 14px;
    margin-right: 16px;
  }

  .resetBut {
    width: 60px;
    height: 38px;
    line-height: 38px;
    background: #dbdbdb;
    border-radius: 2px;
    color: #000;
    opacity: 1;
    padding: 0;
    border: 1px solid #b6b6b6;
  }
}

::v-deep .ant-input {
  border-radius: 2px;
}

// ::v-deep.table-page-search-wrapper {
//   .ant-form-item,
//   .table-page-search-submitButtons {
//     margin-bottom: 12px;
//   }
// }
// .table-page-search-wrapper ::v-deep.search_box .ant-form-item-children {
//   display: flex;
//   align-items: center;
// }

.search_box .ant-form-inline .ant-form-item>.ant-form-item-label {
  padding-right: 8px;
}

.ant-alert-info {
  background-color: #fff;
  border: none;

  .clearBut {
    height: 38px;
    background: #ffffff;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    
    letter-spacing: 0px;
    padding: 0 16px;
    margin-left: 6px;
  }
  .last{
     
     margin: 0 0 8px 0;
  
  }
}

.ant-alert {
  padding: 0;
}

.table-operator {
  .ant-btn {
    // width: 68px;
    height: 38px;
    line-height: 38px;
    
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    
    margin: 0 16px 8px 0;
    padding: 0 15px;
  }
    .last:last-child{
     margin: 0 0 8px 0;
  }
}

::v-deep .ant-dropdown-menu-item:hover {
  background: #f2f5f965;
}

.action {
  a {
    
  }
}

.myPagination {
  margin-top: 40px;
  display: flex;
  justify-content: end;

  ::v-deep .el-pagination {
    font-weight: 600;

    .btn-sure {
      background: #dbdbdb;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #b6b6b6;
      padding: 0;
      color: #000;
      margin: 0 20px 0 10px;
      width: 50px;
    }

    .el-select .el-input .el-input__inner {
      color: #000;
      font-size: 14px;
      padding-right: 17px;
      font-weight: 400;
      border-radius: 2px;
    }

    .el-pager li {
      font-size: 16px;
      color: #888888;
      width: 34px;

      &:hover {
        opacity: 0.9;
      }
    }

    .el-pagination span:not([class*='suffix']) {
      font-size: 14px;
      color: #888888;
    }

    .el-pager li:not(.disabled).active {
      color: #fff;
    }
  }

  .ant-pagination {
    color: #888888;
  }

  ::v-deep .ant-select-selection--single {
    height: 28px !important;
  }

  ::v-deep .ant-select-selection__rendered {
    line-height: 28px !important;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-options-quick-jumper input {
    height: 28px;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-item {
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    width: 34px;
  }
}

::v-deep ::-webkit-scrollbar-thumb {
  
  border-radius: 9px 9px 9px 9px;
}
</style>