<style>
  .sche_ListInner {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    padding-right: 10px;
  }

  .sche_List_in {
    display: flex;
    align-items: center;
    flex: 1;
    margin-bottom: 5px;
    align-items: baseline;
    position: relative;
  }

  .sche_List_in .sche_Dian {
    flex-shrink: 0;
    position: relative;
    top: -2px;
  }

  .sche_mid .el-input__inner {
    border: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0;
    border-bottom: 1px solid #d1d1d1;
    border-radius: 0;
  }

  .sche_Fenye {
    display: flex;
    width: 100px;
    margin-right: 20px;
  }

  .sche_left {
    border: 1px solid #EBEBEB;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    text-align: center;
    line-height: 24px;
    color: #B4B4B4;
    cursor: pointer;
  }

  .sche_left i {
    font-size: 23px;
  }

  .sche_Page {
    font-size: 12px;
    width: 50px;
    line-height: 24px;
    text-align: center;
  }

  .addSche {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 23px;
    right: 31px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 60px;
    cursor: pointer;
  }

  .addSche i {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
  }

  .secondList_Bottom {
    margin: 10px 20px 0 20px;
    font-size: 14px;
    color: #000000;
    min-height: 100px;
    padding-bottom: 10px;
    min-height: 135px;
  }

  .schNoneNum {
    background-color: rgba(255, 255, 255, 0.5) !important;
  }

  .secondList_Bottom .el-textarea__inner {
    border: 0;
  }

  .sche_hengLine {
    width: 20px;
    height: 4px;
    background-color: #fff;
    border-radius: 2px;
    position: absolute;
    left: 32px;
    top: 60px;
  }

  .tufaPop .el-textarea__inner {
    background-color: #E9EFFF;
    border: 0;
  }

  .canClick_Color {
    color: #2961FE !important;
  }

  .tufa_List {
    display: flex;
  }

  .tufa_left {
    width: 128px;
    height: 83px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 18px;
  }

  .tufa_left img {
    width: 100%;
    height: 100%;
  }

  .tufa_btm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 25px;
    position: absolute;
    bottom: 10px;
    width: 100%;
    right: 0;
  }

  .tufa_xiugai {
    margin-left: 20px;
    color: #989898;
    font-size: 12px;
  }

  .tufaPop .el-upload--picture-card {
    width: 120px;
    height: 120px;
    line-height: 120px;
  }

  .tufaPop .el-upload-list__item {
    width: 120px;
    height: 120px;
  }

  .tufaPop .el-upload-list__item {
    margin-bottom: 0;
  }

  .schedu_red {
    color: var(--q-color-negative) !important;
  }

  .SchOtherContent {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
  }

  .sch_dagouimg {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0px;
  }

  .SchImg_List {
    width: 120px;
    height: 120px;
    border: 1px solid #d1d1d1;
    position: relative;
    margin-right: 5px;
    display: inline-block;
  }

  .SchImg_List img {
    width: 100%;
    height: 100%;
  }

  .sch_del {
    position: absolute;
    right: -4px;
    top: -8px;
    color: red;
    cursor: pointer;
    font-size: 20px;
  }

  .MyUpload .el-upload--picture-card {
    width: 50px;
    height: 50px;
    line-height: 60px;
  }

  .WorkObj_ImgList {
    margin: 10px 20px 0 20px;
  }

  .sche_midList .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .sche_midList .el-scrollbar__view::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #F5F5F5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .sche_midList .el-scrollbar__view::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .sche_midList .el-scrollbar__view::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }

  .OtherListContent {
    height: 135px;
    overflow: auto;
  }

  .OtherListContent::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #F5F5F5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .OtherListContent::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .OtherListContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }
  .SchnoneBtm{
    border:0!important;
  }
</style>
<template>
  <div>
    <div class="sche_mid">
      <div class="sche_midList">
        <div class="scheList_TOP">
          <template v-if="WorkObj&&WorkObj.ItemImgList&&WorkObj.ItemImgList.length>0">
            <el-carousel :interval="5000" height="107px">
              <el-carousel-item v-for="item in WorkObj.ItemImgList" :key="item">
                <img :src="item" />
              </el-carousel-item>
            </el-carousel>
          </template>
          <template v-else>
            <img src="../../assets/images/work_list.png" />
          </template>
          <span class="word_sche" style="z-index:999">工作清单</span>
          <div class="sche_hengLine" style="z-index:999"></div>
          <span class="word_scheNumber" style="z-index:999" :class="{'schNoneNum': (WorkList&&WorkList.length==0)}">
            <template v-if="saveObj&&WorkList">
              {{getWorkCount()}}
            </template>
          </span>
        </div>
        <div style="min-height:135px;">
          <div style="margin:10px 20px 0 20px">
            <el-tabs v-model="WorkActive">
              <el-tab-pane label="工作清单规则" name="1"></el-tab-pane>
              <el-tab-pane label="工作清单" name="2"></el-tab-pane>
            </el-tabs>
            <template v-if="WorkActive==2">
              <div class="scheList_Bottom">
                <div class="sche_List_in" v-if="WorkObj">
                  <template v-if="WorkObj.ItemType==1">
                    <div class="sche_Dian" style="margin-top:5px;"></div>
                    <div class="sche_ListInner">{{WorkObj.ItemName}} </div>
                    <img class="sch_dagouimg" v-if="WorkObj.IsChecked==1" src="../../assets/images/da_gou.png" alt="" />
                  </template>
                  <template v-else-if="WorkObj.ItemType==2">
                    <div class="sche_Dian"></div>
                    <div class="sche_ListInner" style="flex-shrink: 0">{{WorkObj.ItemName}} </div>
                  </template>
                </div>
              </div>
              <div class="WorkObj_ImgList">
                <el-scrollbar v-if="WorkObj.FileList&&WorkObj.FileList.length>0">
                  <template>
                    <div class="SchImg_List" style="width:50px;height:50px;border:0;"
                      v-for="(item,index) in WorkObj.FileList">
                      <el-image :src="item" style="width:100%;height:100%;" :preview-src-list="WorkObj.FileList">
                      </el-image>
                      <template v-if="workAuthObj.isShowEditAndDelete">
                        <i class="iconfont icon-yiquxiao sch_del" style="font-size:17px;top:-4px;"
                          @click="workRemoveAdd(index)"></i>
                      </template>
                    </div>
                  </template>
                  <template v-if="workAuthObj.isShowEditAndDelete&&WorkObj.ItemImgList&&WorkObj.ItemImgList.length>0">
                    <el-upload class="schedul_Upload MyUpload" style="display:inline;" action=""
                      list-type="picture-card" :show-file-list="false" :http-request="UploadWorkFile">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </template>
                </el-scrollbar>
              </div>
              <div>
                <template v-if="WorkObj.ItemType==2">
                  <div style="margin:10px 0;">
                    <template v-if="workAuthObj.isShowEditAndDelete">
                      <span v-if="!isShowSure&&WorkObj.WorkContent" style="cursor:pointer;"
                        @click="isShowSure=true">{{WorkObj.WorkContent}}
                         <q-tooltip :offset="[10, 10]">
                          点击文字进行修改
                               </q-tooltip>
                      </span>
                      <el-input v-else v-model="WorkObj.WorkContent" @focus="isShowSure=true" placeholder="完成情况怎么样">
                      </el-input>
                    </template>
                    <template v-else>
                      <span>{{WorkObj.WorkContent}}</span>
                    </template>
                  </div>
                </template>
              </div>
            </template>
            <template v-else>
              <div class="scheList_Bottom" :class="{'SchnoneBtm':WorkRuleList.length==0}">
                <div class="sche_List_in" v-if="WorkRuleObj">
                  <div class="sche_Dian" v-if="WorkRuleObj.ItemName" style="margin-top:5px;"></div>
                  <div class="sche_ListInner">{{WorkRuleObj.ItemName}} </div>
                </div>
              </div>
              <div class="WorkObj_ImgList">
                <el-scrollbar v-if="WorkRuleObj.ItemImgList&&WorkRuleObj.ItemImgList.length>0">
                  <template>
                    <div class="SchImg_List" style="width:50px;height:50px;border:0;"
                      v-for="(item,index) in WorkRuleObj.ItemImgList">
                      <el-image :src="item" style="width:100%;height:100%;" :preview-src-list="WorkRuleObj.ItemImgList">
                      </el-image>
                    </div>
                  </template>
                </el-scrollbar>
              </div>
            </template>
          </div>
        </div>
        <div class="tufa_btm" v-if="WorkActive==2">
          <div>
            <div class="tufa_xiugai">
              <template v-if="WorkObj.ItemType==1 && workAuthObj.isShowEditAndDelete">
                <q-btn color="primary" flat v-if="WorkObj.IsChecked==0" dense style="margin-left:10px;" slot="reference"
                  @click="saveOrder(1)" label="确认完成" />
                <q-btn v-if="WorkObj.IsChecked==1" dense flat @click="saveOrder(0)" style="margin-left:10px;"
                  class="schedu_red" label="取消完成" />
              </template>
              <template v-if="WorkObj.ItemType==2 && workAuthObj.isShowEditAndDelete">
                <q-btn color="primary" flat dense style="margin-left:10px;" v-if="isShowSure" slot="reference"
                  @click="saveOrder(1)" label="确认完成" />
              </template>
            </div>
          </div>
          <div class=" sche_Fenye" v-if="saveObj&&WorkList&&WorkList.length>0">
            <div class="sche_left">
              <i class="iconfont icon-arrow-left" :class="{'canClick_Color':WorkIndex!=0}" @click="WorkMove(1)"></i>
            </div>
            <div class="sche_Page" v-if="saveObj&&WorkList">{{WorkIndex+1}}/{{this.WorkList.length}}
            </div>
            <div class="sche_left" v-if="saveObj&&WorkList">
              <i class="iconfont icon-arrow-right1" :class="{'canClick_Color':WorkIndex!=WorkList.length-1}"
                @click="WorkMove(2)"></i>
            </div>
          </div>
        </div>
        <div class="tufa_btm" v-else style="flex-direction:row-reverse;">
          <div class=" sche_Fenye" v-if="saveObj&&WorkRuleList&&WorkRuleList.length>0">
            <div class="sche_left">
              <i class="iconfont icon-arrow-left" :class="{'canClick_Color':workRuleIndex!=0}"
                @click="WorkRuleMove(1)"></i>
            </div>
            <div class="sche_Page" v-if="saveObj&&WorkRuleList">{{workRuleIndex+1}}/{{this.WorkRuleList.length}}
            </div>
            <div class="sche_left" v-if="saveObj&&WorkRuleList">
              <i class="iconfont icon-arrow-right1" :class="{'canClick_Color':workRuleIndex!=WorkRuleList.length-1}"
                @click="WorkRuleMove(2)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="sche_midList">
        <div class="scheList_TOP">
          <img src="../../assets/images/tufa.png" />
          <span class="word_sche">突发事件</span>
          <span class="word_scheNumber" :class="{'schNoneNum':(EmergenciesList&&EmergenciesList.length==0)}">
            <template v-if="saveObj&&EmergenciesList">
              {{this.EmergenciesList.length}}
            </template>
          </span>
          <div class="sche_hengLine" ref="hengLine"></div>
          <el-popover placement="bottom" popper-class="tufaPop" width="410" trigger="click">
            <div>
              <div>
                <div class="SchImg_List" v-for="(item,index) in addMsg2.FileList">
                  <img :src="item" alt="">
                  <i class="iconfont icon-yiquxiao sch_del" @click="handleRemoveAdd(index)"></i>
                </div>
                <el-upload class="schedul_Upload" style="display:inline;" action="" list-type="picture-card"
                  :show-file-list="false" :http-request="UploadAttachment">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
              <el-input type="textarea" style="margin-top:20px;" resize="none" placeholder="添加文字内容"
                v-model="addMsg2.OtherContent" :rows="5"></el-input>
              <q-btn color="accent" size="sm" style="float:right;margin-top:10px;" @click="saveTufa" label="保存" />
            </div>
            <div slot="reference" class="addSche" @click="clearAddMsg2" v-if="workAuthObj.isShowAdd">
              <i class="iconfont icon-img_haha"></i>
            </div>
          </el-popover>
        </div>
        <div class="secondList_Bottom">
          <el-tabs v-model="TufaActive">
            <el-tab-pane label="突发事件规则" name="1"></el-tab-pane>
            <el-tab-pane label="突发事件" name="2"></el-tab-pane>
          </el-tabs>
          <template v-if="TufaActive==2">
            <div class="tufa_List">
              <template v-if="EmergenciesObj&&EmergenciesObj.FileList&&EmergenciesObj.FileList.length>0">
                <div class="tufa_left">
                  <el-image :src="EmergenciesObj.FileList[0]" :preview-src-list="EmergenciesObj.FileList">
                  </el-image>
                </div>
              </template>
              <div class="SchOtherContent" v-if="EmergenciesObj.OtherContent">
                {{EmergenciesObj.OtherContent}}
              </div>
            </div>
          </template>
          <template v-else>
            <div class="scheList_Bottom" :class="{'SchnoneBtm':EmergenciesRuleList.length==0}">
              <div class="sche_List_in" v-if="TufaRuleObj">
                <div class="sche_Dian" v-if="TufaRuleObj.ItemName" style="margin-top:5px;"></div>
                <div class="sche_ListInner">{{TufaRuleObj.ItemName}} </div>
              </div>
            </div>
            <div class="WorkObj_ImgList">
              <el-scrollbar v-if="TufaRuleObj.ItemImgList&&TufaRuleObj.ItemImgList.length>0">
                <template>
                  <div class="SchImg_List" style="width:50px;height:50px;border:0;"
                    v-for="(item,index) in TufaRuleObj.ItemImgList">
                    <el-image :src="item" style="width:100%;height:100%;" :preview-src-list="TufaRuleObj.ItemImgList">
                    </el-image>
                  </div>
                </template>
              </el-scrollbar>
            </div>
          </template>
        </div>
        <div class="tufa_btm" v-if="TufaActive==2">
          <div>
            <div class="tufa_xiugai">
              <template
                v-if="EmergenciesObj&&saveObj&&EmergenciesList&&EmergenciesList.length>0&&workAuthObj.isShowEditAndDelete &&EmergenciesObj.IsOperate==1 ">
                <el-popover placement="bottom" popper-class="tufaPop" width="410" trigger="click">
                  <div>
                    <div>
                      <div class="SchImg_List" v-for="(item,index) in addMsg2.FileList">
                        <img :src="item" alt="">
                        <i class="iconfont icon-yiquxiao sch_del" @click="handleRemoveAdd(index)"></i>
                      </div>
                      <el-upload class="schedul_Upload" style="display:inline;" action="" list-type="picture-card"
                        :show-file-list="false" :http-request="UploadEdit">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                    <el-input type="textarea" style="margin-top:20px;" v-model="addMsg2.OtherContent" :rows="4" />
                    <q-btn color="accent" size="sm" style="float:right;margin-top:10px;"
                      @click="saveEdit(EmergenciesObj)" label="保存" />
                  </div>
                  <q-btn v-if="EmergenciesObj" dense slot="reference" flat @click="EditTufa(EmergenciesObj)"
                    color="primary" label="修改" />
                </el-popover>
                <q-btn v-if="EmergenciesObj" dense slot="reference" flat @click="delTufa()" style="margin-left:5px;"
                  class="schedu_red" label="删除" />
              </template>
              <template v-else>
                <template v-if="EmergenciesObj&&EmergenciesObj.CreateByName">
                  {{EmergenciesObj.CreateByName}}创建于{{EmergenciesObj.CreateTimeStr}}
                </template>
              </template>
            </div>
          </div>
          <div class=" sche_Fenye" v-if="saveObj&&EmergenciesList&&EmergenciesList.length>0">
            <div class="sche_left">
              <i class="iconfont icon-arrow-left" :class="{'canClick_Color':EmergenciesIndex!=0}"
                @click="EmergenciesMove(1)"></i>
            </div>
            <div class="sche_Page">{{EmergenciesIndex+1}}/{{this.EmergenciesList.length}}</div>
            <div class="sche_left">
              <i class="iconfont icon-arrow-right1"
                :class="{'canClick_Color':EmergenciesIndex!=EmergenciesList.length-1}" @click="EmergenciesMove(2)"></i>
            </div>
          </div>
        </div>
        <div class="tufa_btm" v-else style="flex-direction:row-reverse;">
          <div class=" sche_Fenye" v-if="TufaRuleObj&&EmergenciesRuleList&&EmergenciesRuleList.length>0">
            <div class="sche_left">
              <i class="iconfont icon-arrow-left" :class="{'canClick_Color':TufaRuleIndex!=0}"
                @click="TufaRuleMove(1)"></i>
            </div>
            <div class="sche_Page" v-if="TufaRuleObj&&EmergenciesRuleList">
              {{TufaRuleIndex+1}}/{{this.EmergenciesRuleList.length}}
            </div>
            <div class="sche_left" v-if="TufaRuleObj&&EmergenciesRuleList">
              <i class="iconfont icon-arrow-right1"
                :class="{'canClick_Color':TufaRuleIndex!=EmergenciesRuleList.length-1}" @click="TufaRuleMove(2)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="sche_midList">
        <div class="scheList_TOP">
          <img src="../../assets/images/jiaojie.png" />
          <span class="word_sche">交接工作说明</span>
          <div class="sche_hengLine"></div>
          <span class="word_scheNumber" style="left:174px;"
            :class="{'schNoneNum':(HandoverList&&HandoverList.length==0)}">
            <template v-if="saveObj&&HandoverList">
              {{this.HandoverList.length}}
            </template>
          </span>
          <el-popover placement="bottom" popper-class="tufaPop" width="400" trigger="click">
            <div>
              <div>
                <div class="SchImg_List" v-for="(item,index) in addMsg3.FileList">
                  <img :src="item" alt="">
                  <i class="iconfont icon-yiquxiao sch_del" @click="jiaojieRemoveAdd(index)"></i>
                </div>
                <el-upload class="schedul_Upload" style="display:inline;" action="" list-type="picture-card"
                  :show-file-list="false" :http-request="UploadJiaojie">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
              <el-input type="textarea" style="margin-top:20px;" resize="none" placeholder="添加文字内容"
                v-model="addMsg3.OtherContent" :rows="5"></el-input>
              <q-btn color="accent" size="sm" style="float:right;margin-top:10px;" @click="saveJiaojie" label="保存" />
            </div>
            <div slot="reference" class="addSche" @click="clearAddMsg2" v-if="workAuthObj.isShowAdd">
              <i class="iconfont icon-img_haha"></i>
            </div>
          </el-popover>
        </div>
        <div class="secondList_Bottom">
          <el-tabs v-model="handActive">
            <el-tab-pane label="交接工作规则" name="1"></el-tab-pane>
            <el-tab-pane label="交接工作" name="2"></el-tab-pane>
          </el-tabs>
          <template v-if="handActive==2">
            <div class="tufa_List">
              <div class="tufa_left" v-if="HandoverObj&&HandoverObj.FileList&&HandoverObj.FileList.length>0">
                <el-image :src="HandoverObj.FileList[0]" :preview-src-list="HandoverObj.FileList">
                </el-image>
              </div>
              <div class="SchOtherContent" v-if="HandoverObj.OtherContent">
                {{HandoverObj.OtherContent}}
              </div>
            </div>
          </template>
          <template v-else>
            <div class="scheList_Bottom" :class="{'SchnoneBtm':HandoverRuleList.length==0}">
              <div class="sche_List_in" v-if="HandRuleObj">
                <div class="sche_Dian" v-if="HandRuleObj.ItemName" style="margin-top:5px;"></div>
                <div class="sche_ListInner">{{HandRuleObj.ItemName}} </div>
              </div>
            </div>
            <div class="WorkObj_ImgList">
              <el-scrollbar v-if="HandRuleObj.ItemImgList&&HandRuleObj.ItemImgList.length>0">
                <template>
                  <div class="SchImg_List" style="width:50px;height:50px;border:0;"
                    v-for="(item,index) in HandRuleObj.ItemImgList">
                    <el-image :src="item" style="width:100%;height:100%;" :preview-src-list="HandRuleObj.ItemImgList">
                    </el-image>
                  </div>
                </template>
              </el-scrollbar>
            </div>
          </template>
        </div>
        <div class="tufa_btm" v-if="handActive==2">
          <div>
            <div class="tufa_xiugai">
              <template
                v-if="HandoverObj&&saveObj&&HandoverList&&HandoverList.length>0 && workAuthObj.isShowEditAndDelete && HandoverObj.IsOperate==1">
                <el-popover placement="bottom" popper-class="tufaPop" width="410" trigger="click">
                  <div>
                    <div>
                      <div class="SchImg_List" v-for="(item,index) in addMsg3.FileList">
                        <img :src="item" alt="">
                        <i class="iconfont icon-yiquxiao sch_del" @click="jiaojieRemoveAdd(index)"></i>
                      </div>
                      <el-upload class="schedul_Upload" style="display:inline;" action="" list-type="picture-card"
                        :show-file-list="false" :http-request="jiaojieEdit">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                    <el-input type="textarea" style="margin-top:20px;" v-model="addMsg3.OtherContent" :rows="4" />
                    <q-btn color="accent" size="sm" style="float:right;margin-top:10px;"
                      @click="saveJJEdit(HandoverObj)" label="保存" />
                  </div>
                  <q-btn v-if="HandoverObj" dense slot="reference" flat @click="EditJiaojie(HandoverObj)"
                    color="primary" label="修改" />
                </el-popover>
                <q-btn v-if="HandoverObj" dense slot="reference" flat @click="delJiaojie()" style="margin-left:5px;"
                  class="schedu_red" label="删除" />
              </template>
              <template v-else>
                <template v-if="HandoverObj&&HandoverObj.CreateByName">
                  {{HandoverObj.CreateByName}}创建于
                  <template v-if="HandoverObj.IsOperate==2">{{HandoverObj.CreateTimeStr2}}</template>
                  <template v-else>{{HandoverObj.CreateTimeStr}}</template>
                </template>
              </template>
            </div>
          </div>
          <div class=" sche_Fenye" v-if="saveObj&&HandoverList&&HandoverList.length>0">
            <div class="sche_left" :class="{'canClick_Color':HandoverIndex!=0}">
              <i class="iconfont icon-arrow-left" @click="HandoverMove(1)"></i>
            </div>
            <div class="sche_Page">{{HandoverIndex+1}}/{{this.HandoverList.length}}</div>
            <div class="sche_left" :class="{'canClick_Color':HandoverIndex!=HandoverList.length-1}">
              <i class="iconfont icon-arrow-right1" @click="HandoverMove(2)"></i>
            </div>
          </div>
        </div>
        <div class="tufa_btm" v-else style="flex-direction:row-reverse;">
          <div class=" sche_Fenye" v-if="HandRuleObj&&HandoverRuleList&&HandoverRuleList.length>0">
            <div class="sche_left">
              <i class="iconfont icon-arrow-left" :class="{'canClick_Color':HandRuleIndex!=0}"
                @click="HandRuleMove(1)"></i>
            </div>
            <div class="sche_Page" v-if="HandRuleObj&&HandoverRuleList">
              {{HandRuleIndex+1}}/{{this.HandoverRuleList.length}}
            </div>
            <div class="sche_left" v-if="HandRuleObj&&HandoverRuleList">
              <i class="iconfont icon-arrow-right1"
                :class="{'canClick_Color':HandRuleIndex!=HandoverRuleList.length-1}" @click="HandRuleMove(2)"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    SetDutyContent,
    RemoveDutyContent,
    queryDutyWork,
    queryDutyWork_V2
  } from '../../api/scheduling/schedu'
  import {
    UploadSelfFile
  } from '../../api/common/common'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      authObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        HandoverList: [], //交接事项列表
        HandoverIndex: 0, //交接事项索引
        HandoverObj: {}, //交接事项对象
        EmergenciesList: [], //突发事项列表
        EmergenciesIndex: 0, //突发事项索引
        EmergenciesObj: {}, //突发事项对象
        WorkList: [], //工作清单列表
        WorkIndex: 0, //工作清单索引
        WorkObj: {}, //工作清单对象
        //突发事件数据
        addMsg2: {
          Id: 0, //编号
          PlanShift: 0, //值班班次
          PlanType: 3, //值班类型(1-值班事项，2-交接事项，3-突发事项)
          PlanId: 0, //值班编号
          FileList: [], //文件路径
          OtherContent: "", //突发事项、工作交接(值班类型为2.3是使用)内容
          OtherRemark: "", //突发事项、工作交接(值班类型为2.3是使用)备注
          IsOperate: 0, //是否可以修改和删除(1-可修改可删除)
        },
        //交接工作说明
        addMsg3: {
          Id: 0, //编号
          PlanShift: 0, //值班班次
          PlanType: 2, //值班类型(1-值班事项，2-交接事项，3-突发事项)
          PlanId: 0, //值班编号
          FileList: [], //文件路径
          OtherContent: "", //突发事项、工作交接(值班类型为2.3是使用)内容
          OtherRemark: "", //突发事项、工作交接(值班类型为2.3是使用)备注
          IsOperate: 0, //是否可以修改和删除(1-可修改可删除)
        },
        fileList: [], //文件数组
        isShowSure: false, //是否显示确认完成按钮
        //是否显示工作内容相关按钮
        workAuthObj: {
          isShowAdd: true, //是否显示新增按钮【默认不显示】
          isShowEditAndDelete: true, //是否显示编辑和删除按钮【默认不显示】
        },
        qMsg: {
          Id: 0,
          Shift: 0,
          DutyMan: 0
        },
        WorkActive: '1',
        TufaActive: '1',
        handActive: '1',
        WorkRuleList: [],
        EmergenciesRuleList: [],
        HandoverRuleList: [],

        workRuleIndex: 0, //工作清单规则索引
        TufaRuleIndex: 0, //突发事件规则索引
        HandRuleIndex: 0, //交接工作规则索引
        WorkRuleObj: {}, //工作清单规则对象
        TufaRuleObj: {}, //突发事件规则对象
        HandRuleObj: {} //交接工作规则对象
      }
    },
    watch: {
      //有默认值
      authObj: {
        handler(newValue) {
          this.initAuth();
        },
        immediate: true
      },

    },
    created() {

    },
    mounted() {
      this.qMsg.Id = this.saveObj.Id;
      this.qMsg.Shift = this.saveObj.Shift;
      this.qMsg.DutyMan = this.saveObj.DutyMan;
      this.getWorkList();
      this.initAuth();
    },
    methods: {
      //工作清单删除图片
      workRemoveAdd(index) {
        if (this.WorkObj && this.WorkObj.FileList && this.WorkObj.FileList.length > 0) {
          this.WorkObj.FileList.splice(index, 1);
        }
      },
      getWorkList() {
        queryDutyWork_V2(this.qMsg).then(res => {
          if (res.Code == 1) {
            this.HandoverList = res.Data.HandoverList;
            this.EmergenciesList = res.Data.EmergenciesList;
            this.WorkRuleList = res.Data.WorkRuleList;
            this.WorkList = res.Data.WorkList;

            this.EmergenciesRuleList = res.Data.EmergenciesRuleList;
            this.HandoverRuleList = res.Data.HandoverRuleList;

            if (this.EmergenciesList && this.EmergenciesList.length > 0) {
              this.EmergenciesObj = this.EmergenciesList[this.EmergenciesIndex];
            }
            if (this.HandoverList && this.HandoverList.length > 0) {
              this.HandoverObj = this.HandoverList[this.HandoverIndex];
            }
            if (this.WorkList && this.WorkList.length > 0) {
              this.WorkObj = this.WorkList[this.WorkIndex];
            }

            if (this.WorkRuleList && this.WorkRuleList.length > 0) {
              this.WorkRuleObj = this.WorkRuleList[this.workRuleIndex]
            }
            if (this.EmergenciesRuleList && this.EmergenciesRuleList.length > 0) {
              this.TufaRuleObj = this.EmergenciesRuleList[this.TufaRuleIndex]
            }
            if (this.HandoverRuleList && this.HandoverRuleList.length > 0) {
              this.HandRuleObj = this.HandoverRuleList[this.HandRuleIndex]
            }

            this.WorkRuleList = res.Data.WorkRuleList;
            this.EmergenciesRuleList = res.Data.EmergenciesRuleList;
            this.HandoverRuleList = res.Data.HandoverRuleList;
          }
        });
      },
      //获取突发和交接
      getTufaHand() {
        var obj = {
          IsBurst: 0,
          IsHandover: 0
        }
        if (this.EmergenciesList.length > 0) {
          obj.IsBurst = 1
        }
        let HandArr = [];
        this.HandoverList.forEach(x => {
          if (x.IsOperate == 1) {
            HandArr.push(x);
          }
        })
        if (HandArr.length > 0) {
          obj.IsHandover = 1
        }
        return obj;
      },
      //初始化权限信息
      initAuth() {
        if (this.authObj) {
          if (this.authObj.isShowAdd != null && !this.authObj.isShowAdd) {
            this.workAuthObj.isShowAdd = this.authObj.isShowAdd;
          }
          if (this.authObj.isShowEditAndDelete != null && !this.authObj.isShowEditAndDelete) {
            this.workAuthObj.isShowEditAndDelete = this.authObj.isShowEditAndDelete;
          }
        }
      },
      WorkMove(type) {
        //上一条
        if (type == 1) {
          if (this.WorkIndex > 0 && this.WorkList) {
            this.WorkIndex = this.WorkIndex - 1;
            this.WorkObj = this.WorkList[this.WorkIndex];
          }
        }
        //下一条
        else {
          if (this.WorkList && this.WorkIndex < this.WorkList.length - 1) {
            this.WorkIndex = this.WorkIndex + 1;
            this.WorkObj = this.WorkList[this.WorkIndex];
          }
        }
      },
      WorkRuleMove(type) {
        //上一条
        if (type == 1) {
          if (this.workRuleIndex > 0 && this.WorkRuleList) {
            this.workRuleIndex = this.workRuleIndex - 1;
            this.WorkRuleObj = this.WorkRuleList[this.workRuleIndex];
          }
        }
        //下一条
        else {
          if (this.WorkRuleList && this.workRuleIndex < this.WorkRuleList.length - 1) {
            this.workRuleIndex = this.workRuleIndex + 1;
            this.WorkRuleObj = this.WorkRuleList[this.workRuleIndex];
          }
        }
      },
      //紧急事项上一条(1),下一条(2)
      EmergenciesMove(type) {
        //上一条
        if (type == 1) {
          if (this.EmergenciesIndex > 0) {
            this.EmergenciesIndex = this.EmergenciesIndex - 1;
            this.EmergenciesObj = this.EmergenciesList[this.EmergenciesIndex];
          }
        }
        //下一条
        else {
          if (this.EmergenciesIndex < this.EmergenciesList.length - 1) {
            this.EmergenciesIndex = this.EmergenciesIndex + 1;
            this.EmergenciesObj = this.EmergenciesList[this.EmergenciesIndex];
          }
        }
      },
      //突发事件规则
      TufaRuleMove(type) {
        //上一条
        if (type == 1) {
          if (this.TufaRuleIndex > 0) {
            this.TufaRuleIndex = this.TufaRuleIndex - 1;
            this.TufaRuleObj = this.EmergenciesRuleList[this.TufaRuleIndex];
          }
        }
        //下一条
        else {
          if (this.TufaRuleIndex < this.EmergenciesRuleList.length - 1) {
            this.TufaRuleIndex = this.TufaRuleIndex + 1;
            this.TufaRuleObj = this.EmergenciesRuleList[this.TufaRuleIndex];
          }
        }
      },
      //交接事项上一条(1),下一条(2)
      HandoverMove(type) {
        //上一条
        if (type == 1) {
          if (this.HandoverIndex > 0) {
            this.HandoverIndex = this.HandoverIndex - 1;
            this.HandoverObj = this.HandoverList[this.HandoverIndex];
          }
        }
        //下一条
        else {
          if (this.HandoverIndex < this.HandoverList.length - 1) {
            this.HandoverIndex = this.HandoverIndex + 1;
            this.HandoverObj = this.HandoverList[this.HandoverIndex];
          }
        }
      },
      HandRuleMove(type){
        //上一条
        if (type == 1) {
          if (this.HandRuleIndex > 0) {
            this.HandRuleIndex = this.HandRuleIndex - 1;
            this.HandRuleObj = this.HandoverRuleList[this.HandRuleIndex];
          }
        }
        //下一条
        else {
          if (this.HandRuleIndex < this.HandoverRuleList.length - 1) {
            this.HandRuleIndex = this.HandRuleIndex + 1;
            this.HandRuleObj = this.HandoverRuleList[this.HandRuleIndex];
          }
        }
      },
      //工作清单上传图片
      UploadWorkFile(files) {
        UploadSelfFile('Attachment', files.file, res => {
          if (this.WorkObj.FileList == null) {
            this.WorkObj.FileList = [];
          }
          if (res.Code == 1) {
            this.WorkObj.FileList.push(res.FileUrl);
          }
        })
      },
      //上传
      UploadAttachment(files) {
        UploadSelfFile('Attachment', files.file, res => {
          if (res.Code == 1) {
            this.addMsg2.FileList.push(res.FileUrl);
          }
        })
      },
      UploadJiaojie(files) {
        UploadSelfFile('Attachment', files.file, res => {
          if (res.Code == 1) {
            this.addMsg3.FileList.push(res.FileUrl);
          }
        })
      },
      //保存工作清单
      saveOrder(type) {
        if (this.WorkObj.FileList == null) {
          this.WorkObj.FileList = [];
        }
        if (type == 1) {
          if (this.WorkObj.ItemImgList.length > 0 && this.WorkObj.FileList.length == 0) {
            this.$q.notify({
              type: 'negative',
              message: '请上传图片',
              position: 'top'
            })
            return
          }
        }
        this.WorkObj.IsChecked = type;
        var saveWorkMsg = {
          Id: this.WorkObj.Id, //编号
          PlanShift: this.saveObj.Shift, //值班班次
          PlanType: 1, //值班类型(1-值班事项，2-交接事项，3-突发事项)
          PlanId: this.saveObj.Id, //值班编号
          WorkContent: this.WorkObj.WorkContent,
          WorkIsFinish: this.WorkObj.IsChecked,
          ItemId: this.WorkObj.ItemId,
          FileList: this.WorkObj.FileList,
          ItemType: this.WorkObj.ItemType,
        };
        if (type == 2) {
          saveWorkMsg.WorkContent = this.WorkContent;
        }
        SetDutyContent(saveWorkMsg).then(res => {
          this.isShowSure = false;
          this.getWorkList();
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: res.Message,
            position: 'top'
          })
        })
        this.isShowSure = false;
      },
      //保存突发事件
      saveTufa() {
        this.addMsg2.PlanShift = this.saveObj.Shift;
        this.addMsg2.PlanId = this.saveObj.Id;
        SetDutyContent(this.addMsg2).then(res => {
          this.getWorkList();
          this.$refs.hengLine.click();
        })
      },
      //保存编辑突发
      saveEdit(obj) {
        this.addMsg2.PlanShift = obj.PlanShift;
        this.addMsg2.PlanId = obj.PlanId;
        this.addMsg2.Id = obj.Id;
        SetDutyContent(this.addMsg2).then(res => {
          this.getWorkList();
          this.$refs.hengLine.click();
        })
      },
      //保存编辑交接
      saveJJEdit(obj) {
        this.addMsg3.PlanShift = obj.PlanShift;
        this.addMsg3.PlanId = obj.PlanId;
        this.addMsg3.Id = obj.Id;
        SetDutyContent(this.addMsg3).then(res => {
          this.getWorkList();
          this.$refs.hengLine.click();
        })
      },
      //交接工作
      saveJiaojie() {
        this.addMsg3.PlanShift = this.saveObj.Shift;
        this.addMsg3.PlanId = this.saveObj.Id;
        SetDutyContent(this.addMsg3).then(res => {
          this.getWorkList();
          this.$refs.hengLine.click();
        })
      },
      //删除交接新增图片
      jiaojieRemoveAdd(index) {
        this.addMsg3.FileList.splice(index, 1)
      },
      //删除突发新增图片
      handleRemoveAdd(index) {
        this.addMsg2.FileList.splice(index, 1)
      },
      UploadEdit(files) {
        UploadSelfFile('Attachment', files.file, res => {
          if (res.Code == 1) {
            this.addMsg2.FileList.push(res.FileUrl);
          }
        })
      },
      //交接修改
      jiaojieEdit(files) {
        UploadSelfFile('Attachment', files.file, res => {
          if (res.Code == 1) {
            this.addMsg3.FileList.push(res.FileUrl);
          }
        })
      },
      //修改突发
      EditTufa(obj) {
        this.addMsg2.OtherContent = obj.OtherContent;
        this.addMsg2.FileList = JSON.parse(JSON.stringify(obj.FileList));
      },
      EditJiaojie(obj) {
        this.addMsg3.OtherContent = obj.OtherContent;
        this.addMsg3.FileList = JSON.parse(JSON.stringify(obj.FileList));
      },
      //删除突发
      delTufa() {
        this.$q.dialog({
          title: '删除提示',
          message: "是否要删除此突发事项?",
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          this.$nextTick(() => {
            var Obj = this.EmergenciesList[this.EmergenciesIndex];
            let msg = {
              Id: Obj.Id
            }
            SetDutyContent(msg).then(res => {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: res.Message,
                position: 'top'
              })
              this.EmergenciesObj = {};
              this.EmergenciesMove(1);
              this.getWorkList();
            })
          })
        }).onCancel(() => {

        });
      },
      //删除交接
      delJiaojie() {
        this.$q.dialog({
          title: '删除提示',
          message: "是否要删除此交接事项?",
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          this.$nextTick(() => {
            var Obj = this.HandoverList[this.HandoverIndex];
            let msg = {
              Id: Obj.Id
            }
            SetDutyContent(msg).then(res => {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: res.Message,
                position: 'top'
              })
              this.HandoverObj = {};
              this.HandoverMove(1);
              this.getWorkList();
            })
          })
        }).onCancel(() => {

        });
      },
      //清除addmsg
      clearAddMsg2() {
        this.addMsg2.OtherContent = '';
        this.addMsg2.FileList = [];
        this.addMsg3.OtherContent = '';
        this.addMsg3.FileList = [];
      },
      //获取工作统计
      getWorkCount() {
        let WorkLen = this.WorkList.length;
        this.WorkList.forEach(x => {
          if (x.IsChecked == 1) {
            WorkLen = WorkLen - 1;
          }
        })
        return WorkLen;
      }
    },
  }

</script>
