<template>
    <el-container id="update">
        <el-main id="updateMain" :style="{padding:0,height:bodyHeight}">
            <el-table
                    id="updateTable"
                    ref="updateTable"
                    :data="tableData"
                    :row-style="{height:'50px'}"
                    :cell-style="{padding:'0px'}"
                    :height="bodyHeight">
                <el-table-column
                        prop="icon"
                        label="小组"
                        align="right"
                        class-name="table-row-icon-cloumn"
                        min-width="45">
                    <template slot-scope="scope">
                        <div>
                            <div class="icon-div-repository" :style="{'background-color': scope.row.teamLogo.color}">
                                <i class="awsui-iconfont icon-dynamic-repository" v-html="scope.row.teamLogo.code"></i>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label=""
                        min-width="250">
                    <template slot-scope="scope">
                        <div>
                            <div style="line-height: 20px;">
                                <p class="text-general-color" style="font-size:14px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                                    {{scope.row.teamName}}
                                </p>
                            </div>
                            <div style="line-height: 15px;">
                                <p class="text-second-color" style="font-size: 12px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                                    {{scope.row.teamDesc}}
                                </p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="wsName"
                        label="关联资产库"
                        min-width="150">
                </el-table-column>
                <el-table-column
                        prop="admin"
                        label="管理员"
                        min-width="180">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="150"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="状态"
                        width="100"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isRun">启用中</span>
                        <span v-else class="text-important-color">已停用</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="permStatus"
                        label="授权状态"
                        width="150">
                    <template slot-scope="scope">
                      <span v-if="scope.row.permStatus == -1">正在加载...</span>
                      <span v-else v-html="scope.row.permStatus == 0 ? '未设置权限': '已包含' + scope.row.permStatus + '个文件'"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="operation"
                        label=""
                        align="center">
                    <template slot-scope="scope">
                        <div class="operate-icon-display" v-if="scope.row.isRun">
                            <el-tooltip class="item" effect="dark" content="设置" placement="bottom">
                                <i class="awsui-iconfont" style="cursor: pointer;" @click="updateTeam(scope.row.teamId)">&#xe615;</i>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <cooperation-update
                ref="cooperationUpdate"
                :visible.sync="update.visible"
                :teamId="update.teamId"
                v-on:cancel="update.visible = false"
                v-on:getResult="updateDone"
                :title="update.title"
        />
    </el-container>
</template>

<script>
    import awsuiAxios from "../../awsuiAxios";
    import CooperationUpdate from "../../components/CooperationUpdate/component";
    export default {
        name: "Update",
        components: {CooperationUpdate},
        data() {
            return {
                bodyHeight : (document.documentElement.clientHeight) + 'px',
                tableData: [],
                update: {
                    visible: false,
                    teamId: '',
                    title: '修改小组'
                }
            }
        },
        mounted() {
            const that = this;
            that.resize();
            that.initData();
        },
        methods: {
            initData() {
                const that = this;
                const data = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal.cooperation_manage_team_info_list',
                    }
                };
                awsuiAxios.post(data).then(function (ro) {
                    if (ro.result == 'ok') {
                        that.tableData = ro.data;
                        that.loadTeamPerm();// 加载授权文件数量
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            loadTeamPerm() {
              const that = this;
              const teamIdArr = [];
              for (let i = 0; i < that.tableData.length; i++) {
                if (that.tableData[i].permStatus == -1) {
                  teamIdArr.push(that.tableData[i].teamId);
                  if (teamIdArr.length >= 5) {// 每次查询5个
                    break;
                  }
                }
              }
              if (teamIdArr.length > 0) {
                const data = {
                  url:'jd',
                  data:{
                    cmd: 'com.actionsoft.apps.coe.pal.cooperation_manage_team_info_perm',
                    teamIdArr: JSON.stringify(teamIdArr)
                  }
                };
                awsuiAxios.post(data).then(function (ro) {
                  if (ro.result == 'ok') {
                    const result = ro.data
                    for (let i = 0; i < that.tableData.length; i++) {
                      if (result[that.tableData[i].teamId] != undefined) {
                        that.tableData[i].permStatus = result[that.tableData[i].teamId];
                      }
                    }
                    that.loadTeamPerm();// 再一次请求
                  }
                }).catch(error=>{
                  console.log(error);
                })
              }

            },
            updateTeam(teamId) {
                this.update.teamId = teamId;
                this.update.visible = true;
            },
            updateDone(result) {
                const that = this;
                if (result == 'ok') {
                    this.update.visible = false;
                    that.initData();
                }
            },
            resize() {// 窗口监听window.resize
                const that = this
                let resizeTimer = null;
                window.onresize = () => {
                    return (() => {
                        if (resizeTimer) clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(function(){
                            that.bodyHeight = (document.documentElement.clientHeight) + 'px';
                        } , 400);
                    })()
                }
            },
        },

    }
</script>

<style scoped>
    #update >>> .el-main {
        display: block;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        overflow: auto;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 0px;
        padding-bottom: 0px;
    }
    #update >>> .el-table__row .operate-icon-display{
        display: none;
    }
    #update >>> .el-table__row:hover .operate-icon-display{
        display: inline-block;
    }
    #update >>> .table-row-icon-cloumn .cell {
        padding-right: 0 !important;
    }
    .icon-div-repository {
        border-radius: 15%;
        display: inline-block;
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        vertical-align: middle;
    }
    .icon-dynamic-repository {
        color: white;
        font-size: 18px;
    }
</style>