/**
* @Description: 参数设置
* @author wx
* @date 2020/5/12
*/
<template>
  <div class="params-setting-com page-wrap">
    <dee-search-server
      v-model="searchFormData"
      class="mpb0"
      :form-data="searchForm"
      @search="getList('SEARCH')"
    />
    <dee-table
      ref="multipleTable"
      :columns="tableColums"
      :data="tableData"
      :selection-row="selectionRow"
      :pagination="pagination"
      tooltip-effect="light"
      @pagination-current-change="paginationCurrentChange"
      @pagination-size-change="handleSizeChange"
      @selection-change="selectionChange"
      @handleEdit="handleEdit"
    >
      <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
    </dee-table>

    <dee-dialog
      :dialog-visible="dialogVisible"
      :title="item ? '编辑参数' : '新增参数'"
      width="60%"
      @handleClose="handleClose"
    >
      <edit v-if="model===1" :item="item" @handleClose="handleClose" @getList="getList" />
    </dee-dialog>
  </div>
</template>

<script>
import { getParams, deleteParams } from '@/api/userSystem/user.js'
import Edit from './components/edit'
export default {
  name: 'PositionManagement',
  components: { Edit },
  data() {
    return {
      dialogVisible: false,
      item: null,
      model: -1,
      // form表单数据
      organizationOptions: [],
      searchFormData: {
        configName: '',
        configKey: '',
        configState: ''
      },
      searchForm: [{
        key: 'configName',
        title: '参数名称',
        component: {
          name: 'el-input',
          clearable: true
        }
      },
      {
        key: 'configKey',
        title: '参数键名',
        component: {
          name: 'el-input',
          clearable: true
        }
      },
      {
        key: 'configState',
        title: '状态',
        component: {
          name: 'el-select',
          options: [
            { 'label': '禁用', 'value': 'DISABLE' },
            { 'label': '启用', 'value': 'ENABLE' }],
          clearable: true
        }
      }],
      tools: [{
        name: '新增',
        icon: '/icons/c-add.png',
        handler: {
          click: () => {
            this.handleEdit()
          }
        }
      },
      {
        name: '删除',
        icon: '/icons/c-creatbackups.png',
        handler: {
          click: () => {
            this.delPosition()
          }
        }
      }],
      tableColums: [
        { title: '操作', key: 'operate', align: 'center', minWidth: 50, component: {
          show: true,
          name: 'EditTableRow',
          props: {
            btns: [
              {
                operation: '编辑',
                handleClick: (row, index) => {
                  this.handleEdit(row)
                },
                icon: '/icons/c-edit.png',
                showFun: (row) => {
                  return true
                }
              }
            ]
          }
        }},
        { title: '参数名称', key: 'configName', align: 'center', minWidth: 180 },
        { title: '参数键名', key: 'configKey', align: 'center', hideTip: true, minWidth: 150 },
        { title: '参数键值', key: 'configValue', align: 'center', minWidth: 180 },
        { title: '备注', key: 'remark', align: 'center' },
        { title: '状态', key: 'configState', align: 'center',
          component: {
            render(h, params) {
              const text = params.configState === 'ENABLE' ? '启用' : '禁用'
              const color = params.configState === 'ENABLE' ? '#15872a' : '#f00'
              return h('span',
                { style: { color }}, text)
            }
          }
          // formatter(row, column) {
          //   return row.configState === 'ENABLE' ? '启用' : '禁用'
          // }
        },
        { title: '创建时间', key: 'createTime', align: 'center', minWidth: 180 }
      ],
      tableData: [],
      selectionRow: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        pageSizes: [10, 20, 50]
      },
      searchParamsOld: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList(status) {
      const searchParams = { 'items': [], 'operator': 'AND' }
      this.searchFormData.configName && searchParams.items.push({
        'fieldName': 'configName',
        'operator': 'LIKE',
        'value': this.searchFormData.configName
      })
      this.searchFormData.configKey && searchParams.items.push({
        'fieldName': 'configKey',
        'operator': 'LIKE',
        'value': this.searchFormData.configKey
      })
      this.searchFormData.configState && searchParams.items.push({
        'fieldName': 'configState',
        'operator': 'EQ',
        'value': this.searchFormData.configState
      })
      // if (this.searchParamsOld !== JSON.stringify(searchParams)) this.pagination.currentPage = 1
      if (status === 'SEARCH') this.pagination.currentPage = 1
      const params = {
        'pageFrom': this.pagination.currentPage,
        'pageSize': this.pagination.pageSize,
        'searchItems': searchParams
      }
      getParams(params).then(res => {
        this.tableData = res.items.content.map(item => { item.show = true; return item })
        this.pagination.total = res.items.totalElements
        // this.searchParamsOld = JSON.stringify(searchParams)
      }).catch(res => {
        // this.searchParamsOld = JSON.stringify(searchParams)
      })
    },
    delPosition() {
      if (this.selectionRow.length) {
        const idArr = this.selectionRow.map(r => r.id)
        this.$utils.showConfirm(
          '你是否确定删除选中的参数吗?',
          '提示',
          'warning',
          '确定',
          '取消',
          () => {
            deleteParams({ data: idArr }).then(res => {
              this.$utils.showMessageSuccess(res.message)
              this.getList()
            })
          }
        )
      } else {
        this.$utils.showMessageError('请先选择参数')
      }
    },
    selectionChange(val) {
      this.selectionRow = val
    },
    handleEdit(item) {
      this.dialogVisible = true
      this.model = 1
      this.item = item || null
    },
    handleClose() {
      this.model = -1
      this.item = null
      this.dialogVisible = false
    },
    paginationCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.currentPage = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.params-setting-com {
  .dee-form2 {
    display: flex;
  }
  .dee-table{
      height: calc(100% - 50px);
    .dee-table-body{
      height: calc(100% - 90px);
      overflow-y: scroll;
    }
  }
}
</style>