<template>
  <div class="app-container">
    <el-card class="box-carde">
      <div slot="header" class="clearfix">
        <span>系统参数</span>
        <el-button
          style="float: right;padding:3px 10px 3px 3px;"
          type="text"
          :loading="btnLonding"
          @click="exportDataEvent"
        >导出数据
        </el-button>
      </div>
      <el-button
        type="primary"
        size="small"
        style="round-clip: 10px"
        :loading="btnLonding"
        @click="insertEvent"
      >新增</el-button>
      <el-input
        v-model="keywords"
        placeholder="通过描述搜索参数,记得回车哦..."
        clearable
        style="width: 300px;margin: 0px;padding: 0px;"
        size="mini"
        prefix-icon="el-icon-search"
        @keyup.enter.native="searchEmp"
      />
      <el-button
        type="primary"
        size="small"
        style="round-clip: 10px"
        :loading="btnLonding"
        @click="searchEmp"
      >查询</el-button>
      <div style="padding-top: 10px">
        <vxe-table
          ref="xTable"
          highlight-current-row
          v-show="showTable"
          :keep-source="true"
          align="center"
          export-config
          :loading="loading"
          auto-resize
          border
          resizable
          show-overflow
          :edit-rules="rules"
          :data="tableData"
          :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', readonly: !add}}"
            />
            <vxe-table-column
              field="sysValue"
              title="参数值"
              :edit-render="{name: '$input', attrs: {type: 'text'}}"
            />
            <vxe-table-column
              field="describe"
              title="参数描述"
              width="30%"
              :edit-render="{name: '$input', attrs: {type: 'text'}}"
            />
            <vxe-table-column field="creator" title="创建人" width="8%" />
            <vxe-table-column :formatter="dateFormat" field="createTime" width="20%" title="创建时间" />
            <vxe-table-column width="10%" align="center" 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)"
                  >编辑
                  </el-button>
                  <!--<el-button-->
                  <!--type="danger"-->
                  <!--style="padding: 3px 4px 3px 4px;margin: 2px"-->
                  <!--size="mini"-->
                  <!--icon="el-icon-delete"-->
                  <!--@click="removeEvent(row)"-->
                  <!--: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"
        ><!--v-show="!btnLonding"-->
        </vxe-pager>
      </div>

    </el-card>
  </div>
</template>
<script>
import request from '@/utils/request'

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: '参数标识不能为空' }
        ],
        sysValue: [
          { required: true, message: '参数不能为空' }
        ],
        describe: [
          { required: true, message: '参数描述不能为空' }
        ]
      }
    }
  },
  created() {
    this.getAll()
  },
  methods: {
    activeCellMethod({ column, columnIndex }) {
      if (columnIndex === 1) {
        return false
      }
      return true
    },
    searchEmp() {
      this.loading = true
      this.saveLoding = false
      this.$axios.get('/sysParameter/' + this.currentPage + '/' + this.pageSize + '/' + this.keywords).then((res) => {
        this.tableData = res.data.content
        this.total = res.data.count
        console.log('获取系统参数信息成功')
        if (res.data.content == '') {
          this.showTable = false
        } else {
          this.showTable = true
        }
        this.tableData = res.data.content
        this.total = res.data.totalElements
        this.loading = false
      }).catch((error) => {
        this.$message.error('获取系统参数信息出错' + error)
      })
    },
    getAll() {
      this.loading = true
      this.saveLoding = false
      this.$axios.get('/sysParameter/' + this.currentPage + '/' + this.pageSize,).then((res) => {
        this.tableData = res.data.content
        this.total = res.data.count
        console.log('获取系统参数信息成功')
        if (res.data.content == '') {
          this.showTable = false
        } else {
          this.showTable = true
        }
        this.tableData = res.data.content
        this.total = res.data.totalElements
        this.loading = false
      }).catch((error) => {
        this.$message.error('获取系统参数信息出错' + error)
      })
    },
    editRowEvent(row) {
      this.btnLonding = true
      this.$refs.xTable.setActiveRow(row)
    },
    saveRowEvent(row) {
      this.saveLoding = true
      this.$refs.xTable.validate(valid => {
        if (valid) {
          if (this.addType) {
            this.$axios.post('/sysParameter/', row).then(response => {
              this.getAll()
              this.btnLonding = false
              this.addType = false
              this.$XModal.message({ status: 'warning', message: response.message })
              this.add = false
            }).catch((error) => {
              this.loading = false
              this.$emit('sendLoading', this.loading)
              this.$message.error('添加出错' + error)
              this.add = true
            })
          } else {
            this.$axios.put('/sysParameter/', row).then(response => {
              this.getAll()
              this.$XModal.message({ status: 'warning', message: response.message })
              this.saveLoding = false
              this.btnLonding = false
            })
          }
        } else {
          this.$XModal.message({ status: 'error', message: '校验不通过！' })
          this.saveLoding = false
        }
      })
      this.saveLoding = false
    },
    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) {
    //   window.console.log(row)
    //   this.$XModal.confirm('您确定要删除该数据?').then(type => {
    //     if (type === 'confirm') {
    //       this.$axios.delete('/sysParameter/',{data:row}).then(response => {
    //         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() {
      this.add = true
      this.addType = true
      this.showTable = true
      this.btnLonding = true

      this.$refs.xTable.insert()
        .then(({ row }) => this.$refs.xTable.setActiveRow(row))
    },
    handlePageChange({ currentPage, pageSize }) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.getAll()
    },
    exportDataEvent() {
      this.loading = true
      this.$axios.get('/sysParameter/').then(res => {
        const data = res.data.content
        this.$refs.xTable.exportData({
          filename: '系统参数信息',
          type: 'csv',
          isHeader: true,
          isFooter: true,
          data
        })
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    importDataEvent() {
      this.$refs.xTable.importData({ types: ['csv'] })
    }
  }
}
</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>
