<template>
  <el-dialog v-dialogDrag :title="title" :visible="show" width="965px" @close="close" append-to-body destroy-on-close
    :close-on-click-modal="false" class="el-dialog-single el-dialog-contract">
    <div class="detail-wrap">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="功能权限" name="first"> </el-tab-pane>
        <el-tab-pane label="已有角色" name="second"> </el-tab-pane>
        <el-tab-pane label="已有应用" name="fourth"> </el-tab-pane>
      </el-tabs>
      <div>
        <PlatformFunction :currentUser="currentRow" v-show="activeName === 'first'"></PlatformFunction>
        <el-table ref="bcxtable" v-show="activeName === 'second'" :data="tableData" border style="width: 100%">
          <el-table-column prop="roleName" label="角色名称"> </el-table-column>
          <el-table-column prop="remark" label="角色说明"> </el-table-column>
          <!-- <el-table-column prop="status" label="角色状态">
            <template slot-scope="scope">
              <span class="enable">
                {{ scope.row.status == 1 ? "启用" : "禁用" }}
              </span>
            </template>
</el-table-column> -->
        </el-table>

        <div v-show="activeName === 'fourth'">
          <div class="all-checked">用户已授权的应用</div>
          <div class="checked-list" style="overflow: scroll; height: 50vh">
            <div v-for="item in fourthAuthList" :key="item.appId"
              v-if="item.children && item.children.find(e => e.checked)">
              <div class="checked-title">
                {{ item.category }}
              </div>
              <div class="allcheckbox">
                <div v-for="record in item.children" v-if="record.checked !== 0" :key="record.appId"
                  style="display: flex; align-items: center" class="checkbox-img">
                  <img width="35" :src="record.appLogo" />
                  <div class="app-label">{{ record.appName }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">返回</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { first } from "lodash";
import PlatformFunction from "./PlatformFunction.vue";
import { getRoleList, getPermitAppListApi } from "@/api/staffApi.js";
export default {
  components: {
    PlatformFunction,
  },
  data() {
    return {
      title: "用户授权详情",
      activeName: "first",
      show: false,
      tableData: [],
      authList: [],
      fourthAuthList: [],
      currentRow: {},
    };
  },
  mounted() { },

  methods: {
    // 打开
    open(row) {
      this.show = true;

      setTimeout(() => {
        this.currentRow = {
          employeeIds: [row.employeeId], // 员工id

          searchType: 2,
        };

        this.getPermitAppEmployeeList(row);
      });
    },
    close() {
      this.show = false;
    },
    // 获取职员数据
    getPermitAppEmployeeList(row) {
      // getPermitAppListApi({employeeId: row.employeeId,searchType:1}).then((response) => {
      //   if (response.data) {
      //     this.authList = response.data;
      //   }
      // });
      getPermitAppListApi({ employeeId: row.employeeId, searchType: 2 }).then((response) => {
        if (response.data) {
          this.fourthAuthList = response.data;
        }
      });
      getRoleList({ employeeId: row.employeeId }, localStorage.domainId).then(
        (response) => {
          if (response.data) {
            this.tableData = response.data;
          }
        }
      );
    },
  },
};
</script>
<style lang="scss" scope>
.el-dialog-contract {
  .elcolEndDate {
    position: relative;

    .checkbox {
      position: absolute;
      top: 10px;
      right: 0;
    }
  }
}

.el-dialog__body {
  height: 60vh;
  min-height: 600px;
}

// .all-checked {
//   margin-bottom: 0;
// }
.detail-wrap {
  margin: 0 12px;
}

.app-label {
  margin-left: 8px;
}

.checkbox-img {
  display: flex;
  margin: 11px 20px 15px 2px;
}

.allcheckbox {
  display: flex;
  flex-wrap: wrap;
}

.enable {
  color: #67c23a;
}

.wrap-list-left {
  min-height: 500px;
}
</style>
