<template>
    <div class='smInfo'>
      <div class='smList'>
          <div class='remake'>
              <div class='remakeColor'></div>
              <div class='remakeTitle'>{{titleValue}}</div>
              <div class='searchInfo'>
                  <el-select class="smSearch" v-model="smSearch" placeholder="请选择" size="small">
                      <el-option label="施工" value="CON"></el-option>
                      <el-option label="监理" value="SPV"></el-option>
                  </el-select>
              </div>
          </div>
          <div class='tableDiv'>
              <div class='procedureInfo'>
                  <div class='infoItem' v-for="(item,index) of procedureInfo" :key="index" :style='procedureStyle' :class="setClass(item)">
                      <div class='start' :class="setClass(item)"></div>
                      <div class='spanTilte' :class="setClass(item)"><span class='indexSpan'>{{(index+1)}}</span><span class='spanText'>{{item.pdName}}</span></div>
                      <div class='end' :class="setClass(item)"></div>
                  </div>
              </div>
              <div class='procedureContent'>
                  <template v-if="tableData.length>0">
                      <div class="procedureTable">
                        <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%"
                            height="100%"
                            tooltip-effect="dark"
                            :cell-style="cellStyle"
                            :header-cell-style="headerStyle">
                                <el-table-column label="序号" type="index"  />
                                <el-table-column prop="dataType" label="人员类型" ></el-table-column>
                                <el-table-column prop="createTime" label="时间" width="200"></el-table-column>
                                <el-table-column prop="createUserName" label="人员" ></el-table-column>
                                <el-table-column prop="pdCodeName" label="工序" ></el-table-column>
                                <el-table-column prop="distance" label="距离（米）" ></el-table-column>
                                <el-table-column prop="scanTimes" label="扫码次序" ></el-table-column>
                                <el-table-column prop="newpspipefileList" label="照片"></el-table-column>
                        </el-table>
                      </div>
                      <el-pagination
                          style="display:flex"
                          :current-page="paging.current"
                          :page-size="paging.size"
                          :total="paging.total"
                          layout="total, prev, pager, next"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                      />
                  </template>
                  <div v-else class="noData">
                    <div class="icon" :style="noDataPic"></div>
                    <span>暂无{{titleValue}}信息</span>
                  </div>
              </div>
          </div>
      </div>
      <div class='pictureList'>
          <div class="image-item" v-for="(item,index) of picList" :key="index">
            <el-image 
                :src="item.url" 
                :preview-src-list="deconstruction(picList,index)">
            </el-image>
            <div class="picCreateTime">{{item.time}}</div>
            <div class="picGxName">{{item.gx}}</div>
          </div>
      </div>
    </div>
</template>
<script>
import apis from "@/api/PipeUnitInfo";
import verificationHelper from '@/utils/mapCommon/VerificationHelper'
export default {
    name: "UnitScanInfo",
    data(){
        return{
            noDataPic:"background-image: url("+require("@/views/widgets/PipeUnitInfo/images/sg.png")+")",
            selectOption:{
                geoType: '',
                dataType: '',
                pbsCode: '',
                prjId:''
            },
            paging:{
                current: 1, //当前页，默认0
                size: 10, //每页数据条数
                total:0   //总条数
            },
            smSearch:"",
            titleValue:"",
            //表格内容
            cellStyle:{
                color:"#000",
                textAlign: 'center'
            },
            headerStyle:{
                background: '#e6f0fd',
                color: '#3b87d9',
                height: '38px',
                textAlign: 'center'
            },
            tableData: [],
            //工序信息
            procedureInfo:[],
            procedureStyle:'',
            //照片信息
            picList:[],
        }
    },
    methods:{
        /**
         * 展示概述页面
         * @param {string} geoType 部件geometry类型
         * @param {string} dataType 扫码信息主体
         * @param {string} pbsCode 部件pbs编码 
         * @param {string} prjId 工程编码 
         */
        showSmInfoPage(geoType, dataType, pbsCode, prjId) {
            this.selectOption = {
                geoType: geoType,
                dataType: dataType,
                pbsCode: pbsCode,
                prjId:prjId
            };
            this.titleValue=this.selectOption.dataType=='CON'?'施工':'监理'
            this.smSearch=this.selectOption.dataType
        },
        //信息获取
        async showPage() {
            let geoType = this.selectOption.geoType
            let dataType =this.selectOption.dataType
            let pbsCode=this.selectOption.pbsCode
            const options = {
                "orders[0].asc": false,
                "orders[0].column": "create_time",
                "current": this.paging.current,
                "size":this.paging.size,
                "dataType": dataType,
                "pbsCode": pbsCode
            };
            this.picList=[];
            this.tableData=[];
            this.procedureInfo=[];
            const res = geoType === "LINE" ?await apis.getNewpsPipeInfo(options) :await apis.getNewpsNodeInfo(options);
            const { code, result } = res.data;
            if(code==1){
                if(result.records.length!=0){
                    this.tableData=result.records.map((item)=>{
                      let picArray = null;
                      if (geoType === "LINE") {
                          picArray = item.newpspipefileList;
                      } else {
                          picArray = item.newpsnodefileList;
                      }
                      this.getPhoto(picArray,item.createTime,verificationHelper.setNullAndUndefined(item.pdCodeName))
                      return {
                        ...item,
                        dataType:(dataType == "SPV" ? "监理" : "施工"),
                        createTime:verificationHelper.setNullAndUndefined(item.createTime),
                        createUserName:verificationHelper.setNullAndUndefined(item.createUserName),
                        pdCodeName:verificationHelper.setNullAndUndefined(item.pdCodeName),
                        distance:!isNaN(parseFloat(verificationHelper.setNullAndUndefined(item.distance))) ? 
                        (parseFloat(verificationHelper.setNullAndUndefined(item.distance))).toFixed(2) : '/',
                        scanTimes:"第" + verificationHelper.setNullAndUndefined(item.scanTimes) + "次",
                        newpspipefileList:picArray.length + "张"
                      };
                    })
                    this.paging.total=result.records.length
                    this.getProcedure(result);
                }
                
            }else{
                this.$message.error("扫码信息获取失败");
            }
        },
        //获取照片信息
        getPhoto(picArray,createTime,gx){
          if (picArray && picArray.length && picArray.length > 0) {
              picArray.forEach(picItem => {
                  let time = "/";
                  if (createTime) {
                      time = verificationHelper.setNullAndUndefined(createTime);
                  }
                  let token="&access_token=29e2de53-0003-4ee0-a4d6-ba91d8bbd81e";
                  let picurl="https://yeepms.yeec.com.cn/gis-api" + '/base/file/loadImg' + "?remotePath=" + picItem.filePath + token
                  this.picList.push({url:picurl,time:time,gx:gx})
              })
          }
        },
        deconstruction(data,index){
            let temp=[]
            data.forEach((item)=>{
                temp.push(item.url)
            })
            return temp.slice(index).concat(temp.slice(0,index))//构建一个以当前图片为起始的数组
        },
        //获取工序信息
        async getProcedure(resultInfo) {
          let searchData = {
              prjId: this.selectOption.prjId,
              pipeType: this.selectOption.geoType === "LINE" ? "1" : "0",
              current: 1,
              pbsCode: this.selectOption.pbsCode,
              size: 10000,
              "orders[0].column": "pd_sort",
              "orders[0].asc": true
          };
          const res = await apis.getProcedureInfo(searchData);
          const { code, result } = res.data;
          if (code === 1) {
                this.procedureInfo=result.records
                this.procedureStyle='width:'+(100 / result.records.length)+'%';
          }else{
            this.$message.error('工序信息获取失败')
          }
        },
        setClass(item){
          let index = this.tableData.findIndex(item2 => item2.pdCodeName == item.pdName);
          let pclass=index != -1?'wc':'';
          return pclass
        },
        // 每页多少条
        handleSizeChange(val) {
          this.paging.size = val;
        },
        // 当前页
        handleCurrentChange(val) {
          this.paging.current = val;
        },
    },
    watch:{
      smSearch:{
        handler(n,o){
          this.selectOption.dataType=n;
          this.titleValue=this.selectOption.dataType=='CON'?'施工':'监理'
          this.showPage()
        }
      },
      selectOption:{
        handler(n,o){
          this.selectOption=n;
          this.showPage()
        },
        deep:true
      }
    }
}
</script>
<style lang="scss" scoped>
  .smInfo {
    display: flex;
    flex-flow: column;
    height: 430px;
    overflow: auto;
    .smList{
      .procedureInfo {
        position: relative;
        width: 100%;
        height: 30px;
        float: left;
      //   margin-bottom: 20px;
        margin: 15px 0 15px 0;
        text-align: center;
        line-height: 30px;

        .infoItem {
          float: left;
          height: 30px;
        }

        .infoItem:first-child .start {
          width: 10px;
          height: 100%;
          background: #dedede;
          border: none;
        }

        .infoItem:first-child .start.wc {
          background: #0970cf;
        }

        .start {
          width: 0;
          height: 0;
          border-top: 15px solid #dedede;
          border-left: 10px solid transparent;
          border-bottom: 15px solid #dedede;
          position: relative;
          float: left;
        }

        .start.wc {
          border-top: 15px solid #0970cf;
          border-bottom: 15px solid #0970cf;
        }

        .spanTilte {
          position: relative;
          width: calc(100% - 20px);
          float: left;
          background: #dedede;
          height: 100%;
        }

        .spanTilte.wc {
          background: #0970cf;
          color: white;
        }

        span.indexSpan {
          display: block;
          position: relative;
          float: left;
          width: 22px;
          top: 4px;
          border: 1px solid;
          border-radius: 11px;
          line-height: 20px;
          left: calc((100% - 100px) / 2);
        }

        span.spanText {
          display: block;
          position: relative;
        }

        .end {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 10px solid #dedede;
          border-bottom: 15px solid transparent;
          position: relative;
          float: left;
        }

        .end.wc {
          border-left: 10px solid #0970cf;
        }

        .infoItem:last-child .end {
          width: 10px;
          height: 100%;
          background: #dedede;
          border: none;
        }

        .infoItem:last-child .end.wc {
          background: #0970cf;
        }
      }
      .procedureContent{
        width: 100%;
        .procedureTable{
            width: 100%;
            max-height: 240px;
            overflow: auto;
        }
      }
      .remake {
        position: relative;
        float: left;
        width: 100%;
      //   padding: 20px 0px 0px 30px;

        .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;
        }

        .smSearch {
          position: relative;
          float: right;
          width: 100px;
          right: 30px;
        }
      }
      .tableDiv {
        position: relative;
        float: left;
        width: 100%;
      //   padding: 20px 20px 20px 20px;
        text-align: center;
        border-bottom: solid;
        border-width: 2px;
        border-color: rgb(246, 246, 246);
        display: flex;
        flex-flow: column;
      }
      .noData{
        width: 164px;
        height: 93px;
        position: relative;
        float: left;
        left: calc((100% - 164px) / 2);
        margin: 40px 0px;
        .icon{
          width: 100%;
          height: 100%;
          // background-image: url(./images/sg.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        span{
          display: inline-block;
          padding: 10px;
          text-align: center;
        }
      }
    }
    .pictureList{
      width: 100%;
      margin-top: 10px;
      .image-item{
        width: 25%;
        float: left;
      }
      .picCreateTime{
        width: 97%;
        position: relative;
        bottom: 20px;
        font-size: 18px;
        color: #000;
        background-color: rgba(255, 255, 255, 0.5);
      }
      .picGxName{
        text-align: right;
        padding-right: 8px;
        margin: -10px 0 10px 0;
      }
      .el-image{
        width: 95%;
        height: 200px;
      }
    }
  }
</style>