<template>
    <validation-observer ref="updateTeamForm">
    <div id="manageMain" style="width: 100%;height: 100%;">
        <ul style="height:100%;overflow-y: auto;">
            <draggable class="list-group" :list="teamData" @drop="draggableDrop" @update="onDragTeamSort" handle=".handle">
                <li v-for="item in teamData" class="list-group-item inline-block" style="width: 100%;">
                    <div class="team-item-div general-bgcolor-hover" :style="{'background-color': clickId == item.teamId ? '#F5F7FA' : ''}">
                        <div class="inline-block team-item-icon-div text-second-color">
                            <i class="iconfont icon-yidongshu icon-drag handle" style="cursor:move;font-size: 18px;margin-left: 15px"></i>
                        </div>
                        <div class="inline-block team-item-icon-div cursor-pointer" :style="{'background':item.teamLogo.color}" @click="clickTeam(item.teamId)">
                            <i class="awsui-iconfont" style="font-size: 18px;color: #fff" v-html="item.teamLogo.code"></i>
                        </div>
                        <div class="inline-block team-item-text-div cursor-pointer" @click="clickTeam(item.teamId)">
                            <div>
                                <p :class="{'text-general-color': clickId != item.teamId, 'team-item-div-checked': clickId == item.teamId}">{{item.teamName}}</p>
                            </div>
                        </div>
                        <div class="inline-block team-item-icon-div" style="width: 16px;">
                            <div id="drawDown">
                                <el-dropdown
                                        :hide-on-click="true"
                                        trigger="click"
                                        :visible-arrow=false
                                        placement="bottom-start">
                                    <span>
                                        <div class="inline-block" style="width: 16px;height: 100%;">
                                            <i class="iconfont operate-icon-display" style="cursor: pointer;">&#xe63c;</i>
                                        </div>
                                    </span>
                                    <el-dropdown-menu style="min-width: 200px;">
                                        <el-dropdown-item v-if="item.teamManage" class="el-dropdown-row" @click.native="updateTeamInfo(item.teamId)">
                                            <div style="height: 100%;width: 100%;font-size: 14px;"><span style="display: inline-block;width: 20px;"><i class="awsui-iconfont" style="font-size: 12px;">&#xe864;</i></span><span style="font-size: 12px;">信息修改</span></div>
                                        </el-dropdown-item>
                                        <el-dropdown-item v-if="item.teamManage && item.run" class="el-dropdown-row" @click.native="updateTeamStatus(item.teamId, 1)">
                                            <div style="height: 100%;width: 100%;font-size: 14px;"><span style="display: inline-block;width: 20px;"></span><span style="font-size: 12px;">暂停小组</span></div>
                                        </el-dropdown-item>
                                        <el-dropdown-item v-if="item.teamManage && !item.run" class="el-dropdown-row" @click.native="updateTeamStatus(item.teamId, 0)">
                                            <div style="height: 100%;width: 100%;font-size: 14px;"><span style="display: inline-block;width: 20px;"></span><span style="font-size: 12px;">启用小组</span></div>
                                        </el-dropdown-item>
                                        <el-dropdown-item v-if="item.teamManage" class="el-dropdown-row" @click.native="removeTeam(item.teamId)">
                                            <div class="text-important-color" style="height: 100%;width: 100%;font-size: 14px;"><span style="display: inline-block;width: 20px;"></span><span style="font-size: 12px;">解散小组</span></div>
                                        </el-dropdown-item>
                                        <el-dropdown-item v-if="item.teamManage" divided/>
                                        <el-dropdown-item class="el-dropdown-row" @click.native="exitTeam(item.teamId)">
                                            <div style="height: 100%;width: 100%;font-size: 14px;"><span style="display: inline-block;width: 20px;"><i class="awsui-iconfont" style="font-size: 12px;">&#xe7a1;</i></span><span style="font-size: 12px;">退出小组</span></div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </div>
                </li>
            </draggable>
        </ul>
        <awsui-dialog
                title="修改小组信息"
                :visible.sync="updateTeam.visible"
                :border=false
                width="600px"
                height="250px">
            <div v-loading="updateTeam.loading" :element-loading-text="updateTeam.loadingText" style="position: relative;border-top: 1px solid #F2F2F2;padding-top: 15px;">
                <awsui-form class="required-logo" ref="infoForm" :model="updateTeam.baseInfo.form" :rules="updateTeam.baseInfo.rules" label-width="100px" label-position="top">
                    <div v-if="isLoaded">
                        <awsui-icon-picker class="icon-team-div" :defaultOptions="iconPickerOptions" :value="{icon:updateTeam.baseInfo.form.teamLogo.code, color:updateTeam.baseInfo.form.teamLogo.color}" @change="changeIcon"></awsui-icon-picker>
                    </div>
                    <awsui-row>
                        <awsui-col :span="18">
                            <awsui-form-item label="名称" required>
                                <validation-provider rules="required|teamName_formatCheck|maxLength:36"
                                                     v-slot="{classes,errors}">
                                    <awsui-input placeholder="请输入名称" v-model="updateTeam.baseInfo.form.teamName"></awsui-input>
                                    <div :class="classes">{{ errors[0] }}</div>
                                </validation-provider>
                            </awsui-form-item>
                        </awsui-col>
                    </awsui-row>
                    <awsui-row>
                        <awsui-col :span="18">
                            <awsui-form-item label="工作网络" required>
                                <validation-provider rules="required|teamName_formatCheck|maxLength:36"
                                                     v-slot="{classes,errors}">
                                    <awsui-select
                                            filterable
                                            allow-create
                                            default-first-option
                                            placeholder="请选择/输入工作网络"
                                            v-model="updateTeam.baseInfo.form.category"
                                            :options="updateTeam.baseInfo.form.categoryOpts"
                                            @change="changeCategory"
                                    >
                                    </awsui-select>
                                    <div :class="classes">{{ errors[0] }}</div>
                                </validation-provider>
                            </awsui-form-item>
                        </awsui-col>
                    </awsui-row>
                    <awsui-row>
                        <awsui-col :span="24">
                            <awsui-form-item label="简介">
                                <validation-provider rules="maxLength:255"
                                                     v-slot="{classes,errors}">
                                    <awsui-input v-model="updateTeam.baseInfo.form.teamDesc"  type="textarea" placeholder="请输入简介"></awsui-input>
                                    <div :class="classes">{{ errors[0] }}</div>
                                </validation-provider>
                            </awsui-form-item>
                        </awsui-col>
                    </awsui-row>
                </awsui-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <awsui-button class="button-general-color"  type="primary" @click="validateUpdateTeam">确定</awsui-button>
                <awsui-button @click="updateTeam.visible = false">取消</awsui-button>
            </span>
        </awsui-dialog>
    </div>
    </validation-observer>
</template>

<script>
    var iconDevArr = [
        ["公司", "&#xe68c;"],
        ["公司", "&#xe604;"],
        ["主页", "&#xe601;"],
        ["主页", "&#xe703;"],
        ["地球", "&#xe6f8;"]
    ];
    import draggable from "vuedraggable";
    import awsuiAxios from "../../awsuiAxios";
    export default {
        name: "ManageMain",
        components: {draggable},
        data() {
            return {
                teamData: [],
                clickId: '',
                updateTeam: {
                    loading: false,
                    loadingText: '加载中',
                    visible: false,
                    teamId: '',
                    baseInfo: {// 基本信息
                        form: {
                            teamName: '',
                            category: '',
                            categoryOpts: [],
                            teamDesc: '',
                            teamLogo: {
                                color: '',
                                code: ''
                            }
                        },
                        rules: {
                            category: [
                                { required: true, message: '[工作网络]不允许为空', trigger: 'blur' },
                            ],
                            teamName: [
                                { required: true, message: '[名称]不允许为空', trigger: 'blur' },
                            ]
                        }
                    }
                },
                isLoaded: false,
                iconPickerOptions: {
                    type: "background", //必传，type为"background"时，改变背景颜色，图标颜色固定，type为"icon"时改变图标颜色，背景颜色固定
                    fatherWidth: 70, //非必传，展示区域宽高，type为"background"时代表外层圆形直径，type为"icon"时代表外层正方形宽高，如不传分别默认80px和30px
                    iconFontSize: 52, //非必传，展示区域iconfont字体大小，如不传分别默认30px和16px
                    colorList: ["#dc4f39", "#ff9421", "#009b52", "#3383da", "#009688", "#6600d5", "#0b0e7b", "#666666", "#e6e8ea"], //必传，颜色可选项数组
                    iconfontArray: production ? window.iconfontArray : iconDevArr, //必传，iconfont可选项数组
                }
            }
        },
        inject: ['openTeam'],
        mounted() {
            this.initData();
        },
        methods: {
            draggableDrop(ev) {
                ev.stopPropagation();
                ev.preventDefault();
                ev.dataTransfer = ev.originalEvent.dataTransfer;
            },
            onDragTeamSort() {// 排序
                const that = this;
                const teamIds = [];
                for (let i = 0; i < that.teamData.length; i++) {
                    teamIds.push(that.teamData[i].teamId);
                }
                const data = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal.cooperation_manage_user_team_sort',
                        teamIds: JSON.stringify(teamIds)
                    }
                };
                // 查询数据
                awsuiAxios.post(data).then(function (ro) {
                    if (ro.result == 'ok') {

                    } else {
                        that.$message.error(ro.msg);
                    }
                }).catch(error=>{
                    console.log(error);
                })
                console.log(this.teamData);
            },
            initData() {
                const that = this;
                const data = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal.cooperation_manage_joined_team_list_query',
                    }
                };
                // 查询数据
                awsuiAxios.post(data).then(function (ro) {
                    if (ro.result == 'ok') {
                        that.teamData = ro.data;
                        if (that.teamData.length == 0) {
                            parent.location.reload();
                            return;
                        }
                        that.clickTeam(that.teamData[0].teamId);// 默认打开第一个小组
                    } else {
                        that.$message.error(ro.msg);
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            clickTeam(teamId) {// 打开小组
                this.openTeam(teamId);
                this.clickId = teamId;
            },
            clearUpdateTeamContent() {// 清空修改小组信息
                const that = this;
                that.updateTeam.baseInfo.form.teamName = '';
                that.updateTeam.baseInfo.form.category = '';
                that.updateTeam.baseInfo.form.teamDesc = '';
                that.updateTeam.baseInfo.form.teamLogo = {};
                that.updateTeam.loadingText = '加载中';
                that.updateTeam.teamId = '';
                that.isLoaded = false;
            },
            changeCategory(val) {// 变更分类
                this.updateTeam.baseInfo.form.category = val;
            },
            updateTeamInfo(teamId) {// 修改小组信息
                const that = this;
                that.clearUpdateTeamContent();
                that.updateTeam.teamId = teamId;
                that.updateTeam.visible = true;
                // axios查询
                that.updateTeam.loading = true;
                const data = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal.cooperation_team_create_or_update_data_query',
                        teamId: teamId
                    }
                };
                awsuiAxios.post(data).then(function (ro) {
                    if (ro.result == 'ok') {
                        const data = ro.data;
                        that.updateTeam.baseInfo.form.teamName = data.teamName;
                        that.updateTeam.baseInfo.form.category = data.category;
                        that.updateTeam.baseInfo.form.categoryOpts = data.categoryArr;
                        that.updateTeam.baseInfo.form.teamDesc = data.teamDesc;
                        that.updateTeam.baseInfo.form.teamLogo = data.teamLogo;
                        that.isLoaded = true;
                    } else {
                        that.$message.error(ro.msg);
                    }
                    that.updateTeam.loading = false;
                }).catch(error=>{
                    console.log(error);
                    that.updateTeam.loading = false;
                })
            },
            validateUpdateTeam() {
                this.$refs.updateTeamForm.validate().then(valid => {
                    if (!valid) {
                        return
                    }
                    this.updateTeamSave()
                });
            },
            updateTeamSave() {// 修改小组基本信息保存
                const that = this;
                // 基本信息
                const teamName = that.updateTeam.baseInfo.form.teamName;
                const category = that.updateTeam.baseInfo.form.category;
                const teamDesc = that.updateTeam.baseInfo.form.teamDesc;
                const teamLogo = that.updateTeam.baseInfo.form.teamLogo;
                const data = {
                    teamId: that.updateTeam.teamId,
                    teamName: teamName,
                    category: category,
                    teamDesc: teamDesc,
                    teamLogo: teamLogo
                };
                that.updateTeam.loadingText = '请稍等';
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal.cooperation_manage_team_baseinfo_update_save',
                        data: JSON.stringify(data)
                    }
                };
                awsuiAxios.post(params).then(function (ro) {
                    if (ro.result == 'ok') {
                        const teamId = ro.data.teamId;
                        for (let i = 0; i < that.teamData.length; i++) {
                            if (teamId == that.teamData[i].teamId) {
                                that.teamData[i].teamName = ro.data.teamName;
                                that.teamData[i].teamLogo = ro.data.teamLogo;
                            }
                        }
                        if (teamId == that.clickId) {
                            // 重新刷新
                            that.clickTeam(teamId);
                        }
                        that.updateTeam.visible = false;
                    } else {
                        that.$message.error(ro.msg);
                    }
                    that.updateTeam.loading = false;
                }).catch(error=>{
                    console.log(error);
                    that.updateTeam.loading = false;
                })
            },
            updateTeamStatus(teamId, status) {// 停用/启用小组
                const that = this;
                that.updateTeam.loadingText = '请稍等';
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal.cooperation_manage_team_update_status',
                        status: status,
                        teamId: teamId
                    }
                };
                awsuiAxios.post(params).then(function (ro) {
                    if (ro.result == 'ok') {
                        let msg = '停用';
                        if (status == 0) {
                            msg = '启用';
                        }
                        that.$message({
                            message: msg + '成功',
                            type: 'success'
                        });
                        for (let i = 0; i < that.teamData.length; i++) {
                            if (teamId == that.teamData[i].teamId) {
                                that.teamData[i].run = status == 0;
                            }
                        }
                        if (teamId == that.clickId) {
                            // 重新刷新
                            that.clickTeam(teamId);
                        }
                    } else {
                        that.$message.error(ro.msg);
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            removeTeam(teamId) {// 解散小组
                this.$confirm('解散小组不可恢复，确定要解散小组吗？', '提示', {
                    confirmButtonText: '确定',
                    confirmButtonClass: 'button-general-color',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const that = this;
                    const params = {
                        url:'jd',
                        data:{
                            cmd: 'com.actionsoft.apps.coe.pal.cooperation_manage_team_remove',
                            teamId: teamId
                        }
                    };
                    // 查询数据
                    awsuiAxios.post(params).then(function (ro) {
                        if(ro.result == 'ok') {
                            that.$message({
                                message: '解散成功',
                                type: 'success'
                            });
                            that.initData();
                        } else {
                            that.$message({
                                message: ro.msg,
                                type: 'warning'
                            });
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }).catch(() => {
                });
            },
            exitTeam(teamId) {// 退出小组
                this.$confirm('确定要退出小组吗？', '提示', {
                    confirmButtonText: '确定',
                    confirmButtonClass: 'button-general-color',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const that = this;
                    const params = {
                        url:'jd',
                        data:{
                            cmd: 'com.actionsoft.apps.coe.pal.cooperation_manage_team_exit',
                            teamId: teamId
                        }
                    };
                    // 查询数据
                    awsuiAxios.post(params).then(function (ro) {
                        if(ro.result == 'ok') {
                            that.$message({
                                message: '退出成功',
                                type: 'success'
                            });
                            that.initData();
                        } else {
                            that.$message({
                                message: ro.msg,
                                type: 'warning'
                            });
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }).catch(() => {
                });
            },
            changeIcon(icon) {
                this.updateTeam.baseInfo.form.teamLogo.code = icon.icon;
                this.updateTeam.baseInfo.form.teamLogo.color = icon.color;
            }
        }
    }
</script>

<style scoped>
    #manageMain >>> .awsui-dialog__body {
        padding-top: 5px;
    }
    #manageMain >>> .awsui-icon-picker-box1 {
        border-radius: 15%;
    }
    .team-item-div {
        height: 46px;
        padding: 6px 0 4px 0px;
    }
    .team-item-icon-div {
        position: relative;
        top:5px;
        width: 32px;
        height: 32px;
        line-height: 32px;
        vertical-align: middle;
        text-align: center;
        border-radius: 15%;
    }
    .team-item-text-div {
        margin-left: 7px;
        position: relative;
        top: 12px;
    }
    .team-item-text-div div{
        width: 170px;
    }
    .team-item-text-div div p{
        width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .inline-block {
        display: inline-block;
    }
    .cursor-pointer {
        cursor: pointer;
    }
    .general-bgcolor-hover:hover .icon-drag {
        display: inline;
    }
    .general-bgcolor-hover .icon-drag {
        display: none;
    }
    .general-bgcolor-hover:hover .operate-icon-display {
        display: inline;
    }
    .general-bgcolor-hover .operate-icon-display {
        display: none;
    }
    .general-bgcolor-hover:hover .team-item-text-div p {
        color: #4E7FF9 !important;
    }
    .team-item-div-checked {
        color: #4E7FF9;
    }
    .icon-team-div {
        position:absolute;
        right: 40px;
        top: 45px;
        z-index: 2;
        height: 70px;
        width: 70px;
        line-height: 70px;
        display: inline-block;
    }
    .icon-team {
        color: white;
        font-size: 52px;
    }
    .required-logo /deep/ label {
        margin-left: 10px;
    }
</style>