<template>
  <div class="full-size" style="display: flex;flex-direction: column;">
    <div>
      <el-button  v-permission="'group:CreatePolicyAttachment | policy-attachment:CreateInstancesToGroup'" type="primary" style="margin-bottom: 10px;" @click="toAddPolicy">添加权限</el-button>
    </div>
    <div style="display: flex; flex-direction: column; flex: 1; overflow: hidden">
        <el-table
          key="listGroupPolicesTable"
          :data="groupPolices"
          class="table-height-auto"
        >
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="policyName" label="权限策略名称"></el-table-column>
          <el-table-column prop="policyType" label="权限策略类型">
            <template slot-scope="scope">
              {{ scope.row.policyType | filterPolicyType }}
            </template>
          </el-table-column>
          <el-table-column prop="comments" label="备注"></el-table-column>
          <el-table-column prop="attachTime" label="授权时间"></el-table-column>
          <el-table-column
            label="操作"
            min-width="80">
            <template slot-scope="scope">
              <el-button v-permission="'group:DeletePolicyAttachment | policy-attachment:DeleteInstanceFromGroup'" type="text" @click="removePolicy(scope.$index)" >移除权限</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>

    <!-- 添加权限 -->
    <el-dialog :append-to-body="true" style="min-height: 400px" title="添加权限" :modal="true" top="100px" :close-on-click-modal="false" v-if="showAddPolicy" :visible.sync="showAddPolicy">
      <div slot="title" class="custom-el-dialog-header-title">
        <span>添加权限</span>
        <div class="plain-button" @click="savePolicyAttachment">
          <i class="font_family icon-save plain-button-icon"></i><span class="plain-button-text">&nbsp;保存</span>
        </div>
      </div>
      <el-select v-model="policyType" placeholder="权限策略类型" style="margin-bottom: 15px; margin-top: -10px;">
        <el-option label="全部" value="all"></el-option>
        <el-option label="系统策略" value="system"></el-option>
        <el-option label="自定义策略" value="custom"></el-option>
      </el-select>
      <el-table
        ref="addPolicyTable"
        :data="availablePolicyList"
        class="table-height-auto"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="policyName" label="权限策略名称" min-width="250"></el-table-column>
        <el-table-column prop="policyType" label="权限策略类型" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.policyType | filterPolicyType }}
          </template>
        </el-table-column>
        <el-table-column prop="comments" label="备注" min-width="180">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'GroupPolicySelector',
  props: {
    groupId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      principleType: 'group',
      groupPolices: [],
      allPolicyList: [],
      showAddPolicy: false,
      policyType: 'all'
    }
  },
  computed: {
    availablePolicyList: function () {
      const policySet = new Set(this.groupPolices.map(p => p.policyId))
      return this.allPolicyList.filter(p => !policySet.has(p.policyId))
        .filter(p => this.policyType === 'all' || this.policyType === p.policyType)
    }
  },
  filters: {
    filterPolicyType: function (value) {
      return value === 'system' ? '系统策略' : '自定义策略'
    }
  },
  created () {
  },
  mounted () {
    // 加载用户所在组
    this.loadGroupAllPolicies()
  },
  methods: {
    loadAllPolicy () {
      this.$http.get(this.$apiUrl('listAllPolicy'))
        .then(response => {
          this.allPolicyList = response.data.data
          this.allPolicyList.forEach(p => { p.policyId = p.id })
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },
    loadGroupAllPolicies () {
      // 加载指定用户的策略信息
      if (typeof (this.groupId) === 'string') {
        this.$http.get(this.$apiUrl('getPoliciesOfGroup') + `?id=${this.groupId}`).then((response) => {
          this.groupPolices = response.data.data
        }).catch((response) => {
          console.log('获取策略列表失败', response)
          this.$message.error(response.message)
        })
      }
    },
    toAddPolicy () {
      this.showAddPolicy = true
      if (this.allPolicyList.length === 0) {
        this.loadAllPolicy()
      }
    },
    // 保存添加组
    savePolicyAttachment () {
      const selectionPolicy = this.$refs.addPolicyTable.selection
      const policyId = selectionPolicy.map(policy => policy.id)
      if (policyId.length === 0) {
        return this.$message.warning('请选择策略')
      }
      // this.$qs.stringify(this.groupForm)
      this.$http.post(this.$apiUrl('createPolicyOfGroup'), { groupId: this.groupId, policyId })
        .then(response => {
          this.$message.success('添加权限策略成功')
          this.groupPolices.push(...selectionPolicy)
          this.showAddPolicy = false
          console.log(this.groupPolices)
        })
        .catch(error => {
          this.$message.error(`添加权限策略失败! ${error.message}`)
        })
        .always(() => {
        })
    },
    removePolicy (index) {
      const policyId = [this.groupPolices[index].policyId]
      const url = this.$apiUrl('deletePolicyOfGroup') + '?' + this.$qs.stringify({ groupId: this.groupId, policyId })
      this.$http.delete(url)
        .then(response => {
          this.$message.success('移除策略成功')
          this.groupPolices.splice(index, 1).map(group => group.id)
          console.log(this.groupPolices)
        })
        .catch(error => {
          this.$message.error(`移除策略失败! ${error.message}`)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '../../style/mixin';
</style>
