<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="配置描述"
        prop="configDesc">
        <el-input v-model="form.configDesc"></el-input>
      </el-form-item>

      <div class="btn-wrap">
        <el-button
          @click="reset"
        >
          重置
        </el-button>
        <el-button
          :disabled="loading"
          type="primary"
          @click="getConfig(true)"
        >
          搜索
        </el-button>
        <el-button
          type="primary"
          @click="showDialog('add')">
          新增配置
        </el-button>
      </div>
    </el-form>
    <div class="whiteBox-inner table-box">
      <!-- <div class="block-title">
        配置列表
      </div> -->
      <!-- <div class="block">
        <el-button
          type="primary"
          @click="showDialog('add')">新增配置</el-button>
      </div> -->
      <el-table border stripe v-loading="loading" :data="configList">
        <!-- <el-table-column prop="configKey" label="配置键">
        </el-table-column> -->
        <el-table-column prop="configDesc" label="描述"></el-table-column>
        <el-table-column prop="configValue" label="配置值">
        </el-table-column>
        <!-- <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </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"
              size="small"
              @click="showDialog('edit', scope.row)">
              编辑
            </el-button>
            <!-- <el-button type="text" size="small" @click="deleteConfig(scope.row)">
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="dialogType === 'add' ? '新增' : '编辑'"
        width="660px"
        :visible.sync="dialogVisible"
        @close="dialogVisible=false">
        <el-form
          :model="currentItem"
          ref="form"
          label-width="80px"
          style="padding:20px">
          <el-form-item
            verify
            label="配置键"
            prop="configKey">
            <el-input
              v-model="currentItem.configKey"
              :disabled="dialogType === 'edit'"></el-input>
          </el-form-item>
          <el-form-item
            verify
            label="配置值"
            prop="configValue">
            <el-input v-model="currentItem.configValue"></el-input>
          </el-form-item>
          <el-form-item
            label="描述"
            prop="configDesc">
            <el-input
              v-model="currentItem.configDesc"
              :disabled="dialogType === 'edit'"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="handleUpdate">确 定</el-button>
        </span>
      </el-dialog>
      <!-- <el-pagination background :page-size="10" @current-change="handlePage" layout="prev, pager, next" :total="total">
      </el-pagination> -->
    </div>
  </div>
</template>
<script>
import { getSystemConfigList, updateSystemConfig, addSystemConfig } from '@/api/systemConfig'
// import CityInput from '@/components/CityInput'
export default {
  name: 'CommonSetting',
  components: {
  },
  data () {
    return {
      loading: false,
      configList: [],
      dialogType: 'add',
      dialogVisible: false,
      form: {
        configDesc: ''
      },
      currentItem: {
        configKey: '',
        configValue: '',
        configDesc: ''
      }
    }
  },
  computed: {},
  created () {
    this.getConfig()
  },
  methods: {
    reset () {
      this.form = {
        configDesc: ''
      }
      this.getConfig()
    },
    getConfig () {
      this.loading = true
      getSystemConfigList(this.form)
        .then(res => {
          this.configList = res?.data || []
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    showDialog (type, item) {
      this.dialogType = type
      this.dialogVisible = true
      if (type === 'edit') {
        this.currentItem = { ...item }
      } else {
        this.currentItem = {
          configKey: '',
          configValue: '',
          configDesc: ''
        }
      }
    },
    async handleUpdate () {
      const optFunc = this.dialogType === 'add' ? addSystemConfig : updateSystemConfig
      const res = await optFunc(this.currentItem)

      if (res.code === '200') {
        this.$message.success('操作成功')
        this.dialogVisible = false
        this.getConfig()
      }
    },
    // 删除免票配置项
    deleteConfig (configIndex) {
      this.$confirm('确定删除当前配置？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO
      }).catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
.common-setting-form {
  .checkVoiceInput {
    width: 500px;
  }

  ::v-deep .el-tabs__content {
    overflow: visible;
    min-height: 300px;
  }

  ::v-deep .el-form-item {
    display: flex;
  }

  ::v-deep .el-form-item__content {
    flex: 1;
    display: block;
  }

  .saved {
    color: #7FD43F;
    opacity: 0;
  }

  .visible {
    opacity: 1;
  }

  .draggable {
    .el-tag {
      cursor: move;
    }
  }

  .el-tag.ghost {
    color: #fff;
    background: #0075ff;
  }

  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    margin-bottom: 10px;

    .el-input {
      margin-right: 10px;
      width: 200px;
    }
  }
}

.block-content {
  text-align: center;
}

.timeList {
  li {
    margin-bottom: 5px;

    .timeInput {
      margin-right: 10px;
    }
  }
}

.el-alert {
  margin-bottom: 20px;
}

.unit {
  color: #606266;
  margin-right: 10px;
  margin-left: 5px;
  width: 30px;
  display: inline-block;
}

.block-title {
  margin-bottom: 20px;
}

.footer {
  text-align: center;
  margin-bottom: 50px;
}
</style>
