<template>
  <div class="form-wrap">
    <div class="searchBox">
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        label-width="100px">
        <el-form-item
          label="配置键"
          prop="name">
          <el-input
            v-model="form.configKey"
            clearable></el-input>
        </el-form-item>
        <el-form-item
          label="配置描述"
          prop="name">
          <el-input
            v-model="form.configDesc"
            clearable></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="票种id"
          prop="ticketTypeId">
          <el-input v-model="form.ticketTypeId"></el-input>
        </el-form-item> -->
        <!-- <el-form-item
          label="是否可售"
          prop="keyWords3">
          <el-select v-model="form.keyWords3">
            <el-option
              label="全部"
              value=""></el-option>
            <el-option
              label="可售"
              :value="1"></el-option>
            <el-option
              label="不可售"
              :value="0"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div class="btn-wrap">
        <el-button
          type="primary"
          @click="getSystemConfig">搜索</el-button>
      </div>
    </div>
    <!-- 我是OTA系统管理 -->
    <div class="tableBox">
      <!-- <div class="block-title">
        系统配置列表
      </div> -->
      <!-- 只展示抖音门店ID(douyin_poi_id)和美团合作方ID(meituan_partnerId) -->
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          prop="configDesc"
          label="配置描述"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="configKey"
          label="配置名"
          width="220"
        >
        </el-table-column> -->
        <el-table-column
          prop="configValue"
          label="配置值">
          <template slot-scope="{ row }">
            <span v-if="['if_check_password_complexity', 'wrong_password_lock'].includes(row.configKey)">{{ row.configValue==='0'?'关闭':'开启' }}</span>
            <span v-else>{{ row.configValue }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isUpdate === 1"
              type="text"
              @click="showDialog('edit',scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;">
        <el-dialog
          title="编辑系统配置"
          width="600px"
          :visible.sync="dialogVisible">
          <el-form
            label-width="180px"
            inline>
            <el-form-item
              label="配置名"
              style="margin-top: 20px;">
              <el-input
                v-model="configKey"
                disabled
                style="width: 280px; text-align: right;"></el-input>
            </el-form-item>
            <el-form-item label="配置值">
              <el-switch
                v-if="['if_check_password_complexity', 'wrong_password_lock'].includes(configKey)"
                v-model="configValue"
                inactive-value="0"
                active-value="1"
                inactive-text="关闭"
                active-text="开启"
              >
              </el-switch>
              <el-input-number
                v-else-if="['wrong_password_tolerance', 'wrong_password_duration'].includes(configKey)"
                :precision="0"
                :min="0"
                v-model="configValue"
                style="width: 280px; "
              ></el-input-number>
              <el-input
                v-else
                v-model="configValue"
                style="width: 280px; text-align: right;"></el-input>
            </el-form-item>
          </el-form>
          <div
            slot="footer"
            class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button
              type="primary"
              @click="ConfirmEdit">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { getSystemConfig, updateSystemConfig } from '@/api/systemSetting/system.js'
export default {
  data () {
    return {
      configKeyEnum: {
        'meituan_partnerId': '美团合作方ID',
        'douyin_poi_id': '抖音门店ID',
        'if_check_password_complexity': '是否检查密码复杂度',
        'wrong_password_lock': '是否密码输入失败次数过多锁定账号',
        'wrong_password_tolerance': '密码输入错误最大失败次数',
        'wrong_password_duration': '锁定时间(分钟)'
      },
      configKeyList: ['meituan_partnerId', 'douyin_poi_id', 'if_check_password_complexity', 'wrong_password_lock', 'wrong_password_tolerance', 'wrong_password_duration'],
      tableData: [],
      loading: false,
      dialogVisible: false,
      configKey: '',
      configValue: '',
      form: {
        configKey: '',
        configDesc: ''
      }
    }
  },
  created () {
    this.getSystemConfig()
  },
  methods: {
    async getSystemConfig () {
      this.loading = true
      let res = await getSystemConfig(this.form)
      this.tableData = res.data || []
      this.loading = false
      return res
    },
    async updateSystemConfig () {
      console.log('准备更新：', this.configKey, this.configValue)
      let res = await updateSystemConfig({
        configKey: this.configKey,
        configValue: this.configValue
      })
      // 更新之后刷新，重新获取数据
      if (res.code === '200') {
        this.$message.success('修改成功')
        this.getSystemConfig()
      } else {
        this.$message.error('修改失败')
      }
    },
    showDialog (type, item) {
      this.configKey = item.configKey
      this.configValue = item.configValue
      this.dialogVisible = true
      // console.log(this.configKey, this.configValue)
      // console.log(JSON.stringify(item))
    },
    ConfirmEdit () {
      this.updateSystemConfig()
      // 加个成功提示
      this.dialogVisible = false
    }
  }
}
</script>
