<style>
  .sche_ListInner {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

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

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

  .sche_mid .el-input__inner {
    border: 0;
    width: 90%;
    height: 30px;
    line-height: 30px;
  }

  .sche_Fenye {
    display: flex;
    width: 100px;
    position: absolute;
    right: 20px;
    bottom: 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: 15px 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;
  }

  .schedul_Upload {
    background-color: #E9EFFF;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100%;
    height: 107px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
    font-size: 40px;
    text-align: center;
    line-height: 107px;
    position: relative;
    background-size: cover;
    color: #2961FE;
    background-repeat: no-repeat;
  }

  .schedul_Upload .upDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

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

</style>
<template>
  <div>
    <div class="sche_mid">
      <div class="sche_midList">
        <div class="scheList_TOP">
          <img src="../../assets/images/work_list.png" />
          <span class="word_sche">工作清单</span>
          <div class="sche_hengLine"></div>
          <div slot="reference" class="addSche" @click="saveOrder">
            <i class="iconfont icon-chenggong" title="点击保存"></i>
          </div>
          <span class="word_scheNumber" v-if="saveObj&&saveObj.WorkList"
            :class="{'schNoneNum':saveObj.WorkList.length==0}">{{this.saveObj.WorkList.length}}</span>
        </div>
        <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" style="margin:5px 10px 0 0;">{{WorkObj.ItemName}} </div>
              <el-checkbox style="margin-top:5" :true-label="1" :false-label="0" v-model="WorkObj.IsChecked">
              </el-checkbox>
            </template>
            <template v-else-if="WorkObj.ItemType==2">
              <div class="sche_Dian"></div>
              <div class="sche_ListInner" style="flex-shrink: 0">{{WorkObj.ItemName}} </div>
              <div style="width:100%;">
                <el-input v-model="WorkObj.WorkContent" placeholder="完成情况怎么样"></el-input>
              </div>
            </template>
          </div>
          <div></div>
        </div>
        <div class="sche_Fenye" v-if="saveObj&&saveObj.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&&saveObj.WorkList">{{WorkIndex+1}}/{{this.saveObj.WorkList.length}}</div>
          <div class="sche_left" v-if="saveObj&&saveObj.WorkList">
            <i class="iconfont icon-arrow-right1" :class="{'canClick_Color':WorkIndex!=saveObj.WorkList.length-1}"
              @click="WorkMove(2)"></i>
          </div>
        </div>
      </div>
      <div class="sche_midList">
        <div class="scheList_TOP">
          <img v-if="EmergenciesObj&&EmergenciesObj.FileURL" :src="EmergenciesObj.FileURL" />
          <img v-else src="../../assets/images/tufa.png" />
          <span class="word_sche">突发事件</span>
          <span class="word_scheNumber" style="" v-if="saveObj&&saveObj.EmergenciesList"
            :class="{'schNoneNum':saveObj.EmergenciesList.length==0}">{{this.saveObj.EmergenciesList.length}}</span>
          <div class="sche_hengLine" ref="hengLine"></div>
          <el-popover placement="bottom" popper-class="tufaPop" width="400" trigger="click">
            <div>
              <el-upload class="schedul_Upload" action="" :style="{'background-image': 'url('+addMsg2.FileURL+')'}"
                :show-file-list="false" :http-request="UploadAttachment">
                <i class="el-icon-plus"></i>
                <div class="upDiv"></div>
              </el-upload>
              <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">
              <i class="iconfont icon-img_haha"></i>
            </div>
          </el-popover>
        </div>
        <div class="secondList_Bottom">
          <div class="sche_List_in">
            <div class="sche_ListInner" v-if="EmergenciesObj">{{EmergenciesObj.OtherContent}}</div>
          </div>
        </div>
        <div class="sche_Fenye" v-if="saveObj&&saveObj.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.saveObj.EmergenciesList.length}}</div>
          <div class="sche_left">
            <i class="iconfont icon-arrow-right1"
              :class="{'canClick_Color':EmergenciesIndex!=saveObj.EmergenciesList.length-1}"
              @click="EmergenciesMove(2)"></i>
          </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;" v-if="saveObj&&saveObj.HandoverList"
            :class="{'schNoneNum':saveObj.HandoverList.length==0}">{{this.saveObj.HandoverList.length}}</span>
          <el-popover placement="bottom" popper-class="tufaPop" width="400" trigger="click">
            <div>
              <el-upload class="schedul_Upload" action="" :style="{'background-image': 'url('+addMsg3.FileURL+')'}"
                :show-file-list="false" :http-request="UploadJiaojie">
                <i class="el-icon-plus"></i>
                <div class="upDiv"></div>
              </el-upload>
              <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">
              <i class="iconfont icon-img_haha"></i>
            </div>
          </el-popover>
        </div>
        <div class="secondList_Bottom">
          <div class="sche_ListInner" v-if="HandoverObj">{{HandoverObj.OtherContent}}</div>
        </div>
        <div class="sche_Fenye" v-if="saveObj&&saveObj.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.saveObj.HandoverList.length}}</div>
          <div class="sche_left" :class="{'canClick_Color':HandoverIndex!=saveObj.HandoverList.length-1}">
            <i class="iconfont icon-arrow-right1" @click="HandoverMove(2)"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    SetDutyContent
  } from '../../api/scheduling/schedu'
  import {
    UploadSelfFile
  } from '../../api/common/common'

  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        dataList: {},
        tufaVisible: false,
        HandoverIndex: 0, //交接事项索引
        HandoverObj: {}, //交接事项对象
        EmergenciesIndex: 0, //突发事项索引
        EmergenciesObj: {}, //突发事项对象
        WorkIndex: 0, //工作清单索引
        WorkObj: {}, //工作清单对象
        //突发事件数据
        addMsg2: {
          Id: 0, //编号
          PlanShift: 0, //值班班次
          PlanType: 3, //值班类型(1-值班事项，2-交接事项，3-突发事项)
          PlanId: 0, //值班编号
          FileURL: "", //文件路径
          OtherContent: "", //突发事项、工作交接(值班类型为2.3是使用)内容
          OtherRemark: "", //突发事项、工作交接(值班类型为2.3是使用)备注
        },
        //交接工作说明
        addMsg3: {
          Id: 0, //编号
          PlanShift: 0, //值班班次
          PlanType: 2, //值班类型(1-值班事项，2-交接事项，3-突发事项)
          PlanId: 0, //值班编号
          FileURL: "", //文件路径
          OtherContent: "", //突发事项、工作交接(值班类型为2.3是使用)内容
          OtherRemark: "", //突发事项、工作交接(值班类型为2.3是使用)备注
        },
      }
    },
    created() {
      console.log("saveObj", this.saveObj);
    },
    watch: {
      saveObj: {
        handler() {
          if (this.saveObj.EmergenciesList && this.saveObj.EmergenciesList.length > 0) {
            this.EmergenciesObj = this.saveObj.EmergenciesList[this.EmergenciesIndex];
          }
          if (this.saveObj.HandoverList && this.saveObj.HandoverList.length > 0) {
            this.HandoverObj = this.saveObj.HandoverList[this.HandoverIndex];
          }
          if (this.saveObj.WorkList && this.saveObj.WorkList.length > 0) {
            this.WorkObj = this.saveObj.WorkList[this.WorkIndex];
          }
        },
        deep: true
      },
    },

    methods: {
      WorkMove(type) {
        //上一条
        if (type == 1) {
          if (this.WorkIndex > 0) {
            this.WorkIndex = this.WorkIndex - 1;
            this.WorkObj = this.saveObj.WorkList[this.WorkIndex];
          }
        }
        //下一条
        else {
          if (this.WorkIndex < this.saveObj.WorkList.length - 1) {
            this.WorkIndex = this.WorkIndex + 1;
            this.WorkObj = this.saveObj.WorkList[this.WorkIndex];
          }
        }
      },
      //紧急事项上一条(1),下一条(2)
      EmergenciesMove(type) {
        //上一条
        if (type == 1) {
          if (this.EmergenciesIndex > 0) {
            this.EmergenciesIndex = this.EmergenciesIndex - 1;
            this.EmergenciesObj = this.saveObj.EmergenciesList[this.EmergenciesIndex];
          }
        }
        //下一条
        else {
          if (this.EmergenciesIndex < this.saveObj.EmergenciesList.length - 1) {
            this.EmergenciesIndex = this.EmergenciesIndex + 1;
            this.EmergenciesObj = this.saveObj.EmergenciesList[this.EmergenciesIndex];
          }
        }
      },
      //交接事项上一条(1),下一条(2)
      HandoverMove(type) {
        //上一条
        if (type == 1) {
          if (this.HandoverIndex > 0) {
            this.HandoverIndex = this.HandoverIndex - 1;
            this.HandoverObj = this.saveObj.HandoverList[this.HandoverIndex];
          }
        }
        //下一条
        else {
          if (this.HandoverIndex < this.saveObj.HandoverList.length - 1) {
            this.HandoverIndex = this.HandoverIndex + 1;
            this.HandoverObj = this.saveObj.HandoverList[this.HandoverIndex];
          }
        }
      },
      //上传
      UploadAttachment(files) {
        UploadSelfFile('Attachment', files.file, res => {
          if (res.Code == 1) {
            this.addMsg2.FileURL = res.FileUrl;
          }
        })
      },
      UploadJiaojie(files) {
        UploadSelfFile('Attachment', files.file, res => {
          if (res.Code == 1) {
            this.addMsg3.FileURL = res.FileUrl;
          }
        })
      },
      //保存工作清单
      saveOrder() {
        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,
        };
        SetDutyContent(saveWorkMsg).then(res => {
          this.$emit('refreshPage');
        })
      },
      //保存突发事件
      saveTufa() {
        this.addMsg2.PlanShift = this.saveObj.Shift;
        this.addMsg2.PlanId = this.saveObj.Id;
        SetDutyContent(this.addMsg2).then(res => {
          this.$emit('refreshPage');
          this.$refs.hengLine.click();
        })
      },
      //交接工作
      saveJiaojie() {
        this.addMsg3.PlanShift = this.saveObj.Shift;
        this.addMsg3.PlanId = this.saveObj.Id;
        SetDutyContent(this.addMsg3).then(res => {
          this.$emit('refreshPage');
          this.$refs.hengLine.click();
        })
      }
    },
  }

</script>
