<template>
  <div class="tzlInfo">
    <div class="htInfo">
      <div class="remake">
        <div class="remakeColor"></div>
        <div class="remakeTitle titleValue">图纸记录</div>
        <div class="upDown" @click="change" v-if="tzList.length!=0">{{upDown}}<i :class="upDownIcon"></i></div>
      </div>
      <div class="notz" :style="notzPic" v-show="!hasData" v-if="tzList.length==0"><span>暂无图纸信息</span></div>
      <div class="tzInfoList" v-show="hasData" v-else>
            <div class="tableInfo">
              <el-table
                  :data="tzList.slice((paging.current-1)*paging.size,paging.current*paging.size)"
                  stripe
                  style="width: 100%"
                  height="100%"
                  tooltip-effect="dark"
                  :cell-style="cellStyle"
                  :header-cell-style="headerStyle">
                      <el-table-column  label="序号"  type="index" width="80px">
                        <template slot-scope="scope">
                          {{(paging.current - 1) * paging.size + scope.$index + 1}}
                        </template>
                      </el-table-column>
                      <el-table-column class="cell" prop="fileName"  label="图纸名称"  :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="infoType" label="文件类型"></el-table-column>
                      <el-table-column prop="fileType" label="文件格式" ></el-table-column>
                      <el-table-column prop="fileSize" label="文件大小" ></el-table-column>
                      <el-table-column prop="sourceType" label="数据来源" ></el-table-column>
                      <el-table-column class="cell" prop="uploadDate" label="上传时间"  :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column label="操作">
                          <template slot-scope="scope">
                            <span :style="{color:'#409EFF', cursor: 'pointer', marginRight: '10px'}" @click.stop="operationClick(scope.row)">下载</span>
                          </template>
                      </el-table-column>
                </el-table>
            </div>
            <div class="pageInfo">
                <el-pagination
                    :current-page="paging.current"
                    :page-size="paging.size"
                    :total="paging.total"
                    layout="total, prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
      </div>
    </div>
    <div class="daInfo">
      <div class="remake">
        <div class="remakeColor"></div>
        <div class="remakeTitle">档案记录</div>
        <div class="upDown" @click="changeDa" v-if="daList.length!=0">{{upDownDa}}<i :class="upDownIconDa"></i></div>
      </div>
      <div class="noda" :style="nodaPic" v-show="!hasDataDa" v-if="daList.length==0"><span>暂无档案信息</span></div>
      <div class="daInfoList" v-show="hasDataDa" v-else>
            <div class="tableInfo">
              <el-table
                  :data="daList"
                  stripe
                  style="width: 100%"
                  height="100%"
                  tooltip-effect="dark"
                  :cell-style="cellStyle"
                  :header-cell-style="headerStyle">
                      <el-table-column  label="序号"  type="index" width="80px">
                        <template slot-scope="scope" class="cell">
                          {{(pagingDa.current - 1) * pagingDa.size + scope.$index + 1}}
                        </template>
                      </el-table-column>
                      <el-table-column class="cell" prop="fileName"  label="文件名称"  :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="fileOrgin" label="文件类型"></el-table-column>
                      <el-table-column prop="fileType" label="文件格式" ></el-table-column>
                      <el-table-column prop="fileLength" label="文件大小" ></el-table-column>
                      <el-table-column prop="sourceType" label="数据来源" ></el-table-column>
                      <el-table-column class="cell" prop="creatTime" label="上传时间"  :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column label="操作">
                          <template slot-scope="scope">
                            <span :style="{color:'#409EFF', cursor: 'pointer', marginRight: '10px'}" @click.stop="operationClick(scope.row)">下载</span>
                          </template>
                      </el-table-column>
                </el-table>
            </div>
            <div class="pageInfo">
                <el-pagination
                    :current-page="pagingDa.current"
                    :page-size="pagingDa.size"
                    :total="pagingDa.total"
                    layout="total, prev, pager, next"
                    @size-change="handleSizeChangeDa"
                    @current-change="handleCurrentChangeDa"
                />
            </div>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * 部件查看---图纸档案
 */
import $ from 'jquery'
import apis from "@/api/PipeUnitInfo";
import verificationHelper from '@/utils/mapCommon/VerificationHelper'
export default {
  name:"UnitDocumentInfo",
  data(){
    return{
      nodaPic:"background: url("+require("@/views/widgets/PipeUnitInfo/images/da.png")+")",
      notzPic:"background: url("+require("@/views/widgets/PipeUnitInfo/images/tz.png")+")",
      //显隐控件
      hasData:false,
      upDown:'收起',
      upDownIcon:'el-icon-arrow-up',
      hasDataDa:false,
      upDownDa:'收起',
      upDownIconDa:'el-icon-arrow-up',
      //表格样式
      cellStyle:{
          color:"#000",
          textAlign: 'center',
      },
      headerStyle:{
          background: '#e6f0fd',
          color: '#3b87d9',
          height: '38px',
          textAlign: 'center'
      },
      //图纸表格
      tzList:[],
      paging:{
          current: 1, //当前页，默认0
          size: 4, //每页数据条数
          total:0   //总条数
      },
      //档案表格内容
      daList:[],
      pagingDa:{
          current: 1, //当前页，默认0
          size: 4, //每页数据条数
          total:0   //总条数
      },
      //文件类型
      recordFileType:null
    }
  },
  methods:{
    //展示档案信息
    showDAPage(unitInfo) {
        this.getFileType(unitInfo)
        this.gettzInfo(unitInfo);
    },
    change(){
      if(this.hasData){
        this.upDown='展开';
        this.upDownIcon='el-icon-arrow-down'
        this.hasData=!this.hasData
      }else{
        this.upDown='收起';
        this.upDownIcon='el-icon-arrow-up'
        this.hasData=!this.hasData
      }
    },
    changeDa(){
      if(this.hasDataDa){
        this.upDownDa='展开';
        this.upDownIconDa='el-icon-arrow-down'
        this.hasDataDa=!this.hasDataDa
      }else{
        this.upDownDa='收起';
        this.upDownIconDa='el-icon-arrow-up'
        this.hasDataDa=!this.hasDataDa
      }
    },
    //获取文件类型
    async getFileType(unitInfo){
        let data = {
            ulevel: 2,
            key: "0056",
            size: 10000
        }
        const res = await this.$PortApi.getBaseCodePage_api(data)
        const{code,result}=res.data
        if(code==1){
          this.recordFileType=result.records
          this.getdaInfo(unitInfo);
        }else{
            this.$message.error('文件类型信息获取失败')
        }  
    },
    //获取图纸信息
    async gettzInfo(unitInfo){
        this.tzList=[];
        const res = await apis.getDesignInfo({pbs:unitInfo.code})
        const{code,result}=res.data
        if(code==1){
          if(result.length>0){
            this.tzList=result.map((item)=>{
              return{
                ...item,
                fileName:verificationHelper.setNullAndUndefined(item.FileName),
                infoType:item.infoType=='01'?"成果表":item.infoType=='03'?"CAD":"/",
                fileType:verificationHelper.setNullAndUndefined(item.FileType),
                fileSize:(item.FileSize/(1024*1024)).toFixed(0)+"MB",
                sourceType:item.sourceType=='01'?"本地导入":(item.sourceType=='02'?"管线宝导入":item.sourceType=='03'?"TGPMS集成":"/"),
                uploadDate:verificationHelper.setNullAndUndefined(item.UploadDate),
                fileUrl:this.getDownLoadUrl(item)
              }
            })
            this.hasData=true
            this.paging.total=this.tzList.length
          }
        }else{
            this.$message.error('图纸信息获取失败')
        }  
    },
    getDownLoadUrl(item){
        let url=[];
        if(!item.fileUrl){
          return []
        }
        let urls=item.fileUrl.split(',');
        if(item.sourceType=='03'){
            url=urls
        }else{
            let token="&access_token=29e2de53-0003-4ee0-a4d6-ba91d8bbd81e";
            // url="https://yeepms.yeec.com.cn/gis-api"+"/base/file/downloadFile"+"?fileName="+item.FileName+"&remotePath="+item.fileUrl+"&access_token="+token
            url=urls.map((address)=>{
              return{
                  address:"https://yeepms.yeec.com.cn/gis-api"+"/base/file/downloadFile"+"?fileName="+item.FileName+"&remotePath="+address+"&access_token="+token
              }
            })
        }
        return url
    },
    // 每页多少条
    handleSizeChange(val) {
      this.paging.size = val;
    },
    // 当前页
    handleCurrentChange(val) {
      this.paging.current = val;
    },
    operationClick(row){
      console.log(row)
      for (let index = 0; index < row.fileUrl.length; index++) {
        const element = row.fileUrl[index];
        downLoad(element.address)
      }
      function downLoad(address){
          //创建一个a标签用于下载
          let a = document.createElement('a');
          a.href = address;
          $("body").append(a); // 修复firefox中无法触发click
          a.click();
          $(a).remove();  
      }
    },
    //获取档案信息
    async getdaInfo(unitInfo){
        let option={
          pbs:unitInfo.code,
          current:this.pagingDa.current,
          size:this.pagingDa.size
        }
        this.daList=[];
        const res = await apis.getPartsfile(option)
        const{code,result}=res.data
        if(code==1){
          if(result.records.length>0){
            this.daList=result.records.map((item)=>{
              let typeMatch=this.$_.find(this.recordFileType,function(o){return o.value==item.fileOrgin})
              let fileOrgin=verificationHelper.setNullAndUndefined(typeMatch.notes)
              return{
                ...item,
                fileName:verificationHelper.setNullAndUndefined(item.fileName),
                fileType:verificationHelper.setNullAndUndefined(item.fileType),
                fileLength:(item.fileLength/1024*1024).toFixed(0)+"MB",
                sourceType:item.sourceType=='01'?"本地导入":(item.sourceType=='02'?"管线宝导入":item.sourceType=='03'?"TGPMS集成":"/"),
                creatTime:verificationHelper.setNullAndUndefined(item.createTime),
                fileOrgin:fileOrgin,
                fileUrl:this.getDownLoadUrl(item),
              }
            })
            this.hasDataDa=true
            this.pagingDa.total=result.total
          }
        }else{
            this.$message.error('档案信息获取失败')
        } 
    },
    // 每页多少条
    handleSizeChangeDa(val) {
      this.pagingDa.size = val;
    },
    // 当前页
    handleCurrentChangeDa(val) {
      this.pagingDa.current = val;
    },
  }
};
</script>
<style lang="scss" scoped>
    .tzlInfo{
      width: 100%;
      max-height: 430px;
      overflow: auto;
      .htInfo,.daInfo{
        display: flex;
        flex-flow: column;
        margin-bottom: 10px;
      }
    }
    //图纸档案
    // .noda {
    //   background: url(./images/da.png);
    // }
    // .notz {
    //   background: url(./images/tz.png);
    // }
    .noda,
    .notz {
      width: 164px;
      height: 93px;
      position: relative;
      float: left;
      left: calc((100% - 164px) / 2);
      margin: 40px 0px;

      span {
        display: block;
        position: relative;
        bottom: 0px;
        top: 120%;
        text-align: center;
      }
    }
    .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;
      }
      .upDown {
        position: relative;
        float: right;
        right: 20px;
        font-family: "Glyphicons Halflings" !important;
        -webkit-font-smoothing: antialiased;
        cursor: pointer;
      }
    }
    .daInfoList,
    .tzInfoList {
      position: relative;
      width: 100%;
      .tableInfo{
        margin: 10px 0;
        width: 100%;
        max-height: 240px;
        overflow: hidden;
        .elTable .cell {
            white-space: nowrap;
        }
      }
      .pageInfo{
        width: 100%;
      }
    }
</style>