<template>
  <div class="project-box">
    <cy-info-title type="collapse" name="项目信息">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-position="top"
        label-width="150px"
        class="rule-form-orange"
      >
        <el-form-item label="项目类型" prop="projectType">
          <el-select v-model="ruleForm.projectType" placeholder="请选择项目类型" @change="typeChange">
            <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="项目名称" class="two-form-item" prop="projectName">
          <el-input v-model="ruleForm.projectName" placeholder="请输入项目名称" :disabled="ruleForm.projectType !== 'c_project_type_1'" />
        </el-form-item>
      </el-form>
    </cy-info-title>
    <cy-info-title v-if="ruleForm.projectType==='c_project_type_1'" type="collapse" name="项目业主方信息">
      <project-owner-info ref="projectOwnerInfo" />
    </cy-info-title>

  </div>
</template>

<script>
export default {
  components: {
    ProjectOwnerInfo: () => import('./ProjectOwnerInfo')
  },
  data() {
    return {
      ruleForm: {
        projectType: '',
        projectName: ''
      },
      rules: {
        projectType: [
          { required: true, message: '项目类型不能为空', trigger: 'change' }
        ],
        projectName: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ]
      },
      projectTypes: [
        {
          label: '固定项目:货物与项目一一对应，非集采公司采购',
          value: 'c_project_type_1'
        },
        {
          label: '集采项目:货物与项目非一一对应，集采公司采购',
          value: 'c_project_type_2'
        },
        {
          label: '无项目:暂无具体项目',
          value: 'c_project_type_3'
        }
      ],
      coreEnterprise: ''
    }
  },
  mounted() {
    window.$bus.$on('sendCoreName', (msg) => {
      this.coreEnterprise = msg
      if (this.ruleForm.projectType !== 'c_project_type_1') {
        this.ruleForm.projectName = this.coreEnterprise + '-' + (this.ruleForm.projectType === 'c_project_type_1' ? '固定项目' : this.ruleForm.projectType === 'c_project_type_2' ? '集采项目' : '无项目')
      }
    })
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            return resolve(this.ruleForm)
          } else {
            reject()
            return false
          }
        })
      })
    },
    async passData() {
      const baseInfo = await this.validate()
      // 固定项目才有项目业主方信息
      let ownerInfo = {}
      if (this.ruleForm.projectType === 'c_project_type_1') {
        ownerInfo = await this.$refs.projectOwnerInfo.validate()
      }

      const projectInfo = { ...baseInfo, ...ownerInfo }
      return new Promise((resolve, reject) => {
        return resolve(projectInfo)
      })
    },

    typeChange() {
      // 非固定项目  【核心企业-项目类型】
      if (this.ruleForm.projectType !== 'c_project_type_1') {
        this.$refs.ruleFormRef.clearValidate('projectName')
        this.ruleForm.projectName = this.coreEnterprise + '-' + (this.ruleForm.projectType === 'c_project_type_2' ? '集采项目' : '无项目')
      } else {
        this.ruleForm.projectName = ''
      }
    }
  }
}
</script>

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

}
</style>
