<template>
    <div class='htclInfo'>
        <div class='htInfo'>
            <div class='remake'>
                <div class='remakeColor'></div>
                <div class='remakeTitle titleValue'>合同信息</div>
            </div>
            <div class='noht' :style="nohtPic" v-if="projectInfo.length==0"><span>暂无合同信息</span></div>
            <div class='htInfoList'>
                <div class="info-row" v-for="(item,index) of projectInfo" :key="(item.value+index)">
                    <span class="info-title">{{item.title}}</span>
                    <el-input class="info-content" :title="item.value"  :value="item.value" readonly='readonly'  size="medium"></el-input>
                    <el-input class="info-code" :title="item.code" :value='item.code' readonly='readonly' size="medium"></el-input>
                </div>
                <div class="info-row" v-if="projectInfo.length!=0">
                    <span class="info-title">部件编码：</span>
                    <el-input class="info-content" :title="partscode"  :value='partscode' ></el-input>
                    <el-input class="info-code" :title="currentUnit.code" :value='currentUnit.code' ></el-input>
                </div>
                <div class="info-row" v-for="(item,index) of unit" :key="(item.value+index)">
                    <span class="info-title">{{item.title}}</span>
                    <el-input  class="info-content inputContent" :value='item.value' ></el-input>
                </div>
                <div class="info-row" v-for="(item,index) of contract" :key="(item.value+index)">
                    <span class="info-title">{{item.title}}</span>
                    <el-input class="info-content inputContent" :title="item.value" :value='item.value' ></el-input>
                </div>
            </div>
        </div>
        <div class='clInfo'>
            <div class='remake'>
                <div class='remakeColor'></div>
                <div class='remakeTitle'>材料信息</div>
            </div>
            <div class='nocl' :style="noclPic" v-if="clInfo.length==0"><span>暂无材料信息</span></div>
            <div class='clInfoList'>
                <div class='clItem' v-for="item of clInfo" :key="item.title">
                    <span class='clspan' :title='item.title'>{{item.title}}:</span>
                    <el-input  class='clInput' :value='item.value' size="medium"></el-input>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
/**
 * 部件查看---合同资料
 */
import apis from "@/api/PipeUnitInfo";
import verificationHelper from '@/utils/mapCommon/VerificationHelper'
import Config from './config.json'
export default {
    name:"UnitContractInfo",
    data(){
        return{
            nohtPic:"background: url("+require("@/views/widgets/PipeUnitInfo/images/ht.png")+")",
            noclPic:"background: url("+require("@/views/widgets/PipeUnitInfo/images/cl.png")+")",
            currentUnit:{},
            projectInfo:[],
            partscode:"",
            unit:{},
            contract:{},
            clInfo:[],
        }
    },
    methods:{
        /**
         * 展示合同材料
         * @param result 请求的获取的所有数据
         */
        showhtclPage(result,currentUnit) {
            this.currentUnit=currentUnit
            this.gethtInfo(result);
            this.getclInfo();
        },
        //获取合同信息
        async gethtInfo(info) {
            let options={ pbs: this.currentUnit.code }
            const res = this.currentUnit.geoType === "LINE" ?await apis.getPipeContract(options) :await apis.getPointContract(options);
            const{code,result}=res.data
            if(code==1){
                if (result && result.length > 0) {
                    let arr = result
                    //
                    this.projectInfo = arr.map(item => {
                        return {
                            title: item.levelname,
                            value: item.name,
                            code: item.code
                        }
                    });
                    //获取部件编码
                    let partscode = info.filter(item => {
                        return item.compare == "pipeid";
                    })
                    partscode = partscode[0].value;
                    if(!partscode){
                        partscode="/"
                    }
                    this.partscode=partscode
                    //获取单位
                    let unit = [
                        { title: "权属单位：", compare: "ownerunit", value: undefined },
                        { title: "设计单位：", compare: "designunit", value: undefined },
                        { title: "施工单位：", compare: "buildunit", value: undefined },
                        { title: "监理单位：", compare: "supervisionunit", value: undefined }
                    ];
                    for (let item of info) {
                        for (let un of unit) {
                            if (item.compare === un.compare) {
                                un.value = item.value
                            }
                        }
                    }
                    this.unit=unit
                    //获取设计施工合同
                    let contract = [
                        { title: "设计合同：", compare: "designcontract", value: undefined, code: undefined },
                        { title: "施工合同：", compare: "contract", value: undefined, code: undefined }
                    ]
                    for (let item of info) {
                        for (let un of contract) {
                            if (item.compare === un.compare) {
                                un.value = item.value;
                            }
                            if (item.compare === "designcontractcode" && un.compare === "designcontract") un.code = item.value;
                            if (item.compare === "contractcode" && un.compare === "contract") un.code = item.value;
                        }
                    }
                    this.contract=contract
                }
            }else{
                this.$message.error('获取合同信息失败')
            }
        },
        //获取材料信息
        async getclInfo(){
            let options={ pbs: this.currentUnit.code }
            const res = await apis.getMaterialInfo(options)
            const{code,result}=res.data
            if(code==1){
                if(!result) return
                let dataFiled =result
                for (let key in Config.clInfo) {
                    let title = Config.clInfo[key];
                    let value = verificationHelper.setNullAndUndefined(dataFiled[key]);
                    this.clInfo.push({title:title,value:value})
                }
            }else{
                // this.$message.error('获取材料信息失败')
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .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;
      }
    }
    .htclInfo {
        width: 100%;
        height: 430px;
        overflow: auto;
        ::v-deep.el-input__inner{
            background-color: #f8f8f8;
        }
        .htInfo{
            width: 100%;
            display: flex;
            flex-flow: column;
        }
        .nocl,.noht{
            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;
            }
        }
        // .noht {
        //     background: url(./images/ht.png);
        // }
        // .nocl {
        //     background: url(./images/cl.png);
        // }
      .info-row {
        position: relative;
        width: 100%;
        float: left;
        padding: 10px 0px 0px 0px;
        display: flex;
        align-items: center;
      }

      span.info-title {
        width: 170px;
        display: block;
        position: relative;
        float: left;
        text-align: right;
        padding: 6px;
        color: #888888;
      }

      .info-content {
        position: relative;
        float: left;
        width: calc((100% - 170px) / 2 - 20px);
        border: none;
        background: #f8f8f8;
        margin-right: 10px;
      }

      .info-code {
        position: relative;
        float: left;
        width: calc((100% - 170px) / 2 - 20px);
        border: none;
        background: #f8f8f8;
        color: black;
        margin-right: 10px;
      }

      .info-content.inputContent {
        width: calc(100% - 200px) !important;
      }
    }
    .clInfo {
      position: relative;
      float: left;
      width: 100%;
      border-top: solid;
      border-color: rgb(246, 246, 246);
      margin-top: 20px;
    }
    .clInfoList {
      .clItem {
        position: relative;
        float: left;
        width: 33%;
        padding: 10px 0px 0px 0px;
        display: flex;
        align-items: center;
      }

      .clItem:last-child {
        margin-bottom: 30px;
        width: 66% !important;
      }

      span.clspan {
        width: 120px;
        position: relative;
        float: left;
        display: block;
        text-align: right;
        padding: 6px 0px;
        color: #888888;
      }

      .clInput {
        width: calc(100% - 130px);
        margin-left: 10px;
        border: none;
        background: #f8f8f8;
        color: black;
      }
    }
</style>