<template>
  <div class="assignment">
    <div class="assignment__h">
      <p class="assignment__h--p">{{$t('Interface_permission_assignment')}}</p>
      <div style="margin-left:30px;">{{$t('for_the')}}
        <!-- <a href="" target="_blank">接口服务操作</a> -->
        <router-link :to="{path: '/techzones/apis-mangement/apisList'}"  target="_blank">{{$t('interface_service_operation')}}</router-link>，
        {{ $t('grant_permissions') }}、
        <router-link :to="{path: '/user/list'}"  target="_blank">{{ $t('developer_account') }}</router-link>、
        <router-link :to="{path: '/application/list'}"  target="_blank">{{ $t('developer_app') }}</router-link>。
        {{ $t('priority') }}。
      </div>
    </div>
    <Table border :loading="tabDis" :columns="columnsList" :data="dataList" class="assignment__form">
      <template v-for="item in arr" slot-scope="{ row }" :slot="item">
        <!-- <tr :key="item" /> -->
        <div :key="item">
          <Button v-if="row[item] === false"  type="text" size="small"  style="color:blue" @click="operation(row,item)">{{ $t('designate') }}</Button>
          <Button v-else-if="row[item] === true"  type="text" size="small"  style="color:red" @click="operation(row,item)">{{ $t('repeal') }}</Button>
          <a v-else target="_blank" :href="'/docs.php?service=' + row[item] + '&detail=1&type=fold'">{{ row[item] }}</a>
          <!-- <a v-else target="_blank" :href="'/docs.php?service=Admin.Rights.' + row[item] + '&detail=1&type=fold'">{{ row[item] }}</a> -->
          <!--  <Button v-else type="text" size="small"  :style="{'color': row[item] == 'false' ? 'red' : 'blue'}" @click="operation(row,item)">{{ row[item] == 'false' ? '指派' : '撤销' }}</Button> -->
        </div>
      </template>
    </Table>
    <!-- <div class="pagination">
      <Page :total="total" show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div> -->
  </div>
</template>
<script>
import { ListAllRightsForDeveloperType, AssignRightsForDevTypeOrNot } from '@/api/port.js'
import { getToken } from '@/libs/util'
export default {
  data () {
    return {
      token: getToken(),
      tabDis: false,
      // columnsList: [{ title: '接口服务操作', key: 's', slot: 's' }],
      columnsList: [{}],
      dataList: [],
      titleArr: [],
      arr: []
    }
  },
  created () {
    this.getApiList()
  },
  methods: {
    /* 操作 */
    operation (data, item) {
      this.tabDis = true
      const dataFrom = new FormData()
      dataFrom.append('access_token', this.token)
      dataFrom.append('rights_service', data.s)
      dataFrom.append('member_type', item)
      AssignRightsForDevTypeOrNot(dataFrom).then(res => {
        if (res.ret === 200) {
          /* console.log(data[item], '====')
          if (res.data.is_allow) {
            data[item] = 'false'
          } else {
            data[item] = 'true'
          } */
          this.$Message.success('操作成功')
          this.getApiList()
          this.tabDis = false
        }
      })
    },
    getApiList () {
      this.tabDis = true
      let formdata = new FormData()
      formdata.append('access_token', this.token)
      // ListAllRightsService(formdata).then(res => {
      //   console.log('ListAllRightsService', res)
      // })
      // GetAllAppApis(formdata).then(res => {
      //   console.log('GetAllAppApis', res)
      // })
      ListAllRightsForDeveloperType(formdata).then(res => {
        if (res.ret === 200) {
          this.dataList = res.data.items
          res.data.dev_types.forEach((item, index) => {
            this.titleArr.push(item)
          })
          let dataHead = []
          for (let i in this.dataList[0]) {
            this.arr.push(i)
            let o = { key: i, slot: i, align: 'center' }
            dataHead.push(o)
          }
          for (let i in dataHead) {
            if (dataHead[i].key === 's') {
              dataHead[i].title = this.$t('service')
            } else {
              this.titleArr.forEach(item => {
                if (item.level === Number(dataHead[i].key)) {
                  dataHead[i].title = item.name
                }
              })
            }
          }
          const dataHeadArr = dataHead.splice(dataHead.length - 1, 1)
          dataHead.unshift(dataHeadArr[0])
          this.columnsList = dataHead
          this.tabDis = false
        }
      })
      /* SearchRightsList(formdata).then(res => {
        console.log('SearchRightsList', res)
      }) */
    }
  }
}
</script>
<style lang="scss" scoped>
.assignment{
  &__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;
    margin-bottom: 20px;
    justify-content: center;
    flex-direction: column;
    &--p{
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      margin-left: 30px;
      color:rgba(35,35,42,1);
    }
  }
  &__form{
    background: #fff;
    border-radius: 10px;
  }
}
/* .pagination {
  height: 180px;
  padding: 50px 0 50px 500px;
} */
</style>
