<template>
  <div>
    <div class="queryKeyWord">
      <p>{{$t('config_name')}}：</p>
      <Input class="queryKeyWord__input" clearable v-model="keyword" placeholder="" style="width: 300px" />
      <p>{{$t('config_desc')}}：</p>
      <Input class="queryKeyWord__input" clearable v-model="desc" placeholder="" style="width: 300px" />
      <i-button type="primary" @click="search">{{$t('search')}}</i-button>
    </div>
    <Table border :loading="disabledTab" :columns="columnsList" :data="dataList" class="queryKeyWord__tab">
        <template slot-scope="{ row }" slot="config_name" >
          <p> {{row.config_name}} </p>
        </template>
        <template slot-scope="{ row }" slot="config_value" >
          <p> {{row.config_value}} </p>
        </template>
        <template slot-scope="{ row }" slot="operation" class="operation">
            <router-link :to="{name:'editmanagement',query:{name:row.config_name}}" >
              <Button type="primary" size="small" class="operation__btn" style="">{{$t('edit')}}</Button>
            </router-link>
            <Button type="error" size="small" class="operation__btn" style="" @click="remove(row.config_name)">{{$t('delete')}}</Button>
        </template>
    </Table>
    <div class="pagination">
      <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div>
  </div>
</template>

<script>
import { GetList, RemoveConfig } from '@/api/configuration'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      disabledTab: false,
      token: getToken(),
      disaStatus: true,
      keyword: '',
      desc: '',
      total: 0,
      page: 1, // 分页
      perpage: 10,
      columnsList: [
        {
          title: this.$t('ID'),
          key: 'id',
          align: 'center'
        },
        {
          title: this.$t('config_name'),
          key: 'config_name',
          slot: 'config_name',
          align: 'center'
        },
        {
          title: this.$t('config_value'),
          key: 'config_value',
          slot: 'config_value',
          align: 'center'
        },
        {
          title: this.$t('config_desc'),
          key: 'config_desc',
          align: 'center'
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          align: 'center'
        }
      ],
      dataList: []
    }
  },
  // 获取应用管理数据
  created () {
    this.queryList()
  },
  methods: {
    search () {
      this.page = 1
      this.queryList()
    },
    // 查询列表
    queryList () {
      this.disabledTab = true
      const data = new FormData()
      if (this.keyword) {
        data.append('config_name', this.keyword)
      }
      if (this.desc) {
        data.append('config_desc', this.desc)
      }
      data.append('page', this.page)
      data.append('perpage', this.perpage)
      data.append('access_token', this.token)
      GetList(data).then(res => {
        this.dataList = res.data.items
        this.total = res.data.total
        this.disabledTab = false
      })
    },
    changeSize (size) {
      this.perpage = size
      this.queryList()
    },
    changePage (page) {
      this.page = page
      this.queryList()
    },
    // 删除操作
    remove (value) {
      this.$Modal.confirm({
        title: this.$t('operation_confirm'),
        content: this.$t('are_u_sure_to_delete_config'),
        onOk: () => {
          const formdata = new FormData()
          formdata.append('access_token', this.token)
          formdata.append('config_name', value)
          RemoveConfig(formdata).then(res => {
            if (res.ret === 200 && res.data.is_remove) {
              this.$Message.success(this.$t('successfully_deleted'))
              this.queryList()
            }
          })
        },
        onCancel: () => {
          this.$Message.info(this.$t('cancel'))
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.queryKeyWord{
  display: flex;
  align-items: center;
  height:72px;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
  border-radius:10px;
  margin-bottom: 20px;
  padding: 0 30px;
  &__input{
    margin-right:40px;
  }
  &__tab{
    background: #fff;
    border-radius: 10px;
  }
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.operation{
  &__btn{
    margin: 0 5px;
  }
}

</style>
