/** * 组件名称:角色授权情况 * @author:laiyh * @Date:2020-07-28 */

<template>
  <dg-row>
    <!-- 搜索栏 -->
    <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
    <!-- 统计条 -->
    <p class="statis-bar" v-if="condition.appId">
      当前应用拥有角色【<span>{{ statisNums.roleNums }}</span
      >】个，应用分配总名额 【<span>{{ statisNums.initNums }}</span
      >】名
    </p>
    <!-- 表格 -->
    <new-table
      ref="table"
      :tableUrl="tableUrl"
      :tableHeader="tableHeader"
      :condition="condition"
      :lazyLoad="true"
      :tableOptList="tableOptList"
      @submitTableOpt="receviceOpt"
    >
    </new-table>
  </dg-row>
</template>

<script>
import newTable from '@/components/new-table';
import Detail from './detail';
import * as statisticsApi from '@/api/statistics-manage';
import searchBar from '@/components/search-bar';
import { searchOpt } from '@/mixins/page-opt';
import { appRestApi } from '@/api/application';
export default {
  components: { newTable, searchBar },
  mixins: [searchOpt],
  data() {
    return {
      tableUrl: statisticsApi.tableUrl,
      conditionForm: [
        {
          label: '应用系统名称',
          name: 'appId',
          component: 'SelectApp',
          op: '=',
          value: '',
          apiUrl: appRestApi.table,
          valueName: 'id',
          labelName: 'applyName'
        }
      ],
      tableHeader: [
        { label: '单位名称', prop: 'name' },
        { label: '机构代码', prop: 'code' },
        { label: '应分配名额', prop: 'mustQuotas' },
        { label: '实际分配名额', prop: 'quotaed' },
        { label: '待分配名额', prop: 'kfpme' },
        { label: '完成情况', prop: 'overRate' }
      ],
      statisNums: {},
      tableOptList: ['分局应用授权情况']
    };
  },
  // 方法
  methods: {
    receiveSearch(value) {
         if (!value.appId.value) {
         this.$message.warning("请选择应用系统名称！");
         return;
      }
      this.condition = value;
      this.getRoleQuotasInfo();
      this.handleSearch();
    },
    receviceOpt(opt, row) {
      this.getDetail(row);
    },
    // 应用拥有的角色、配额
    getRoleQuotasInfo() {
      statisticsApi.getRoleQuotasInfo(this.condition.appId.value).then((res) => {
        this.statisNums = res;
      });
    },
    getDetail({ id }) {
      const layer = this.$dgLayer({
        title: '分局应用授权情况',
        area: ['910px', '560px'],
        props: {
          searchForm: {
            orgId: id,
            appId: this.condition.appId.value,
            isInit: true
          }
        },
        content: Detail
      });
    }
  },
  created() {
  }
};
</script>

<style lang="scss" scope>
.statis-bar span {
  color: #f5222d;
  font-size: 20px;
  font-weight: bold;
}
</style>
