<template>
    <div class='baseInfo'>
        <div class='nozl' :style="nozlPic" v-if="dataList.length==0"><span>暂无质量信息</span></div>
        <div class='data-item' v-for="(item,index) of dataList" :key="index">
            <div style='height:40px;width:100%;border-bottom:1px solid #999999'>
                <div style='height:40px;width:40px;float:left'>
                    <div :style='packInfo(item).symbolStyle'></div>
                </div>
                <div style='margin-left:-33px;float:left;color:#000'>{{(index+1)}}</div>
                <div style='height:40px;line-height:40px;float:left'><span style='color:black'>评定日期：{{packInfo(item).evaluateTime}}</span></div>
                <div style='height:40px;margin-left:30px;line-height:40px;float:right'>检验批类型：<span style='color:black'>{{item.typeName}}</span></div>
            </div>
            <div style='width:100%;'>
                <div style='width:100%;float:left'>
                    <div class='turnItem'><span class='turnspan'>施工状态：</span><el-input type='text' class='turnInput' :style='packInfo(item).stateStyle' :value='packInfo(item).curState' size="medium"></el-input></div>
                    <div class='turnItem'><span class='turnspan'>验评等级：</span><el-input type='text' class='turnInput' :style='packInfo(item).gradeStyle' :value='packInfo(item).evaluateGrade' size="medium"></el-input></div>
                    <div class='turnItem'><span class='turnspan'>检验批编码：</span><el-input type='text' class='turnInput' :value='item.code' size="medium"></el-input></div>
                    <div class='turnItem'><span class='turnspan'>检验批名称：</span><el-input type='text' class='turnInput' :value='item.name' size="medium"></el-input></div>
                    <div class='turnItem'><span class='turnspan'>监理单位：</span><el-input type='text' class='turnInput' :value='item.supervisorDeptName' size="medium"></el-input></div>
                    <div class='turnItem'><span class='turnspan'>施工单位：</span><el-input type='text' class='turnInput' :value='item.constructionDeptName' size="medium"></el-input></div>
                    <div class='turnItem'><span class='turnspan'>创建人：</span><el-input type='text' class='turnInput' :value='packInfo(item).createUser' size="medium"></el-input></div>
                    <div class='turnItem'><span class='turnspan'>创建单位：</span><el-input type='text' class='turnInput' :value='packInfo(item).createUnit' size="medium"></el-input></div>
                    <div class='turnItem'><span class='turnspan'>施工时段：</span><el-input type='text' class='turnInput' :value='packInfo(item).periodTime' size="medium"></el-input></div>
                    <div class='turnItem'><span class='turnspan'>备注：</span><el-input type='text' class='turnInput' :value='item.comments' size="medium"></el-input></div>
                </div>
            </div>
            <div class="pictureList">
                <div class="image-item" v-for="(item,index) of picList" :key="index">
                    <el-image 
                        :src="item" 
                        :preview-src-list="picList">
                    </el-image>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
/**
 * 部件查看----质量
 */
import apis from "@/api/PipeUnitInfo";
import verificationHelper from '@/utils/mapCommon/VerificationHelper'
export default {
    name:"UnitQuality",
    data(){
        return{
            nozlPic:"background: url("+require("@/views/widgets/PipeUnitInfo/images/zl.png")+")",
            dataList:[],
            picList:[]
        }
    },
    methods:{
        //展示质量页面
        showUnitQualityPage(code) {
            this.unitQualityInfo(code);
        },
        /**
         * 该方法用于获取部件质量信息
         * @param {string} pbsCode pbs编码
         */
        async unitQualityInfo(pbsCode){
            const data={
                pbs:pbsCode
                // pbs:"HN06GG06.035.01.01.4"//测试使用
            }
            const res = await apis.getQbsInfo(data)
            const{code,result}=res.data
            if(code==1){
                this.dataList=[];
                if(result&&result.length>0){
                    this.dataList=result.map((item)=>{
                        if(item.files.length>0){
                            item.files.forEach(item => {
                                let token="&access_token=29e2de53-0003-4ee0-a4d6-ba91d8bbd81e";
                                let picurl="https://yeepms.yeec.com.cn/gis-api" + '/base/file/loadImg' + "?remotePath=" + item.fileUrl + token;
                                this.picList.push(picurl)
                            });
                        }
                        return{
                            ...item,
                            typeName:verificationHelper.setNullAndUndefined(item.typeName),
                            code:verificationHelper.setNullAndUndefined(item.code),
                            name:verificationHelper.setNullAndUndefined(item.name),
                            supervisorDeptName:verificationHelper.setNullAndUndefined(item.supervisorDeptName),
                            constructionDeptName:verificationHelper.setNullAndUndefined(item.constructionDeptName),
                            comments:verificationHelper.setNullAndUndefined(item.comments),
                        }
                    })
                }
            }else{
                this.$message.error('质量信息获取失败')
            }       
        },
        //数据信息
        packInfo(item){
            let curState;
            let evaluateGrade;
            let symbolStyle;
            let stateStyle;
            let gradeStyle;
            let createUser;
            let createUnit;
            switch(item.curState){
                case 0:curState="未开始";
                        stateStyle='color:black';
                        break;
                case 1:curState="施工中";
                        stateStyle='color:black';
                        break;
                case 2:curState="已完成";
                        stateStyle='color:#08CA5F';
                        break;
            }
            if(item.evaluateGrade=="0"){
                evaluateGrade='不合格'
                gradeStyle='color:red'
                symbolStyle='width:0;height:0;border-top: 40px solid red;border-right: 40px solid transparent;'
            }else{
                evaluateGrade='合格'
                gradeStyle='color:#08CA5F'
                symbolStyle='width:0;height:0;border-top: 40px solid #3f85d2;border-right: 40px solid transparent;'
            }
            if(item.files.length>0){
                createUser=verificationHelper.setNullAndUndefined(item.files[0].CreateUserName)
                createUnit=verificationHelper.setNullAndUndefined(item.files[0].CreateDeptName)
            }else{
                createUser='/'
                createUnit='/'
            }
            let evaluateTime=verificationHelper.setNullAndUndefined(/\d{4}-\d{1,2}-\d{1,2}/g.exec(item.evaluateTime))
            let periodTime
            if (item.startTime==null&&item.endTime==null) {
                periodTime="/"
            }else{
                periodTime=verificationHelper.setNullAndUndefined(/\d{4}-\d{1,2}-\d{1,2}/g.exec(item.startTime))+"~"+verificationHelper.setNullAndUndefined(/\d{4}-\d{1,2}-\d{1,2}/g.exec(item.endTime))
            }
            return{
                curState:curState,
                stateStyle:stateStyle,
                evaluateGrade:evaluateGrade,
                gradeStyle:gradeStyle,
                symbolStyle:symbolStyle,
                createUser:createUser,
                createUnit:createUnit,
                periodTime:periodTime,
                evaluateTime:evaluateTime[0]
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    ::v-deep.el-input__inner{
    background-color: #f8f8f8;
    }
    .nozl {
        // background: url(./images/zl.png);
        margin-top: 250px !important;
    }
    .nozl{
        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;
        }
    }
    //质量页面的样式
    .baseInfo {
      color: #888888;
      height: 430px;
      overflow: auto;
      .headerInfo {
        position: relative;
        float: left;
        width: 100%;
        padding: 40px 0px 10px 0px;
        border-bottom: solid;
        border-color: rgb(246, 246, 246);
        border-width: 2px;
      }

      .remakeCon {
        width: 40px;
        height: 40px;
        border: 20px solid;
        border-top-left-radius: 5px;
        border-color: rgb(16, 102, 208) transparent transparent
          rgb(16, 102, 208);
        color: white;
        position: relative;
        float: left;

        span {
          position: absolute;
          top: -20px;
          left: -14px;
        }
      }
      .data-item{
        width: 100%;
        display: flex;
        flex-flow: column;
      }
      .turnInfo {
        position: relative;
        float: left;
        width: 100%;
      }
      .turnInfo:last-child {
        padding-bottom: 30px;
      }
      .turnItem {
        position: relative;
        float: left;
        width: 33%;
        padding: 20px 0px 0px 0px;
      }
      .turnItem{
        width: 50%;
        float: left;
        padding: 10px 0px 0px 0px;
      }
      span.turnspan {
        width: 120px;
        position: relative;
        float: left;
        display: block;
        text-align: right;
        padding: 3px 0px;
        color: #888888;
      }
      .turnInput {
        width: calc(100% - 140px);
        margin-left: 5px;
        border: none;
        background: #f8f8f8;
        color: black;
        text-overflow: ellipsis;
      }
      .pictureList{
        width: 100%;
        margin-top: 10px;
        .image-item{
            width: 25%;
            float: left;
        }
        .el-image{
            width: 95%;
        }
      }
    }
</style>