<template>
  <div class="TabsTop">
        <div
          class="TabsList"
          :class="{ TabsListActive: tabsNum == 1 }"
          @click="tabsNum = 1"
        >
          基础信息
        </div>
        <div
          class="TabsList"
          :class="{ TabsListActive: tabsNum == 2 }"
          @click="tabsNum = 2"
        >
          支付情况
        </div>
      </div>
      <!-- 内容 -->
      <div class="TabBody" v-show="tabsNum == 1">
        <!-- 基础信息 -->
        <div class="LeftBox1">
          <el-progress
            type="circle"
            :percentage="DetailData.ratio"
            :width="200"
            style="margin: 100px 80px 20px 70px"
            :stroke-width="20"
            striped
            striped-flow
          />
          <p class="HTNo">{{ DetailData.contractNo }}</p>
          <div class="HTMoney1">
            <div class="JENum">{{ DetailData.money }}(万元)</div>
            <div class="JEName">合同金额</div>
          </div>
          <div class="HTMoney1">
            <div class="JENum">
              {{ DetailData.paidMoney ? DetailData.paidMoney : "--" }}(万元)
            </div>
            <div class="JEName">已支付金额</div>
          </div>
        </div>
        <div class="LeftBox2">
          <div class="InfoList">
            <div class="InfoListLable">合同编号</div>
            <div class="InfoListvalue">{{ DetailData.contractNo }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">项目名称</div>
            <div class="InfoListvalue">{{ DetailData.projectName }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">合同名称</div>
            <div class="InfoListvalue">{{ DetailData.contractName }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">投标编号</div>
            <div class="InfoListvalue">{{ DetailData.tenderNumber }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">签约日期</div>
            <div class="InfoListvalue">{{ DetailData.signTime }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">合同类型</div>
            <div class="InfoListvalue">
              {{ selectDictLabel(contract_type, DetailData.contractType) }}
            </div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">甲方</div>
            <div class="InfoListvalue">{{ DetailData.firstParty }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">乙方</div>
            <div class="InfoListvalue">{{ DetailData.secondParty }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">通讯地址</div>
            <div class="InfoListvalue">{{ DetailData.firstPartyAddress }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">通讯地址</div>
            <div class="InfoListvalue">{{ DetailData.secondPartyAddress }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">主要负责人</div>
            <div class="InfoListvalue">
              {{ DetailData.firstPartyPrimaryPerson }}
            </div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">主要负责人</div>
            <div class="InfoListvalue">
              {{ DetailData.secondPartyPrimaryPerson }}
            </div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">电话</div>
            <div class="InfoListvalue">
              {{ DetailData.firstPartyTelephone }}
            </div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">电话</div>
            <div class="InfoListvalue">
              {{ DetailData.secondPartyTelephone }}
            </div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">手机</div>
            <div class="InfoListvalue">{{ DetailData.firstPartyPhone }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">手机</div>
            <div class="InfoListvalue">{{ DetailData.secondPartyPhone }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">邮箱</div>
            <div class="InfoListvalue">{{ DetailData.firstPartyEmail }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">邮箱</div>
            <div class="InfoListvalue">{{ DetailData.secondPartyEmail }}</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">金额</div>
            <div class="InfoListvalue">{{ DetailData.money }} 万元</div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">业务负责人</div>
            <div class="InfoListvalue">
              {{ DetailData.businessPrimaryPerson }}
            </div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">合同状态</div>
            <div class="InfoListvalue">
              {{ selectDictLabel(contract_status, DetailData.contractStatus) }}
            </div>
          </div>
          <div class="InfoList">
            <div class="InfoListLable">合同有效期</div>
            <div class="InfoListvalue">{{ DetailData.contractLimited }}</div>
          </div>
          <div class="InfoList InfoList2">
            <div class="InfoListLable">主要条款</div>
            <div class="InfoListvalue">{{ DetailData.mainClause }}</div>
          </div>
          <div class="InfoList InfoList2">
            <div class="InfoListLable">备注</div>
            <div class="InfoListvalue">{{ DetailData.remark }}</div>
          </div>
          <div class="InfoList3">
            <div class="InfoListLable">附件</div>
            <div class="InfoListvalue">
              <el-upload
                v-model:file-list="fileList1"
                class="upload-demo"
                action="/prod-api/system/upload"
                disabled
                multiple
                :on-preview="handlePreview"
              >
              </el-upload>
            </div>
          </div>
        </div>
      </div>
      <div class="TabBody" v-show="tabsNum == 2">
        <!-- 支付信息 -->
        <p class="ProjectInfoTitle">支付计划</p>
        <div class="JiHuaHeader">
          <div class="HeaderListDiv">期次</div>
          <div class="HeaderListDiv">金额(元)</div>
          <div class="HeaderListDiv">备注</div>
        </div>
        <div
          v-for="(row, index) in DetailData.projectContractPayPlanList"
          :key="index"
          class="JiHuaHeader"
        >
          <div class="HeaderListDiv">{{ index + 1 }}</div>
          <div class="HeaderListDiv">{{ row.currentMoney }}</div>
          <div class="HeaderListDiv">
            {{ row.remark ? row.remark : "无" }}
          </div>
        </div>

        <p class="ProjectInfoTitle">支付记录</p>
        <PaymentRecords
          v-if="tabsNum == 2"
          :contractId="contractId"
          :PiCiData="DetailData"
        ></PaymentRecords>
      </div>
</template>
<script setup>
import {
  onMounted,
  defineEmits,
  reactive,
  defineProps,
  defineExpose,
} from "vue";
import {
  projectContractDetail,

} from "@/api/project/tenderReview";
const id=defineProps(['id'])
const tabsNum = ref(1);
const DetailData=ref({})
const projectContractDetailM=async(p)=> { 
  let {data}=await projectContractDetail(p)
     DetailData.value = data;
    DetailData.value.type = t
    tabsNum.value = 1;
    contractId.value = DetailData.value.id;
    // form.value.fileSaveRequestList = [];
}
onMounted(() => {
  projectContractDetailM(id)
});
</script>
<style lang="scss" scoped>
 .TabsTop {
    width: 100%;
    height: 36px;
    margin-bottom: 14px;

    .TabsList {
      width: 120px;
      text-align: center;
      height: 36px;
      line-height: 34px;
      float: left;
      box-sizing: border-box;
      border: 1px solid #409eff;
      color: #409eff;
      cursor: pointer;

      &:nth-child(1) {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }

      &:nth-child(2) {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }
    }

    .TabsListActive {
      background-color: #409eff;
      color: white;
    }
  }

  .TabBody {
    width: 100%;
    height: calc(100% - 50px);

    // 基础信息
    .LeftBox1 {
      width: 360px;
      height: 100%;
      float: left;

      .HTNo {
        width: 340px;
        text-align: center;
        font-size: 16px;
      }

      .HTMoney1 {
        width: 170px;
        height: 80px;
        float: left;
        text-align: center;

        .JENum {
          width: 100%;
          height: 40px;
          font-size: 26px;
          font-weight: 400;
          color: #409eff;
        }

        .JEName {
          width: 100%;
          height: 40px;
          font-size: 16px;
          color: black;
        }
      }
    }

    .LeftBox2 {
      width: calc(100% - 360px);
      height: 100%;
      float: left;
      background: white;
      overflow: auto;
      font-size: 0;

      .InfoList {
        display: inline-block;
        width: 50%;
        height: 42px;
        border: 1px solid #d8ddef;
        box-sizing: border-box;
        // margin-left: 1%;

        .InfoListLable {
          height: 40px;
          line-height: 40px;
          width: 100px;
          float: left;
          background-color: #f3f7ff;
          box-sizing: border-box;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #666666;
          text-align: center;
        }

        .InfoListvalue {
          width: calc(100% - 100px);
          height: 40px;
          line-height: 40px;
          float: left;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #333333;
          text-align: right;
          padding-right: 10px;
        }
      }

      .InfoList2 {
        width: 100%;
        height: 82px;

        .InfoListLable {
          height: 100%;
          height: 80px;
          line-height: 80px;
        }

        .InfoListvalue {
          height: 100%;
          height: 80px;
        }
      }

      .InfoList3 {
        width: 100%;
        min-height: 60px;
        height: auto;
        overflow: auto;

        .InfoListLable {
          width: 100px;
          float: left;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #000000;
          text-align: center;
          line-height: 60px;
        }

        .InfoListvalue {
          float: left;
          width: calc(100% - 100px);
          height: auto;
        }
      }
    }

    // 支付信息
    .ProjectInfoTitle {
      width: 100%;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      padding-left: 24px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      margin: 0;
    }
  }
</style>