<template>
<div class="container">
  <p><Checkbox class="container__checkbox" v-model="my_is_allow" @on-change="checkboxChange()">接口授权</Checkbox></p>
  <p class="container__p"><strong>{{my_title}}</strong></p>
  <p>{{my_service}}</p>
</div>
</template>

<script>
import { getToken } from '@/libs/util'
import { AssignRights, RemoveRights } from '@/api/port'
export default {
  props: {
    app_key: {
      type: String,
      required: true
    },
    service: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    is_allow: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      my_app_key: this.app_key,
      my_service: this.service,
      my_title: this.title,
      my_is_allow: this.is_allow === 1,
      token: getToken()
    }
  },
  created () {
  },
  methods: {
    checkboxChange () {
      const formdata = new FormData()
      formdata.append('access_token', this.token)
      formdata.append('app_key', this.my_app_key)

      if (this.my_is_allow) {
        formdata.append('assign_service', this.my_service)
        AssignRights(formdata).then(res => {
          this.$Message.success('授权成功')
        })
      } else {
        formdata.append('remove_service', this.my_service)
        RemoveRights(formdata).then(res => {
          this.$Message.success('授权已取消')
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  background: #ffffff;
  margin:10px 20px;
  width: 200px;
  margin-bottom:20px;
  border: #eee 1px solid;
  p{
    margin: 10px;
  }
  &__checkbox{
    margin-left: 10px;
  }
}
</style>
