<template>
    <div class="okrPage">
        <div class="topBox"></div>
        <div class="title">
            <p>{{time.year}}年第{{time.quarter}}季度OKR</p>
        </div>
        <div class="synchronization">
            <!-- <el-button type="warning" icon="el-icon-share" circle></el-button> -->
             <el-button type="warning" plain class="OKRSYNC"  @click="okrSync">OKR同步</el-button>
        </div>
        <div class="openOkrSyncBox">
            <el-dialog
                title="添加同步人"
                :visible.sync="okrVisible"
                width="30%"
                center
                :before-close="OKRhandleClose">
                <span>
                    <p>
                        <span>现有同步人：</span>
                        <span v-for="(item,index) in selectedPeople" :key='index' style="margin-right:5px">
                            <el-link type="success">{{item.label}} </el-link>
                        </span>
                    </p>
                    

                    <span>重选同步人：</span>
                    <el-select v-model="syncPeopleValue" filterable placeholder="请选择需要同步的人" :multiple='true' style="width:60%">
                        <el-option
                            v-for="item in syncPeopleOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="okrVisible = false">取 消</el-button>
                    <el-button type="primary" @click="syncOK">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="okrBody" v-if="okr.length>0">
            <div class="okrBox first">
                <div class="okrBox-title">
                    <p class="top-title">本周工作</p>
                    <el-button type="text" class="createTask" @click="createTask(1)"><i class="el-icon-plus"></i>新建任务</el-button>
                </div>
                <div class="okrbox-list">
                    <ul>
                        <li v-for="(item) in taskInfoList" :key='item.id'>                           
                            <el-popover
                                placement="top-start"
                                :title="'标题：'+item.taskTitle"
                                width="300"
                                trigger="hover"
                                :content="'详细描述：'+item.taskInfo">  
                                
                                <span slot="reference" class="content">
                                    <span class="taskGrade">
                                        P{{item.priority}}
                                    </span> 
                                    {{item.taskTitle}}
                                </span>                            
                            </el-popover>
                            <div class="list-opt">
                                <!-- <el-progress :percentage="30"  ></el-progress> -->
                                <!-- <div style="width:30%">
                                    <el-progress :percentage="50" color='#cc9966'></el-progress>
                                </div> -->
                                <el-button type="warning" icon="el-icon-edit" size='mini' circle @click="editTask(item)" style='margin-right:5px'></el-button>
                                <el-popconfirm
                                    
                                    icon="el-icon-info"
                                    iconColor="red"
                                    title="确定删除吗？"
                                    @onConfirm="deleteTask(item)"
                                    >
                                    <!-- <el-button slot="reference">删除</el-button> -->
                                    <el-button type="danger" slot="reference" icon="el-icon-delete" size='mini' circle ></el-button>
                                </el-popconfirm>

                                
                            </div>
                            
                        </li>
                    </ul>
                </div>
            </div>
            <div class="okrBox second">
                <div class="okrBox-title">
                    <p class="top-title">OKR</p>
                    <el-button type="text" @click="openCreateKR" class="createTask"><i class="el-icon-plus"></i>新建KR</el-button>
                </div>
                <div class="objectList" v-for="(item,index) in okr" :key="index">
                    <div class="OBox">
                        <span class="O-tip">目标</span>
                        <span class="O-content" @click="changeObject(item.objectInfo)">{{item.objectInfo.objectInfo}}</span>
                        <span class="O-opt">
                            <el-progress type="circle" :width='60' :height='60' :percentage="item.objectInfo.completion" :color="colors"></el-progress>                          
                        </span>
                    </div>
                    <div class="KRBox">
                        <ul>
                            <li v-for="(ele,index) in item.krList" :key="index">
                                <span class="KR-tip">KR</span>
                                <el-popover
                                    placement="top-start"
                                    
                                    width="300"
                                    trigger="hover"
                                    :content="'KR：'+ele.krInfo">  
                                    
                                    <span slot="reference" class="content">
                                        <span class="KR-content">{{ele.krInfo}}</span>
                                    </span>                            
                                </el-popover>
                                
                                <span class="KR-opt"> 
                                    <span style="width:35%">
                                         <el-progress :percentage="ele.completion"  color='#cc9966'></el-progress>
                                    </span>                                
                                    <el-button type="warning" icon="el-icon-edit" size='mini' circle @click="editKR(ele)" style='margin-right:5px'></el-button>
                                    <el-popconfirm                                   
                                        icon="el-icon-info"
                                        iconColor="red"
                                        title="确定删除吗？"
                                        @onConfirm="deleteKR(ele)"
                                        >
                                        <!-- <el-button slot="reference">删除</el-button> -->
                                        <el-button type="danger" slot="reference" icon="el-icon-delete" size='mini' circle ></el-button>
                                    </el-popconfirm>
                                                                   
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="okrBox third">
                <div class="okrBox-title">
                    <p class="top-title">未来四周计划</p>
                    <el-button type="text" class="createTask" @click="createTask(2)"><i class="el-icon-plus"></i>新建任务</el-button>
                </div>
                <div class="okrbox-list">
                    <ul>
                        <li v-for="(item) in taskFourWeek" :key='item.id'>                           
                            <el-popover
                                placement="top-start"
                                :title="'标题：'+item.taskTitle"
                                width="300"
                                trigger="hover"
                                :content="'详细描述：'+item.taskInfo">   
                                <span slot="reference">
                                    <span class="taskGrade">
                                        P{{item.priority}}
                                    </span> 
                                    
                                    {{item.taskTitle}}
                                </span>                            
                            </el-popover>
                            <div class="list-opt">
                                <!-- <el-progress :percentage="30"  ></el-progress> -->
                                <!-- <div style="width:30%">
                                    <el-progress :percentage="50" color='#cc9966'></el-progress>
                                </div> -->
                                <el-button type="warning" icon="el-icon-edit" size='mini' circle @click="editTask(item)" style="margin-right:5px"></el-button>
                                <el-popconfirm                                   
                                        icon="el-icon-info"
                                        iconColor="red"
                                        title="确定删除吗？"
                                        @onConfirm="deleteTask(item)"
                                        >
                                        <!-- <el-button slot="reference">删除</el-button> -->
                                        <el-button type="danger" slot="reference" icon="el-icon-delete" size='mini' circle ></el-button>
                                </el-popconfirm>
                                
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="okrBox four">
                <div class="okrBox-title">
                    <p class="top-title">状态指标</p>
                    <el-button type="text" class="createTask" @click="createStatus"><i class="el-icon-plus"></i>新建状态指标</el-button>
                </div>
                <div class="status-list">                  
                    <li v-for="item in status" :key='item.id' class="status">
                        <span class="itemStatus"  :style="'background-color:'+item.color"  @click="editSatus(item)">{{item.content}}</span>
                    </li>
                </div>
            </div>
        </div>
        <div class="okrBody noOkr" v-else>
            <p class="noObject">请先制定目标，才能进行okr工作板管理</p>
            <p ><el-button type="text" style='font-size:20px' @click="createO">立即创建</el-button></p>
            <!-- <el-button type="primary" icon="el-icon-edit" circle></el-button> -->
            <!-- <div class='kongbaiBackground'>
                <img src="../assets/image/shili.png" alt="" class="shili">
            </div> -->   
        </div>
        <!-- 打开创建目标的模态框 -->
        <div class="openTargetBox">
            <el-dialog
                title="创建OKR目标"
                :visible.sync="targetVisible"
                width="50%"
                center
                :before-close="OKRhandleClose">
                <div class="targetBody">
                    <div class="targetO">
                        <span class="target-tip">O</span>
                        <span class="target-input"><el-input
                                type="text"
                                placeholder="请输入目标名称"
                                v-model="targetName"
                                maxlength="50"
                                show-word-limit
                                clearable
                                @blur="checkedTargetName"
                                ></el-input>                                
                        </span>    
                        <span v-if="targetNameOk" style="font-size:12px;color:red;margin-left:50px">目标名称时必须填写的</span>  
                    </div>
                   
                    <div class="targetKR" v-for="(item,index) in KRList" :key='index'>
                        <span class="tip"><span class="sc-bQduHL kArEgh"></span> KR</span>
                        <span class="info">
                            <el-input
                                type="text"
                                placeholder="请输入目标名称"
                                v-model="item.krInfo"                             
                                clearable
                                ></el-input>
                        </span>
                        <span class="progress">
                            <span class="progressBar creatOxia">
                                <span class="krtitle">KR的完成进度：</span>
                                <el-slider
                                    v-model="item.completion"
                                    show-input
                                    style="width:80%;margin-left:10px">
                                </el-slider>
                            </span>
                            <span >
                                <!-- <el-popconfirm                                   
                                        icon="el-icon-info"
                                        iconColor="red"
                                        title="确定删除吗？"
                                        @onConfirm="deleteTask(item)"
                                        >
                                        
                                        <el-button type="danger" slot="reference" icon="el-icon-delete" size='mini' circle ></el-button>
                                </el-popconfirm> -->
                                <el-button icon="el-icon-delete" circle class="delete" size='mini' @click="createdeleteKR(item,index)"></el-button>
                                <!-- <i class="el-icon-delete"></i> -->
                            </span>
                        </span>
                    </div>
                    <div class="addKR">
                        <el-button type="text" style="font-size:16px" @click="addKR"><i class="el-icon-plus"></i>添加关键结果</el-button>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="targetVisible = false">取 消</el-button>
                    <el-button type="primary" @click="createOKRcomplete">创 建</el-button>
                </span>
            </el-dialog>
        </div>

        <!-- 创建任务的模态框 -->
        <div class="openTaskBox">
            <el-dialog
                :title="taskTitle"
                :visible.sync="taskVisible"
                width="45%"   
                center           
                :before-close="OKRhandleClose">
                <div class="taskBody">
                    <div class="task-item">
                        <!-- <span class="item-name">名称：</span> -->
                        <el-input
                            type="text"
                            placeholder="请输入任务名称"
                            v-model="taskName"
                            maxlength="20"
                            show-word-limit
                            style="width:50%"
                            clearable
                            @blur='checkTaskName'
                            >
                        </el-input>
                        <span style="font-size:12px;color:#CC6666; margin-left:15px" v-if='taskNameOk'>任务名称是必须得填写的哦！</span>
                    </div>
                    <div class="task-item">
                        <!-- <span class="item-name">描述</span> -->
                        <el-input
                            type="textarea"
                            placeholder="您可对做进一步详细描述"
                            v-model="taskDesc"
                            maxlength="50"
                            show-word-limit
                            clearable
                            size='small'
                            >
                        </el-input>
                    </div>
                    <div class="task-item">
                        <span class="item-name" >选择等级：</span>
                        <el-radio-group v-model="taskRange" size="small" >
                            <el-radio label="1" border>P1</el-radio>
                            <el-radio label="2" border>P2</el-radio>                           
                        </el-radio-group>
                    </div>
                    <!-- 完成的进度 -->
                    <!-- <div class="task-item">
                        <span class="item-name" >设置进度：</span>
                         <el-slider
                            v-model="taskProgress"
                            show-input
                            style="width:80%;margin-left:10px">
                        </el-slider>
                    </div> -->

                </div>
                <span slot="footer" class="dialog-footer">
                    
                    <el-button @click="taskVisible = false">取 消</el-button>
                    <el-button type="warning" @click="taskOk" v-if="taskTitle=='创建任务'">创 建</el-button>
                    <el-button type="warning" @click="editTaskOk" v-if="taskTitle=='修改任务'">修 改</el-button>
                </span>
            </el-dialog>
        </div>
        <!-- 创建和修改状态指标 -->
        <div class="openStatusBox">
            <el-dialog
                :title="statusTitle"
                :visible.sync="statusVisible"
                width="40%"   
                center        
                :before-close="OKRhandleClose">
                <div class="taskBody StatusBody">
                    <div class="task-item">
                        <!-- <span class="item-name">名称：</span> -->
                        <el-input
                            type="text"
                            placeholder="请输入状态指标"
                            v-model="statusName"
                            maxlength="15"
                            show-word-limit
                            style="width:95%"
                            clearable
                            @blur='checkStatusName'
                            >
                        </el-input>
                        <span style="font-size:12px;color:#CC6666; margin-left:15px;display:block;margin-top:5px" v-if='statusNameOk'>状态指标是必须得填写的哦！</span>
                    </div>
                    <div class="task-item">
                        <span class="item-name" >选择状态：</span>
                        <el-radio-group v-model="statusType" size="small" >
                            <el-radio label="1" border class="first">较差</el-radio>
                            <el-radio label="2" border class="second">一般</el-radio>
                            <el-radio label="3" border class="third">良好</el-radio>
                            
                        </el-radio-group>
                    </div>
                    <div class="task-item" v-if="statusTitle=='修改状态指标'">
                        <div style="width:200px;height:30px;margin:0 auto;text-align:center;margin-top:30px">
                            <!-- <el-popconfirm                                   
                                icon="el-icon-info"
                                iconColor="red"
                                title="确定删除吗？"
                                @onConfirm="deleteStatusOk"
                                >
                                
                                <el-button type="warning" slot="reference"  >删除本条状态指标</el-button>
                            </el-popconfirm> -->
                            <el-button type="warning" @click="deleteStatusOk"  >删除本条状态指标</el-button>
                        </div>
                        
                    </div>
                    <!-- 完成的进度 -->
                    <!-- <div class="task-item">
                        <span class="item-name" >设置进度：</span>
                         <el-slider
                            v-model="taskProgress"
                            show-input
                            style="width:80%;margin-left:10px">
                        </el-slider>
                    </div> -->

                </div>
                <span slot="footer" class="dialog-footer">
                    
                    <el-button @click="statusVisible = false">取 消</el-button>
                    <el-button type="warning" @click="statusOk" v-if="statusTitle=='创建状态指标'">创 建</el-button>
                    <el-button type="warning" @click="editStatusOk" v-if="statusTitle=='修改状态指标'">修 改</el-button>
                    
                </span>
            </el-dialog>
        </div>
        <!-- 创建和修改KR -->
        <div class="openKRBox">
            <el-dialog
                :title="KRTitle"
                :visible.sync="KRVisible"
                width="40%"   
                center        
                :before-close="OKRhandleClose">
                <div class="taskBody targetBody editKRBody">
                    <div class="targetO">
                        <span class="target-tip">O</span>
                        <span class="target-input">
                            <div class="currentO">{{okrObject.objectInfo}}</div>
                        </span>    
                        <!-- <span v-if="targetNameOk" style="font-size:12px;color:red;margin-left:50px">目标名称时必须填写的</span>   -->
                    </div>
                    
                    <div class="task-item">
                        <!-- <span class="item-name">名称：</span> -->
                        <div class="targetKR">
                        <span class="tip"><span class="sc-bQduHL kArEgh"></span> KR</span>
                        <span class="info">
                            <el-input
                                type="text"
                                placeholder="请输入目标名称"
                                v-model="KRName"                             
                                clearable                            
                                maxlength="50"
                                show-word-limit
                                @blur='checkKRName'
                                ></el-input>
                        </span>
                        <span style="font-size:12px;color:#CC6666; margin-left:15px;display:block;margin-top:5px" v-if='KRNameOk'>KR是必须得填写的哦！</span>
                        <span class="progress">
                            <span class="progressBar">
                                <span class="krtitle">KR的完成进度：</span>
                                <el-slider
                                    v-model="KRProgress"
                                    show-input
                                    style="width:70%;margin-left:10px">
                                </el-slider>
                            </span>
                        </span>
                    </div>
                        
                    </div>
                    <!-- <div class="task-item">
                        <span class="item-name" >选择状态：</span>
                        <el-radio-group v-model="statusType" size="small" >
                            <el-radio label="1" border class="first">危险</el-radio>
                            <el-radio label="2" border class="second">一般</el-radio>
                            <el-radio label="3" border class="third">良好</el-radio>
                            
                        </el-radio-group>
                    </div> -->
                </div>
                <span slot="footer" class="dialog-footer">
                    
                    <el-button @click="KRVisible = false">取 消</el-button>
                    <el-button type="warning" @click="KROk" v-if="KRTitle=='新建KR'">创 建</el-button>
                    <el-button type="warning" @click="editKROk" v-if="KRTitle=='修改KR'">修 改</el-button>
                    
                </span>
            </el-dialog>
        </div>

        <!-- 修改O -->
        <div class="openTargetBox">
            <el-dialog
                title="修改OKR目标"
                :visible.sync="ObejectVisible"
                width="50%"
                center
                :before-close="OKRhandleClose">
                <div class="targetBody editKRBody taskBody">
                    <div class="targetO">
                        <span class="target-tip">O</span>
                        <span class="target-input currentO"><el-input
                                type="text"
                                placeholder="请输入目标名称"
                                v-model="ObjectName"
                                maxlength="30"
                                show-word-limit
                                clearable
                                @blur="checkedObjectName"
                                ></el-input>                                
                        </span>    
                        <span v-if="ObjectNameOk" style="font-size:12px;color:red;margin-left:50px">目标名称时必须填写的</span>  
                    </div>
                    <div class="progress task-item">     
                        <span class="progress">                 
                            <span class="progressBar">
                                <span>目标的完成进度：</span>
                                <el-slider
                                    v-model="ObjectProgress"
                                    show-input
                                    style="width:80%;margin-left:10px">
                                </el-slider>
                            </span>
                        </span>    
                    </div>
                   
                    
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="ObejectVisible = false">取 消</el-button>
                    <el-button type="warning" @click="editObjectComplete">修 改</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {postAction , getAction} from '@/utils/api/http.js'
    export default {
        data() {
            return {
                okrVisible:false,//同步okr的弹框是否可见
                targetVisible:false,//创建目标的弹框
                taskVisible:false,//创建的弹框是否可见
                syncPeopleValue:[],
                syncPeopleOptions:[],
                selectedPeople:[],
                okr:[],
                okrList:[],
                okrObject:{},
                taskInfoList:[],
                taskFourWeek:[],
                status:[],
                time:{},

                currentTask:0,//创建的类型 周1 月2
                taskTitle:'',//task的标题
                taskName:'',//名称
                taskDesc:'',//描述
                taskNameOk:false,//名称是否填写
                taskRange:"1",//等级
                taskProgress:0,//进度
                taskId:undefined,//id


                statusTitle:'',//状态模态框的标题
                statusVisible:false,
                statusName:'',
                statusNameOk:false,
                statusId:0,
                statusType:'2',

                KRTitle:'',//kr模态框的标题
                KRNameOk:false,
                KRVisible:false,
                KRName:'',
                KRProgress:0,
                KRId:0,

                percentage: 0,
                colors: [
                    {color: '#f56c6c', percentage: 30},
                    {color: '#e6a23c', percentage: 60},
                    {color: '#5cb87a', percentage: 80},
                    {color: '#5cb87a', percentage: 100}
                ],

                targetName:'',//目标的名字
                targetNameOk:false,
                KRList:[],
                krInfo:[],

                ObjectName:'',
                ObjectNameOk:false,
                ObjectProgress:0,
                currentObjId:0,
                ObejectVisible:false,
            }
        },
        watch: {
            
        },
        methods: {
            // okr同步事件
            okrSync(){
                this.okrVisible=true;
                 this.syncPeopleOptions=[];
                 //请求所有的公司人
                postAction('/okr/qywx/getUserListByName',{

                }).then((res)=>{                    
                    // console.log(res)
                    this.syncPeopleOptions=[]
                    if(res.success){
                        // this.syncPeopleOptions=res.result
                        res.result.forEach((item)=>{
                             this.syncPeopleOptions.push({
                                 label:item.name,
                                 value:item.userId
                             })
                        })
                    }
                    
                })
                //请求已经同步的人
                postAction('/okr/okr/getMemberListByUserId',{

                }).then((res)=>{
                    this.selectedPeople=[]
                    // console.log(res);
                    res.result.forEach((item)=>{
                        this.selectedPeople.push({
                                 label:item.name,
                                 value:item.userId
                        })
                    })
                })
            },
            syncOK(){
                postAction('/okr/okr/saveOkrMember',{
                    userIdList:this.syncPeopleValue
                }).then((res)=>{
                    // console.log(res)
                    if(res.success){
                        this.okrVisible = false
                    }
                })
            },
            OKRhandleClose(done) {
                this.$confirm('当前内容并未保存，确定关闭么？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            },
            // 创建目标
            createO(){
                this.targetVisible=true;
                this.KRList=[];
                this.targetName='';
            },
            addKR(){
                this.KRList.push({
                    krInfo:'',
                    completion:0
                })
            },
            createdeleteKR(item,index){
                console.log(item,index)
                this.KRList.splice(index,1);
                console.log(this.KRList)
            },
            checkedTargetName(){
                this.targetNameOk= this.targetName? false:true;
            },
            createOKRcomplete(){
                // console.log(item)
                this.checkedTargetName()
                if(!this.targetNameOk){
                    postAction('/okr/okr/insertObjectAndKrList',{
                        objectInfo:{
                            objectInfo:this.targetName,
                            completion:0
                        },
                        krList:this.KRList
                    }).then((res)=>{
                        console.log(res)
                        if(res.success){
                            this.targetVisible=false;
                            this.getOkrPageList();
                        }
                    })
                }
            },
            //修改OKR的O
            checkedObjectName(){
                this.ObjectNameOk= this.ObjectName? false:true;
            },
            changeObject(item){
                console.log(item)
                this.ObjectName=item.objectInfo;
                this.ObjectProgress=item.completion;
                this.currentObjId=item.id
                this.ObejectVisible=true;

            },
            editObjectComplete(){
                
                this.checkedObjectName();
                if(!this.ObjectNameOk){
                    postAction('/okr/okr/updateObject',{
                        objectInfo:{
                            id:this.currentObjId,
                            objectInfo:this.ObjectName,
                            completion:this.ObjectProgress
                        }
                    }).then((res)=>{
                        console.log(res);
                        
                        if(res.success){
                            this.$message({
                                message: '修改成功啦！',
                                type: 'success'
                            });
                          this.ObejectVisible=false;
                            this.getOkrPageList();
                        }
                        
                    })
                }
            },
            // 目标和kr创建成功提交
            targeOKROk(){
                 this.targetVisible=false;
            },
            // 创建任务
            createTask(val){
                this.taskTitle='创建任务'
                this.taskVisible=true;
                this.currentTask=val;
                this.taskName='';
                this.taskDesc='';
                this.taskRange='1';
                // this.taskProgress=0;
                // console.log(val,this.currentTask)
            },
            // 创建提交
            taskOk(){
                // this.taskVisible=false;
                this.taskNameOk=this.taskName? false:true;
                if(!this.taskNameOk){
                    
                    postAction('/okr/okr/insertTaskInfo',{
                        taskInfo:{
                            taskTitle:this.taskName,
                            taskInfo:this.taskDesc,
                            type:this.currentTask,
                            priority:this.taskRange
                        }
                    }).then((res)=>{
                        // console.log(res)
                        if(res.success){
                            this.taskVisible=false;
                            this.getOkrPageList();
                        }
                    })
                }

            },
            // 检查任务名字是否输入
            checkTaskName(){
                this.taskNameOk=this.taskName? false:true
            },
            checkStatusName(){
                this.statusNameOk=this.statusName? false:true
            },

            // 删除task
            deleteTask(val){
                // console.log(val)
                postAction('/okr/okr/deleteTaskInfoById',{
                    taskInfo:{
                        id:val.id
                    }
                }).then((res)=>{
                    // console.log(res)
                    if(res.success){
                        this.$message({
                            message: '删除成功啦！',
                            type: 'success'
                        });
                        this.getOkrPageList()
                    }
                })
            },

            // 编辑任务
            editTask(val){
                // console.log(val)
                this.taskTitle='修改任务';
                
                // this.currentTask=val;
                this.taskName=val.taskTitle;
                this.taskDesc=val.taskInfo;
                this.taskRange=val.priority;
                this.taskId=val.id;
                // this.taskProgress=0;
                this.taskVisible=true;

            },
            // 编辑提交
            editTaskOk(){
                this.taskNameOk=this.taskName? false:true;
                if(!this.taskNameOk){
                    
                    postAction('/okr/okr/updateTaskInfo',{
                        taskInfo:{
                            id:this.taskId,
                            taskTitle:this.taskName,
                            taskInfo:this.taskDesc,
                            priority:this.taskRange,
                        }
                    }).then((res)=>{
                        // console.log(res)
                        if(res.success){
                            this.$message({
                                message: '任务修改成功啦！',
                                type: 'success'
                            });
                           this.taskVisible=false;
                            this.getOkrPageList();
                        }else{
                            this.$message({
                                message: '任务修改失败',
                                type: 'error'
                            });
                        }
                    })
                }
            },

            createStatus(){
                this.statusVisible=true;
                this.statusTitle='创建状态指标';
                this.statusName='';
                this.statusType='2'
            },
            editSatus(item){
                // console.log(item);
                this.statusTitle='修改状态指标';
                this.statusName=item.content;
                this.statusType=item.type;
                this.statusId=item.id
                this.statusVisible=true;
            },
            // 创建状态指标提交
            statusOk(){
                this.checkStatusName();
                if(!this.statusNameOk){
                    postAction('/okr/okr/insertContentStatus',{
                        content:{
                            content:this.statusName,
                            type:this.statusType,
                            
                        }
                    }).then((res)=>{
                        // console.log(res)
                        if(res.success){
                            this.statusVisible=false;
                            this.getOkrPageList();
                        }
                    })
                }
                
            },
            // 修改状态指标提交
            editStatusOk(){
                this.checkStatusName();
                if(!this.statusNameOk){
                    postAction('/okr/okr/updateContentStatus',{
                        content:{
                            id:this.statusId,
                            content:this.statusName,
                            type:this.statusType,
                            
                        }
                    }).then((res)=>{
                        // console.log(res)
                        if(res.success){
                            this.$message({
                                message: '修改成功啦！',
                                type: 'success'
                            });
                            this.statusVisible=false;
                            this.getOkrPageList();
                        }
                        
                    })
                }
            },
            deleteStatusOk(){
                this.$confirm('即将删除本状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    postAction('/okr/okr/deleteContentStatusById',{
                        content:{
                            id:this.statusId,          
                        }
                    }).then((res)=>{
                        // console.log(res)
                  
                        if(res.success){
                        this.$message({
                            message: '删除成功啦！',
                            type: 'success'
                        });
                        this.statusVisible=false;
                        this.getOkrPageList()
                        }
                    })
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
                
            },

            deleteKR(item){
                console.log(item);
                postAction('/okr/okr/deleteKrById',{
                    krInfo:{
                        id:item.id
                    }
                }).then((res)=>{
                    console.log(res);
                    if(res.success){
                        this.$message({
                            message: '删除成功啦！',
                            type: 'success'
                        });
                    this.getOkrPageList();
                    }
                })

            },
            openCreateKR(){
                this.KRTitle='新建KR'
                this.KRVisible=true;
                this.KRName='';
                this.KRProgress=0;
            },
            checkKRName(){
                 this.KRNameOk=this.KRName? false:true
            },
            KROk(){
                this.checkKRName();
                if(!this.KRNameOk){
                    postAction('/okr/okr/insertOkrKrInfo ',{
                        krInfo:{
                            completion:this.KRProgress,
                            krInfo:this.KRName,
                            objectId:this.okrObject.id
                        }
                    }).then((res)=>{
                        // console.log(res)
                        if(res.success){
                            this.KRVisible=false;
                            this.getOkrPageList();
                        }
                    })
                }
            },
            editKR(item){
                console.log(item);
                this.KRTitle='修改KR';
                this.KRName=item.krInfo;
            
                this.KRId=item.id
                this.KRVisible=true;
                this.KRProgress=item.completion;
            },
            editKROk(){
                this.checkKRName();
                if(!this.KRNameOk){
                    postAction('/okr/okr/updateKr',{
                        krInfo:{
                            completion:this.KRProgress,
                            krInfo:this.KRName,
                            id:this.KRId
                        }
                    }).then((res)=>{
                        // console.log(res)
                        if(res.success){
                            this.KRVisible=false;
                            this.getOkrPageList();
                        }
                    })
                }
            },

            
            // 获取页面展示的list
            getOkrPageList(){
                postAction('/okr/okr/getOkrInfo',{}
                ).then((res)=>{
                    console.log(res);
                    if(res.success){
                        this.okr=res.result.okr;
                        this.taskInfoList=res.result.taskInfoList;
                        this.taskFourWeek=res.result.taskFourWeekList;
                        
                        this.time=res.result.time
                        res.result.status.forEach((item,index)=>{
                            if(item.type=='1'){
                                item.color='#CC3300';
                            }else if(item.type=='2'){
                                item.color='#FFCC33';
                            }else{
                                item.color='#99CC99';
                            }
                        })
                        this.status=res.result.status;
                        this.okrObject=res.result.okr[0].objectInfo;
                    }
                })
            }
        },

        mounted() {
            //请求list
            this.getOkrPageList();
        },
    }
</script>

<style lang="less" scoped>
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.okrPage{
    width: 100%;
    height: 100%;   
    background:#CC9966;
    box-sizing: border-box;
    position: relative;
    .topBox{
        height: 41px;
    }
    .title{
        height: 7%;
        margin-top: -61px;
        padding: 20px 0;
        margin-bottom: 20px;
        color:#fff;
        box-sizing: border-box;
    }
    .synchronization{
        position: absolute;
        top: 10px;
        right: 10px;
        .OKRSYNC{
            padding: 10px 15px;
        }
    }
    .okrBody{
        background: rgb(247,247,247);
        border-radius: 30px 30px 0 0;
        height: 93%;
        display: flex;
        flex-wrap:wrap;
        color: #000;
        .okrBox{
            width: 49.5%;
            height: 49%;
            margin-right: 1%;
            background: #fff;
            box-sizing: border-box;
            // overflow: auto;
            .okrBox-title{
                 text-align: left;
                 max-height: 20%;
                .top-title{
                    font-size: 20px;
                    margin: 8px 0;
                    padding:  0 20px;
                    // text-align: left;
                }
                .createTask{
                    font-size: 12px;
                    margin: 5px 0;
                    padding:  0 20px;
                    text-align: left;
                }
            }
            .okrbox-list{
                overflow: auto;
                max-height: 80%;
                // margin-top: 10px;
                text-align: left;
                font-size: 14px;
                color: #333;
                box-sizing: border-box;
                ul{
                    height: 100%;
                    overflow: auto
                }
                li{
                    height: 20px;
                    padding: 10px 15px 10px;
                    line-height: 20px;
                    border-bottom: 1px solid rgb(240, 242, 245);
                    cursor: pointer;
                    position: relative;
                    .list-opt{
                        display: none;
                        width: 50%;
                        position: absolute;
                        right: 10px;
                        top: 5px;
                        // display: flex;
                        justify-content:flex-end;
                        align-items:center
                    }
                    // .taskprogress{
                    //     width:10px;
                    //     height: 10px;
                    // }
                    .content{
                        display: inline-block;

                    }
                    .taskGrade{
                        display: inline-block;
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                        text-align: center;
                        box-sizing: border-box;
                        background-color: turquoise;
                        margin-right: 10px;
                    }
                }
                li:hover .list-opt{
                    display: flex;
                }
            }
            .status-list{
                overflow: auto;
                max-height: 80%;
                // margin-top: 10px;
                text-align: left;
                font-size: 14px;
                color: #333;
                box-sizing: border-box;
                // align-content: center;
                .status{
                    display: block;
                    // width: 20%;
                    width: auto;
                    min-width: 120px;
                    height: 60px; 
                    // padding: 10px 10px;
                    box-sizing: border-box;
                    justify-content: center;
                    display: flex;
                    
                    // margin-bottom: 10px;
                    .itemStatus{
                        display: inline-block;
                        height: 40px;
                        line-height: 40px;
                        padding: 0 15px;
                        border-radius: 10px;
                        margin: 0 auto;
                        cursor: pointer;
                    }
                }
            }
            .objectList{              
                text-align: left;
                overflow: auto;
                height: 75%;
                max-height: 85%;
                .OBox{
                    background: #fafbfc;
                    height: 62px;
                    margin-bottom: 8px;
                    line-height: 62px;
                    padding: 5px 20px;
                    // padding-bottom: 10px;
                    position: relative;
                    span{
                        display: inline-block;
                    }
                    .O-tip{
                        width: 36px;
                        height: 20px;
                        background: #50e3c2;
                        border-radius: 22px;
                        color: #fff;
                        margin-right: 8px;
                        font-size: 12px;
                        display: inline-block;
                        line-height: 20px;
                        text-align: center;
                        position: absolute;
                        top: 25px;
                    }
                    .O-content{
                        width: 60%;
                        white-space:nowrap;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        position: absolute;
                        top: 5px;
                        left: 70px;
                        cursor: pointer;
                    }
                    .O-opt{
                        position: absolute;
                        top: 5px;
                        right: 20px;
                    }
                }
                .KRBox{
                    background: #fafbfc;
                    font-size: 14px;
                    ul{
                        li{
                            width: 100%;
                            height: 40px;
                            padding: 5px 20px;
                            position: relative;
                            box-sizing:border-box;
                            line-height: 40px;
                            position: relative;
                            .KR-tip{
                                height: 20px;
                                line-height: 20px;
                                font-size: 12px;
                                color: rgb(46, 156, 255);
                                margin-right: 10px;
                                background: rgba(46, 156, 255, 0.1);
                                border-radius: 11.5px;
                                padding: 3px 9px;
                                position: absolute;
                                top: 8px;
                            }
                            .KR-content{
                                width:60% ;
                                display: inline-block;
                                overflow:hidden;
                                white-space:nowrap;
                                text-overflow:ellipsis;
                                height:100%;
                                line-height: 30px;
                                padding-left: 40px;
                            }
                            .KR-opt{
                                position: absolute;                              
                                right: 20px;
                                top:5px;
                                display: flex;
                                // display: none;
                                width: 30%;
                                position: absolute;
                                justify-content:flex-end;
                                align-items:center
                            }
                        }
                        li:hover .list-opt{
                            display: flex;
                        }
                    }
                }
            }
        }
        .first{
            border-radius:  30px 0 0 0;
            margin-bottom: 0.5%;
            .okrBox-title{
                border-bottom: 1px solid rgb(240, 242, 245);
            }
        }
        .second{
            margin-right: 0;
            border-radius: 0 30px 0 0;
            margin-bottom: 0.5%;            
        }
        .third{
            .okrBox-title{
                border-bottom: 1px solid rgb(240, 242, 245);
            }
        }
        .four{
            margin-right: 0
        }
    }
    .noOkr{
        display: block;
        // flex-direction: column;
        text-align: center;
        padding: 50px 0 0;
        box-sizing: border-box;
        background-color: #fafbfc;
        .noObject{
            font-family: PingFangSC-Regular;
            font-size: 20px;
            color: #bfc3c7;
            margin-bottom: 10px;
        }
        .kongbaiBackground{
            width: 766px;
            height: 443px;
            margin: auto;
            overflow: hidden;
            background: url(../assets/image/shili.png);
            background-size: 766px 443px;
            .shili{
                width: 100%;
            }
        }
    }
    .taskBody{
        padding: 0 20px;
        .task-item{
            margin-bottom: 15px;
            .item-name{
                font-size: 12px;
                color: #CC9966;
                margin-bottom: 5px;
                display:inline-block;
                margin-right: 15px;
            }
        }
    }
    .targetBody{
        .targetO{
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            flex-wrap: wrap;
            align-self: normal;
            padding: 10px;
            border-radius: 5px;
            background: rgb(29, 134, 240);
            margin-bottom: 30px;
            font-size: 18px;
            span{
                display: inline-block;
                font-size: 18px;
            }
            .target-tip{
                width: 35px;
                height: 35px;
                text-align: center;
                line-height: 36px;
                background-color: rgb(141, 200, 234);
                color: rgb(255, 255, 255);
                font-size: 12px;
                border-radius: 50%;
                font-size: 18px;
            }
            .target-input{
                width:90%;
                font-size: 18px;
            }
        }
        .addKR{
            padding: 0 80px;
            box-sizing: border-box;
        }
        .targetKR{
            display: flex;
            flex-wrap:  wrap;
            -webkit-box-align: center;
            align-items: center;
            align-self: normal;
            // padding: 10px;
            border-radius: 5px;
            // background: rgb(29, 134, 240);
            margin-bottom: 10px;
            .tip{
                width: 10%;
                text-align: center;
                // background-color: tomato;
                font-family: sans-serif;
                text-shadow: rgb(14, 17, 20) 0px 0px 0px;
                .kArEgh {
                    display: inline-block;
                    width: 6px;
                    height: 6px;
                    margin-right: 5px;
                    position: relative;
                    top: -3px;
                    background: rgb(29, 134, 240);
                }
            }
            .info{
                width: 90%;
                font-size: 16px;
                font-weight: 500;
                color: rgb(131, 137, 143);
                padding: 6px 0px 6px 0px;
                border-radius: 5px;
                background: rgb(245, 246, 250);
            }
            .progress{
                margin-top: 5px;
                display: flex;
                padding-left: 80px;
                box-sizing: border-box;
                width: 100%;
                font-size: 12px;
                position: relative;
                span{
                    display: inline-block;
                    line-height: 40px;
                }

                .progressBar{
                    width: 70%;
                    display: flex;
                }
                .creatOxia{
                    width: 85%;
                }
                .delete{
                    // width: 25px;
                    // height: 25px;
                    // font-size: 12px;
                    position:absolute;
                    right: 5px;
                    top: 5px;
                }
            }
        }
        
    }
    .editKRBody{
        .targetO{
            background-color:#CC9966 ;
            .target-tip{
                background-color: #99CC99	;
            }
            .target-input{
                color: #FFF;    
            }
        }
        .targetKR .progress{
            .progressBar{
                width: 90%;
                display: flex;
                .krtitle{
                    line-height: 40px;
                    display: inline-block;
                    width: 35%;
                }
            }
        }
        
        .currentO{    
            color: #fff;
            font-size: 16px;
            line-height: 40px;
            padding-left: 15px;
        }
    }
}
</style>
<style lang="less">
    .taskBody{
        .el-radio.is-bordered.is-checked {
            border-color: #CC9966;
        }
        .el-radio__input.is-checked .el-radio__inner {
            border-color: #CC9966;
            background: #CC9966;
        }
        .el-radio__input.is-checked+.el-radio__label {
            color: #CC9966;
        }
        .el-input.is-active .el-input__inner, .el-input__inner:focus {
            border-color: #CC9966;
            outline: 0;
        }
        .el-textarea__inner:focus {
            outline: 0;
            border-color: #CC9966;
        }
        .number__increase:hover {
            color: #CC9966;
        }
        .el-input-number__decrease:hover, .el-input-number__increase:hover {
            color: #CC9966;
        }
        .el-slider__input:hover,.el-input-number:hover,.el-input-number--small:hover{
            border-color: #CC9966;
            outline: 0;
        }
        .el-slider__button {
            width: 16px;
            height: 16px;
            border: 2px solid #CC9966;
            background-color: #FFF;
            border-radius: 50%;
            transition: .2s;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .el-slider__bar {
            height: 6px;
            background-color: #CC9966;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
            position: absolute;
        }
    }
    .StatusBody{
        .second.el-radio.is-bordered.is-checked {
            border-color: #FFCC33;
        }
        .second .el-radio__input.is-checked .el-radio__inner {
            border-color: #FFCC33;
            background: #FFCC33;
        }
        .second .el-radio__input.is-checked+.el-radio__label {
            color: #FFCC33;
        }
        .first.el-radio.is-bordered.is-checked {
            border-color: #CC3300;
        }
        .first .el-radio__input.is-checked .el-radio__inner {
            border-color: #CC3300;
            background: #CC3300;
        }
        .first .el-radio__input.is-checked+.el-radio__label {
            color: #CC3300;
        }
        .third.el-radio.is-bordered.is-checked {
            border-color: #99CC99;
        }
        .third .el-radio__input.is-checked .el-radio__inner {
            border-color: #99CC99;
            background: #99CC99;
        }
        .third .el-radio__input.is-checked+.el-radio__label {
            color: #99CC99;
        }
    }
    .targetBody{
        .el-input__inner{
            border: none;
            background-color:transparent;
            color: #fff;
        }
        .el-input .el-input__count .el-input__count-inner {
            background-color: transparent;
            line-height: initial;
            display: inline-block;
            padding: 0 5px;
            color:#FFF
        }
        
        .targetKR{
           .el-input__inner{
            border: none;
            background-color:transparent;
            color: rgb(131, 137, 143);
            }
            .el-input .el-input__count .el-input__count-inner {
                background-color: transparent;
                line-height: initial;
                display: inline-block;
                padding: 0 5px;
                color:rgb(131, 137, 143);
            } 
            .progress{
                .el-input-number__decrease{                  
                    border-right: none; 
                }
                .el-input-number__increase{
                    border-left: none;
                }
                .el-input-number__decrease,.el-input-number__increase {
                    background: none;
                }
            }
            .el-input--suffix .el-input__inner {
                padding-right: 66px;
            }
           
        }
        .el-input--suffix .el-input__inner {
            padding-right: 50px;
        }
    }
    .editKRBody{
        .progress{
            .el-input-number__decrease{                  
                border-right: none; 
            }
             .el-input-number__increase{
                 border-left: none;
             }
            .el-input-number__decrease, .el-input-number__increase {
                background: none;
            }
            .el-input__inner{
                border: none;
                background-color:transparent;
                color: rgb(131, 137, 143);
            }
            .el-input .el-input__count .el-input__count-inner {
                background-color: transparent;
                line-height: initial;
                display: inline-block;
                padding: 0 5px;
                // color:rgb(131, 137, 143);
            } 
        }
        .el-input__inner{
            border: none;
            background-color:transparent;
            // color: rgb(131, 137, 143);
        }
        .el-input .el-input__count .el-input__count-inner {
            background-color: transparent;
            line-height: initial;
            display: inline-block;
            padding: 0 5px;
            // color:rgb(131, 137, 143);
        } 
        .el-input_icon .el-iocn-circle-close .el-input_clear{
            color:#fff
        }
    }

    
</style>