<template>
    <div class="owner_dialog">
        <el-dialog :title="perj.title" :visible.sync="perjShow" width="50%">
            <!---------------------- 内层嵌套弹窗权限 -------------------------->
            <el-dialog
                width="30%"
                :title="innerTitle"
                :visible.sync="innerVisible"
                append-to-body
                @close="innerDialogColseHandle"
            >
                <!--角色权限管理-->
                <div v-if="innerType == 1" class="roleAdmin">
                    <div class="left-view">
                        <!-- ul的list -->
                        <ul class="el-role">
                            <li
                                :class="index == liDex ? 'li-active' : '' "
                                v-for="(item,index) in roleList"
                                @click="checkRole(item,index)"
                            >
                                <span style="margin-left:10px">{{item.roleName}}</span>
                                <el-button
                                    :class="item.isDefault===0 ? 'hover-show' : 'none'"
                                    @click="changeDefault(item)"
                                    style="float:right;margin-right:10px;margin-top: 2px;"
                                    size="mini"
                                >设为默认</el-button>
                                <span
                                    v-if="item.isDefault === 1"
                                    style="float:right;margin-right:10px;margin-top: 2px;"
                                >默认</span>
                            </li>
                        </ul>
                        <!-- 添加新角色的浮层 -->
                        <el-popover placement="right-end" width="260" v-model="addRole">
                            <p>添加新的角色</p>
                            <el-form
                                :model="roleForm"
                                ref="roleForm"
                                label-width="0"
                                class="demo-dynamic"
                            >
                                <el-form-item
                                    prop="roleName"
                                    label=""
                                    :rules="[
															{ required: true, message: '请输入角色名', trigger: 'blur' },
														]"
                                >
                                    <el-input v-model="roleForm.roleName"></el-input>
                                </el-form-item>
                                <el-form-item prop="default" label="">
                                    <el-checkbox v-model="roleForm.default">设为默认角色</el-checkbox>
                                </el-form-item>
                            </el-form>
                            <div style="text-align: right; margin: 0">
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="addRoleFun('roleForm')"
                                >提交</el-button>
                                <el-button size="mini" type="text" @click="resetForm('roleForm')">重置</el-button>
                            </div>
                            <el-button
                                type="primary"
                                size="small"
                                icon="iconfont icon-tianjiayonghu"
                                circle
                                slot="reference"
                            ></el-button>
                        </el-popover>
                    </div>
                    <div class="right-view" style="overflow-x: hidden;">
                        <el-tree
                            @check="changeRole"
                            :props="props"
                            :data="allRoleList"
                            show-checkbox
                            node-key="code"
                            ref="tree"
                            :default-checked-keys="treeArr"
                        ></el-tree>
                    </div>
                </div>
                <!--从运营团队库中选择添加内置弹框（2级）-->
                <div v-if="innerType == 2" class="roleAdmin">
                    <el-row :gutter="10">
                        <el-col :span="14">
                            <el-input
                                v-model="operSelectSearchValue"
                                size="small"
                                prefix-icon="el-icon-search"
                                placeholder="输入 姓名、电话 查询"
                                @change="operSearchHandle"
                                clearable
                            ></el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-button size="small" type="primary" @click="operSearchHandle">搜索</el-button>
                        </el-col>
                    </el-row>
                    <div class="oper-select-box">
                        <el-row
                            :gutter="10"
                            class="oper-row"
                            v-for="(item, index) in operSelectArr"
                            :key="index"
                        >
                            <el-col :span="6" :offset="2">{{item.name}}</el-col>
                            <el-col :span="8">{{item.phone}}</el-col>
                            <el-col :span="6" :offset="2">
                                <el-button
                                    size="mini"
                                    class="oper-hover-show"
                                    @click="operAddTeam(item, index)"
                                >加入团队</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <!--添加新的运维人员的2级浮层弹窗-->
                    <div>
                        <el-popover
                            placement="right-end"
                            width="260"
                            v-model="addOperFlag"
                            @hide="addOperHideHandle"
                        >
                            <p>添加新的运维人员</p>
                            <div style="margin-top:10px;">
                                <el-form
                                    size="mini"
                                    :model="addOperFormValue"
                                    :rules="addOperFormrules"
                                    ref="addOperFormValue"
                                    class="demo-ruleForm"
                                >
                                    <el-row>
                                        <el-form-item prop="name">
                                            <el-input
                                                v-model="addOperFormValue.name"
                                                type="text"
                                                autocomplete="off"
                                                placeholder="请输入姓名"
                                            ></el-input>
                                        </el-form-item>
                                    </el-row>
                                    <el-row>
                                        <el-form-item prop="phone">
                                            <el-input
                                                v-model="addOperFormValue.phone"
                                                type="text"
                                                autocomplete="off"
                                                placeholder="请输入手机号码"
                                            ></el-input>
                                        </el-form-item>
                                    </el-row>
                                    <el-row style="line-height:35px">
                                        <el-col :span="8" :offset="2">
                                            <el-button
                                                type="primary"
                                                size="mini"
                                                icon="iconfont icon-baocun"
                                                @click="saveAddOper('addOperFormValue')"
                                            >保存</el-button>
                                        </el-col>
                                        <el-col :span="10" :offset="2">
                                            <el-checkbox
                                                v-model="addOperFormValue.isDefaultRole"
                                            >自动加入团队</el-checkbox>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </div>
                            <el-button
                                slot="reference"
                                type="primary"
                                size="small"
                                icon="iconfont icon-tianjiayonghu"
                                circle
                            ></el-button>
                        </el-popover>
                    </div>
                </div>
            </el-dialog>
            <!-------------------------------------tab页切换---------------------------------->
            <el-tabs type="border-card" v-model="productId" @tab-click="tabChangeClick">
                <el-tab-pane name="1">
                    <!-- 禹数tab页 -->
                    <span slot="label">禹数合同</span>
                    <div class="ys_cainter">
                        <!--禹数项目运维团队信息-->
                        <div>
                            <h3>禹数项目运维团队信息</h3>
                            <p>
                                <span>项目实施运维团队：</span>
                                <span>此团队人员可以使用上帝之手运维当前项目</span>
                                <el-button @click="role" type="text">角色权限管理</el-button>
                            </p>
                            <el-row
                                style="margin-bottom:5px;"
                                v-if="projectMenArr.length"
                                v-for="(ele, index) in projectMenArr"
                                :key="index"
                            >
                                <el-col :span="2" :offset="4">{{ele.person.name}}</el-col>
                                <el-col :span="4" :offset="2">{{ele.person.phone}}</el-col>
                                <el-col :span="6" :offset="2">
                                    <el-select
                                        v-model="ele.role.roleId"
                                        placeholder="请选择"
                                        size="small"
                                        @change="updateMenRole(ele)"
                                    >
                                        <el-option
                                            v-for="(item, idx) in roleSelectListArr"
                                            :key="item.idx"
                                            :label="item.roleName"
                                            :value="item.roleId"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="3" :offset="1">
                                    <i
                                        class="el-icon-delete role-delete-icon"
                                        @click="deleteRoleHandle(ele.person.personId)"
                                    ></i>
                                </el-col>
                            </el-row>
                            <!--从运营团队库中选择添加按钮-->
                            <el-row style="margin-top:10px; text-align:center;">
                                <el-button
                                    type="primary"
                                    icon="el-icon-plus"
                                    size="small"
                                    @click="formTeamAddHandle"
                                >从运营团队库中选择添加</el-button>
                            </el-row>
                        </div>
                        <!--相关合同信息-->
                        <div>
                            <div class="div-border"></div>
                            <h3>相关合同信息</h3>
                            <!--合同相关信息组件-->
                            <v-contract-about-info
                                :contractList="contractList"
                                :productId="productId"
                                :hisContractList="hisContractList"
                                @updated-contract="updatedCont"
                                @add-contract="addCont"
                                @new-contract="newCont"
                                @his-contract="hisCont"
                                @updated-contract-status="updatedContStu"
                                @delete-contract="deleteCont"
                                @add-blank-copy="addBlankCopy"
                                @delete-file-to-updated="deleteFileToUpdated"
                                @delete-img-to-updated="deleteImgToUpdated"
                            ></v-contract-about-info>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="2">
                    <!-- 朵朵tab页 -->
                    <span slot="label">朵朵业务</span>
                    <div class="ys_cainter">
                        <h3>朵朵服务相关信息</h3>
                        <!-- <span>设定xxx的服务</span>
						<span>服务截至日期：</span>
						<el-date-picker v-model="date" align="right" size="small" type="date" placeholder="选择日期" :picker-options="pickerOptions1">
                        </el-date-picker>-->
                        <template v-for="(itm, index) in serverList">
                            <el-row :gutter="30" style="margin-bottom:10px;">
                                <el-col :span="6">
                                    {{itm.changeBtn ? itm.serviceName : ""}}
                                    <el-select
                                        v-show="!itm.changeBtn"
                                        v-model="itm.serviceId"
                                        placeholder="请选择服务"
                                        size="small"
                                    >
                                        <el-option
                                            v-for="item in serverOptions"
                                            :key="item.serviceId"
                                            :label="item.serviceName"
                                            :value="item.serviceId"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="14">
                                    服务截至日期：{{itm.changeBtn ? itm.endDate : ""}}
                                    <el-date-picker
                                        v-show="!itm.changeBtn"
                                        format="yyyy-MM-dd"
                                        v-model="itm.endDate"
                                        align="right"
                                        size="small"
                                        type="date"
                                        placeholder="选择日期"
                                        :picker-options="pickerOptions1"
                                    ></el-date-picker>
                                </el-col>
                                <el-col :span="4">
                                    <el-button
                                        @click="changeServer(itm)"
                                        v-if="itm.changeBtn"
                                        size="small"
                                        type="text"
                                    >
                                        <i class="el-icon-edit"></i>
                                    </el-button>
                                    <el-button
                                        @click="saveServer(itm)"
                                        v-if="!itm.changeBtn"
                                        size="small"
                                        type="text"
                                    >保存</el-button>
                                    <el-button
                                        @click="deleteServer(itm)"
                                        v-if="itm.changeBtn"
                                        size="small"
                                        type="text"
                                    >
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                </el-col>
                            </el-row>
                        </template>
                        <p>
                            <el-button
                                @click="createServer"
                                style="float:right;margin-right:40px;"
                                type="text"
                            >创建新的服务</el-button>
                        </p>
                        <div class="div-border" style="margin-bottom:20px;"></div>
                        <el-row>
                            <el-col :span="6" :offset="7">项目托管负责经理 :</el-col>
                            <el-col :span="4">{{defaultProAdmin}}</el-col>
                            <el-col :span="4">
                                <el-select
                                    v-model="selectProAdmin"
                                    clearable
                                    placeholder="请选择..."
                                    size="mini"
                                    @change="ddAdminSelectChange"
                                >
                                    <el-option
                                        v-for="(item, index) in operSelectArr"
                                        :key="item.index"
                                        :label="item.name"
                                        :value="item.personId"
                                    ></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                        <p style="text-align:center; color:#ccc">此人员默认作为FM的项目管理员</p>
                        <!--相关合同信息-->
                        <div>
                            <div class="div-border"></div>
                            <h3>相关合同信息</h3>
                            <!--合同相关信息组件-->
                            <v-contract-about-info
                                :contractList="contractList"
                                :productId="productId"
                                :hisContractList="hisContractList"
                                @updated-contract="updatedCont"
                                @add-contract="addCont"
                                @new-contract="newCont"
                                @his-contract="hisCont"
                                @updated-contract-status="updatedContStu"
                                @delete-contract="deleteCont"
                                @add-blank-copy="addBlankCopy"
                                @delete-file-to-updated="deleteFileToUpdated"
                                @delete-img-to-updated="deleteImgToUpdated"
                            ></v-contract-about-info>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import vContractAboutInfo from "./contractAboutInfo";
import tools from "@/utils/tools";
export default {
    props: ["show", "param"],
    data() {
        return {
            perjShow: true,
            perj: {
                title: "业务合同信息"
            },
            roleForm: {
                roleName: "",
                default: false
            }, //添加权限角色名
            addRole: false, //添加权限管理人员二次弹窗
            value: "", //下拉选中值
            liDex: "", //选中的li
            options: [
                //option的下拉数值
                {
                    value: "选项1",
                    label: "黄金糕"
                },
                {
                    value: "选项2",
                    label: "双皮奶",
                    disabled: true
                },
                {
                    value: "选项3",
                    label: "蚵仔煎"
                },
                {
                    value: "选项4",
                    label: "龙须面"
                },
                {
                    value: "选项5",
                    label: "北京烤鸭"
                }
            ],
            serverList: [1, 1], //中部的服务
            serverOptions: [], //朵朵服务的下拉
            dateArr: [], //时间数组
            date: "", //时间存储单位
            pickerOptions1: {
                //时间选择规则
                disabledDate(time) {
                    return time.getTime() < Date.now();
                }
            },
            innerVisible: false, // 内层弹窗
            innerTitle: "",
            innerType: null, //主体内容类型
            allRoleList: [
                {
                    name: "111",
                    code: "222",
                    content: [
                        {
                            name: 111,
                            code: 222
                        }
                    ]
                }
            ],
            treeArr: [], //被选中的权限数组
            roleList: [
                {
                    roleId: 1,
                    roleName: "权限1",
                    default: false,
                    func: [
                        //String数组，角色拥有的权限id
                        ""
                    ]
                }
            ],
            props: {
                //el-tree的默认数据格式
                label: "name",
                id: "code",
                children: "content"
            }, //修改默认数据格式
            /***********************************@author:fugy @date: 2018.08.16 @info:朵朵服务************* */
            defaultProAdmin: "", //默认的经理负责人
            selectProAdmin: "", //不是项目经理的下拉value
            /**************************************@author:fugy @date: 2018.08.16********************* */
            /**禹数角色列表部分 */
            roleSelectListArr: [], //负责人角色下拉列表
            projectMenArr: [], //项目负责人列表

            /**************************************@author:fugy @data：2018.08.15********************* */
            /**禹数合同tab部分**/
            productId: "1", //产品id  禹数1/朵朵2
            addOperFlag: false, //添加运维人员2级弹窗的标志
            operSelectSearchValue: "", //实施运维人员选择input查询框的value值
            operSelectArr: [], //实施运维人员列表数据
            addOperFormValue: {
                name: "",
                phone: "",
                isDefaultRole: true
            }, //添加实施运维人员的表单数据
            addOperFormrules: {
                name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                phone: [
                    {
                        required: true,
                        message: "请输入11位手机号码",
                        min: 11,
                        max: 11,
                        trigger: "blur"
                    }
                ]
            }, //添加实施运维人员的表单规则
            /**相关合同信息**/

            contractList: [], //合同列表信息
            hisContractList: [], //历史合同信息
            moreContFlag: false,
            blankTemplate: [
                {
                    productId: 1,
                    template: {
                        projectId: this.param.perjId,
                        productId: "1",
                        startDate: "",
                        endDate: "",
                        doc: "",
                        copies: [""],
                        dateRange: [new Date(), ""],
                        onlyRead: false,
                        contStatus: true
                    }
                },
                {
                    productId: 2,
                    template: {
                        projectId: this.param.perjId,
                        productId: "2",
                        startDate: "",
                        endDate: "",
                        doc: "",
                        copies: [""],
                        dateRange: [new Date(), ""],
                        onlyRead: false,
                        contStatus: true
                    }
                }
            ],
            roleId: "",
            copyArr: []
        };
    },
    components: {
        vContractAboutInfo
    },
    methods: {
        role() {
            this.innerVisible = true;
            this.innerTitle = "角色权限管理";
            this.innerType = 1;
            this.getAllRole();
        },

        //获取朵朵下拉的值
        getServerOPtions() {
            let param = {
                productId: 2
            };
            this.postJson("/server/business-os/service/query_all", param, res => {
                this.serverOptions = res.content;
            });
        },

        //获取朵朵下面的服务
        getServer() {
            this.postJson(
                "/server/business-os/service/query",
                {
                    projectId: this.param.perjId
                },
                res => {
                    this.serverList = res.content.map(item => {
                        item.projectId = this.param.perjId;
                        item.changeBtn = true;
                        return item;
                    });
                }
            );
        },

        //保存朵朵服务
        saveServer(itm) {
            console.log(itm);
            if (itm.endDate && itm.serviceId) {
                console.log(typeof itm.endDate);
                if (typeof itm.endDate == "object") {
                    itm.endDate = tools.redate(itm.endDate);
                }
                let param = {
                    projectId: this.param.perjId, //String，必填，项目id
                    serviceId: itm.serviceId, //String，必填，朵朵服务id
                    endDate: itm.endDate //String，必填，服务截止日期
                };
                this.postJson("/server/business-os/service/create", param, res => {
                    this.getServer();
                });
            } else {
                this.$message.error("请截止时间与所选服务不为空");
            }
        },

        //开始修改
        changeServer(item) {
            item.changeBtn = false;
        },

        //删除朵朵服务
        deleteServer(item) {
            this.$confirm("确定删除服务?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    console.log(item);
                    let param = {
                        projectId: item.projectId, //String，必填，项目id
                        serviceId: item.serviceId //String，必填，朵朵服务id
                    };
                    this.postJson("/server/business-os/service/delete", param, res => {
                        this.getServer();
                        this.$message.success("删除成功");
                    });
                })
                .catch(() => {
                    this.getServer();
                });
        },

        //获取所有权限列表
        getAllRole() {
            this.postJson("/server/business-os/role/func/query_all", {}, res => {
                this.allRoleList = res.content;
                this.getRoleUser();
            });
        },

        //创建新的朵朵服务
        createServer() {
            let pushObj = {
                serviceId: "",
                endDate: "",
                serviceName: "",
                changeBtn: false
            };
            this.serverList.push(pushObj);
        },

        //权限发生更改
        changeRole() {
            if (this.roleId) {
                // let param = this.$refs.tree.getCheckedKeys()
                let param = {
                    roleId: this.roleId,
                    func: this.$refs.tree.getCheckedKeys()
                };
                this.postJson("/server/business-os/role/func/create", param, res => { });
            } else {
                this.$message("请选择修改权限的角色");
            }
        },

        //获取所有权限角色
        getRoleUser() {
            this.postJson("/server/business-os/role/query_list", {}, res => {
                this.roleList = res.content;
            });
        },

        //内置弹窗的关闭事件
        innerDialogColseHandle() {
            this.operSelectSearchValue = ""; //重置实施运维人员的查询条件
        },

        //修改默认角色
        changeDefault(i) {
            let param = {
                roleId: i.roleId, //Integer，必填，角色id
                roleName: i.roleName, //String，选填，角色名称
                isDefault: 1 //Boolean，选填，设为默认角色，其他角色自动变为非默认
            };
            this.postJson("/server/business-os/role/update", param, res => {
                this.getRoleUser()
                this.$message.success("设置默认角色成功");
            });
        },

        //点击已有权限人员
        checkRole(item, index) {
            this.liDex = index;
            console.log(this.liDex);
            // this.getUserRole
            let param = {
                roleId: item.roleId
            };
            this.roleId = item.roleId;
            this.postJson("/server/business-os/role/func/query", param, res => {
                console.log(res);
                if (res.content && res.content.length > 0) {
                    let data = res.content.map(res => {
                        return res.funcId;
                    });
                    this.$refs.tree.setCheckedKeys(data);
                } else {
                    this.$refs.tree.setCheckedKeys([]);
                }
            });
        },

        //添加权限人员
        addRoleFun(formName) {
            this.utilValid(formName).then(res => {
                this.roleForm.isDefault
                    ? (this.roleForm.isDefault = 0)
                    : (this.roleForm.isDefault = 1);
                this.postJson("/server/business-os/role/create", this.roleForm, res => {
                    this.addRole = false;
                    this.resetForm(formName);
                    this.getAllRole();
                });
            });
        },

        //工具校验
        utilValid(formName) {
            return new Promise((resolve, reject) => {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        resolve();
                    } else {
                        return false;
                    }
                });
            });
        },

        //重置form表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //朵朵修改项目经理负责人
        ddAdminSelectChange(index) {
            this.$confirm("您正在修改项目负责经理, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let item = {};
                    item.personId = index;
                    this.operAddTeam(item);
                    this.roleMenList(); //更新项目负责人列表
                    this.getOperListSearch(); //更新朵朵不是负责人列表
                    this.selectProAdmin = ""; //重置下拉value
                })
                .catch(() => {
                    this.roleMenList(); //更新项目负责人列表
                    this.getOperListSearch(); //更新朵朵不是负责人列表
                    this.selectProAdmin = ""; //重置下拉value
                    this.$message({
                        type: "info",
                        message: "已取消修改"
                    });
                });
        },
        /*****************@author:fugy @date:2018.08.17 @info:禹数部分方法************* */
        //获取负责人下拉列表数据
        roleSelectList() {
            let params = {};
            this.postJson(
                "/server/business-os/role/query_list",
                params,
                data => {
                    let res = data;
                    if (res.result === "success") {
                        this.roleSelectListArr = res.content;
                    }
                },
                failed => {
                    console.log(failed);
                },
                err => {
                    throw err;
                }
            );
        },
        //获取项目负责人列表
        roleMenList() {
            let params = {
                productId: this.productId,
                projectId: this.param.perjId
            };
            this.postJson(
                "/server/business-os/project/person/query",
                params,
                data => {
                    let res = data;
                    if (res.result === "success") {
                        if (this.productId == 1) {
                            console.log(res.content, "content");
                            if (res.content && res.content.length) {
                                this.projectMenArr = res.content.map(item => {
                                    item.role
                                        ? ""
                                        : (item.role = {
                                            roleId: ""
                                        });
                                    return item;
                                });
                            } else {
                                this.projectMenArr = [];
                            }
                        } else {
                            this.defaultProAdmin = res.content.length
                                ? res.content[0].person.name
                                : "暂无";
                        }
                    }
                },
                failed => {
                    console.log(failed);
                },
                err => {
                    throw err;
                }
            );
        },
        //修改人员角色
        updateMenRole(ele) {
            this.$confirm("您正在修改角色, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let params = {
                        productId: this.productId,
                        projectId: this.param.perjId,
                        personId: ele.person.personId,
                        roleId: ele.role.roleId
                    };
                    this.postJson(
                        "/server/business-os/project/person/update",
                        params,
                        data => {
                            let res = data;
                            if (res.result === "success") {
                                this.$message({
                                    type: "success",
                                    message: "修改成功"
                                });
                            }
                        },
                        failed => {
                            console.log(failed);
                        },
                        err => {
                            throw err;
                        }
                    );
                })
                .catch(() => {
                    this.roleMenList(); //重置负责人列表
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        //删除项目负责人操作
        deleteRoleHandle(personId) {
            this.$confirm("您正在删除负责人, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    let params = {
                        productId: this.productId,
                        projectId: this.param.perjId,
                        personId: personId
                    };
                    this.postJson(
                        "/server/business-os/project/person/delete",
                        params,
                        data => {
                            let res = data;
                            if (res.result === "success") {
                                this.roleMenList();
                                this.$message({
                                    type: "success",
                                    message: "删除成功"
                                });
                            } else {
                                this.$message({
                                    type: "info",
                                    message: "删除失败，请重新删除!"
                                });
                            }
                        },
                        failed => {
                            console.log(failed);
                        },
                        err => {
                            throw err;
                        }
                    );
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        //从运营团队库中选择添加
        formTeamAddHandle() {
            this.innerVisible = true;
            this.innerTitle = "实施运维人员选择";
            this.innerType = "2";
            this.getOperListSearch();
        },
        //实施运维人员选择的搜索事件
        operSearchHandle() {
            // this.getOperListSearch();
            this.operSelectArr = this.copyArr.filter(item => {
                if (
                    item.phone.indexOf(this.operSelectSearchValue) >= 0 ||
                    item.name.indexOf(this.operSelectSearchValue) >= 0
                ) {
                    return true;
                }
            });
        },
        //实施运维人员的列表数据请求事件
        getOperListSearch() {
            let params = {
                search: this.operSelectSearchValue,
                projectId: this.param.perjId,
                productId: this.productId
            };
            //查询未在项目中的人员接口
            this.postJson(
                "/server/business-os/project/person/query_spare",
                params,
                data => {
                    let res = data;
                    if (res.result === "success") {
                        if (this.productId == 1) {
                            //禹数
                            //查询默认角色接口
                            let param = {};
                            this.postJson(
                                "/server/business-os/role/get_default",
                                param,
                                resData => {
                                    if (resData.result === "success") {
                                        this.copyArr = res.content; // 复制数组
                                        this.operSelectArr = res.content; //赋值未在项目中的人员列表
                                        this.operSelectArr.forEach((ele, index) => {
                                            ele.roleObj = resData.content ? resData.content : null;
                                        }); //赋值未在项目中的人员默认角色
                                    }
                                },
                                failed => {
                                    console.log(failed);
                                },
                                err => {
                                    throw err;
                                }
                            );
                        } else {
                            //朵朵
                            this.operSelectArr = res.content; //赋值未在项目中的人员列表
                        }
                    }
                },
                failed => {
                    console.log(failed);
                },
                err => {
                    throw err;
                }
            );
        },
        //实施运维人员列表加入团队事件
        operAddTeam(item, index) {
            let params = {
                projectId: this.param.perjId,
                productId: this.productId,
                personId: item.personId,
                roleId: item.roleObj ? item.roleObj.roleId : null
            };
            this.postJson(
                "/server/business-os/project/person/create",
                params,
                data => {
                    let res = data;
                    if (res.result === "success") {
                        this.roleMenList(); //更新负责人人员列表
                        if (this.productId == 1) {
                            this.roleSelectList()
                            this.operSelectArr.splice(index, 1); //返回成功,数组删除
                            this.$message({
                                type: "success",
                                message: "加入成功"
                            });
                        } else {
                            this.$message({
                                type: "success",
                                message: "修改成功"
                            });
                        }
                    }
                },
                failed => {
                    console.log(failed);
                },
                err => {
                    throw err;
                }
            );
        },
        //添加实施运维人员的保存事件
        saveAddOper(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let paramsObj = {};
                    paramsObj = this.addOperFormValue;
                    paramsObj.groupType = this.productId;
                    //不自动加入团队的情况下
                    this.postJson(
                        "/server/business-os/person/create",
                        paramsObj,
                        data => {
                            paramsObj.personId = data.personId;
                            //判断是否自动加入团队
                            if (paramsObj.isDefaultRole) {
                                //调用角色接口
                                let param = {};
                                this.postJson(
                                    "/server/business-os/role/get_default",
                                    param,
                                    resData => {
                                        if (resData.result === "success") {
                                            paramsObj.roleId = resData.content
                                                ? resData.content.roleId
                                                : null;
                                            paramsObj.productId = this.productId;
                                            paramsObj.projectId = this.param.perjId;
                                            //添加到项目负责人
                                            this.postJson(
                                                "/server/business-os/project/person/create",
                                                paramsObj,
                                                resAllData => {
                                                    if (resAllData.result === "success") {
                                                        this.$message({
                                                            message: "保存成功!",
                                                            type: "success"
                                                        });
                                                        //重置formvalue
                                                        this.addOperFormValue = {
                                                            name: "",
                                                            phone: "",
                                                            isDefaultRole: true
                                                        }, //添加实施运维人员的表单数据
                                                            this.addOperFlag = false; //关闭popOver的2级悬浮弹窗
                                                        this.innerVisible = false; //关闭内置弹窗
                                                        this.roleMenList(); //更新项目负责人列表
                                                    }
                                                },
                                                failed => {
                                                    console.log(failed);
                                                },
                                                err => {
                                                    throw err;
                                                }
                                            );
                                        }
                                    },
                                    failed => {
                                        console.log(failed);
                                    },
                                    err => {
                                        throw err;
                                    }
                                );
                            } else {
                                this.$message({
                                    message: "保存成功!",
                                    type: "success"
                                });
                                this.addOperFlag = false; //关闭popOver的2级悬浮弹窗
                                this.getOperListSearch(); //更新未在项目中的人员列表
                            }
                        },
                        failed => {
                            console.log(failed);
                        },
                        err => {
                            throw err;
                        }
                    );
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //添加运维人员2级悬浮窗隐藏时触发
        addOperHideHandle() {
            //重置2级悬浮窗
            this.$refs["addOperFormValue"].resetFields();
        },
        //tab标签切换事件
        tabChangeClick(tab, event) {
            this.getContractList();
            if (tab.index == 0) {
            } else {
                this.getServerOPtions();
                this.getServer();
                this.roleMenList(); //查询朵朵负责经理信息
                this.getOperListSearch(); //查询朵朵负责人列表
            }
        },
        /**********************************合同有关方法*************************************** */
        //查询禹数合同列表
        getContractList() {
            let params = {
                projectId: this.param.perjId,
                productId: this.productId,
                expire: false
            };
            this.postJson(
                "/server/business-os/contract/query",
                params,
                data => {
                    let res = data.content;
                    res.forEach((item, index) => {
                        item.dateRange = [];
                        item.dateRange[0] = item.startDate;
                        item.dateRange[1] = item.endDate;
                        item.onlyRead = true; //只读状态
                        item.contStatus = false; //true(new) or false(old) contract
                        //处理doc字段
                        if (!item.doc) {
                            item.doc = "";
                        }
                        //处理上传图片的copies,假如最后一项为"",则清除最后一项
                        if (item.copies.length) {
                            if (item.copies[item.copies.length - 1] == "") {
                                item.copies.pop();
                            }
                        }
                    });
                    this.contractList = res; //合同数据
                },
                failed => {
                    console.log(failed);
                },
                err => {
                    throw err;
                }
            );
        },
        //合同修改状态事件
        updatedContStu(index) {
            //根据状态判断图片附件是否能够继续添加
            let stu = this.contractList[index].onlyRead;
            if (stu) {
                this.contractList[index].copies.push("");
            } else {
                let copyArr = this.contractList[index].copies;
                if (copyArr[copyArr.length - 1] == "") {
                    copyArr.pop();
                }
                this.getContractList(); //更新合同数据
            }
            this.contractList[index].onlyRead = !this.contractList[index].onlyRead;
        },
        //删除合同
        deleteCont(item, index) {
            if (item.contStatus) {
                //新建合同
                this.contractList.splice(index, 1);
            } else {
                //已有合同
                let params = {
                    contractId: item.contractId
                };
                this.postJson(
                    "/server/business-os/contract/delete",
                    params,
                    data => {
                        let res = data;
                        if (res.result === "success") {
                            this.getContractList(); //更新一下合同列表
                            this.$message({
                                message: "删除成功！",
                                type: "success"
                            });
                        }
                    },
                    failed => {
                        console.log(failed);
                    },
                    err => {
                        throw err;
                    }
                );
            }
        },
        //合同修改事件
        updatedCont(item) {
            let copyArr = item.copies;
            if (copyArr[copyArr.length - 1] == "") {
                copyArr.pop();
            }
            let params = item;
            this.postJson(
                "/server/business-os/contract/update",
                params,
                data => {
                    let res = data;
                    this.getContractList(); //更新一下合同列表
                    this.hisCont(); //更新历史合同列表
                    if (res.result === "success") {
                        this.$message({
                            message: "修改成功！",
                            type: "success"
                        });
                    }
                },
                failed => {
                    console.log(failed);
                },
                err => {
                    throw err;
                }
            );
        },
        //添加合同事件
        addCont(productId) {
            let blankTem = {};
            this.blankTemplate.forEach((item, index) => {
                if (productId == item.productId) {
                    blankTem = item.template;
                    return;
                }
            });
            let copyTem = JSON.parse(JSON.stringify(blankTem));
            this.contractList.push(copyTem);
        },
        //新建合同newCont
        newCont(item) {
            let params = item;
            this.postJson(
                "/server/business-os/contract/create",
                params,
                data => {
                    let res = data;
                    if (res.result === "success") {
                        this.getContractList(); //更新一下合同列表
                        this.hisCont(); //更新一下历史合同列表
                        this.$message({
                            message: "保存成功！",
                            type: "success"
                        });
                    }
                },
                failed => {
                    console.log(failed);
                },
                err => {
                    throw err;
                }
            );
        },
        //查询历史合同hisCont
        hisCont() {
            let params = {
                projectId: this.param.perjId,
                productId: this.productId,
                expire: true
            };
            this.postJson(
                "/server/business-os/contract/query",
                params,
                data => {
                    let res = data.content;
                    res.forEach((item, index) => {
                        item.dateRange = [];
                        item.dateRange[0] = item.startDate;
                        item.dateRange[1] = item.endDate;
                        //处理doc字段
                        if (!item.doc) {
                            item.doc = "";
                        }
                    });
                    this.hisContractList = res; //历史合同数据
                },
                failed => {
                    console.log(failed);
                },
                err => {
                    throw err;
                }
            );
        },
        //添加上传图片的空白框框
        addBlankCopy(index) {
            this.contractList[index].copies.push("");
        },
        //删除合同的电子文档
        deleteFileToUpdated(index) {
            this.contractList[index].doc = "";
        },
        //删除合同指定的图片
        deleteImgToUpdated(index, imgIndex) {
            this.contractList[index].copies.splice(imgIndex, 1);
        }
    },
    created() {
        this.perjShow = this.show;
        //查询负责人下拉框列表
        this.roleSelectList();
        //获取负责人列表
        this.roleMenList();
        //查询禹数合同列表
        this.getContractList();
    },
    mounted() { },
    watch: {
        perjShow: {
            deep: true,
            handler(val, oldVal) {
                this.$emit("close");
                this.perjShow = true;
            }
        },
        innerVisible() {
            if (!this.innerVisible) {
                this.roleSelectList();
                //获取负责人列表
                this.roleMenList();
            }
        }
    }
};
</script>

<style lang="scss">
$active: #ecf5ff;
.div-border {
  width: 95%;
  margin: 10px auto;
  background-color: #ecedee;
  height: 2px;
  border-radius: 1px;
}
.roleAdmin {
  height: 200px;
  .left-view {
    height: 200px;
    width: 200px;
    height: 100%;
    overflow: hidden;
    float: left;
    .none {
      display: none;
    }
    .hover-show {
      display: none;
    }
    ul {
      height: 158px;
      overflow-y: auto;
    }
    li {
      overflow: hidden;
      line-height: 32px;
    }
    li.li-active {
      background-color: $active;
      color: #409eff;
    }
    li:hover {
      background-color: $active;
      color: #409eff;
      cursor: pointer;
      .hover-show {
        display: inline-block;
      }
    }
  }
  .right-view {
    height: 200px;
    overflow-y: auto;
  }
  .oper-select-box {
    padding-top: 5px;
    height: 150px;
    overflow-y: auto;
    .oper-row {
      height: 30px;
      line-height: 30px;
      .oper-hover-show {
        display: none;
      }
    }
    .oper-row:hover {
      background-color: $active;
      color: #409eff;
      cursor: pointer;
      .oper-hover-show {
        display: block;
      }
    }
  }
}

.owner_dialog {
  .ys_cainter {
    max-height: 350px;
    overflow-y: auto;
    h3 {
      text-align: center;
      font-size: 1rem;
      line-height: 2.5rem;
    }
    p {
      min-height: 40px;
    }
  }
  .el-dialog__body {
    max-height: 18rem;
    overflow-y: auto;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload .el-upload-dragger {
  width: 6rem;
}

.avatar-uploader .el-upload .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 6rem;
  height: 6rem;
  line-height: 6rem;
  text-align: center;
}

.avatar {
  width: 6rem;
  height: 6rem;
  display: block;
}
.role-delete-icon:hover {
  cursor: pointer;
}
</style>
