<template>
  <div class="project-info-box">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <cy-info-title>项目信息</cy-info-title>
      <el-form-item label="项目类型" :class="ruleForm.projectType!=='固定项目'?'one-form-item':''">
        <el-input :value="ruleForm.projectType" placeholder="请输入项目类型" readonly />
      </el-form-item>
      <el-form-item label="项目名称" :class="ruleForm.projectType!=='固定项目'?'one-form-item':''">
        <el-input :value="ruleForm.projectName" placeholder="请输入项目名称" readonly />
      </el-form-item>

      <!-- 固定项目时展示且必填 -->
      <template v-if="ruleForm.projectType==='固定项目'">
        <el-form-item label="相关文件" prop="biddingFiles" class="required-item">
          <span slot="label" class="required-label">相关文件</span>
          <cy-upload
            ref="biddingFileIds"
            :upload-params="{
              fileType: 'projectBiddingFile'
            }"
            :file-data="ruleForm.biddingFiles"
            :upload-from-orange-status="true"
            placeholder="请上传招投标文件、合同模板等"
            disabled
          />
        </el-form-item>
        <el-form-item label="项目地点" style="width: 100%" prop="projectAddress">
          <el-input v-model="ruleForm.projectAddress" placeholder="请输入项目地点" disabled />
        </el-form-item>
        <el-form-item label="相关文件" class="one-form-item required-item" prop="departmentFiles">
          <span slot="label" class="required-label">相关文件</span>
          <cy-upload
            ref="departmentFileIds"
            :upload-params="{
              fileType: 'projectDepartmentFile'
            }"
            :file-data="ruleForm.departmentFiles"
            :upload-from-orange-status="true"
            placeholder="请上传项目开工情况图片、项目部铭牌图片"
            disabled
          />
        </el-form-item>
        <el-form-item label="项目周期" class="one-form-item" prop="projectCycle">
          <el-input v-model="ruleForm.projectCycle" placeholder="请选择项目周期" disabled />
        </el-form-item>
        <el-form-item label="项目性质" prop="projectNature" class="one-form-item">
          <el-input v-model="ruleForm.projectNature" placeholder="请选择项目性质" disabled />
        </el-form-item>
        <el-form-item v-if="ruleForm.projectNature !== 'c_project_nature_5' && ruleForm.projectNature !== 'c_project_nature_4'" label="项目性质细节分类" prop="projectNatureDetail" class="one-form-item">
          <el-input v-model="ruleForm.projectNatureDetail" placeholder="请选择细节分类" disabled />
        </el-form-item>
        <el-form-item v-else class="one-form-item" label="项目性质细节分类" prop="projectNatureDetailDes">
          <el-input v-model="ruleForm.projectNatureDetailDes" placeholder="请输入具体项目性质" disabled />
        </el-form-item>
      </template>

      <el-form-item label="货物品类" prop="goodsCategory" class="one-form-item">
        <el-input v-model="ruleForm.goodsCategory" placeholder="请选择货物品类" disabled />
      </el-form-item>
      <el-form-item v-if="ruleForm.goodsCategory !== 'c_project_goods_category_7'" class="one-form-item" label="货物品类细分" prop="goodsCategoryDetail">
        <el-input v-model="ruleForm.goodsCategoryDetail" placeholder="请选择货物品类细分" disabled />
      </el-form-item>
      <el-form-item v-else class="one-form-item" label="货物品类细分" prop="goodsCategoryDetailDes">
        <el-input v-model="ruleForm.goodsCategoryDetailDes" placeholder="请输入货物品类细分" disabled />
      </el-form-item>
      <el-form-item label="用途" class="one-form-item" prop="purpose">
        <el-input v-model="ruleForm.purpose" placeholder="请选择使用方法" disabled />
      </el-form-item>
      <el-form-item label="具体用途" class="one-form-item" prop="purposeDetail">
        <el-input v-model="ruleForm.purposeDetail" placeholder="请选择具体用途" disabled />
      </el-form-item>
      <el-form-item style="width: 100%" class="required-item">
        <template slot="label">
          <span class="required-label">资金来源及占比</span>
          <span style="color: #A3A8AC; margin-left: 10px; font-weight: 500;">可参考招投标文件或业主单位、施工单位官网（可以多项，可以一项，且总和超过80%）</span>
        </template>
        <div class="three-gird">
          <div class="checkbox-box">
            <el-checkbox v-model="financialFundsCheck">财政资金</el-checkbox>
            <el-input v-model="ruleForm.financialFunds" placeholder="请输入财政资金占比" disabled>
              <!-- <template slot="prepend">占比</template> -->
              <template slot="append">%</template>
            </el-input>
          </div>
          <div class="checkbox-box">
            <el-checkbox v-model="bankLoansCheck">银行贷款</el-checkbox>
            <el-input v-model="ruleForm.bankLoans" placeholder="请输入银行贷款占比" disabled>
              <!-- <template slot="prepend">占比</template> -->
              <template slot="append">%</template>
            </el-input>
          </div>
          <div class="checkbox-box">
            <el-checkbox v-model="foreignCapitalCheck">利用外资</el-checkbox>
            <el-input v-model="ruleForm.foreignCapital" placeholder="请输入利用外资占比" disabled>
              <!-- <template slot="prepend">占比</template> -->
              <template slot="append">%</template>
            </el-input>
          </div>
        </div>
        <div class="three-gird">
          <div class="checkbox-box">
            <el-checkbox v-model="raiseIndependentlyCheck">企事业单位自筹资金</el-checkbox>
            <el-input v-model="ruleForm.raiseIndependently" placeholder="请输入企事业单位自筹自己资金" disabled>
              <!-- <template slot="prepend">占比</template> -->
              <template slot="append">%</template>
            </el-input>
          </div>
          <div class="checkbox-box">
            <el-checkbox v-model="specialFundCheck">专项资金</el-checkbox>
            <el-input v-model="ruleForm.specialFund" placeholder="请输入专项资金占比" disabled>
              <!-- <template slot="prepend">占比</template> -->
              <template slot="append">%</template>
            </el-input>
          </div>
          <div class="checkbox-box">
            <el-checkbox v-model="otherFundsCheck">其他资金</el-checkbox>
            <el-input v-model="ruleForm.otherFunds" placeholder="请输入其他资金占比" disabled>
              <!-- <template slot="prepend">占比</template> -->
              <template slot="append">%</template>
            </el-input>
          </div>
        </div>
        <div class="three-gird">
          <div class="checkbox-box">
            <el-checkbox v-model="unknownCheck">未知</el-checkbox>
            <el-input v-model="ruleForm.unknown" placeholder="请输入未知占比" disabled>
              <!-- <template slot="prepend">占比</template> -->
              <template slot="append">%</template>
            </el-input>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="是否招投标" style="width: 100%" prop="bidding">
        <el-radio-group v-model="ruleForm.bidding" disabled>
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <cy-info-title>本次合作相关</cy-info-title>
      <el-form-item label="本次拟合作金额（万元）" prop="cooperationAmount">
        <cy-amount-input
          v-model="ruleForm.cooperationAmount"
          placeholder="请输入本次拟合作金额（万元）"
          unit-name="CNY"
          is-unit
          disabled
        />
      </el-form-item>
      <el-form-item label="月供货峰值（万元）" prop="peakValue">
        <cy-amount-input
          v-model="ruleForm.peakValue"
          placeholder="请输入月供货峰值（万元）"
          unit-name="CNY"
          is-unit
          disabled
        />
      </el-form-item>
      <el-form-item label="预估账期(月)" prop="estimatedAccountingPeriod">
        <el-input
          v-model="ruleForm.estimatedAccountingPeriod"
          placeholder="请输入预估账期（月）"
          disabled
        />
      </el-form-item>
      <el-form-item label="本次用款高峰值（万元）">
        <cy-amount-input
          v-model="ruleForm.highPeakUsage"
          disabled
          placeholder="请输入本次用款高峰值（万元）"
          unit-name="CNY"
          is-unit
        />
      </el-form-item>

      <template v-if="ruleForm.projectType === '固定项目'">
        <cy-info-title>项目业主方信息</cy-info-title>
        <el-form-item label="项目业主方公司名称">
          <el-input :value="ruleForm.corporateName" placeholder="请输入项目业主方公司名称" disabled />
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <el-input :value="ruleForm.socialCreditCode" placeholder="请输入统一社会信用代码" disabled />
        </el-form-item>
        <el-form-item label="法人代表">
          <el-input :value="ruleForm.legalRepresentative" placeholder="请输入法人代表" disabled />
        </el-form-item>
        <el-form-item label="成立日期">
          <el-input :value="ruleForm.startSate" placeholder="请输入成立日期" disabled />
        </el-form-item>
        <el-form-item label="注册地址">
          <el-input :value="ruleForm.address" placeholder="请输入注册地址" disabled />
        </el-form-item>
        <el-form-item label="是否为项目成立的公司" prop="companyForProject" class="industry">
          <el-radio-group v-model="ruleForm.companyForProject" disabled>
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        projectType: '',
        projectName: '',
        departmentFiles: [],
        biddingFiles: [],
        projectAddress: '',
        projectCycle: '',
        projectNature: '',
        projectNatureDetail: '',
        projectNatureDetailDes: '',
        goodsCategory: '',
        goodsCategoryDetail: '',
        goodsCategoryDetailDes: '',
        purpose: '',
        purposeDetail: '',
        financialFunds: '',
        bankLoans: '',
        foreignCapital: '',
        raiseIndependently: '',
        specialFund: '',
        otherFunds: '',
        unknown: '',
        bidding: '',

        cooperationAmount: '',
        peakValue: '',
        estimatedAccountingPeriod: '',
        highPeakUsage: '',

        corporateName: '',
        socialCreditCode: '',
        legalRepresentative: '',
        startSate: '',
        address: '',
        companyForProject: ''
      },
      projectTypes: [
        {
          label: '固定项目',
          value: 'c_project_type_1'
        },
        {
          label: '集采项目',
          value: 'c_project_type_2'
        },
        {
          label: '无项目',
          value: 'c_project_type_3'
        }
      ]
    }
  },
  computed: {
    financialFundsCheck() {
      return this.ruleForm.financialFunds !== 0 && this.ruleForm.financialFunds !== ''
    },
    bankLoansCheck() {
      return this.ruleForm.bankLoans !== 0 && this.ruleForm.bankLoans !== ''
    },
    foreignCapitalCheck() {
      return this.ruleForm.foreignCapital !== 0 && this.ruleForm.foreignCapital !== ''
    },
    raiseIndependentlyCheck() {
      return this.ruleForm.raiseIndependently !== 0 && this.ruleForm.raiseIndependently !== ''
    },
    specialFundCheck() {
      return this.ruleForm.specialFund !== 0 && this.ruleForm.specialFund !== ''
    },
    otherFundsCheck() {
      return this.ruleForm.otherFunds !== 0 && this.ruleForm.otherFunds !== ''
    },
    unknownCheck() {
      return this.ruleForm.unknown !== 0 && this.ruleForm.unknown !== ''
    }

  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const obj = JSON.parse(JSON.stringify(newV))
          for (const k in this.ruleForm) {
            if (obj[k] !== null && obj[k] !== undefined && obj[k] !== '') {
              this.ruleForm[k] = obj[k]
            }
          }

          if (this.ruleForm.projectType === '固定项目') {
            const { enterpriseHistory } = obj
            this.ruleForm.corporateName = enterpriseHistory.corporateName
            this.ruleForm.socialCreditCode = enterpriseHistory.socialCreditCode
            this.ruleForm.legalRepresentative = enterpriseHistory.legalRepresentative
            this.ruleForm.startSate = enterpriseHistory.startSate
            this.ruleForm.address = enterpriseHistory.address
          }
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

  <style lang="scss" scoped>
  .project-info-box {
  .el-form {
    padding: 10px 20px;

  }
  .three-gird {
    display: flex;
    & > div {
      width: calc(33.33% - 10px);
      margin-right: 20px;
      &:last-child {
        margin-right: 0px;
      }
    }
  }
  .two-gird {
    & > div {
      width: calc(50% - 10px);
      margin-right: 20px;
      &:last-child {
        margin-right: 0px;
      }
    }
  }
  .checkbox-box {
    display: flex;
    margin-bottom: 20px;
    label {
      margin-right: 20px;
    }
  }
}
  </style>
