<template>
  <div class="app-container">
    <el-card class="box-carde">
      <div slot="header" class="clearfix">
        <span>系统参数</span>
      </div>
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="insertEvent"
        v-hasPermi="['system:config:add']"
      >新增
      </el-button>
      <el-input
        maxlength="200"
        v-model="keywords"
        placeholder="通过参数名搜索"
        clearable
        style="width: 300px;margin: 0px;padding: 0px;"
        size="mini"
        prefix-icon="el-icon-search"
      />
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <div style="padding-top: 10px">
        <vxe-table
          ref="xTable"
          align="center"
          :loading="loading"
          class="mytable-style"
          auto-resize
          border
          resizable
          export-config
          highlight-current-row
          show-overflow
          :keep-source="true"
          :data="tableData"
          :edit-rules="rules"
          :edit-config="{trigger: 'manual', mode: 'row',autoClear: false,icon:'none',activeMethod: activeCellMethod}"
        >
          <vxe-table-column title="参数配置">
            <vxe-table-column
              field="sysKey"
              title="参数名"
              width="25%"
              :edit-render="{name: '$input', props: {type: 'text'}}"
            />
            <vxe-table-column
              field="sysValue"
              title="参数值"
              width="25%"
              :edit-render="{name: '$input', attrs: {type: 'text'}}"
            />
            <vxe-table-column
              field="sysDescribe"
              title="参数描述"
              width="25%"
              :edit-render="{name: '$input', attrs: {type: 'text'}}"
            />
            <vxe-table-column align="center" width="25%" title="操作">
              <template v-slot="{ row }">
                <template v-if="$refs.xTable.isActiveByRow(row)">
                  <el-button
                    style="padding: 3px 4px 3px 4px;margin: 2px"
                    size="mini"
                    icon="el-icon-edit"
                    :loading="saveLoding"
                    @click="saveRowEvent(row)"
                  >保存
                  </el-button>
                  <el-button
                    style="padding: 3px 4px 3px 4px;margin: 2px"
                    size="mini"
                    icon="el-icon-edit"
                    @click="cancelRowEvent(row)"
                  >取消
                  </el-button>
                </template>
                <template v-else>
                  <el-button
                    style="padding: 3px 4px 3px 4px;margin: 2px"
                    size="mini"
                    icon="el-icon-edit"
                    :loading="btnLonding"
                    @click="editRowEvent(row)"
                    v-hasPermi="['system:config:edit']"
                  >编辑
                  </el-button>
                  <el-button
                  type="danger"
                  style="padding: 3px 4px 3px 4px;margin: 2px"
                  size="mini"
                  icon="el-icon-delete"
                  @click="removeEvent(row)"
                  v-hasPermi="['system:config:remove']"
                  :loading=btnLonding>删除
                  </el-button>
                </template>
              </template>
            </vxe-table-column>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          v-show="showTable"
          perfect
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :total="total"
          :page-sizes="[10,50,100]"
          :layouts="['PrevJump', 'PrevPage','JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </div>
    </el-card>
  </div>
</template>
<script>
import { debounce } from 'lodash'
export default {
  data() {
    return {
      keywords: '',
      add: false,
      addType: false,
      loading: false,
      saveLoding: false,
      showTable: true,
      btnLonding: false,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      rules: {
        sysKey: [
          { required: true, message: '参数名不能为空' },
          { max: 50, message: '参数名不能超过50个字符', trigger: 'blur'}
        ],
        sysValue: [
          { required: true, message: '参数值不能为空' },
          { max: 50, message: '参数值不能超过50个字符', trigger: 'blur'}
        ],
        sysDescribe: [
          { required: true, message: '参数描述不能为空' },
          { max: 200, message: '参数描述不能超过200个字符', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    activeCellMethod({ column, columnIndex }) {
      if (columnIndex === 1) {
        return false
      }
      return true
    },
    /** 搜索按钮操作 */
    handleQuery:debounce(function(){
      this.currentPage = 1
      this.pageSize = 10
      this.getList()
    },1000),
    async getList(){
      this.loading = true;
      this.addType = false
      this.saveLoding = false
      this.btnLonding = false
      const xTable = this.$refs.xTable
      if (this.add) {
        xTable.clearActived().then(() => {
          xTable.remove(row)
          this.add = false
        })
      }
      this.add = false

      this.loading = true;
      var searchParams = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keywords: this.keywords,
      }
      await this.$axios.get('/sysParameterController/getAll',
        {params: searchParams}).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total

        if (res.data.records == '') {
          this.showTable = false
        } else {
          this.showTable = true
        }
        this.loading = false
      }).catch((error) => {
        this.loading = false;
        // this.$message.error('获取数据出错' + error)
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.getList()
    },

    editRowEvent(row) {
      this.btnLonding = true
      this.$refs.xTable.setActiveRow(row)
    },
    saveRowEvent:debounce(function(row){
      this.saveLoding = true
      this.$refs.xTable.validate(async valid => {
        if (valid) {
          if (this.addType) {
            await this.$axios.post('/sysParameterController/addParameter', row).then((res) => {
              if (res.code == 0) {
                this.$message.success('新增成功')
              }
              if (res.code == 1) {
                this.$message.error(res.data)
              }
              this.btnLonding = false
              this.addType = false
              this.add = false
              this.saveLoding = false
              this.getList();
            }).catch((error) => {
              // this.$message.error(error)
              this.saveLoding = false
            })
          } else {
            await this.$axios.post('/sysParameterController/updateParameter', row).then((res) => {
              if (res.code == 0) {
                this.$message.success('修改成功')
              }
              if (res.code == 1) {
                this.$message.error(res.data)
              }
              this.getList();
              this.saveLoding = false
              this.btnLonding = false
            }).catch((error) => {
              // this.$message.error(error)
              this.saveLoding = false
            })
          }
        } else {
          this.$XModal.message({ status: 'error', message: '校验不通过！' })
          this.saveLoding = false
        }
      })
      this.saveLoding = false
    },1000),
    cancelRowEvent(row) {
      this.addType = false
      this.saveLoding = false
      this.btnLonding = false
      const xTable = this.$refs.xTable
      if (this.add) {
        xTable.clearActived().then(() => {
          xTable.remove(row)
          this.add = false
        })
      } else {
        xTable.clearActived().then(() => {
          // 还原行数据
          xTable.revertData(row)
        })
      }
    },
    removeEvent(row) {
      this.$XModal.confirm('您确定要删除该数据?').then(async type => {
        if (type === 'confirm') {
          const param = {
            id: row.id,
          }
          await this.$axios.post('/sysParameterController/deleteParameter',param).then(response => {
            if (response.code == 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: res.data
              });
            }
            this.getList();
            //
            // this.$XModal.message({status: 'warning', message: response.message})
            // this.$refs.xTable.remove(row)
          })
        }
      })
    },
    dateFormat(row, column) {
      var date = row.cellValue

      if (date == undefined || date == null) {
        return ''
      }
      return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')// 使用moment插件进行日期格式化
    },
    insertEvent() {
      if (this.add == true){
        this.$XModal.message({ status: 'error', message: '未保存记录不能再次添加！' })
        return false
      }
      this.add = true
      this.addType = true
      this.showTable = true
      this.btnLonding = true

      this.$refs.xTable.insert()
        .then(({ row }) => this.$refs.xTable.setActiveRow(row))
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container {
    /*left: 0;*/
    /*width: 100%;*/
    /*min-height: 100%;*/
    /*height: auto;*/
    /*background-image: linear-gradient(25deg, #05362d, #145d44, #24875d, #35b477)*/
  }

  .pagination {
    margin: 20px 0;
    text-align: right;
  }
</style>
