<template>
  <div class="okrPage" v-loading='loading'>
    <div class="topBox"></div>
    <div class="title">
      <!-- <p>{{time.year}}年第{{time.quarter}}季度OKR</p> -->
      <el-select v-model="yearValue"  placeholder="年份" @change="yearChange"  style="width:80px"  >
          <el-option
          v-for="item in yearsOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"        
          >
          </el-option>
      </el-select>
      <span>年</span>
      <el-select v-model="cycleValue"  placeholder="季度" @change="cycleChange">
        <el-option
        v-for="item in cycleOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"   
                           
        >
        </el-option>
      </el-select>
      
    </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>
          <div class="nowSelect">
            <div class="nowSelectLeft">现有同步人：</div>
            <div class="nowSelectRight">
              <span
                v-for="(item,index) in selectedPeople"
                :key="index"
                style="margin-right:10px"
                class="nowSelectItem"
              >
                <el-link type="success" style="margin-top:-3px" class="nowSelectItemLink">
                  {{item.label}}
                  <el-popconfirm title="确定移除该同步人吗？" @onConfirm="deletePeople(item)">
                    <span slot="reference" class="deleteSelectedPeople">
                      <i class="el-icon-circle-close"></i>
                    </span>
                  </el-popconfirm>
                </el-link>
              </span>
            </div>
          </div>

          <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)" :disabled='(time.year!=time.currentYear)||(time.quarter!=time.currentQuarter)'>
            <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}} -->
                    <img
                      src="../assets/image/1.png"
                      alt
                      v-if="item.priority=='1'"
                      class="priorityIMg"
                    />
                    <img
                      src="../assets/image/2.png"
                      alt
                      v-if="item.priority=='2'"
                      class="priorityIMg"
                    />
                    <img
                      src="../assets/image/3.png"
                      alt
                      v-if="item.priority=='3'"
                      class="priorityIMg"
                    />
                  </span>
                  <span class="taskTitle">
                    {{item.taskTitle}}
                    <span
                      v-for="(element) in item.remindVOS"
                      :key="element.krId"
                      class="remindSpan"
                    >@<span v-if="element.remindId=='10086'">所有人</span><span v-else>{{element.name}}</span> 
                    </span>
                  </span>
                </span>
              </el-popover>
              <div class="list-opt" v-show="(time.year==time.currentYear)&&(time.quarter==time.currentQuarter)">
                <!-- <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" :disabled='(time.year!=time.currentYear)||(time.quarter!=time.currentQuarter)'>
            <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}}
              <!-- <el-button type="warning" icon="el-icon-edit" size='mini' circle></el-button> -->
              <span class="edit" v-show="(time.year==time.currentYear)&&(time.quarter==time.currentQuarter)">
                <i class="el-icon-edit"></i>
              </span>
            </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"
                  :title="'KR：'+ele.krInfo"
                  :content="'详细描述：'+(ele.krDesc|| '暂无')"                 
                >
                  <span slot="reference" class="content">
                    <span class="KR-content">
                      {{ele.krInfo}}
                      <span
                        v-for="element in ele.remindVOS"
                        :key="element.remindId"
                        class="remindSpan"
                      >@<span v-if="element.remindId=='10086'">所有人</span><span v-else>{{element.name}}</span> 
                      </span>
                    </span>
                  </span>
                </el-popover>

                <span class="KR-opt">
                  <span style="width:50%">
                    <el-progress :percentage="ele.completion" :color="itemColor"></el-progress>
                  </span>
                  <el-button
                    type="warning"
                    icon="el-icon-edit"
                    size="mini"
                    circle
                    @click="editKR(ele)"
                    style="margin-right:5px"
                    v-show="(time.year==time.currentYear)&&(time.quarter==time.currentQuarter)"
                  ></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
                      v-show="(time.year==time.currentYear)&&(time.quarter==time.currentQuarter)"
                    ></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)" :disabled='(time.year!=time.currentYear)||(time.quarter!=time.currentQuarter)'>
            <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" class="content">
                  <span class="taskGrade">
                    <!-- P{{item.priority}} -->
                    <img
                      src="../assets/image/1.png"
                      alt
                      v-if="item.priority=='1'"
                      class="priorityIMg"
                    />
                    <img
                      src="../assets/image/2.png"
                      alt
                      v-if="item.priority=='2'"
                      class="priorityIMg"
                    />
                    <img
                      src="../assets/image/3.png"
                      alt
                      v-if="item.priority=='3'"
                      class="priorityIMg"
                    />
                  </span>
                  <span class="taskTitle">
                    {{item.taskTitle}}
                    <span
                      v-for="(element) in item.remindVOS"
                      :key="element.krId"
                      class="remindSpan"
                    >@{{element.name}}</span>
                  </span>
                </span>
              </el-popover>
              <div class="list-opt" v-show="(time.year==time.currentYear)&&(time.quarter==time.currentQuarter)">
                <!-- <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" :disabled='(time.year!=time.currentYear)||(time.quarter!=time.currentQuarter)'>
            <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>
        <!-- {{time}} -->
      <p class="noObject">{{time.quarter==time.currentQuarter&&time.year==time.currentYear?'请先制定目标，才能进行okr工作板管理':'该季度暂无OKR，换个季度试试吧'}}</p>
      <p v-show="time.quarter==time.currentQuarter&&time.year==time.currentYear">
        <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">
            <div class="kr" style="display:flex;align-items: center;">
                <span class="tip">
                  <span class="sc-bQduHL kArEgh"></span> KR
                </span>
                <span class="info">
                  <el-input
                    type="text"
                    placeholder="请输入关键结果"
                    v-model="item.krInfo"
                    clearable
                    maxlength="50"
                    show-word-limit
                    
                  ></el-input>
                </span>
                  
              </div>

              <div class="krdecs" style="margin-top:15px;display:flex;align-items: center;">
                <span class="tip">
                  <!-- <span class="sc-bQduHL kArEgh"></span> 描述 -->
                  
                </span>
                <span class="info">
                  <el-input
                    type="textarea"
                    placeholder="您可对KR做进一步详细描述"
                    v-model="item.krDesc"
                    maxlength="100"
                    show-word-limit
                    clearable
                    size="small"
                  ></el-input>
                </span>
              </div>
            <!-- <span class="tip">
              <span class="sc-bQduHL kArEgh"></span> KR
            </span>
            <span class="info">
              <el-input type="text" placeholder="请输入KR名称" 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 class="task-item">
              <span class="item-name">选择权限：</span>
              <el-radio-group v-model="item.KRPower" size="small" @change="ItemKRPowerChange(item)">
                <el-radio label="1" border>公开</el-radio>
                <el-radio label="2" border>私密</el-radio>
                <el-radio label="3" border>指定人可见</el-radio>
              </el-radio-group>
            </div>

            <div class="task-item" v-if="item.KRPower=='1'">
              <span class="item-name">提醒谁看：</span>
              <treeselect
                v-model="item.KRremindValue"
                :multiple="true"
                :options="options"
                :clear-on-select="clearOnSelect"
                placeholder="选择@的人或者部门"
                style="width:80%;display:inline-block;"
              />
            </div>
            <div class="task-item" v-if="item.KRPower=='3'">
              <span class="item-name">指定可见：</span>
              <treeselect
                v-model="item.KRvisiblePerson"
                :multiple="true"
                :options="options"
                :clear-on-select="clearOnSelect"
                placeholder="选择指定的可见人或者部门"
                @input="selectChange(item)"
                style="width:80%;display:inline-block;"
              />
            </div>
            <div class="task-item" v-if="item.KRPower=='3'">
              <span class="item-name">提醒谁看：</span>
              <span class="display:block" v-if="item.KRTag&&item.KRTag.length>0">
                <el-tag
                  v-for="(tag,index) in item.KRTag"
                  :key="tag.id"
                  closable
                  type="warning"
                  @close="KRTagClose(tag,index,item)"
                  style="margin-right:8px;margin-bottom:8px"
                >{{tag.label}}</el-tag>
              </span>
            </div>
          </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="50"
              show-word-limit
              style="width:100%"
              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="100"
              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 label="3" border>P3</el-radio>
            </el-radio-group>
          </div>
          <div class="task-item">
            <span class="item-name">选择权限：</span>
            <el-radio-group v-model="taskPower" size="small" @change="taskPowerChange">
              <el-radio label="1" border>公开</el-radio>
              <el-radio label="2" border>私密</el-radio>
              <el-radio label="3" border>指定人可见</el-radio>
            </el-radio-group>
          </div>

          <div class="task-item" v-if="taskPower=='1'">
            <span class="item-name">提醒谁看：</span>
            <treeselect
              v-model="remindValue"
              :multiple="true"
              :options="options"
              :clear-on-select="clearOnSelect"
              placeholder="选择@的人或者部门"
              style="width:80%;display:inline-block;"
            />
          </div>
          <div class="task-item" v-if="taskPower=='3'">
            <span class="item-name">指定可见：</span>
            <treeselect
              v-model="visiblePerson"
              :multiple="true"
              :options="options"
              :clear-on-select="clearOnSelect"
              placeholder="选择指定的可见人或者部门"
              style="width:80%;display:inline-block;"
            />
          </div>
          <div class="task-item" v-if="taskPower=='3'">
            <span class="item-name">提醒谁看：</span>
            <span class="display:block">
              <el-tag
                v-for="(tag,index) in taskTag"
                :key="tag.id"
                closable
                type="warning"
                @close="handleClose(tag,index)"
                style="margin-right:8px;margin-bottom:8px"
              >{{tag.label}}</el-tag>
            </span>
          </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="50%"
        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">
              <div class="kr" style="display:flex;align-items: center;">
                <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
                  ></el-input>
                </span>
                  
              </div>
              <span
                  style="font-size:12px;color:#CC6666; margin-left:10%;display:block;margin-top:5px"
                  v-if="KRNameOk"
                >KR是必须得填写的哦！</span>
              <div class="krdecs" style="margin-top:15px;display:flex;align-items: center;">
                <span class="tip">
                  <!-- <span class="sc-bQduHL kArEgh"></span> 描述 -->
                  
                </span>
                <span class="info">
                  <el-input
                    type="textarea"
                    placeholder="您可对KR做进一步详细描述"
                    v-model="KRDesc"
                    maxlength="100"
                    show-word-limit
                    clearable
                    size="small"
                  ></el-input>
                </span>
              </div>
              
              
              

              <span class="progress">
                <span class="krtitle">KR的完成进度：</span>
                <span class="progressBar">
                  <el-slider v-model="KRProgress" show-input style="width:100%;margin-left:10px"></el-slider>
                </span>
              </span>
              <div class="task-item">
                <span class="item-name">选择权限：</span>
                <el-radio-group v-model="KRPower" size="small" @change="KRPowerChange">
                  <el-radio label="1" border>公开</el-radio>
                  <el-radio label="2" border>私密</el-radio>
                  <el-radio label="3" border>指定人可见</el-radio>
                </el-radio-group>
              </div>

              <div class="task-item" v-if="KRPower=='1'">
                <span class="item-name">提醒谁看：</span>
                <treeselect
                  v-model="KRremindValue"
                  :multiple="true"
                  :options="options"
                  :clear-on-select="clearOnSelect"
                  placeholder="选择@的人或者部门"
                  style="width:80%;display:inline-block;"
                />
              </div>
              <div class="task-item" v-if="KRPower=='3'">
                <span class="item-name">指定可见：</span>
                <treeselect
                  v-model="KRvisiblePerson"
                  :multiple="true"
                  :options="options"
                  :clear-on-select="clearOnSelect"
                  placeholder="选择指定的可见人或者部门"
                  style="width:80%;display:inline-block;"
                />
              </div>
              <div class="task-item" v-if="KRPower=='3'">
                <span class="item-name">提醒谁看：</span>
                <span class="display:block">
                  <el-tag
                    v-for="(tag,index) in KRTag"
                    :key="tag.id"
                    closable
                    type="warning"
                    @close="KRhandleClose(tag,index)"
                    style="margin-right:8px;margin-bottom:8px"
                  >{{tag.label}}</el-tag>
                </span>
              </div>
            </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
                focus
                @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" style="display:block">
            <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 { TreeSelect } from 'ant-design-vue';
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { postAction, getAction } from "@/utils/api/http.js";
// const SHOW_PARENT = TreeSelect.SHOW_PARENT;
let cycleOptions=[
    // {
    //     label:'全部',
    //     value:0
    // },
    {
        label:'第一季度',
        value:1
    },
    {
        label:'第二季度',
        value:2
    },
    {
        label:'第三季度',
        value:3
    },
    {
        label:'第四季度',
        value:4
    },
]
export default {
  components: { Treeselect },
  data() {
    return {
      yearValue:undefined,
      cycleValue:undefined,
      yearsOptions:[],
      cycleOptions,
       clearOnSelect: true,
      loading:false,
      options: [],
      // options2,
      taskTag: [],
      KRTag: [],
      remindValue: [], //@的人 任务
      visiblePerson: [], //指定可见人  任务
      // SHOW_PARENT,

      KRPower: "1", //kr的权限
      KRremindValue: [], //kr的提醒人
      KRvisiblePerson: [], //kr的可见人

      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", //等级
      taskPower: "1", //权限 1公开2私密3指定
      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,
      KRDesc:'',

      percentage: 0,
      colors: [
        { color: "#f56c6c", percentage: 30 },
        { color: "#e6a23c", percentage: 60 },
        { color: "#5cb87a", percentage: 80 },
        { color: "#5cb87a", percentage: 100 },
      ],
      itemColor: [
          {color: '#f56c6c', percentage: 30},
          {color: '#e6a23c', percentage: 60},
          {color: '#cc9966', percentage: 90},
          {color: '#cc9966', percentage: 100},
          {color: '#5cb87a', percentage: 100}
      ],
      targetName: "", //目标的名字
      targetNameOk: false,
      KRList: [],
      krInfo: [],

      ObjectName: "",
      ObjectNameOk: false,
      ObjectProgress: 0,
      currentObjId: 0,
      ObejectVisible: false,

      currentKRitem:{},
      currentTaskitem:{},
    };
  },
  watch: {
    visiblePerson: {
      deep: true,
      handler(n, o) {
        this.taskTag = [];
        //    this.taskTag=JSON.parse(JSON.stringify(n))
        console.log(n, o);
        if (n) {
          n.map((item) => {
            this.taskTag.push({
              id: item,
              label: this.filterName(item),
            });
          });
        }
        if(this.currentTaskitem.id){
            if(this.currentTaskitem.permission==3){
              if (this.currentTaskitem.remindVOS) {
                this.taskTag = [];
                this.currentTaskitem.remindVOS.forEach((item) => {
                  this.taskTag.push({
                    id: item.remindId,
                    label:item.name,
                  });
                });
              }

            }
        }

      },
    },
    KRvisiblePerson: {
      deep: true,
      handler(n, o) {
        this.KRTag = [];
        //    this.taskTag=JSON.parse(JSON.stringify(n))
        if (n) {
          n.map((item) => {
            this.KRTag.push({
              id: item,
              label: this.filterName(item),
            });
          });
        }
        if(this.currentKRitem.id){
            if(this.currentKRitem.permission==3){
            
            if (this.currentKRitem.remindVOS) {
              this.KRTag = [];
              this.currentKRitem.remindVOS.forEach((ele) => {
                this.KRTag.push({
                  id: ele.remindId,
                  label:ele.name,
                });
              });
            }

          }
        }
      },
    },
  },
  methods: {
    taskPowerChange(val) {
      console.log(val);

      if (this.taskPower == "1") {
        this.remindValue = [];
      } else if (this.taskPower == "3") {
        this.visiblePerson = [];
        this.taskTag = [];
      } else if (this.taskPower == "2") {
        this.visiblePerson = [];
        this.taskTag = [];
        this.remindValue = [];
      }
    },
    KRPowerChange(val) {
      console.log(val);

      if (this.KRPower == "1") {
        this.KRremindValue = [];
      } else if (this.KRPower == "3") {
        this.KRvisiblePerson = [];
        this.KRTag = [];
      } else if (this.KRPower == "2") {
        this.KRvisiblePerson = [];
        this.KRTag = [];
        this.KRremindValue = [];
      }
    },
    handleClose(tag, index) {
      this.taskTag.splice(index, 1);
      // this.taskTag.splice(this.taskTag.indexOf(tag), 1);
      console.log(this.taskTag);
    },
    KRhandleClose(tag, index) {
      this.KRTag.splice(index, 1);
      // this.taskTag.splice(this.taskTag.indexOf(tag), 1);
      console.log(this.KRTag);
    },
    KRTagClose(tag, index, item) {
      console.log(tag, index, item);
      item.KRTag.splice(index, 1);
      // this.KRList.forEach(ele=>{

      // })
    },
    //查找人名-
    filterName(id) {
      let JSONArr = JSON.stringify(this.options);

      let arr = JSONArr.split(`"value":"${id}","label":"`)[1].split('"')[0];
      // console.log(arr)
      return arr;
    },
    filterOption(input, option) {
      console.log(input, option);
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 删除当前同步人
    deletePeople(item) {
      console.log(item);
      postAction("/okr/okr/deleteOkrMember", {
        memberId: item.value,
      }).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message.success("同步人删除成功！");
          //请求已经同步的人
          postAction("/okr/okr/getMemberListByUserId", {}).then((res) => {
            this.selectedPeople = [];
            // console.log(res);
            res.result.forEach((item) => {
              this.selectedPeople.push({
                label: item.name,
                value: item.userId,
              });
            });
          });
        } else {
          this.$message.success("同步人删除失败，稍后再试");
        }
      });
    },
    // 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() {
      if (this.syncPeopleValue.length > 0) {
        postAction("/okr/okr/saveOkrMember2", {
          userIdList: this.syncPeopleValue,
        }).then((res) => {
          // console.log(res)
          if (res.success) {
            this.okrVisible = false;
            this.syncPeopleValue = [];
          } else {
            this.$message.error("同步失败！");
          }
        });
      } else {
        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,
        KRPower: "1",
        KRremindValue: [],
        KRvisiblePerson: [],
        KRTag: [],
      });
    },
    createdeleteKR(item, index) {
      // console.log(item,index)
      this.KRList.splice(index, 1);
      // console.log(this.KRList)
    },
    checkedTargetName() {
      this.targetNameOk = this.targetName ? false : true;
    },
    // 每个KR中的指定人改变
    selectChange(item) {
      console.log(item);
      item.KRTag = [];
      this.$nextTick(() => {
        item.KRvisiblePerson.map((ele) => {
          item.KRTag.push({
            id: ele,
            label: this.filterName(ele),
          });
          this.$forceUpdate();
          if (item.KRTag.length == 0) {
            item.KRTag = [];
            this.$forceUpdate();
          }
        });
      });
    },
    ItemKRPowerChange(item){
      console.log(item);
      if (item.KRPower == "1") {
        item.KRremindValue = [];
      } else if (item.KRPower == "3") {
        item.KRvisiblePerson = [];
        item.KRTag = [];
      } else if (item.KRPower == "2") {
        item.KRvisiblePerson = [];
        item.KRTag = [];
        item.KRremindValue = [];
      }
      this.$forceUpdate()
    },
    createOKRcomplete() {
      console.log(this.KRList);
      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)
      if(this.time.year==this.time.currentYear&&this.time.quarter==this.time.currentQuarter){
        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.taskPower = "1";
      this.visiblePerson = [];
      this.remindValue = [];
      this.taskTag = [];
      // this.taskProgress=0;
      // console.log(val,this.currentTask)
    },
    // 创建提交
    taskOk() {
      // this.taskVisible=false;
      console.log(this.visiblePerson, this.remindValue);
      this.taskNameOk = this.taskName ? false : true;

      if (!this.taskNameOk) {
        if (this.taskPower == "3") {
          this.remindValue = [];
          this.taskTag.forEach((item) => {
            this.remindValue.push(item.id);
          });
        }
        postAction("/okr/okr/insertTaskInfo", {
          taskInfo: {
            taskTitle: this.taskName,
            taskInfo: this.taskDesc,
            type: this.currentTask,
            priority: this.taskRange,
            permission: this.taskPower,
            publicIds: this.visiblePerson,
            remindIds: this.remindValue,
          },
        }).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) {
      this.currentTaskitem=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.taskPower = val.permission + "";
      
      this.visiblePerson = val.publicIds;
      // this.remindValue=val.remindIds
      if (val.remindVOS) {
        this.remindValue = [];
        val.remindVOS.forEach((item) => {
          this.remindValue.push(item.remindId);
        });
      }
      if (val.publicVOS) {
        this.visiblePerson = [];
        val.publicVOS.forEach((item) => {
          this.visiblePerson.push(item.publicId);
        });
      }

      this.$nextTick(()=>{
        this.currentTaskitem={}
      })
      
      // this.taskProgress=0;
      this.taskVisible = true;
    },
    // 编辑提交
    editTaskOk() {
      this.taskNameOk = this.taskName ? false : true;
      if (!this.taskNameOk) {
        if (this.taskPower == "3") {
          this.remindValue = [];
          this.taskTag.forEach((item) => {
            this.remindValue.push(item.id);
          });
        }
        postAction("/okr/okr/updateTaskInfo", {
          taskInfo: {
            id: this.taskId,
            taskTitle: this.taskName,
            taskInfo: this.taskDesc,
            priority: this.taskRange,
            permission: this.taskPower,
            publicIds: this.visiblePerson,
            remindIds: this.remindValue,
          },
        }).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);
      if(this.time.year==this.time.currentYear&&this.time.quarter==this.time.currentQuarter){
        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;
      this.KRPower = "1"; //kr的权限
      this.KRremindValue = []; //kr的提醒人
      this.KRvisiblePerson = []; //kr的可见人
      this.KRDesc='';
    },
    checkKRName() {
      this.KRNameOk = this.KRName ? false : true;
    },
    KROk() {
      this.checkKRName();
      if (!this.KRNameOk) {
        if (this.KRPower == "3") {
          this.KRremindValue = [];
          this.KRTag.forEach((item) => {
            this.KRremindValue.push(item.id);
          });
        }
        postAction("/okr/okr/insertOkrKrInfo ", {
          krInfo: {
            completion: this.KRProgress,
            krInfo: this.KRName,
            krDesc:this.KRDesc,
            objectId: this.okrObject.id,
            permission: this.KRPower,
            publicIds: this.KRvisiblePerson,
            remindIds: this.KRremindValue,
          },
        }).then((res) => {
          // console.log(res)
          if (res.success) {
            this.KRVisible = false;
            this.getOkrPageList();
          }
        });
      }
    },
    editKR(item) {
      console.log(item);
      this.currentKRitem=item
      this.KRTitle = "修改KR";
      this.KRName = item.krInfo;
      this.KRDesc= item.krDesc
      this.KRId = item.id;
      this.KRVisible = true;
      this.KRProgress = item.completion;

      this.KRPower = item.permission + ""; //kr的权限
      console.log(this.KRPower)
      // this.KRremindValue=item.remindIds//kr的提醒人
      // this.KRvisiblePerson=item.publicIds//kr的可见人
      this.KRremindValue = [];
      if (item.remindVOS) {
        item.remindVOS.forEach((ele) => {
          this.KRremindValue.push(ele.remindId);
        });
      }
      this.KRvisiblePerson = [];
      if (item.publicVOS) {
        item.publicVOS.forEach((ele) => {
          this.KRvisiblePerson.push(ele.publicId);
        });
      }
      this.$nextTick(()=>{
        this.currentKRitem={}
      })
    },
    editKROk() {
      this.checkKRName();
      if (!this.KRNameOk) {
        if (this.KRPower == "3") {
          this.KRremindValue = [];
          this.KRTag.forEach((item) => {
            this.KRremindValue.push(item.id);
          });
        }
        postAction("/okr/okr/updateKr", {
          krInfo: {
            completion: this.KRProgress,
            krInfo: this.KRName,
            id: this.KRId,
            permission: this.KRPower,
            publicIds: this.KRvisiblePerson,
            remindIds: this.KRremindValue,
            krDesc:this.KRDesc,
          },
        }).then((res) => {
          // console.log(res)
          if (res.success) {
            this.KRVisible = false;
            this.getOkrPageList();
          }
        });
      }
    },
    yearChange(key){        
      this.getOkrPageList()
    },
    cycleChange(key){
        
        if(this.yearValue=='' || this.yearValue==undefined){
            this.$message({
                type:'warning',
                message:'记得先选择年份哟~'
            });
            this.cycleValue=undefined
        }else{
            this.getOkrPageList()
        }
        
    },
    // 获取页面展示的list
    getOkrPageList() {
      this.loading=true;
      postAction("/okr/okr/detail", {
        year:this.yearValue,
        quarter:this.cycleValue
      }).then((res) => {
        // console.log(res);
        this.loading=false;
        if (res.success) {
          if(res.result.okr){
            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;

            this.yearValue=res.result.time.year;
            this.cycleValue=res.result.time.quarter;
          }else{
            this.okr={};
            this.taskInfoList = {};
            this.taskFourWeek = {};

            this.time = res.result.time;
            
            this.status = {}
            this.okrObject = {}
          }
        }
      });
    },

    // h获取公司的部门和人员
    getPeople() {
      getAction("/okr/department/queryTreeList", {}).then((res) => {
        console.log(res);
        // this.options=res.result[0].children;
        this.options = this.HandleChildren(res.result[0].children);
      });
    },
    // 处理children的值
    HandleChildren(arr) {
      let newArr = arr.map((item) => {
        if (item.leaf) {
          //    item.children=undefined
          delete item.children;
        } else {
          this.HandleChildren(item.children);
        }
        return item;
      });
      return newArr;
    },
  },

  mounted() {
    //请求list
    this.getOkrPageList();
    this.getPeople();
    postAction('/okr/okr/getObjectYear ',{           
        }).then((res)=>{
            // console.log(res);
            this.yearsOptions=[]
            res.result.forEach((item)=>{
                this.yearsOptions.push({
                    label: `${item}`,
                    value:item
                })
            })
        })
  },
};
</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;
  .nowSelect {
    // display: flex;
    padding-top: 5px;
    margin-bottom: 15px;
    overflow: hidden;
  }
  .nowSelectLeft {
    width: 84px;
    float: left;
    // display: inline-block;
  }
  .nowSelectRight {
    float: left;
    width: 400px;
  }
  .nowSelectItem {
    position: relative;
    // width: 70px;
    text-align: center;
    display: inline-block;
    margin-bottom: 6px;
  }
  .nowSelectItemLink {
    position: relative;
    padding-right: 15px;
  }
  .deleteSelectedPeople {
    display: none;
    position: absolute;
    right: -1px;
    top: -3px;
    font-size: 13px;
  }
  .nowSelectItem:hover .deleteSelectedPeople {
    display: block;
  }
  .topBox {
    height: 41px;
  }
  .title {
    height: 7%;
    margin-top: -50px;
    padding: 20px 0;
    margin-bottom: 9px;
    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 {
        width: 100%;
        overflow: auto;
        max-height: 80%;
        // margin-top: 10px;
        text-align: left;
        font-size: 14px;
        color: #333;
        box-sizing: border-box;
        ul {
          width: 100%;
          height: 100%;
          overflow: auto;
        }
        li {
          width: 100%;
          height: 41px;
          padding: 8px 15px 8px;
          line-height: 20px;
          border-bottom: 1px solid rgb(240, 242, 245);
          box-sizing: border-box;
          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;
            width: 100%;
          }
          .taskGrade {
            display: inline-block;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            text-align: center;
            box-sizing: border-box;
            // background-color: turquoise;
            margin-right: 10px;
          }
          .priorityIMg {
            width: 25px;
            height: 25px;
          }
          .taskTitle {
            display: inline-block;
            width: 70%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 25px;
            line-height: 25px;
            .remindSpan {
              color: #2e9cff;
              display: inline-block;
              margin-right: 3px;
              cursor: pointer;
            }
          }
        }
        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;
            .edit {
              margin-left: 5px;
              display: none;
            }
          }
          .O-content:hover .edit {
            display: inline-block;
          }
          .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;
                .remindSpan {
                  color: #2e9cff;
                  display: inline-block;
                  margin-right: 3px;
                  cursor: pointer;
                }
              }
              .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 {
      display: flex;
      margin-bottom: 15px;
      vertical-align: middle;
      .item-name {
        font-size: 12px;
        color: #cc9966;
        flex-shrink: 0;
        display: block;
        margin-right: 15px;
        width: 60px;
        line-height: 32px;
      }
    }
  }
  .targetBody {
    .targetO {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      flex-wrap: wrap;
      align-self: normal;
      padding: 10px;
      border-radius: 5px;
      background: #cc9966;
      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: #9acb9a;
        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 {
      width: 100%;
      // 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: 15px;
        margin-bottom: 10px;
        display: flex;
        padding-left: 10%;
        box-sizing: border-box;
        width: 100%;
        font-size: 12px;
        position: relative;
        span {
          display: inline-block;
          line-height: 40px;
        }
        .krtitle {
          color: #cc9966;
          width: 90px;
           flex-shrink: 0;

          // margin-right: 15px;
        }
        .progressBar {
          width: 70%;
          display: flex;
        }
        .creatOxia {
          width: 85%;
        }
        .delete {
          // width: 25px;
          // height: 25px;
          // font-size: 12px;
          position: absolute;
          right: 5px;
          top: 5px;
        }
      }

      .task-item {
        display: flex;
        width: 100%;
        margin-bottom: 20px;
        padding-left: 10%;
        vertical-align: middle;
        .item-name {
          font-size: 12px;
          color: #cc9966;
          flex-shrink: 0;
          display: block;

          width: 90px;
          line-height: 32px;
        }
      }
    }
  }
  .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;
    }
  }
  .openKRBox {
    .targetKR {
      .progress {
        margin-top: 15px;
        margin-bottom: 10px;
        display: flex;
        padding-left: 10%;
        box-sizing: border-box;
        width: 100%;
        font-size: 12px;
        position: relative;
        span {
          display: inline-block;
          line-height: 40px;
        }
        .krtitle {
          color: #cc9966;
          width: 90px;
          flex-shrink: 0;
          margin-right: 15px;
        }
        .progressBar {
          // width: 70%;
          display: flex;
        }
        .creatOxia {
          width: 85%;
        }
        .delete {
          // width: 25px;
          // height: 25px;
          // font-size: 12px;
          position: absolute;
          right: 5px;
          top: 5px;
        }
      }
      .task-item {
        display: flex;
        width: 100%;
        margin-bottom: 20px;
        padding-left: 10%;
        vertical-align: middle;
        .item-name {
          font-size: 12px;
          color: #cc9966;
          flex-shrink: 0;
          display: block;

          width: 90px;
          line-height: 32px;
        }
      }
    }
  }
}
</style>
<style lang="less">
.el-select-dropdown__item {
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
  }
  .el-select-dropdown{
    position: absolute;
    top: 88px;
    // left: 1082px !important;
  }
.okrPage{
  .title{

  .el-input__inner {
    -webkit-appearance: none;
    background-color: transparent;
    background-image: none;
    border-radius: 4px;
    border: none;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 110px;
    // text-align: center;
  }
  .el-select .el-input .el-select__caret {
    color: #fff;
    font-size: 14px;
    transition: transform .3s;
    transform: rotateZ( 180deg);
    cursor: pointer;
  }
      
  }
}
.openTargetBox {
  .el-button--text {
    color: #cc9966;
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
  }
  .el-button--primary {
    color: #fff;
    background-color: #cc9966;
    border-color: #cc9966;
  }
  .el-slider__button {
    width: 16px;
    height: 16px;
    border: 2px solid #cc9966;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.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;
  }
  .el-slider__button-wrapper {
    z-index: 2;
  }
  .el-radio {
    color: #606266;
    cursor: pointer;
    margin-right: 20px;
    min-width: 75px;
  }
  .el-radio.is-bordered + .el-radio.is-bordered {
    margin-left: 0px;
  }
  .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-radio {
  color: #606266;
  cursor: pointer;
  margin-right: 30px;
  min-width: 75px;
}
.vue-treeselect__multi-value-item {
  cursor: pointer;
  display: inline-table;
  background: #cc9966;
  padding: 2px 0;
  border: 1px solid transparent;
  border-radius: 2px;
  color: white;
  font-size: 12px;
  vertical-align: top;
}
.vue-treeselect__value-remove {
  color: #fff;
  padding-left: 5px;
  border-left: 1px solid #fff;
  line-height: 0;
}
.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: 0.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);
    }
    .el-textarea__inner {
      border: none;
      background-color: transparent;
      color: rgb(131, 137, 143);
    }

    .el-textarea .el-textarea__count .el-textarea__count-inner {
      background-color: transparent;
      line-height: initial;
      display: inline-block;
      padding: 0 5px;
      color: rgb(131, 137, 143);
    }
    .el-textarea .el-input__count {
      color: #909399;
      /* background: #FFF; */
      position: absolute;
      font-size: 12px;
      bottom: 5px;
      right: 10px;
  }
    .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>