<template>
  <div class="max-big-box">
    <!--步骤条-->
    <div class="steps-box">
      <div class="steps-for-box" v-for="(item,index) in stepsData" :key="index">
        <div>
          <p :class="{'p-color-C':index==0,'p-color-A':index<stepsType||index==stepsType,'p-color-B':index>stepsType}"></p>
          <img v-if="index<stepsType" src="~@/assets/images/icon_44.png">
          <img v-if="index==stepsType" src="~@/assets/images/icon_45.png">
          <img v-if="index>stepsType" src="~@/assets/images/icon_46.png">
          <p :class="{'p-color-C':index==7,'p-color-A':index<stepsType,'p-color-B':index>stepsType||index==stepsType}"></p>
        </div>
        <p class="steps-title" :class="{'steps-color-A':index<stepsType,'steps-color-B':index>stepsType}">{{item}}</p>
      </div>
    </div>
    <div class="info-max-big-box">
      <div class="info-left-box">
        <div class="info-left-min-box TabStrip">
          <div class="info-left-title">
            <img src="~@/assets/images/xian_1.png">
            <p>任务详细信息</p>
            <img src="~@/assets/images/xian_2.png">
          </div>
          <div class="info-left-info-box">
            <p>任务名称：</p>
            <p>{{leftData.taskName}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务类型：</p>
            <p>{{leftData.planType==1?"应急支援":(leftData.planType==2?"战备拉动":(leftData.planType==3?"训练考核任务":""))}}</p>
          </div>
          <div class="info-left-info-box">
            <p>单位名称：</p>
            <p>{{leftData.organizationName}}</p>
          </div>
          <div class="info-left-info-box">
            <p>医疗队名称：</p>
            <p>{{leftData.medicalName}}</p>
          </div>
          <div class="info-left-info-box">
            <p>基数单位及数量</p>
            <p>{{leftData.carryingEquipment}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务执行时间</p>
            <p>{{leftData.startTime}} 至 {{leftData.endTime}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务执行地点</p>
            <p>{{leftData.taskPlace}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务内容</p>
            <p>{{leftData.taskContent}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务状态</p>
            <p class="p-color">{{leftData.taskStatus==1?stepsData[0]:(leftData.taskStatus==2?stepsData[1]:(leftData.taskStatus==3?stepsData[2]:(leftData.taskStatus==4?stepsData[3]:(leftData.taskStatus==5?stepsData[4]:(leftData.taskStatus==6?stepsData[5]:(leftData.taskStatus==7?stepsData[6]:""))))))}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务发布人</p>
            <p>{{leftData.createUser}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务发布形式</p>
            <p>{{leftData.pushType==1?"直接发布":"选择预案"}}</p>
          </div>
          <div class="info-left-info-box">
            <p>发布时间</p>
            <p>{{leftData.createTime}}</p>
          </div>
        </div>
      </div>
      <div class="info-right-box">
        <div class="info-right-top-min-box">
          <p class="info-right-title">任务节点详情</p>
          <div class="info-right-top-box">
            <p>序号</p>
            <p>任务状态</p>
            <p>处理人</p>
            <p>处理时间</p>
            <p>备注</p>
          </div>
          <div class="info-right-bottom-box TabStrip">
            <div v-for="(item,index) in rightData" :key="index">
              <p>{{index+1}}</p>
              <p>{{item.taskStatus==1?stepsData[0]:(item.taskStatus==2?stepsData[1]:(item.taskStatus==3?stepsData[2]:(item.taskStatus==4?stepsData[3]:(item.taskStatus==5?stepsData[4]:(item.taskStatus==6?stepsData[5]:(item.taskStatus==7?stepsData[6]:""))))))}}</p>
              <p>{{item.createUser}}</p>
              <p>{{item.endTime}}</p>
              <p>{{item.remark}}</p>
            </div>
          </div>
        </div>
        <div class="info-right-bottom-min-box">
          <p class="info-right-title">任务反馈</p>
          <div class="info-right-text-box">
            <p>反馈节点：</p>
            <p>{{feedbackData.feedbackId==1?stepsData[0]:(feedbackData.feedbackId==2?stepsData[1]:(feedbackData.feedbackId==3?stepsData[2]:(feedbackData.feedbackId==4?stepsData[3]:(feedbackData.feedbackId==5?stepsData[4]:(feedbackData.feedbackId==6?stepsData[5]:(feedbackData.feedbackId==7?stepsData[6]:""))))))}}</p>
          </div>
          <div class="info-right-textarea-box">
            <p>备注：</p>
            <textarea rows="4" cols="20" class="TabStrip" maxlength="100" v-model="feedbackText"  placeholder="请输入"></textarea>
          </div>
          <div class="info-right-button-box">
            <p @click="leftClick">取消</p>
            <p @click="upData">提交</p>
          </div>
        </div>
      </div>
    </div>
    <!--提示窗口-->
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { taskInfoInfo,taskInfoDispose } from '@/api/userApi'
  export default {
    name: "processingTasks",//处理任务
    components:{
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    props:["processingId","taskNameList"],
    data () {
      return {
        stepsData:[],
        stepsType:"",
        leftData:{},
        rightData:[],
      //  反馈节点
        feedbackData:{
          feedbackId:"",
        },
        feedbackText:"",
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
      }
    },

    created(){

    },
    mounted() {
      this.stepsData = this.taskNameList;
      this.taskInfoInfo();
    },
    methods: {
      // 提交按钮
      upData(){
        if(this.feedbackText.length<1){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请填写反馈内容~",
          };
          this.windowType = !this.windowType;
          return
        }
        this.windowData = {
          type:"1",
          title:"提示",
          text:"确定要提交反馈吗?",
          leftButton:"取消",
          rightButton:"确定",
        };
        this.windowType = !this.windowType;
      },
      //任务处理
      async taskInfoDispose(){
        let self = this;
        let param = new FormData();
        param.append('feedbackId',self.feedbackData.feedbackId);
        param.append('remark',self.feedbackText);
        param.append('taskId',self.leftData.id);
        const { data } = await taskInfoDispose(param);
        if(data.code==200){
          this.rightClick();
        }
      },
      rTime(date) {
        var json_date = new Date(date).toJSON();
        return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      },
      //详情信息
      async taskInfoInfo () {
        let self = this;
        const { data } = await taskInfoInfo(this.processingId);
        if(data.code==200){
          this.leftData = data.data.taskInfo;
          this.leftData.createTime = this.rTime(this.leftData.createTime)
          this.leftData.endTime = this.rTime(this.leftData.endTime)
          this.leftData.startTime = this.rTime(this.leftData.startTime)
          this.rightData = data.data.statusList;
          for(let i=0;i<self.rightData.length;i++){
            self.rightData[i].endTime = self.rTime(self.rightData[i].endTime)
          }
          this.feedbackData = data.data.current;
          this.stepsType = data.data.current.feedbackId-1
        }
      },
      //底部按钮事件
      leftClick(){
        this.$emit('newModifyLeftClick');
      },
      rightClick(){
        this.$emit('newModifyRightClick',this.feedbackData);
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(){
        this.windowType = false;
        this.taskInfoDispose();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    /*步骤条*/
    .steps-box
      width:1840px;
      height:81px;
      margin:31px auto 0;
      display: flex
      .steps-for-box
        div
          display: flex
          img
            height:30px;
            width:30px;
          p
            width:100px;
          .p-color-A
            height:8px;
            background:$theme;
            margin-top:11px;
          .p-color-B
            height:6px;
            background:$color_a1;
            margin-top:13px;
          .p-color-C
            height:6px;
            background:rgba(255,255,255,0);
            margin-top:13px;
        .steps-title
          line-height:51px;
          font-size:$font_16;
          text-align center
          color:$color_ff;
        .steps-color-A
          color:$theme;
        .steps-color-B
          color:$color_ff;
    //信息框
    .info-max-big-box
      margin-top:35px;
      display flex
      //左侧
      .info-left-box
        height:670px;
        width:1000px;
        margin:0 77px 0 56px;
        background:url("~@/assets/images/min_back_04.png");
        background-size 100% 100%
        .info-left-min-box
          height:670px;
          width:980px;
          overflow-y:scroll;
          overflow-x:hidden;
          white-space: nowrap;
          padding-bottom:40px;
          .info-left-title
            height:74px;
            width:280px;
            display: flex;
            margin:0 auto 17px;
            img
              margin-top:38px;
              display block
              height:1px;
              width:70px;
            p
              flex:1;
              line-height:74px;
              font-size:$font_20;
              color:$theme;
          .info-left-info-box
            margin:0 136px 0 236px;
            display flex
            p
              font-size:$font_18;
              text-align left
            p:nth-child(1)
              width:151px;
              line-height:40px;
              color:$theme;
            p:nth-child(2)
              width:510px;
              line-height:26px;
              margin:7px 0;
              color:$color_ff
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 4;
              overflow: hidden;
            .p-color
              color:$theme1 !important;
      //右侧
      .info-right-box
        .info-right-top-min-box
          overflow hidden
          width:731px;
          height:286px;
          background:url("~@/assets/images/min_back_02.png");
          background-size 100% 100%
          .info-right-title
            font-size:$font_16;
            color:$color_ff;
            line-height:28px;
            margin:16px 0 0 27px;
            text-align left
            font-weight:700;
          .info-right-top-box
            margin-top:9px;
            display: flex;
            p
              color:$color_ff;
              font-size:$font_16;
              text-align center
              line-height:45px;
            p:nth-child(1)
              margin-left:16px;
              width:49px;
            p:nth-child(2)
              width:118px;
            p:nth-child(3)
              width:102px;
            p:nth-child(4)
              width:166px;
            p:nth-child(5)
              width:260px;
          .info-right-bottom-box
            height:160px;
            width:707px;
            overflow-x:hidden;
            overflow-y:scroll;
            div
              display: flex
              width:707px;
              p
                color:$color_ff;
                font-size:$font_14;
                text-align center
                line-height:52px;
              p:nth-child(1)
                margin-left:16px;
                width:49px;
              p:nth-child(2)
                width:118px;
              p:nth-child(3)
                width:102px;
              p:nth-child(4)
                width:166px;
                text-align left
                line-height:20px;
                padding:15px 0;
                word-wrap:break-word;
                word-break:break-all;
                overflow: hidden;
              p:nth-child(5)
                width:260px;
                text-align left
                line-height:20px;
                padding:15px 10px;
                word-wrap:break-word;
                word-break:break-all;
                overflow: hidden;

        .info-right-bottom-min-box
          overflow hidden
          margin-top:90px;
          width:731px;
          height:286px;
          background:url("~@/assets/images/min_back_02.png");
          background-size 100% 100%
          .info-right-title
            font-size:$font_16;
            color:$color_ff;
            line-height:28px;
            margin:16px 0 0 27px;
            text-align left
            font-weight:700;
          .info-right-text-box
            margin:10px 0 0 34px;
            display flex
            p
              line-height:45px;
              font-size:$font_14;
              text-align left
            p:nth-child(1)
              width:85px;
              color:$theme;
            p:nth-child(2)
              color:$color_ff;
          .info-right-textarea-box
            display flex
            margin-left:34px;
            p
              line-height:36px;
              text-align left
              font-size:$font_14;
            p:nth-child(1)
              width:77px;
              color:$theme;
            textarea
              width:575px;
              height:87px;
              line-height:24px;
              color:$color_ff;
              font-size:$font_14;
              box-shadow:0 0 20px 1px #06b1f0 inset
              background:rgba(6,177,240,0.2);
              border-radius:4px;
              padding:4px 9px;
          .info-right-button-box
            display flex
            width:202px;
            height:30px;
            margin:46px auto;
            p
              width:92px;
              height:30px;
              line-height:30px;
              font-size $font_12
              color:$color_ff;
              cursor:pointer
            p:nth-child(1)
              margin-right:18px;
              background:url("~@/assets/images/button_01.png");
              background-size 100% 100%
            p:nth-child(2)
              background:url("~@/assets/images/button_02.png");
              background-size 100% 100%
</style>
