<template>
    <div class="global-page">
      <Card>
        <div class="search-con">
          <Input
            placeholder="请输入设置项键或值"
            class="search-input"
            v-model="searchContent.keyword"
            style="width: 200px"
            clearable
          />
          <ButtonGroup class="search-btngroup" style="margin-right: 10px">
            <Button type="primary" @click="handleSearch">查找</Button>
            <Button type="primary" @click="handleRefresh">
              <Icon type="md-refresh" />
            </Button>
          </ButtonGroup>
          <Button type="info" @click="handleAdd">+ 新增配置</Button>
        </div>
        <tables
          ref="tables"
          editable
          pagable
          v-model="tableData"
          :columns="columns"
          :currentPage="searchContent.pageNum"
          :pageSize="searchContent.pageSize"
          :totalSize="totalSize"
          :loading="loading"
          @on-change="handleCurrentChange"
        />
      </Card>
      <Modal
        v-if="type == 1"
        title="新增配置项"
        v-model="modalFlag"
        class-name="vertical-center-modal">
        <Form
          ref="addSys"
          :model="addSys"
          :rules="ruleValidate"
          :label-width="120"
        >
          <FormItem label="键：" prop="dictKey">
            <Input
              v-model="addSys.dictKey"
              :maxlength="30"
            />
          </FormItem>
          <FormItem label="值：" prop="dictValue">
            <Input
              v-model="addSys.dictValue"
              :maxlength="30"
            />
          </FormItem>
          <FormItem label="描述：" prop="comm">
            <Input
              v-model="addSys.comm"
              :maxlength="30"
            />
          </FormItem>
        </Form>

        <div slot="footer">
          <Button
            @click="handleSureAdd('ruleValidate')"
            type="primary"
          >确 定</Button
          >
        </div>
      </Modal>
      <Modal
        v-if="type == 2"
        title="修改配置项"
        v-model="modalFlag"
        class-name="vertical-center-modal">
        <Form
          ref="editSys"
          :model="editSys"
          :rules="ruleValidate"
          :label-width="120"
        >
          <FormItem label="键：" prop="dictKey">
            <Input
              v-model="editSys.dictKey"
              :maxlength="30"
            />
          </FormItem>
          <FormItem label="值：" prop="dictValue">
            <Input
              v-model="editSys.dictValue"
              :maxlength="30"
            />
          </FormItem>
          <FormItem label="描述：" prop="comm">
            <Input
              v-model="editSys.comm"
              :maxlength="30"
            />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button
            @click="handleSureUpdate('ruleValidate')"
            type="primary"
          >确 定</Button
          >
        </div>
      </Modal>
    </div>
</template>
<script>
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
export default {
  inject: ['reload'],
  components: {
    Tables
  },
  data () {
    return {
      type: 1,
      modalFlag: false,
      addSys: {
        comm: '',
        dictKey: '',
        dictValue: ''
      },
      editSys: {
        configId: '',
        comm: '',
        dictKey: '',
        dictValue: '',
        updateTime: ''
      },
      ruleValidate: {
        comm: { required: true, message: '不能为空！', trigger: 'blur' },
        dictKey: { required: true, message: '不能为空！', trigger: 'blur' },
        dictValue: { required: true, message: '不能为空！', trigger: 'blur' }
      },
      searchContent: {
        keyword: '',
        page: 1,
        pageSize: 10
      },
      tableData: [],
      columns: [
        { title: '编号', type: 'index', align: 'center', width: 100 },
        { title: '键', key: 'dictKey', align: 'center', minWidth: 100 },
        { title: '值', key: 'dictValue', align: 'center', minWidth: 100 },
        { title: '描述', key: 'comm', align: 'left', minWidth: 180 },
        { title: '新建时间',
          key: 'uid',
          align: 'center',
          minWidth: 120,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        { title: '状态',
          key: 'status',
          align: 'center',
          minWidth: 90,
          render: (h, params) => {
            return h('span', params.row.validState ? '可用' : '停用')
          }
        },
        { title: '操作',
          key: 'operate',
          align: 'center',
          minWidth: 150,
          render: (h, params) => {
            let validState = params.row.validState
            const statusBtn = h(
              'Button',
              {
                props: {
                  type: validState ? 'primary' : 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                }
              },
              validState ? '停 用' : '可 用'
            )
            const statusPoptip = h(
              'Poptip',
              {
                props: {
                  confirm: true,
                  title: `确定要 ${
                    validState ? '停用' : '可用'
                  } 该键值对？`,
                  transfer: true
                },
                on: {
                  'on-ok': () => {
                    this.handleUpdateStatus(params.row)
                  }
                }
              },
              [statusBtn]
            )
            let editBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleUpdate(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '编 辑'
            )
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [statusPoptip, editBtn, delBtn])
          }
        }
      ],
      totalSize: 0,
      loading: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getSysConfigList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleSearch () {
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleAdd () {
      this.type = 1
      this.modalFlag = true
      this.addSys.dictKey = ''
      this.addSys.dictValue = ''
      this.addSys.comm = ''
    },
    handleUpdateStatus (row) {
      let { configId, updateTime } = row
      let validState = !row.validState
      this.api({
        apiName: 'updateSysConfigStatus',
        postdata: { validState, configId, updateTime },
        success: () => {
          this.requestData()
          this.$Notice.success({ title: `操作成功！` })
        }
      })
    },
    handleUpdate (row) {
      return () => {
        let { configId, dictKey, dictValue, updateTime, comm } = row
        this.editSys = {
          configId,
          dictKey,
          dictValue,
          updateTime,
          comm
        }
        this.type = 2
        this.modalFlag = true
      }
    },
    handleDelete (row) {
      return () => {
        let configId = row.configId
        this.$Modal.confirm({
          title: '删除',
          content: `确认要删除该键值对 ？`,
          onOk: () => {
            this.api({
              apiName: 'deleteSysConfig',
              postdata: configId,
              success: (res) => {
                this.requestData()
                this.$Notice.success({ title: `删除成功！` })
              }
            })
          }
        })
      }
    },
    handleSureAdd () {
      if (!this.addSys.dictKey || !this.addSys.dictValue || !this.addSys.comm) {
        this.$Message.warning('所有项均为必填项哦！')
        return
      }
      this.api({
        apiName: 'addSysConfig',
        postdata: this.addSys,
        success: (res) => {
          this.requestData()
          this.modalFlag = false
          this.$Notice.success({ title: `添加成功！` })
        }
      })
    },
    handleSureUpdate () {
      if (!this.editSys.dictKey || !this.editSys.dictValue || !this.editSys.comm) {
        this.$Message.warning('所有项均为必填项哦！')
        return
      }
      this.api({
        apiName: 'editSysConfig',
        postdata: this.editSys,
        success: (res) => {
          this.requestData()
          this.modalFlag = false
          this.$Notice.success({ title: `编辑成功！` })
        }
      })
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style lang="less" scoped>
.search-con {
  padding: 10px 0;
}
  .search-input {
    margin-right: 10px;
  }
</style>
