<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :selectable='false'
      :show-export="false"
      :show-custom-column="false"
      quick-search-props="categoryKey"
      :default-sorter="[{direction: 'ASC',property: 'categoryValue'}]"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          @click="addSave"
          type="primary"
          icon='el-icon-plus'
        >添加</el-button>
      </template>
      <template>
        <ht-table-column
          type="index"
          width="50"
          align="center"
          label="序号"
        />
        <ht-table-column
          prop="categoryKey"
          label="模块名"
          width="300"
          :show-overflow-tooltip="true"
        />
        <ht-table-column
          prop="categoryValue"
          label="模块值"
          width="300"
          :show-overflow-tooltip="true"
        />
        <ht-table-column
          label="操作"
          fixed="right"
        >
          <template v-slot="{row}">
            <el-button
              type="text"
              @click="handelEdit(row)"
            >
              <i class="el-icon-edit">编辑</i>
            </el-button>
            <el-button
              type="text"
              @click="handelDelete(row.id)"
            >
              <i class="el-icon-delete">删除</i>
            </el-button>
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <!-- 弹出框 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisibleEdit"
      width="30%"
      :before-close="handleClose"
      v-if='dialogVisibleEdit'
    >
      <el-form
        ref="form"
        :model="form"
        :rules='rules'
        label-width="80px"
      >
        <el-form-item
          label="模块名"
          prop="categoryKey"
        >
          <el-input v-model="form.categoryKey" />
        </el-form-item>
        <el-form-item
          label="模块值"
          prop="categoryValue"
        >
          <el-input
            v-model.number="form.categoryValue"
            placeholder="请输入模块值"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handelCancel">取 消</el-button>
        <el-button
          type="primary"
          @click="handelSaveEdit"
        >修改</el-button>
      </span>
    </el-dialog>
    <!-- 保存添加弹出框 -->
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        v-if="dialogVisible"
        ref="form"
        :model="form"
        :rules='rules'
        label-width="80px"
      >
        <el-form-item
          label="模块名"
          prop="categoryKey"
        >
          <el-input
            v-model="form.categoryKey"
            placeholder="请输入模块名"
          />
        </el-form-item>
        <el-form-item
          label="模块值"
          prop="categoryValue"
        >
          <el-input
            v-model.number="form.categoryValue"
            placeholder="请输入模块值"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handelCancel">取 消</el-button>
        <el-button
          type="primary"
          @click="handelSave"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import report from '@/api/report.js'
import { isDate } from 'moment'

export default {
  name: 'table-code',
  data() {
    const validatorFactror = (rule, value, callback) => {
      // if (!Number(value)) {
      //   return callback(new Error('只能输入数字'))
      // }
      const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g
      if (!reg.test(value)) {
        callback(new Error('只能输入数字'))
      }
      callback()
    }
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      dialogVisible: false,
      dialogVisibleEdit: false,
      form: {
        categoryKey: '',
        categoryValue: '',
        id: '',
        isDele: '',
        pkVal: '',
        tenantId: ''
      },
      rules: {
        categoryKey: [
          {required: true, message: '请输入模块名', trigger: 'blur'}
        ],
        categoryValue: [
          {required: true, message: '请输入模块值', trigger: 'blur'},
          {validator: validatorFactror}
        ]
      }
    }
  },
  mounted() {},
  methods: {
    loadData(param, cb) {
      report
        .getClassific(param)
        .then(response => {
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
          this.data = response.rows
        })
        .finally(() => {
          if (cb) {
            cb()
          }
        })
    },
    //编辑
    handelEdit(data) {
      this.dialogVisibleEdit = true
      this.form = data
      this.form.categoryKey = data.categoryKey
      this.form.categoryValue = data.categoryValue
      this.form.id = data.id
      this.form.isDele = data.isDele
    },
    handelCancel() {
      this.form = {
        categoryKey: '',
        categoryValue: '',
        id: '',
        isDate: ''
      }
      this.dialogVisible = false
      this.dialogVisibleEdit = false
    },
    handleClose(done) {
      this.form = {
        categoryKey: '',
        categoryValue: '',
        id: '',
        isDate: ''
      }
      done()
    },
    //修改保存
    handelSaveEdit() {
      this.$refs.form.validate(bool => {
        if (bool) {
          this.dialogVisibleEdit = false
          report
            .editSave({
              categoryKey: this.form.categoryKey,
              categoryValue: this.form.categoryValue,
              id: this.form.id,
              isDele:this.form.isDele
            })
            .then(res => {
              this.loadData()
            })
        }else {
          this.$message.error('请重新检查输入值')
        }
      })
    },
    //添加
    addSave() {
      this.dialogVisible = true
    },
    //添加保存
    handelSave() {
      this.$refs.form.validate(bool => {
        if (bool) {
          this.dialogVisible = false
          report
            .editSave({
              categoryKey: this.form.categoryKey,
              categoryValue: this.form.categoryValue
            })
            .then(res => {
              this.loadData()
            })
        } else {
          this.$message.error('模块值必须为数字')
        }
      })
    },
    //删除
    handelDelete(id) {
      report.delClassific(id).then(res => {
        this.loadData()
      })
    }
  }
}
</script>