<template>
<div>
  <Table :columns="columnsList" :data="dataList" class="ListTab">
    <template slot="counting" slot-scope="{ row }">
        <strong>{{row.level===255?'全部':row.op_count}}</strong>
    </template>
    <template slot="operation" slot-scope="{ row }">
      <div v-if="row.level===255"></div>
      <a v-else @click="handle_assign(row)">{{$t('permission_assignment')}}</a>
    </template>
  </Table>

  <!--权限分配弹窗-->
  <Modal
  class="assign-byMemberLevel"
    v-model="showModal"
    width='800px'
    @on-cancel="cancel"
  >
  <h2>{{$t('permission_assignment')}}：<span class="desc">{{memberType}}</span></h2>
  <Table :columns="assign_columnsList" height='400' :data="assign_dataList" class="ListTab">
    <template slot="index" slot-scope="{ row, index }">
      <div>{{++index}}</div>
    </template>
    <template slot="path" slot-scope="{ row }">
      <div>/{{project}}{{row.path}}</div>
    </template>
    <template slot="operation" slot-scope="{ row }">
      <div class="operation">
        <Checkbox @on-change="assign(row)" :value="row.is_allow===1">{{$t('assgin')}}</Checkbox>
      </div>
    </template>
  </Table>

  <div class="assign-byMemberLevel__btn" slot="footer">
        <Button @click="cancel">{{$t('back')}}</Button>
    </div>
</Modal>
</div>
</template>
<script>
import { AssignOperationForMemberLevel, ListOperationForMemberLevel } from '@/api/permissions.js'
export default {
  props: {
    project: {
      type: String
    },
    token: {
      type: String
    },
    columnsList: {
      type: Array
    },
    dataList: {
      type: Array
    }
  },
  data () {
    return {
      showModal: false,
      memberType: '',
      assign_columnsList: [
        {
          title: this.$t('index'),
          slot: 'index',
          align: 'center',
          width: '80'
        },
        {
          title: this.$t('uri_link'),
          slot: 'path'
        },
        {
          title: this.$t('menu_title'),
          key: 'title'
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          align: 'center',
          width: '200'
        }
      ],
      assign_dataList: [],
      member_level_selected: ''
    }
  },
  methods: {
    async getOperationsForMemberLevel (member_level) {
      let formData = new FormData()
      formData.append('access_token', this.token)
      formData.append('project', this.project)
      formData.append('member_level', member_level)
      let res = await ListOperationForMemberLevel(formData)
      this.assign_dataList = res.data
      this.member_level_selected = member_level
    },
    async handle_assign (row) {
      // console.log(row)
      this.memberType = row.name
      await this.getOperationsForMemberLevel(row.level)
      this.show()
    },
    assign (row) {
      let formData = new FormData()
      formData.append('access_token', this.token)
      formData.append('project', this.project)
      formData.append('member_level', this.member_level_selected)
      formData.append('id', row.id)
      formData.append('is_allow', row.is_allow === 0 ? 1 : 0)
      AssignOperationForMemberLevel(formData).then(res => {
        if (res.ret === 200 && res.data.is_update) {
          this.$Message.success(this.$t('update_successfully'))
          this.$emit('refresh')
        }
      })
    },
    cancel () {
      this.showModal = false
      this.assign_dataList = []
    },
    show () {
      this.showModal = true
    }
  }
}
</script>
<style scoped lang='less'>
.ListTab{
  background: #fff;
  margin: 20px 0;
}
.assign-byMemberLevel {

  .desc {
      color: #eca71b;
    }
  .ivu-form-item {
    padding-left: 15px;
  }
  h2{
    margin-bottom: 20px;
  }
  .ivu-form-item-content{
    margin-left: 0;
  }

  .tips {
    padding: 0 16px;
    color: #888;
  }
  .ivu-form-item {
    margin-bottom: 15px !important;
  }
  .ivu-modal-body {
    h2 {
      margin-bottom: 20px;
    }
  }
}
</style>
