<template>
  <div class="basic-information">
    <el-form
      ref="ruleFormRef"
      :key="key"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <el-form-item label="项目名称" prop="projectInformation">
        <el-input
          v-model="ruleForm.projectInformation"
          placeholder="请输入项目名称"
          readonly
        />
      </el-form-item>
      <el-form-item label="核心企业名称" prop="enterprise">
        <el-input
          v-model="ruleForm.enterprise"
          placeholder="请输入核心企业名称"
          readonly
        />
      </el-form-item>
      <el-form-item label="供应商（主体）名称" prop="mainEnterprise">
        <el-input
          v-model="ruleForm.mainEnterprise"
          placeholder="请输入供应商（主体）名称"
          readonly
        />
      </el-form-item>
      <el-form-item label="贸易平台" prop="platformName">
        <el-input
          v-model="ruleForm.platformName"
          placeholder="请输入贸易平台"
          readonly
        />
      </el-form-item>
      <el-form-item label="业务编号" prop="businessNumber">
        <el-input
          v-model="ruleForm.businessNumber"
          placeholder="请输入业务编号"
          readonly
        />
      </el-form-item>
      <el-form-item v-if="type === 'change' || isChange" label="变更类型" prop="changeType">
        <el-select
          v-model="ruleForm.changeType"
          placeholder="请选择变更类型"
          :disabled="basicDisabled"
          @change="change"
        >
          <el-option label="经办人变更" :value="1" />
          <el-option label="合同条款变更" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getInformationDeatail } from '@/api/myTrade/salesContractManagement/salesContractManagement'
export default {
  props: {
    basicDisabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      key: 0,
      display: false,
      ruleForm: {
        projectInformation: '',
        platformName: '',
        enterprise: '',
        mainEnterprise: '',
        businessNumber: '',
        changeType: ''
      },
      rules: {
        projectInformation: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        platformName: [{ required: true, message: '请输入贸易平台', trigger: 'blur' }],
        enterprise: [{ required: true, message: '请输入核心企业名称', trigger: 'blur' }],
        mainEnterprise: [{ required: true, message: '请输入供应商（主体）名称', trigger: 'blur' }],
        businessNumber: [{ required: true, message: '请输入业务编号', trigger: 'blur' }],
        changeType: [{ required: true, message: '请选择变更类型', trigger: 'change' }]
      },
      type: '',
      title: ''
    }
  },
  computed: {
    isChange() {
      return this.title === '变更创建销售合同'
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (this.detailsInfo && Object.keys(newV).length) {
          const { type } = this.$route.query
          if (type === 'change' || type === 'see') {
            setTimeout(() => {
              const { projectName, enterprise, mainEnterprise, businessNumber, platformName, changeType, title } = JSON.parse(JSON.stringify(newV))
              this.ruleForm = {
                projectInformation: projectName,
                enterprise,
                mainEnterprise,
                businessNumber,
                platformName,
                changeType
              }
              this.title = title
            }, 100)
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    const { type } = this.$route.query
    this.type = type
    if (type !== 'change' || type !== 'see') {
      this.getInformationDeatail()
    }
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            return resolve(this.ruleForm)
          } else {
            reject()
            return false
          }
        })
      })
    },
    getInformationDeatail() {
      const { id } = this.$route.query
      getInformationDeatail({ id }).then(response => {
        this.ruleForm = {
          projectInformation: response.data.projectName,
          platformName: response.data.platformName,
          enterprise: response.data.enterprise,
          mainEnterprise: response.data.mainEnterprise,
          businessNumber: response.data.businessNumber
        }
        this.$emit('company', { enterprise: response.data.enterprise, platformName: response.data.platformName })
      })
    },
    change() {
      this.$emit('change', { changeType: this.ruleForm.changeType })
    },
    getParams() {

    }
  }
}
</script>

<style lang="scss" scoped>
.basic-information {
}
</style>
