<template>
  <div class="approval">
    <!-- 高级搜索 -->
    <TableSearch @searchTable="searchTable" />
    <PopForm v-if="isShow" @closePopForm="closePopForm" @refresh="refresh" :data="FormData" :that="this" />

    <div class="columns-action">
      <div class="add"  v-action:Add :style="{ marginRight: '15px' }" @click="edit('', that)">
        <a-tooltip title="新增">
          <a-icon class="action" type="plus" />
        </a-tooltip>
      </div>

      <!-- 表格大小设置 -->
      <TableSize class="action-size" @changeTableSize="changeTableSize" :that="this" />

      <!-- 表格列设置 -->
      <ActionColumns
        class="action-column"
        @columns="getcolumns"
        :columns-keys="columnsKeys"
        @getTableFixed="getTableFixed"
        @resetTableFixed="resetTableFixed"
        :columns-fixed="columnsFixed"
        :that="this"
      />

      <div class="add" :style="{ marginRight: '15px' }" @click="getList">
        <a-tooltip title="刷新">
          <a-icon class="action" type="reload" />
        </a-tooltip>
      </div>
    </div>
    <a-spin :spinning="isSpinning">
      <a-table
        v-if="data"
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 1120, y: fullHeight - 360 }"
        :size="tableSize"
        :pagination="{ total: 10 }"
        row-key="id"
        @change="changepage"
      >
      <span  slot="bizType" slot-scope="bizType">
        {{bizType==1?'账号创建':bizType==2?'账号修改':bizType==3?'角色申请':bizType==4?'角色授权审核':bizType==5?'角色授权执行':''}}
        </span>
        <!-- 状态  -->
        <span slot="memberId" slot-scope="memberId">
          {{memberId}}
        </span>
        <span slot="memberName" slot-scope="x">
          {{x}}
        </span>
        <!-- 操作 -->
        <template slot="operation" slot-scope="x, y">
          <div>
            <a-button
              type="primary"
              @click="edit(y, that)"
              :style="{ marginRight: '5px' }"
              v-action:Modify
            >
              编辑
            </a-button>
            <a-popconfirm title="删除该成员权限?" @confirm="() => deleteApproval(y.id)">
              <a-button
                type="danger"
                :style="{ background: '#FD572B', marginRight: '5px' }"
                 v-action:Delete
              >
                删除
              </a-button>
            </a-popconfirm>

            <a-button
              type="primary"
              :style="{
                background: '#49cc90',
                border: '#49cc90',
                borderRadius: '3px'
              }"
              @click="showMoreInfo(y)"
            >
              查看详情
            </a-button>
          </div>
        </template>
      </a-table>
    </a-spin>
                <a-modal v-model="showInfo" title="成员信息" class="approval-modal" @ok="handleOk">
              <section class="modal-info-box">
                <div class="modal-item">
                  <label for="">姓名：</label>
                  <span>{{InfoBox.realName}}</span>
                </div>
               <!--  <div class="modal-item">
                  <label for="">昵称：</label>
                  <span>{{InfoBox.nickName}}</span>
                </div> -->
                 <div class="modal-item">
                  <label for="">权限类型：</label>
                  <span>{{InfoBox.bizType==1?'账号创建':InfoBox.bizType==2?'账号修改':InfoBox.bizType==3?'角色申请':InfoBox.bizType==4?'角色授权审核':InfoBox.bizType==5?'角色授权执行':''}}</span>
                </div>
                 <div class="modal-item">
                  <label for="">角色：</label>
                  <a-tag v-for="(item,key) in InfoBox.roleNames" :key="key" >{{item}}</a-tag>
                </div>
                <div class="modal-item">
                  <label for="">手机号：</label>
                  <span>{{InfoBox.mobile}}</span>
                </div>
              </section>
            </a-modal>
  </div>
</template>
<script>
import "@/common/components/Commonality/Table/less/table.less";
import ActionColumns from "@/common/components/Commonality/Table/components/TableSet.vue";
import PopForm from "@/baseConfigComponents/views/memberConfig/components/Modify/PopForm.vue";
import TableSearch from "@/baseConfigComponents/views/memberConfig/components/List/components/TableSearch.vue";
import TableSize from "@/common/components/Commonality/Table/components/TableSize.vue";
import { getMemberList, getMemberDetail,deleteMemberInfo } from "@/baseConfigComponents/api/memberConfig.js";
import {
  resetFullHeight,
  changeTableSize,
  getcolumns,
  getTableFixed,
  resetTableFixed,
  edit,
  closePopForm,
  goDetail,
  columnsFixed,
  columnsKeys,
} from "@/common/components/Commonality/Table/js/table.js";
import { columns } from "@/baseConfigComponents/views/memberConfig/components/List/js/columns.js";
export default {
  data() {
    return {
      columns,
      columns2: [],
      data: [], // 数据
      data2: undefined,
      isShow: false,
      tableSize: "default", // 表格默认大小
      total: 0, // 分页参数
      searchParams: {

      }, // 高级搜索参数
      fullHeight: "", // 页面高度
      FormData: "",
      isSpinning: false,
      memberList:[],
      InfoBox: {}, // 用户信息
      showInfo: false // 显示信息弹框
    };
  },

  created() {
    // 初始化表格窗口高度
    resetFullHeight(this);
    this.columns2 = JSON.parse(JSON.stringify(this.columns));
    // //获取广告列表
    this.getList();
  },
  methods: {
    // 改变表格size  子传父
    changeTableSize,
    // 列设置 展示指定 的参数
    getcolumns,
    // 编辑跳转 表单
    edit,
    // 改变列固定方向
    getTableFixed,
    // 重置 列 固定方向
    resetTableFixed,
    // 关闭表单（编辑）
    closePopForm,
    // 跳转详情页
    goDetail,
    refresh() {
      this.getList(this.searchParams);
    },
    // 获取 广告列表
    getList() {
      this.isSpinning = true;
        getMemberList(this.searchParams).then((res) => {
          this.total = res.totalCount;
          this.data = res.data;
          this.data2 = JSON.parse(JSON.stringify(this.data));
          // console.log(res.data);
          this.isSpinning = false;
        });
    },
    // 翻页
    changepage(index) {
      getADList({ Page: index.current, ...this.searchParams }).then((res) => {
        var ADList = res.data;
        this.data = ADList;
        this.data2 = JSON.parse(JSON.stringify(this.data));
      });
    },
    // 查询
    searchTable(searchParams) {
      this.searchParams = searchParams;
      this.data = JSON.parse(JSON.stringify(this.data2));
      this.getList(this.searchParams);
    },
    // 查看成员详细信息
    showMoreInfo(x) {
      this.InfoBox = {};
      getMemberDetail(x.id).then((res) => {
        this.InfoBox = res.data;
        this.showInfo = true;
      });
    },
    handleOk(e) {
      this.showInfo = false;
    },
    // 删除广告信息
    deleteApproval(id) {
      // console.log(id);
      deleteMemberInfo(id).then(() => {
        this.$message.success("删除成功");
        this.data = this.data.filter((item) => item.id != id);
        this.data2 = JSON.parse(JSON.stringify(this.data));
      });
    },
    getMemberName(id){
        var name =null
        // name  =  this.memberList.filter(item=>item.)
    }
  },

  computed: {
    // 提取 标题 传递给子组件
    columnsKeys,
    // 提取 fixed 传递给子组件
    columnsFixed,

    that() {
      return this;
    },
    // tabsInfo() {
    //   return this.$store.state.tabsInfo;
    // },
  },
  components: {
    ActionColumns,
    PopForm,
    TableSearch,
    TableSize,
  },
  watch: {
    fullHeight(val) {
      // console.log(val);
      this.fullHeight = val;
    },
  },
};
</script>
<style lang="less">
.approval-modal{
  .ant-modal-mask{
    // background-color: rgba(0, 0, 0, 0.15) !important;
  }
  .modal-info-box{
    border: 1px solid #e8e8e8;
    // width: 240px;
    padding: 15px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    border-radius: 3px;
    overflow: hidden;
    .modal-item{
      margin-bottom: 10px;
      label{color: #999;}
      span{color: #666;}
    }
  }
}
</style>
