<template>
  <div style="padding: 20px">
    <div class="dirction-header">
      <el-alert type="info" :closable="false" style="width: 332px" show-icon title="用于好办小程序业务字典提示编辑"></el-alert>
      <el-button type="primary" @click="toCreate">新建字典</el-button>
    </div>
    <el-table :data="dictionaryList">
      <el-table-column label="字典名称" prop="dictName" :formatter="(row, col, val) => val || '--'"></el-table-column>
      <el-table-column label="key" prop="dictKey" :formatter="(row, col, val) => val || '--'"></el-table-column>
      <el-table-column label="最近编辑时间">
        <div slot-scope="{ row }" style="line-height: normal">
          <p>{{ row.updateTime | timeStampToYmd }}</p>
          <p>{{ row.updateTime | timeStampToHms }}</p>
        </div>
      </el-table-column>
      <el-table-column label="最近编辑人" prop="optUserName" :formatter="(row, col, val) => val || '--'"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="toCreate(row)">编辑</el-button>
          <el-button type="text" :loading="row.loading" @click="onDelDict(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pager.total > 0"
      background
      style="text-align: right"
      layout="total,sizes,prev,pager,next"
      :total="pager.total"
      :page-sizes="pager.pageSizes"
      :page-size="pager.pageSize"
      :current-page="pager.currentPage"
      @current-change="onCurrentChange"
      @size-change="onSizeChange"></el-pagination>
  </div>
</template>

<script>
import fetch from '@/api/dictionary';

const { getDictList, delDict } = fetch;

export default {
  name: 'DictionaryList',
  data() {
    return {
      pager: {
        total: 0,
        pageSizes: [ 20, 40, 60, 80 ],
        pageSize: 20,
        currentPage: 1
      },
      dictionaryList: []
    };
  },
  created() {
    this.getDictionaryList();
  },
  methods: {
    // 获取字典列表
    getDictionaryList() {
      const { pageSize, currentPage } = this.pager;
      getDictList({ pageNum: currentPage, pageSize }).then(res => {
        const { totalCount, result } = res.result || {};
        this.pager.total = totalCount || 0;
        this.dictionaryList = result || [];
      });
    },
    onCurrentChange(currentPage) {
      this.pager.currentPage = currentPage;
      this.getDictionaryList();
    },
    onSizeChange(pageSize) {
      this.pager.pageSize = pageSize;
      this.onCurrentChange(1);
    },
    // 跳转到新建、编辑字典页
    toCreate(dictData) {
      const { dictId } = dictData || {};
      const url = '/create-dictionary';
      this.$router.push(dictId ? `${url}?dictId=${dictId}` : url);
    },
    // 删除字典
    onDelDict(dictData) {
      const { dictId, dictName } = dictData || {};
      this.$confirm(`确定删除【 ${dictName} 】吗？`, '提示', { type: 'warning' }).then(() => {
        this.$set(dictData, 'loading', true);
        delDict({ dictId }).then(res => {
          this.$message.success('删除成功！');
          if (this.pager.currentPage > 1 && this.dictionaryList.length == 1) {
            this.pager.currentPage--;
          }
          this.getDictionaryList();
        }).finally(() => dictData.loading = false);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dirction-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
