<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">
          <!-- taskInfoListKey -->
          <p class="top-title">
            <el-radio-group v-model="taskInfoListKey" class="left-button" @change="changeWeek">
              <!-- taskInfoWeeks -->
              <el-radio-button v-for="(item, index) in taskInfoWeeks" :key="index" :label="item">{{'第'+item+'周'}}</el-radio-button>
            </el-radio-group>
            <span class="right-time">
                {{currentDate}}
            </span>
          </p>
          <!-- :disabled="
              time.year != time.currentYear ||
              time.quarter != time.currentQuarter
            " -->
          <el-button
            type="text"
            class="createTask"
            @click="createTask(1)"
            v-if="taskFourWeekKey >= currentMonth"
          >
            <i class="el-icon-plus"></i>新建任务
          </el-button>
        </div>
        <div class="okrbox-list">
          <ul>
            <li v-for="item in taskInfoList[taskInfoListKey]" :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>
              <!--  v-show="
                  time.year == time.currentYear &&
                  time.quarter == time.currentQuarter
                " -->
              <div class="list-opt continuation-btn" style="display:flex;" v-if="item.status == 3">
                <el-tag
                    type="success"
                    effect="dark">
                    已完成
                </el-tag>
              </div>
              <div class="list-opt continuation-btn" style="display:flex;"  v-if="item.status == 2">
                <el-tag
                    color="#a611e4"
                    effect="dark">
                    延续
                </el-tag>
              </div>
              
              <div
                class="list-opt"
                v-if="taskFourWeekKey >= currentMonth"
              >
                <!-- <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="确定删除吗？"
                  @confirm="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>
          <!-- :disabled="
              time.year != time.currentYear ||
              time.quarter != time.currentQuarter
            " -->
          <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 }}
              <!-- <el-button type="warning" icon="el-icon-edit" size='mini' circle></el-button> -->
              <!-- v-show="
                  time.year == time.currentYear &&
                  time.quarter == time.currentQuarter
                " -->
              <span
                class="edit"
                
              >
                <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="500"
                  trigger="click"
                  @show="getAlignmentList(ele)"
                >
                  <!-- 
                 :title="'KR：' + ele.krInfo"
                  :content="'详细描述：' + (ele.krDesc || '暂无')" -->
                  <h2>{{ "KR：" + ele.krInfo }}</h2>
                  <p>{{ "详细描述：" + (ele.krDesc || "暂无") }}</p>

                  <h2>我对齐的KR</h2>
                  <div style="max-height: 200px; overflow: auto">
                    <ul>
                      <li
                        v-for="(list, indexOne) in Alignment" :key="indexOne"
                        style="display: flex; justify-content: space-between"
                      >
                        <p
                          style="
                            display: flex;
                            justify-content: space-between;
                            width: 100%;
                          "
                        >
                          <span style="width: 60%">{{ list.krInfo }}</span
                          ><span>{{ list.userName }}</span>

                          <a
                            @click="deleteAlignment(list.id, ele)"
                            style="
                              white-space: nowrap;
                              margin-left: 20px;
                              cursor: pointer;
                              color: red;
                            "
                            >删除</a
                          >
                        </p>
                      </li>
                    </ul>
                    <!-- <el-button size="mini" type="text" @click="visible = false"
                      >取消</el-button
                    >
                    <el-button
                      type="primary"
                      size="mini"
                      @click="visible = false"
                      >确定</el-button
                    > -->
                  </div>
                  <h2>对齐我的KR</h2>
                  <div style="max-height: 200px; overflow: auto">
                    <ul>
                      <li  v-for="(list, indexOne) in otherAligned" :key="indexOne"
                        style="display: flex; justify-content: space-between"
                      >
                        <p
                          style="
                            display: flex;
                            justify-content: space-between;
                            width: 100%;
                          "
                        >
                          {{ list.krInfo }}
                          <span>{{ list.userName }}</span>
                          <!-- <a
                            @click="deleteAlignment(list.id, ele)"
                            style="
                              white-space: nowrap;
                              margin-left: 20px;
                              cursor: pointer;
                              color: red;
                            "
                            >删除</a
                          > -->
                        </p>
                      </li>
                    </ul>
                    <!-- <el-button size="mini" type="text" @click="visible = false"
                      >取消</el-button
                    >
                    <el-button
                      type="primary"
                      size="mini"
                      @click="visible = false"
                      >确定</el-button
                    > -->
                  </div>

                  <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>
                <!-- v-show="
                      time.year == time.currentYear &&
                      time.quarter == time.currentQuarter
                    " -->
                <span class="KR-opt">
                  <span style="width: 50%">
                    <el-progress
                      :percentage="ele.completion"
                      :color="itemColor"
                    ></el-progress>
                  </span>
                  <el-button
                    type="success"
                    icon="el-icon-film"
                    size="mini"
                    circle
                    @click="setAlignment(ele)"
                    
                  ></el-button>
                  <!-- v-show="
                      time.year == time.currentYear &&
                      time.quarter == time.currentQuarter
                    " -->
                  <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="确定删除吗？"
                    @confirm="deleteKR(ele)"
                  >
                    <!-- <el-button slot="reference">删除</el-button> -->
                    <!-- v-show="
                        time.year == time.currentYear &&
                        time.quarter == time.currentQuarter
                      " -->
                    <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">
            <el-radio-group v-model="taskFourWeekKey" class="left-button" @change="changeMonth">
              <!-- taskInfoWeeks -->
              <el-radio-button v-for="(item, index) in taskInfoMonth" :key="index" :label="item">{{item+'月计划'}}</el-radio-button>
            </el-radio-group>
          </p>
          <!-- :disabled="
              time.year != time.currentYear ||
              time.quarter != time.currentQuarter
            " -->
          <el-button
            type="text"
            class="createTask"
            @click="createTask(2)"
            v-if="taskFourWeekKey >= currentMonth"
          >
            <i class="el-icon-plus"></i>新建任务
          </el-button>
        </div>
        <div class="okrbox-list">
          <ul>
            <li v-for="item in taskFourWeek[taskFourWeekKey]" :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 continuation-btn" style="display:flex;" v-if="item.status == 3">
                <el-tag
                    type="success"
                    effect="dark">
                    已完成
                </el-tag>
              </div>
              <div class="list-opt continuation-btn" style="display:flex;"  v-if="item.status == 2">
                <el-tag
                    color="#a611e4"
                    effect="dark">
                    延续
                </el-tag>
              </div>
              <div
                class="list-opt"
                v-if="taskFourWeekKey >= currentMonth"
                
              >
                <!-- <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="确定删除吗？"
                  @confirm="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>
      <!-- {{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="1000"
                  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="1000"
              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 v-if="taskTitle == '修改任务'"  class="task-item">
            <span class="item-name">当前状态：</span>
            <el-radio-group
              v-model="statusTask"
              size="small"
            >
              <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">
                        <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 == '创建任务'"
            :loading="taskVisibleLoading"
            >创 建</el-button
          >
          <el-button
            type="warning"
            @click="editTaskOk"
            v-if="taskTitle == '修改任务'"
            :loading="taskVisibleLoading"
            >修 改</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="2000"
                    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'"
            :loading="KROKVisible">创 建</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>
    <el-dialog
      title="添加对齐"
      :visible.sync="AlignmentVisible"
      width="50%"
      center
      :before-close="OKRhandleClose"
    >
      <!-- 
      {{ checkedCities }} -->
      <div style="margin-bottom: 15px">
        人员筛选：
        <el-select
          v-model="person"
          filterable
          placeholder="请选择"
          @change="getAlignmentPerson"
        >
          <el-option
            v-for="item in optionsPerson"
            :key="item.userId"
            :label="item.name"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </div>

      <ul
        class="infinite-list"
        v-infinite-scroll="getAlignmentPageList"
        :infinite-scroll-immediate="false"
        style="overflow: auto; height: 500px"
      >
        <el-checkbox-group v-model="checkedCities">
          <li v-for="(item, index) in alignmentList" :key="index" class="infinite-list-item">
            <el-checkbox :key="item.id" :label="item.id">
              <el-card class="box-card">
                <h3>
                  {{ item.krInfo
                  }}<span style="color: red">({{ item.userName }})</span>
                </h3>
                <p class="text item">
                  {{ item.krDesc }}
                </p>
              </el-card>
            </el-checkbox>
          </li>
        </el-checkbox-group>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button @click="AlignmentVisible = false">取 消</el-button>
        <el-button
          type="warning"
          @click="addAlignmentPageList"
          :loading="okLoading"
          >添 加</el-button
        >
      </span>
    </el-dialog>
  </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 {
      KROKVisible:false,
      taskVisibleLoading:false,
      okLoading: false,
      optionsPerson: [],
      person: "",
      AlignmentVisible: false, //添加对齐
      alignmentList: [], //添加对齐列表
      alignmentPage: 1,
      checkedCities: [],
      krId: null,
      Alignment: [],
      otherAligned: [],
      yearValue: undefined,
      cycleValue: undefined,
      yearsOptions: [],
      cycleOptions,
      clearOnSelect: true,
      loading: false,
      options: [],
      // options2,
      taskTag: [],
      KRTag: [],
      remindValue: [], //@的人 任务
      visiblePerson: [], //指定可见人  任务
      statusTask: 1,
      // SHOW_PARENT,

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

      okrVisible: false, //同步okr的弹框是否可见
      targetVisible: false, //创建目标的弹框
      taskVisible: false, //创建的弹框是否可见
      syncPeopleValue: [],
      syncPeopleOptions: [],
      selectedPeople: [],
      okr: [],
      okrList: [],
      okrObject: {},
      allTime: null,
      taskInfoList: [],
      taskInfoListKey:null,
      taskFourWeekKey:null,
      currentMonth:null,
      currentWeek:null,
      currentDate:null,
      taskInfoWeeks:[],
      taskInfoMonth:[],
      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: {
    //添加对齐
    addAlignmentPageList() {
      this.okLoading = true;
      postAction(
        `/okr/kr/addAlign?originId=${
          this.krId
        }&alignId=${this.checkedCities.join()}`
      ).then((res) => {
        if (res.success) {
          this.$message.success("添加对齐成功");
          this.AlignmentVisible = false;
          this.alignmentPage = 1;
          this.okLoading = false;
        } else {
          this.$message.success(res.message);
          this.okLoading = false;
        }
      });
    },
    //设置对齐的列表
    setAlignment(ele) {
      this.checkedCities = [];
      this.person = "";
      this.AlignmentVisible = true;
      this.krId = ele.id;
      getAction("/okr/kr/list", {
        year: this.yearValue,
        quarter: this.cycleValue,
        pageSize: 10,
        pageNo: 1,
        userId: this.person,
      }).then((res) => {
        if (res.success) {
          this.alignmentList = res.result.records;
        }
      });

      postAction("/okr/qywx/getUserListByName", {}).then((res) => {
        console.log(res);
        if (res.success) {
          this.optionsPerson = res.result;
        }
      });
    },
    getAlignmentPerson() {
      this.alignmentPage = 0;
      this.alignmentList = [];
      this.getAlignmentPageList();
    },
    //滚动加载
    getAlignmentPageList() {
      this.alignmentPage++;
      getAction("/okr/kr/list", {
        year: this.yearValue,
        quarter: this.cycleValue,
        pageSize: 10,
        pageNo: this.alignmentPage,
        userId: this.person,
      }).then((res) => {
        if (res.success) {
          this.alignmentList.push(...res.result.records);
        }
      });
    },
    //获取对齐的详情列表
    getAlignmentList(ele) {
      console.log(ele);
      this.Alignment = [];
      this.otherAligned = [];
      postAction(`/okr/kr/alignList?originId=${ele.id}`).then((res) => {
        if (res.success) {
          this.Alignment.push(...res.myAlign);
          this.otherAligned.push(...res.otherAligned);
        }
      });
    },
    //删除对齐
    deleteAlignment(id, ele) {
      postAction(`/okr/kr/deleteAlign?originId=${ele.id}&alignId=${id}`).then(
        (res) => {
          if (res.success) {
            this.$message.success("删除成功");
            this.getAlignmentList(ele);
          } else {
            this.$message.error("删除失败");
          }
        }
      );
    },
    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.statusTask = 1
      // 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);
          });
        }
        this.taskVisibleLoading = true
        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,
            status: this.statusTask,
            week: this.taskInfoListKey,
            year: this.yearValue
          },
        }).then((res) => {
          // console.log(res)
          this.taskVisibleLoading = false
          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.statusTask = val.status

      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);
          });
        }
        this.taskVisibleLoading = true
        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,
            status: this.statusTask
          },
        }).then((res) => {
          this.taskVisibleLoading = false
          // 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;
      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) {
        this.KROKVisible = true
        if (this.KRPower == "3") {
          this.KRremindValue = [];
          this.KRTag.forEach((item) => {
            this.KRremindValue.push(item.id);
          });
        }
        console.log(this.taskInfoListKey)
        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,
            week: this.taskInfoListKey,
            year: this.yearValue
          },
        }).then((res) => {
          this.KROKVisible = false
          // 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);
          });
        }
        this.KROKVisible = true
        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)
          this.KROKVisible = false
          if (res.success) {
            this.KRVisible = false;
            this.getOkrPageList();
          }
        });
      }
    },
    yearChange(key) {
      this.taskInfoListKey = this.taskInfoWeeks[0]
      this.getOkrPageList();
    },
    cycleChange(key) {
      if (this.yearValue == "" || this.yearValue == undefined) {
        this.$message({
          type: "warning",
          message: "记得先选择年份哟~",
        });
        this.cycleValue = undefined;
      } else {
        this.getOkrPageList();
      }
    },
    changeWeek(value){
      var data = this.allTime.weeks[this.taskFourWeekKey].filter(item=>{
        return item.week == value
      })[0]
      this.currentDate = data.startDate + '至' +data.endDate
    },
    changeMonth(value) {
      console.log(value)
      this.taskInfoWeeks = this.allTime.weeks[value].map(item=>{
        return item.week
      })
      this.taskInfoListKey = this.taskInfoWeeks[0]
      this.changeWeek(this.taskInfoListKey)
    },
    // 获取页面展示的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.allTime = res.result.time;
            this.currentMonth = res.result.time.currentMonth
            this.currentWeek = res.result.time.currentWeek;
            this.taskInfoMonth = res.result.time.months
            if(res.result.time.currentQuarter == res.result.time.quarter){

              
              
              this.taskInfoWeeks = res.result.time.weeks[res.result.time.currentMonth].map(item=>{
                return item.week
              })
          
              if(this.taskInfoMonth.includes(this.taskFourWeekKey)){

                this.taskInfoWeeks = res.result.time.weeks[this.taskFourWeekKey].map(item=>{
                  return item.week
                })
                
              }else{
                this.taskInfoWeeks = res.result.time.weeks[res.result.time.currentMonth].map(item=>{
                  return item.week
                })
                this.taskFourWeekKey = res.result.time.currentMonth;
                if(this.taskInfoWeeks.includes(this.taskInfoListKey)){

                }else{
                  this.taskInfoListKey = this.taskInfoWeeks[0]
                }
              }
              
              this.currentDate = res.result.time.currentDate
            }else{
              this.taskFourWeekKey = res.result.time.months[0];
              this.taskInfoWeeks = res.result.time.weeks[this.taskFourWeekKey].map(item=>{
                return item.week
              })
              
              this.taskInfoListKey = this.taskInfoWeeks[0]
              
              
              var data = this.allTime.weeks[this.taskFourWeekKey].filter(item=>{
                return item.week == this.taskInfoListKey
              })[0]
              this.currentDate = data.startDate + '至' +data.endDate
            }
           

            

            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;
        @media only screen and (min-width: 1315px) {
          .top-title {
            font-size: 16px;
            margin: 8px 0;
            padding: 0 20px;
            // text-align: left;
            display: flex;
            justify-content: space-between;
          }
          .right-time{
            margin-top: 10px;
          }
        }
        @media only screen and (max-width: 1314px) {
          .top-title {
            font-size: 16px;
            margin: 8px 0;
            padding: 0 20px;
            // text-align: left;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
          }
          .right-time{
            margin-top: 10px;
          }

        }
        
        .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;
        }
        li:hover .continuation-btn {
          right:78px
        }
        /deep/ .continuation-btn .el-tag--dark{
          border: 0px;
        }
        
      }
      .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;
            }
            li:hover .continuation-btn {
              right:78px
            }
          }
        }
      }
    }
    .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 {
  .el-checkbox,
  .el-checkbox__label {
    width: 97% !important;
  }
  .el-checkbox {
    white-space: initial;
    display: flex;
    align-items: center;
  }
  .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 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 110px;
      // text-align: center;
    }
    .el-select .el-input .el-select__caret {
      color: #fff;
      font-size: 14px;
      transition: transform 0.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>