<template>
  <div class="manage-container">
    <vab-query-form>
      <el-button type="primary" size="small" @click="handleAdd()">
        添加数据
      </el-button>
    </vab-query-form>
    <el-table :data="dictData" border stripe style="width: 100%">
      <el-table-column
        prop="id"
        label="数据ID"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dataCode"
        label="键"
        width="300"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dataValue"
        label="值"
        width="400"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" :label="$t('defalult.cz')" align="center">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">
            {{ $t('defalult.bj') }}
          </el-button>
          <el-button type="text" @click="handleDelete(row)">
            {{ $t('defalult.sc') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <dict-data ref="edit"></dict-data>
  </div>
</template>
<script>
// import { removeDictData } from '@/api/sysdict'
import { removeDictData, getList } from '@/api/sysdict';
import dictData from './add';
export default {
  name: 'Index',
  components: {
    dictData,
  },
  data() {
    return {
      dictId: '',
      dictData: [],
      data: [],
      queryForm: {
        page: 1,
        size: 20,
      },
    };
  },
  computed: {
    height() {
      return 500;
    },
  },
  created() {
    this.dictId = this.$route.query.dictId;
    this.queryForm.page = this.$route.query.page;
    this.queryForm.size = this.$route.query.size;
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const that = this;
      that.listLoading = true;
      const { data } = await getList(this.queryForm);
      const list = data.items;
      list.forEach(function (item) {
        if (item.id == that.dictId) {
          that.dictData = item.dictData;
        }
      });
      setTimeout(() => {
        that.listLoading = false;
      }, 500);
    },
    handleAdd() {
      this.$refs['edit'].showEdit({ dictId: this.dictId }, 0);
    },
    handleEdit(row) {
      this.$refs['edit'].showEdit({ row: row, dictId: this.dictId }, 1);
    },
    handleDelete(row) {
      const that = this;
      if (row.id) {
        this.$confirm('你确定要删除当前项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const { msg } = removeDictData({ dictDataId: row.id });
            this.$message({
              type: 'success',
              message: msg == undefined ? '删除成功' : msg,
            });
            setTimeout(function () {
              that.fetchData();
            }, 1000);
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            });
          });
      }
    },
  },
};
</script>

<style lang="scss">
.el-dialog {
  .el-dialog__header {
    background-color: #1890ff !important;
    padding: 15px 20px;
    text-align: left !important;
    .el-dialog__title {
      color: #e8f4ff !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #e8f4ff !important;
    }
  }
  .el-dialog__body {
    padding: 20px !important;
    .el-form-item {
      margin-bottom: 10px !important;
      .el-input {
        width: 100% !important;
      }
      .el-select {
        width: 100% !important;
      }
      .el-cascader {
        width: 100% !important;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 20px !important;
    }
  }
  .dialog-footer {
    text-align: right;
  }
}
</style>
