<template>
  <div class="project-info-box">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <el-form-item label="项目类型" prop="projectType" class="one-form-item">
        <el-select v-model="ruleForm.projectType" placeholder="请选择项目类型" :disabled="disabled">
          <el-option
            v-for="item in projectTypes"
            :key="item.value"
            :label="item.label.split(':')[0]"
            :value="item.value"
          >
            <span>{{ item.label.split(':')[0] }}</span><span class="option-label-tip">（{{ item.label.split(':')[1] }}）</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName" class="one-form-item">
        <el-input v-model="ruleForm.projectName" placeholder="请输入项目名称" :disabled="disabled" />
      </el-form-item>

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

      <el-form-item label="货物品类" prop="goodsCategory" class="one-form-item">
        <el-select v-model="ruleForm.goodsCategory" placeholder="请选择货物品类" :disabled="disabled" @change="getGoodsCategoryDetailList">
          <el-option
            v-for="item in goodsCategoryList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ruleForm.goodsCategory !== 'c_project_goods_category_7'" class="one-form-item" label="货物品类细分" prop="goodsCategoryDetail" :rules="[{required: ruleForm.goodsCategory !== 'c_project_goods_category_7',message: '请选择货物品类细分', trigger: 'change'}]">
        <el-select v-model="ruleForm.goodsCategoryDetail" placeholder="请选择货物品类细分" :disabled="disabled">
          <el-option
            v-for="item in goodsCategoryDetailList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-else class="one-form-item" label="货物品类细分" prop="goodsCategoryDetailDes" :rules="[{required: ruleForm.goodsCategory === 'c_project_goods_category_7',message: '请选择货物品类细分', trigger: 'change'}]">
        <el-input v-model="ruleForm.goodsCategoryDetailDes" placeholder="请输入货物品类细分" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="用途" class="one-form-item" prop="purpose">
        <el-select v-model="ruleForm.purpose" placeholder="请选择使用方法" :disabled="disabled" @change="getPurposeDetailList">
          <el-option
            v-for="item in purposeList"
            :key="item.code"
            :label="item.name.split('：')[0]"
            :value="item.code"
          >
            <span>{{ item.name.split('：')[0] }}</span><span class="option-label-tip">（{{ item.name.split('：')[1] }}）</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="具体用途" class="one-form-item" prop="purposeDetail">
        <el-select v-model="ruleForm.purposeDetail" placeholder="请选择具体用途" :disabled="disabled">
          <el-option
            v-for="item in purposeDetailList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 100%">
        <template slot="label">
          <span>资金来源及占比</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="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="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="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="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="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="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="disabled">
              <!-- <template slot="prepend">占比</template> -->
              <template slot="append">%</template>
            </el-input>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="是否招投标" style="width: 100%">
        <el-radio-group v-model="ruleForm.bidding" :disabled="disabled">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDictionaryInfo } from '@/api/creditManage/projectManage'
export default {
  props: {
    projectInformation: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      projectNatureList: [],
      projectNatureDetailList: [],
      goodsCategoryList: [],
      goodsCategoryDetailList: [],
      purposeList: [],
      purposeDetailList: [],
      cycleList: [],
      ruleForm: {
        id: '',
        cEnterpriseHistoryId: '',
        projectType: '',
        projectName: '',
        departmentFiles: [],
        biddingFiles: [],
        projectAddress: '',
        projectCycle: '',
        projectNature: '',
        projectNatureDetail: '',
        projectNatureDetailDes: '',
        goodsCategory: '',
        goodsCategoryDetail: '',
        goodsCategoryDetailDes: '',
        purpose: '',
        purposeDetail: '',
        financialFunds: '',
        bankLoans: '',
        foreignCapital: '',
        raiseIndependently: '',
        specialFund: '',
        otherFunds: '',
        unknown: '',
        bidding: ''
      },
      rules: {
        projectAddress: [
          { required: true, message: '请输入项目地点', trigger: 'blur' }
        ],
        projectCycle: [
          { required: true, message: '请选择项目周期', trigger: 'change' }
        ],
        projectNature: [
          { required: true, message: '请选择项目性质', trigger: 'change' }
        ],
        goodsCategory: [
          { required: true, message: '请选择货物品类', trigger: 'change' }
        ],
        purpose: [
          { required: true, message: '请选择用途', trigger: 'change' }
        ],
        purposeDetail: [
          { required: true, message: '请选择具体用途', trigger: 'change' }
        ],
        bidding: [
          { required: true, message: '请选择是否招投标', trigger: 'change' }
        ]
      },
      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: {
    projectInformation: {
      handler(newV) {
        if (newV && Object.keys(newV)) {
          const projectInfo = JSON.parse(JSON.stringify(newV))
          for (const k in this.ruleForm) {
            if (projectInfo[k] !== undefined && projectInfo[k] !== '' && projectInfo[k] !== null) {
              this.ruleForm[k] = projectInfo[k]
            }
          }
          if (this.ruleForm.projectNature) {
            this.getProjectNatureDetailList(this.ruleForm.projectNature, true)
          }
          if (this.ruleForm.goodsCategory) {
            this.getGoodsCategoryDetailList(this.ruleForm.goodsCategory, true)
          }
          if (this.ruleForm.purpose) {
            this.getPurposeDetailList(this.ruleForm.purpose, true)
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getprojectNatureList()
    this.getGoodsCategoryList()
    this.getPurposeList()
    this.getCycleList()
  },
  methods: {
    // 提交参数
    passData(type) {
      const biddingFile = this.ruleForm.projectType === 'c_project_type_1' ? this.$refs.biddingFileIds.getFileLists : []
      const departFile = this.ruleForm.projectType === 'c_project_type_1' ? this.$refs.departmentFileIds.getFileLists : []
      var params = {
        ...this.ruleForm,
        biddingFileIds: biddingFile.map(item => item.id),
        departmentFileIds: departFile.map(item => item.id)
      }
      delete params.biddingFiles
      delete params.departmentFiles
      return new Promise((resolve, reject) => {
        if (type === 'submit' || type === 'assess') {
          this.$refs.ruleFormRef.validate(valid => {
            if (this.ruleForm.projectType === 'c_project_type_1') {
              if (!biddingFile.length) {
                this.$message.warning('请上传招投标文件、合同模板等文件')
                return
              }
              if (!departFile.length) {
                this.$message.warning('请上传项目开工情况图片、项目部铭牌图片')
                return
              }
            }
            if (valid) {
              return resolve(params)
            } else {
              reject()
              return false
            }
          })
        } else {
          resolve(params)
        }
      })
    },

    // 项目性质
    getprojectNatureList() {
      getDictionaryInfo({ parentCode: 'c_project_nature' }).then(res => {
        this.projectNatureList = res.data
      })
    },
    // 项目性质细分
    getProjectNatureDetailList(v, flag) {
      if (!flag) {
        this.ruleForm.projectNatureDetail = ''
      }
      this.projectNatureDetailList = []
      getDictionaryInfo({ parentCode: v }).then(res => {
        this.projectNatureDetailList = res.data
      })
    },
    // 货物品类
    getGoodsCategoryList() {
      getDictionaryInfo({ parentCode: 'c_project_goods_category' }).then(res => {
        this.goodsCategoryList = res.data
      })
    },
    // 获取品类细分
    getGoodsCategoryDetailList(v, flag) {
      if (!flag) {
        this.ruleForm.goodsCategoryDetail = ''
      }
      this.goodsCategoryDetailList = []
      getDictionaryInfo({ parentCode: v }).then(res => {
        this.goodsCategoryDetailList = res.data
      })
    },
    // 用途
    getPurposeList() {
      getDictionaryInfo({ parentCode: 'c_project_goods_purpose' }).then(res => {
        this.purposeList = res.data
      })
    },
    // 用途细分
    getPurposeDetailList(v, flag) {
      if (!flag) {
        this.ruleForm.purposeDetail = ''
      }
      this.purposeDetailList = []
      getDictionaryInfo({ parentCode: v }).then(res => {
        this.purposeDetailList = res.data
      })
    },
    // 项目周期
    getCycleList() {
      getDictionaryInfo({ parentCode: 'c_project_cycle' }).then(res => {
        this.cycleList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.project-info-box {
  padding: 10px 15px;
  .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>
