<template>
<div class="apis-list">
  <div class="apis-list__h">
    <div>
      <Button type="primary" @click="handleAddService">{{ $t('add_api_operation') }}</Button>
    </div>
  </div>
  <Table style="max-width:2000px;min-width:1000px;margin-top:20px;border-radius:10px;" border :columns="listHead" :data="listData" :loading="loading">
    <template slot="operate" slot-scope="{ row, index }">
      <Button v-if="!row.is_system" size="small" type="error" @click="delService( row, index )">{{ $t('delete') }}</Button>
      <span v-else>-</span>
    </template>
  </Table>
  <addService ref="addService" @success="query"></addService>
</div>
</template>

<script>
import { getToken } from '@/libs/util'
import addService from './components/addService'
import { ListAllRightsService, RemoveRightsService } from '@/api/port'
export default {
  components: {
    addService
  },
  data () {
    return {
      loading: false,
      token: getToken(),
      listHead: [
        {
          title: this.$t('api_service_name'),
          key: 'service'
        }, {
          title: this.$t('desc'),
          key: 'title',
          align: 'center'
        }, {
          title: this.$t('operation'),
          slot: 'operate',
          align: 'center'
        }
      ],
      listData: []
    }
  },
  methods: {
    delService (row, index) {
      let that = this
      this.$Modal.confirm({
        title: this.$t('confirm_the_deletion'),
        content: `<p style="color:red;margin-top: 12px">`+this.$t('dangerous_operation')+`！</p>
        <p>` + this.$t('are_u_sure_delete_the_') + `${row.service}`+ this.$t('service') +`?</p>
        <p style="font-size:12px;margin-top: 15px">`+ this.$t('not_recoverable') +`。</p>`,
        onOk () {
          let data = new FormData()
          data.append('access_token', that.token)
          data.append('rights_service', row.service)
          RemoveRightsService(data).then(res => {
            if (res.ret === 200 && res.data.is_remove) {
              that.$Message.success(this.$t('successfully_delete'))
              that.$delete(that.listData, index)
            }
          })
        },
        onCancel () {
          return false
        }
      })
    },
    handleAddService () {
      this.$refs.addService.show()
    },
    query () {
      this.loading = true
      let data = new FormData()
      data.append('access_token', this.token)
      ListAllRightsService(data).then(res => {
        if (res.ret === 200) {
          this.listData = res.data.items
        }
        this.loading = false
      })
    }
  },
  created () {
    this.query()
  }
}
</script>
<style lang='scss'>
.apis-list {
  &__h{
    height:72px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    display: flex;
    align-items: center;
    padding: 0 30px;
  }
  .addService {
    color: blue;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
  }
}
</style>
