<template>
       <!--搜索区域-->
    <a-col :md="24" :sm="24" :order="1"  class="flex-container-nowidth">
      <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">

                <a-col :md="6" :sm="24">
                  <a-form-item label="应用名称">
                    <a-input v-model="queryParams.appName" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="24">
                    <a-button type="primary" icon="search" @click="reflashTable" >搜索</a-button>
                    <a-button style="margin-left: 8px" type="primary" icon="plus" @click="handleAdd">添加</a-button>
                </a-col>
              </a-row>
            </a-form>
          </div>
        <s-table
          ref="table"
          size="small"
          class="flex-filling"
          style="word-break: break-all;"
          bordered
          :columns="columns"
          :data="rowdata"
        >
          <template slot="createtime" slot-scope="text" >
            {{ text | dayjs}}
          </template>
          <template slot="updatetime" slot-scope="text" >
            {{ text | dayjs}}
          </template>
            <template slot="roleName" slot-scope="text, record">
                <a-tooltip placement="left">
                    <template slot="title">
                        {{text}}
                    </template>
                    <div style="width: 180px; overflow:hidden;text-overflow:ellipsis; white-space: nowrap;" >
                        {{text}}
                    </div>
                </a-tooltip>
            </template>
          <template slot="operation" slot-scope="text, record" v-if="record.status != 3">
            <span>
              <a @click="toggle(record.id)">修改</a>
            </span>
          </template>
        </s-table>
      <!-- 添加 -->
      <a-modal title="添加应用配置" v-model="add_config" @ok="handleOk" destroyOnClose="true">
        <a-form>
          <a-form-item label="应用名称" >
            <a-input placeholder="请输入应用名称" v-model="modelData.appName"></a-input>
          </a-form-item>
          <a-form-item label="应用id" >
            <a-input placeholder="请输入应用id" v-model="modelData.appId"></a-input>
          </a-form-item>
          <a-form-item label="应用密匙" >
            <a-input placeholder="请输入应用密匙" v-model="modelData.appSecret"></a-input>
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- 修改 -->
      <a-modal title="编辑应用配置" v-model="visible" @ok="handleUpdata">
        <a-form>
          <a-form-item label="应用名称" >
            <a-input placeholder="请输入应用名称" v-model="showModals.appName"></a-input>
          </a-form-item>
          <a-form-item label="应用id" >
            <a-input placeholder="请输入应用id" v-model="showModals.appId"></a-input>
          </a-form-item>
          <a-form-item label="应用密匙" >
            <a-input placeholder="请输入应用密匙" v-model="showModals.appSecret"></a-input>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-col>
</template>
<script>
import STable from '@/components/table'
import AInput from 'ant-design-vue/es/input/Input'
import treeList from '@/components/sysmanage/treeList'
import treecheck from '@/components/sysmanage/treeCheck'
import JDate from '@/components/jeecg/JDate'
import {
  getList,
  getInfo,
  add,
  update
} from '@/api/appConfig'

export default {
  name:"systemUser",
  components: {
    STable,
    AInput,
    treeList,
    treecheck,
    JDate
  },
  data() {
    return {
      columns: [
        { dataIndex: 'appName',width:150,fixed: 'left',sort: true, title: '应用名称',  },
        { dataIndex: 'appId',width:100,fixed: 'left', sort: true, title: '应用id', },
        { dataIndex: 'appSecret',width:200,fixed: 'left', sort: true, title: '应用密匙'},
        { dataIndex: 'createTime',width:150, sort: true, title: '创建时间', scopedSlots: { customRender: 'createtime' } },
        { dataIndex: 'createBy',width:150, sort: true, title: '创建人' },
        { dataIndex: 'updateTime',width:150, sort: true, title: '更新时间',  scopedSlots: { customRender: 'updatetime' }},
        { dataIndex: 'updateBy',width:100, sort: true, title: '更新人', },
        {
          dataIndex: 'center',
          toolbar: '#tableBar',
          title: '操作',
          width: 200,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      //查询条件
      queryParams: {
        appName: '',
      },
      modelData: {
        id: '',
        appName: '',
        appId: '',
        appSecret: '',
      },
      showModals: {
        id: '',
        appName: '',
        appId: '',
        appSecret: '',
      },
      rowdata: parameter => {
        let params = {
          pageNo: parameter.pageNo,
          pageSize: parameter.pageSize
        }
        let obj = this.queryParams
        return getList(Object.assign(params, obj)).then(res => {
          let data = {
            data: res.data.records,
            pageSize: parameter.pageSize,
            pageNo: parameter.pageNo,
            totalCount: res.total
          }
          return data
        })
      },
      add_config: false,
      visible: false,
    }
  },
  methods: {
    reflashTable() {
      this.$refs.table.refresh({ search: true })
    },
    //清除新增弹窗
    clearModelData(){
      this.modelData.id = '';
      this.modelData.appName = '';
      this.modelData.appId = '';
      this.modelData.appSecret = '';
    },
    // 添加应用配置
    handleAdd: function() {
      this.add_config = true
      this.clearModelData()
    },
    handleOk() {
      let that = this
      this.add_config = false
      add(that.modelData).then(() => {
        that.clearModelData();
        that.$refs.table.refresh({ search: true })
      })
    },
    // 修改
    toggle(id) {
      let that = this;
      that.visible = true;
      getInfo({id}).then(res =>{
        let appConfig = res.data;
        that.showModals.id = appConfig.id
        that.showModals.appName = appConfig.appName;
        that.showModals.appId = appConfig.appId;
        that.showModals.appSecret = appConfig.appSecret;
      })
    },
    handleUpdata() {
      this.visible = false
      let that = this
      update(that.showModals).then(() => {
        that.showModals.id = ''
        that.showModals.appName = ''
        that.showModals.appId = ''
        that.showModals.appSecret = ''
        that.$refs.table.refresh({ search: true })
      })
    },
  }
}

</script>


