<template>
  <div class="max-big-box">
    <!--返回按钮-->
    <div class="out-page-button cursor_pointer" @click="outButton">
      <img src="~@/assets/images/icon_25.png">
      <p>返回</p>
    </div>
    <!--步骤条-->
    <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==6,'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.name}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务类型：</p>
            <p>{{leftData.type}}</p>
          </div>
          <div class="info-left-info-box">
            <p>单位名称：</p>
            <p>{{leftData.unitName}}</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.num}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务执行时间</p>
            <p>{{leftData.time}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务执行地点</p>
            <p>{{leftData.address}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务内容</p>
            <p>{{leftData.content}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务状态</p>
            <p class="p-color">{{leftData.state}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务发布人</p>
            <p>{{leftData.releasePeople}}</p>
          </div>
          <div class="info-left-info-box">
            <p>任务发布形式</p>
            <p>{{leftData.releaseForm}}</p>
          </div>
          <div class="info-left-info-box">
            <p>发布时间</p>
            <p>{{leftData.release}}</p>
          </div>
        </div>
      </div>
      <div class="info-right-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>{{item.id}}</p>
            <p>{{item.type}}</p>
            <p>{{item.name}}</p>
            <p>{{item.time}}</p>
            <!--<p >{{item.text}}</p>-->
            <p>{{item.text}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "viewTaskDetails",//任务详细信息查看
    data () {
      return {
        stepsData:[
          "任务受理","人员完成抽组","物资完成装卸","出发拉动","到达地点","执行任务","执行完毕返回"
        ],
        stepsType:3,
        leftData:{
          name:"应急支援任务",
          type:"应急支援",
          unitName:"西南医院",
          medicalName:"应急支援医疗队",
          num:"创伤*****基数~5个、,*******基数~12个",
          time:"2021-07-01 00:00 至 2021-07-02 00:00",
          address:"石家庄人民医院",
          content:"本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容本次任务具体内容",
          state:"物资完成装载",
          releasePeople:"杨爱国",
          releaseForm:"直接发布",
          release:"2021-07-01 10:30:10",
        },
        rightData:[
          {
            id:"1",
            type:1,
            name:"张爱国1",
            time:"2021-01-30 10:10:10",
            text:"已受理,待进行人员抽组."
          },
          {
            id:"2",
            type:2,
            name:"张爱国2",
            time:"2021-01-30 10:10:10",
            text:"已完成人员抽组,预计1月20号装载物资"
          },
          {
            id:"3",
            type:3,
            name:"张爱国3",
            time:"2021-01-30 10:10:10",
            text:"已完成物资装载."
          },
          {
            id:"4",
            type:4,
            name:"张爱国4",
            time:"2021-01-30 10:10:10",
            text:"已受理,待进行人员抽组."
          },
          {
            id:"5",
            type:5,
            name:"张爱国5",
            time:"2021-01-30 10:10:10",
            text:"已完成人员抽组,预计1月20号装载物资"
          },
          {
            id:"6",
            type:6,
            name:"张爱国6",
            time:"2021-01-30 10:10:10",
            text:"已完成物资装载."
          },
        ]
      }
    },

    created(){

    },
    mounted() {

    },
    methods: {
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    //返回按钮
    .out-page-button
      height:30px;
      width:93px;
      margin:0 0 0 106px;
      background:url("~@/assets/images/button_02.png");
      background-size 100% 100%
      display flex
      img
        display block
        height:12px;
        width:7px;
        margin:9px 10px 0 22px;
      p
        line-height:30px;
        font-size:$font_12;
        color:$color_ff;
        text-align left
    /*步骤条*/
    .steps-box
      width:1610px;
      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
        width:731px;
        height:670px;
        background:url("~@/assets/images/min_back_02_1.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:540px;
          width:707px;
          overflow-x:hidden;
          overflow-y:scroll;
          white-space: nowrap;
          div
            display: flex
            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;
            p:nth-child(5)
              width:260px;
              text-align left
              line-height:20px;
              padding:15px 0;
</style>
