<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="filter-container">
      <el-button
        type="primary"
        icon="el-icon-edit"
        class="filter-item"
        @click="addDialog"
      >
        添加
      </el-button>
    </div>
    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="id"
        align="center"
        label="ID"
        width="60"
      />
      <el-table-column
        prop="title"
        align="center"
        label="字典名"
      />
      <el-table-column
        prop="keys"
        align="center"
        label="关键词(keys)"
      >
        <template
          slot="header"
          slot-scope="{ column }"
        >
          <el-tooltip class="item" effect="dark" content="字典设置关键词用于系统设置的属性名" placement="top">
            <i class="el-icon-question">{{ column.label }}</i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="values"
        align="center"
        label="属性值(values)"
      >
        <template
          slot="header"
          slot-scope="{ column }"
        >
          <el-tooltip class="item" effect="dark" content="字典设置关键词用于系统设置的属性值" placement="top">
            <i class="el-icon-question">{{ column.label }}</i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="desc"
        align="center"
        label="简介"
      />
      <el-table-column
        label="操作"
        align="center"
        width="130"
      >
        <template
          slot-scope="{ row }"
        >
          <el-button
            type="warning"
            size="mini"
            @click="handleEdite(row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="dialogType === 'add' ? '添加' : '修改'"
      :visible.sync="dialogVisible"
      top="50px"
      width="500px"
      :before-close="handleDialogClose"
    >
      <el-form
        ref="dicForm"
        :model="dicForm"
        :rules="dicRules"
        label-width="80px"
      >
        <el-form-item label="字典名:" prop="title">
          <el-input
            v-model="dicForm.title"
            placeholder="字典名"
            size="mini"
            style="width: 350px"
          />
        </el-form-item>
        <el-form-item label="关键词:" prop="keys">
          <el-input
            v-model="dicForm.keys"
            placeholder="关键词建议以字母设置,例: dictionary_set"
            size="mini"
            style="width: 350px"
          />
        </el-form-item>
        <el-form-item label="属性值:">
          <el-input
            v-model="dicForm.values"
            placeholder="属性值"
            size="mini"
            style="width: 350px"
          />
        </el-form-item>
        <el-form-item label="简介:">
          <el-input
            v-model="dicForm.desc"
            placeholder="简介"
            size="mini"
            style="width: 350px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            @click="handleDialogClose"
          >
            取消
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleSubmit"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>

import {
  addSetting,
  editSetting
} from '@/api/system/index'

export default {
  data() {
    return {
      table: [],
      dialogType: 'add',
      dialogVisible: false,
      dicForm: {
        title: '',
        keys: '',
        values: '',
        desc: ''
      },
      dicRules: {
        title: [
          { required: true, message: '请输入字典名', trigger: 'blur' }
        ],
        keys: [
          { required: true, message: '请输入关键词', trigger: 'blur' }
        ]
      },
      editId: '',
      loadingFull: false
    }
  },
  created() {
    this.getSetting()
  },
  methods: {
    // 获取设置
    getSetting() {
      this.loadingFull = true
      try {
        this.$store.dispatch('system/get').then(setting => {
          this.table = setting
        }).catch(e => {
          this.$message.error(e)
        })
      } catch (e) {
        console.log(`获取字典设置失败:${e}`)
      }
      this.loadingFull = false
    },
    // 修改
    handleEdite(row) {
      this.$confirm('修改字典数据,可能会造成系统出错,修改前请联系开发者!!!,还要继续吗？', '风险警告！', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id, title, keys, values, desc } = row
        // 设置修改
        this.dicForm.title = title
        this.dicForm.keys = keys
        this.dicForm.values = values
        this.dicForm.desc = desc
        this.editId = id
        this.dialogType = 'edit'
        this.dialogVisible = true
      })
    },
    // 关闭添加修改
    handleDialogClose() {
      this.dialogVisible = false
      this.$refs.dicForm.resetFields()
    },
    // 显示添加
    addDialog() {
      this.dialogType = 'add'
      this.dialogVisible = true
    },
    // 提交添加/修改
    handleSubmit() {
      this.$refs.dicForm.validate((valid) => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addSetting(this.dicForm)
          } else {
            const params = Object.assign({}, this.dicForm)
            params['id'] = this.editId
            this.editSetting(params)
          }
        } else {
          return false
        }
      })
    },
    // 提交添加
    async addSetting(data) {
      const res = await addSetting(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.handleDialogClose()
          this.getSetting()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        let message = res.message ? res.message : e.message
        message = e.message ? e.message : '请求失败'
        this.$message.error(message)
      }
    },
    // 提交修改
    async editSetting(data) {
      const res = await editSetting(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.handleDialogClose()
          this.getSetting()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        let message = res.message ? res.message : e.message
        message = e.message ? e.message : '请求失败'
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
