<template>
  <div>
    <el-card class="box-card">
	  <selectoption></selectoption>
<!--      <div>-->
<!--      <el-input v-model="selectoptionValue" size="small" placeholder="需要加密内容" :clearable="true"-->
<!--                class="handle-input mr10 width150 d-inlie-block" style="width: 200px;">-->
<!--      </el-input>-->
<!--      <el-button type="primary" size="small" @click="addConfig">加密</el-button>-->
<!--      <el-input v-model="selectoptionValue" size="small" placeholder="加密结果" :clearable="true"-->
<!--                class="handle-input mr10 width150 d-inlie-block" style="width: 200px;">-->
<!--      </el-input>-->
<!--      </div>-->
<!--      <div class="mt-2 mb-2">-->
<!--        <el-input v-model="selectoptionValue" size="small" placeholder="需要解密内容" :clearable="true"-->
<!--                  class="handle-input mr10 width150 d-inlie-block" style="width: 200px;">-->
<!--        </el-input>-->
<!--        <el-button type="primary" size="small" @click="addConfig">解密</el-button>-->
<!--        <el-input v-model="selectoptionValue" size="small" placeholder="解密结果" :clearable="true"-->
<!--                  class="handle-input mr10 width150 d-inlie-block" style="width: 200px;">-->
<!--        </el-input>-->
<!--      </div>-->
      <el-button type="primary" size="small" @click="addConfig" style="background: #FA8E00; border: none;">添加</el-button>
      <el-table :data="tableData" style="width: 100%" :height="height" :border="true">
        <el-table-column prop="label" label="名称">
        </el-table-column>
        <el-table-column prop="value" label="接入数量">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="editConfig(scope.$index,scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="deleteConfig(scope.$index,scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="title" :visible.sync="enterpriseidedit" width="30%" class="eldialog">
        <el-form ref="form1" :model="Enterprise1" label-width="70px">
          <el-form-item label="租户ID">
            <el-input v-model="Enterprise1.value" type="number" :clearable="true"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="Enterprise1.label" :clearable="true"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="enterpriseidedit = false">取 消</el-button>
            <el-button type="primary" @click="confirmEditConfig" v-if="modifyStatus">修 改</el-button>
            <el-button type="primary" @click="confirmEditConfig" v-else>确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import {
    httpGet,
    httpPost
  } from "../api/index";
  export default {
    inject: ['reload'],
    name: 'conf',
    data() {
      return {
        selectoption: [],
        selectoptionValue: '',
        tableData: [],
        enterpriseidedit: false,
        modifyStatus: false,
        Enterprise1: {
          value: '',
          label: ''
        },
        title: "添加",
        config: {},
        row: {},
        index: '',
        userInfo: {
          type: ''
        }
      }
    },
    created() {
      this.userInfo = JSON.parse(localStorage.getItem('info'))
      this.height = document.documentElement.clientHeight - 160
      this.getConfig()
      this.selectoption = JSON.parse(localStorage.getItem('selectoption'))
      this.selectoptionValue = localStorage.getItem('tenantId')
    },
    methods: {
      selectTenantId(e) {
        localStorage.setItem('tenantId', e)
        this.reload()
      },
      addConfig() {
        this.Enterprise1 = {
            value: '',
            label: ''
          },
          this.title = "添加"
        this.enterpriseidedit = true
        this.modifyStatus = false
      },
      getConfig() {
        httpGet('', this.$api.getConfig).then(res => {
          if (res.success) {
            this.tableData = res.data.list
          } else {
            this.$message.error("获取失败")
          }
        })
      },
      editConfig(index, row) {
        this.row = row
        this.Enterprise1.value = row.value
        this.Enterprise1.label = row.label
        this.index = index
        this.title = "编辑"
        this.enterpriseidedit = true
        this.modifyStatus = true
      },
      deleteConfig(index, row) {
        this.$confirm("确定要删除吗？", "提示", {
            type: "warning",
          })
          .then(() => {
            var tableData = JSON.parse(JSON.stringify(this.tableData))
            tableData.splice(index, 1)
            var data = {
              list: tableData
            }
            httpPost(data, this.$api.editConfig).then(res => {
              if (res.success) {
                this.tableData = res.data
                this.enterpriseidedit = false
                this.getConfig()
              } else {
                this.$message.error("删除失败")
              }
            })
          })
      },
      confirmEditConfig() {
        if (this.Enterprise1.value == '' || this.Enterprise1.label == '') {
          this.$message.error("请填写完整信息")
        } else {
          var tableData = this.tableData
          if (this.modifyStatus) {
            tableData[this.index].value = this.Enterprise1.value
            tableData[this.index].label = this.Enterprise1.label
          } else {
            var obj = {
              value: this.Enterprise1.value,
              label: this.Enterprise1.label
            }
            tableData.push(obj)
          }
          var data = {
            list: tableData
          }
          httpPost(data, this.$api.editConfig).then(res => {
            if (res.success) {
              this.tableData = res.data
              this.enterpriseidedit = false
              this.getConfig()
            } else {
              if (this.modifyStatus) {
                this.$message.error("修改失败")
              } else {
                this.$message.error("添加失败")
              }
            }
          })
        }
      },
    },
  }
</script>


<style scoped>

</style>
