<template>
  <div class="contract-info">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
      :style="formStyle"
    >
      <el-form-item label="合同名称" prop="contractName">
        <el-input
          v-model="ruleForm.contractName"
          placeholder="请输入合同名称"
        />
      </el-form-item>
      <el-form-item label="供应商（主体）名称">
        <el-input
          v-model="ruleForm.mainEnterprise"
          placeholder="请输入供应商（主体）名称"
          disabled
        />
      </el-form-item>
      <el-form-item label="需方公司名称">
        <el-input
          v-model="ruleForm.platformName"
          placeholder="请输入需方公司名称"
          disabled
        />
      </el-form-item>
      <el-form-item
        label="回购方式"
        prop="repurchMethod"
      >
        <el-radio-group v-model="ruleForm.repurchMethod">
          <el-radio
            v-for="item in constant.purchContractRepurchMethod "
            :key="item.code"
            :label="item.code"
          >
            {{ item.name }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="合同约定金额类型"
        prop="contractPlanAmountType"
        class="industry"
      >
        <el-radio-group v-model="ruleForm.contractPlanAmountType">
          <el-radio :label="0">固定金额</el-radio>
          <el-radio :label="1">适时网价</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="合同约定金额" prop="contractPlanAmount">
        <cy-amount-input
          v-model="ruleForm.contractPlanAmount"
          placeholder="请输入合同约定金额（元）"
          unit-name="CNY"
          is-unit
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {
  },
  props: {
    'formStyle': {
      type: Object,
      default: () => {}
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        contractName: '',
        repurchMethod: '',
        mainEnterprise: '',
        contractPlanAmount: '',
        contractPlanAmountType: '',
        platformName: '',
        id: ''
      },
      rules: {
        contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
        repurchMethod: [{ required: true, message: '请选择回购方式', trigger: 'change' }],
        contractPlanAmountType: [{ required: true, message: '请选择合同约定金额类型', trigger: 'change' }],
        contractPlanAmount: [{ required: true, message: '请输入合同约定金额', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  watch: {
    'info.mathId': {
      handler(newV) {
        if (newV) {
          Object.keys(this.ruleForm).forEach(key => {
            if(key != 'mainEnterprise' && key != 'platformName') {
              this.ruleForm[key] = this.info.purchContractBasicInfo[key]
            }
          })
        }
      },
      immediate: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['purchContractRepurchMethod'])
    window.$bus.$on('change', (msg) => {
      this.ruleForm.mainEnterprise = msg.mainEnterprise
      this.ruleForm.platformName = msg.platformName
    })
    window.$bus.$on('detailChange', (msg) => {
      console.log('hello')
      this.ruleForm.mainEnterprise = msg.mainEnterprise
      this.ruleForm.platformName = msg.platformName
    })
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
    }
  },
  beforeDestroy() {
    window.$bus.$off('change')
    window.$bus.$off('detailChange')
  }
}
</script>

<style lang="scss" scoped>
.contract-info {
}
</style>
