<template>
  <div class="unitInfo">
    <div class="baseInfo">
      <div class="item" v-for="info in infos" :key="info.title">
        <span class="title" :title="info.title">{{ info.title }}:</span>
        <el-input class="value" :value="info.value" size="medium"></el-input>
      </div>
    </div>
    <div class="twoBaseInfo">
      <!-- <span class='project'>二维码:</span> -->
      <div class="qrcodeItem">
        <!-- <el-image class="qrcode"></el-image> -->
          <el-image
          style="width: 100%; height: 100%"
          :src="qrUrl"
          :preview-src-list="qrUrlPreview">
          </el-image>
      </div>
    </div>
    <div class="processTime">
      <div class="remake">
        <div class="remakeColor"></div>
        <div class="remakeTitle">进度信息</div>
      </div>
      <div class="progress-items">
        <span class="itemTitle">工程计划开始时间：</span>
        <el-input type="text" class="jhStart" readonly="readonly" :value="planBeginTime" size="medium"></el-input>
        <span class="itemTitle">工程计划结束时间：</span>
        <el-input type="text" class="jhEnd" readonly="readonly" :value="planEndTime" size="medium"></el-input>
      </div>
      <div class="progress-items">
        <span class="itemTitle">部件实际开始时间：</span>
        <el-input type="text" class="sjStart" readonly="readonly" :value="begintime" size="medium"></el-input>
        <!-- <span class='itemTitle'>部件实际结束时间：</span><input type='text' class='sjEnd' readonly='readonly' value='/' /> -->
        <span class="itemTitle endTime">{{ lastimeText }}</span>
        <el-input type="text" class="sjEnd" readonly="readonly" :value="lastime" size="medium"></el-input>
      </div>
    </div>
  </div>
</template>
<script>
import VerificationHelper from '@/utils/mapCommon/VerificationHelper';
import apis from "@/api/PipeUnitInfo";
/**
 * 部件查看---概述
 */
export default {
  name: "UnitBaseInfo",
  props: {
    apiUrls: null,
    currentUnit: null
  },
  data() {
    return {
      qrUrl: "", //部件二维码URL
      qrUrlPreview:[],
      infos: [], //部件概览信息
      planBeginTime: "/", //部件计划开始时间
      planEndTime: "/", //部件计划结束时间
      begintime: "/", //部件实际开始时间
      lastime: "/", //部件实际结束时间
      isFinish: "", //部件是否完工
    };
  },
  computed: {
    lastimeText() {
      return this.isFinish === "1"
        ? "部件实际结束时间："
        : "部件最后扫码时间：";
    },
    token() {
      return this.$store.getters.token;
    }
  },
  methods: {
    /**
     * 展示概述页面
     * @param result 请求的获取的所有数据
     * @param info 展示的属性的数据
     */
    showUnitInfoPage(result, info) {
      this.initUnitBaseInfo(result, info);
      this.getWbsInfo(result.code);
    },
    /**
     * 该方法用于初始化管线基础属性信息
     * @param info 属性信息
     */
    initUnitBaseInfo(result, info) {
      //基础信息展示
      this.infos = info.map(item => {
        let titleStr = VerificationHelper.setNullAndUndefined(item.title);
        let valueStr = VerificationHelper.setNullAndUndefined(item.value);
        return { title: titleStr, value: valueStr }
      });
      //二维码前面的信息
      //请求后台，获取部件二维码
      const url = this.currentUnit.geoType === "LINE" ? this.apiUrls.createPicPipe : this.apiUrls.createPicNode;
      const options = {
        pbs: this.currentUnit.code
      }
      this.qrUrl = this.$store.state.apiRoot + url + "?pbs=" + options.pbs;
      this.qrUrlPreview=[];
      this.qrUrlPreview.push(this.qrUrl)
    },
    /**
     * 获取计划开始事件和结束事件
     * */
    getWbsInfo(pbs) {
      let data = {
        pbs: pbs
      }
      apis.getWbsInfo(data).then(result => {
        result=result.data;
        if (result.result) {
          if (result.result.planBeginTime) {
            this.planBeginTime=result.result.planBeginTime;
          }
          if (result.result.planEndTime) {
            this.planEndTime=result.result.planEndTime;
          }
        }
      })
      apis.getPartsTime({ code: pbs }).then(result => {
        result=result.data;
        if (result.result) {
          this.isFinish=result.result.isFinish
          if (result.result.begintime) {
              this.begintime=result.result.begintime;
          }
          if (result.result.lastime) {
              this.lastime=result.result.lastime;
          }
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.unitInfo {
    ::v-deep.el-input__inner{
      background-color: #f8f8f8;
    }
    .baseInfo {
      width: 75%;
      position: relative;
      float: left;
      .item {
        position: relative;
        float: left;
        width: 45%;
        //padding: 14px 0px 0px 10px;
        display: flex;
        align-items: center;
        padding: 5px;

        .el-input.value {
          flex: 0.6;
          display: inline-block;
          position: relative;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          color: black;
          border: none;
        }
        span.title {
          flex: 0.4;
          display: block;
          text-align: right;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          color: #888888;
          padding: 6px;
          position: relative;
          float: left;
        }
      }
    }

    .twoBaseInfo {
      position: relative;
      float: left;
      width: 20%;
      left: 2.5%;

      .qrcodeItem {
        position: relative;
        float: left;
       // width: 100%;
       height: 225px;
       width:160px;
        // background-image: url(./images/createPicNode.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .projectName {
          position: relative;
          float: left;
          width: 100%;
          display: block;
          text-align: left;
          margin-left: 10px;
          padding: 0px 10px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-bottom: 10px;
          font-weight: 700;
        }

        .qrcode {
          position: relative;
          float: left;
          width: 100%;
          top: 20px;
        }
      }
    }

    .processTime {
      position: relative;
      float: left;
      border-top: solid;
      border-bottom: solid;
      border-width: 2px;
      border-color: #f8f8f8;
      width: 100%;
      margin-top: 20px;
      // height: 200px;

      .remake {
        position: relative;
        float: left;
        width: 100%;
        // padding: 20px 0px 0px 30px;
        padding: 10px 0;

        .remakeColor {
          position: relative;
          float: left;
          width: 5px;
          // top: 5px;
          height: 20px;
          background: #1565cf;
        }

        .remakeTitle {
          position: relative;
          float: left;
          font-size: 20px;
          font-weight: 700;
          left: 10px;
        }
      }

      .progress-items {
        // width: 100%;
        // position: relative;
        // float: left;
        // padding: 14px 0 0 10px;
        display: flex;
        align-items: center;
        padding: 10px;
      }

      .itemTitle {
        width: 170px;
        position: relative;
        float: left;
        text-align: right;
        color: #888888;
        padding: 6px;
      }

      .jhStart,
      .jhEnd,
      .sjStart,
      .sjEnd {
        width: 220px;
        position: relative;
        float: left;
        text-align: left;
        background-size: 100px;
        // background: #f8f8f8;
        margin-right: calc(50% - 390px);
        color: black;
        padding-left: 10px;
        border: none;
      }
    }
  }
</style>
