<template>
  <div class="app-container">
    <!--弹出框1：新增、修改-->
    <el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog1Show" :title="dialog1Data.id?'修改':'新增'" width="580px">
      <el-form ref="dialog1Form" :model="dialog1Data" :rules="dialog1Rules" size="small" label-width="80px">
        <el-form-item label="字典值：" prop="value">
          <el-col>
            <el-input v-model="dialog1Data.value" placeholder="请输入内容" width="340px" maxlength="30" show-word-limit />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialog1Show=false">取消</el-button>
        <el-button :loading="dialog1Saving" type="primary" @click="dialog1Submit">确认</el-button>
      </div>
    </el-dialog>
    <!--弹出框2：删除-->
    <el-dialog append-to-body :close-on-click-modal="true" :visible.sync="dialog2Show" :title="'确认删除'" width="580px">
      <div>确认删除【{{ dialog2Data.value }}】吗？</div>
      <div>已经使用此字典的数据将丢失！</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialog2Show=false">取消</el-button>
        <el-button :loading="dialog2Saving" type="primary" @click="dialog2Submit">确认</el-button>
      </div>
    </el-dialog>
    <!--表格-->
    <el-row :gutter="60">
      <!--左表格-->
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>字典类目</span>
          </div>
          <div class="text item" style="max-height: 70vh; overflow:auto;">
            <el-table ref="table1" :data="allDictionaryGroup" row-key="groupCode">
              <el-table-column prop="note" label="类目" align="center" />
              <el-table-column label="" width="100px" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" round @click="clickGroup(scope.row.groupCode)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <!--右表格-->
      <el-col :span="10">
        <el-card v-if="dictionaryGroup" class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ dictionaryGroup.note }}：</span>
            <el-button size="mini" icon="el-icon-refresh-left" @click="clickGroup(dictionaryGroup.groupCode)">刷新</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="clickNewDictionary()">新增</el-button>
          </div>
          <div class="text item" style="max-height: 70vh; overflow:auto;">
            <el-table ref="table2" v-loading="dictionaryListLoading" :data="dictionaryList" row-key="id">
              <el-table-column prop="value" label="字典值" align="center" />
              <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" round type="success" icon="el-icon-edit" @click="clickUpdateDictionary(scope.row.id)">修改</el-button>
                  <el-button size="mini" round type="danger" icon="el-icon-delete" @click="clickDeleteDictionary(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dictionaryApi from '@/api/kd/dictionary'

export default {
  name: 'CDictionary', // 本页面名
  components: { },
  data() {
    return {
      dialog1Show: false,
      dialog1Data: {},
      dialog1Saving: false,
      dialog1Rules: {
        value: [
          { required: true, message: '请填写字典值', trigger: 'blur' }
        ]
      },
      dialog2Show: false,
      dialog2Data: {},
      dialog2Saving: false,
      allDictionaryGroup: [],
      dictionaryGroup: null,
      dictionaryListLoading: false,
      dictionaryList: []
    }
  },
  mounted() {
    dictionaryApi.getAllDictionaryGroup().then(response => {
      this.allDictionaryGroup = response.results.filter(d => d.useType === 1)
    })
  },
  methods: {
    clickGroup(groupCode) {
      this.dictionaryListLoading = true
      this.dictionaryGroup = this.allDictionaryGroup.filter(g => g.groupCode === groupCode)[0]
      dictionaryApi.getList({ groupCode }).then(respones => {
        this.dictionaryList = respones.results
        this.dictionaryListLoading = false
      }).catch(() => {
        this.dictionaryListLoading = false
      })
    },
    clickNewDictionary() {
      this.dialog1Data = {}
      this.dialog1Show = true
    },
    clickUpdateDictionary(id) {
      this.dialog1Data = this.dictionaryList.filter(d => d.id === id)[0]
      this.dialog1Show = true
    },
    dialog1Submit() {
      this.$refs['dialog1Form'].validate(valid => {
        if (!valid) {
          return
        } else {
          this.dialog1Saving = true
          const dictionary = this.dialog1Data
          if (dictionary.id) { // 修改
            dictionary.enterpriseId = null
            dictionary.groupCode = null
            dictionaryApi.set(dictionary).then(() => {
              this.dialog1Saving = false
              this.dialog1Show = false
              this.clickGroup(this.dictionaryGroup.groupCode)
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            }).catch(() => {
              this.dialog1Saving = false
            })
          } else { // 新增
            dictionary.groupCode = this.dictionaryGroup.groupCode
            dictionaryApi.add(dictionary).then(() => {
              this.dialog1Saving = false
              this.dialog1Show = false
              this.clickGroup(this.dictionaryGroup.groupCode)
              this.$message({
                message: '新增成功',
                type: 'success'
              })
            }).catch(() => {
              this.dialog1Saving = false
            })
          }
        }
      })
    },
    clickDeleteDictionary(id) {
      this.dialog2Data = this.dictionaryList.filter(d => d.id === id)[0]
      this.dialog2Show = true
    },
    dialog2Submit() {
      this.dialog2Saving = true
      // 删除
      dictionaryApi.del(this.dialog2Data).then(() => {
        this.dialog2Saving = false
        this.dialog2Show = false
        this.clickGroup(this.dictionaryGroup.groupCode)
        this.$message({
          message: '删除完成',
          type: 'success'
        })
      }).catch(() => {
        this.dialog2Saving = false
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
  ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
    height: 30px;
    line-height: 30px;
  }
</style>
