<template>
  <div class="contact-content">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title>基础信息</cy-info-title>
      <el-form-item label="企业名称" prop="enterpriceCn">
        <el-input v-model="ruleForm.enterpriceCn" disabled />
      </el-form-item>
      <el-form-item label="联系人姓名" prop="contactName">
        <el-input v-model="ruleForm.contactName" disabled />
      </el-form-item>
      <el-form-item label="联系人职务" prop="contactPost">
        <el-input v-model="ruleForm.contactPost" disabled />
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNumber">
        <el-input v-model="ruleForm.phoneNumber" disabled />
      </el-form-item>
      <el-form-item label="联系邮箱" prop="email">
        <el-input v-model="ruleForm.email" disabled />
      </el-form-item>
      <el-form-item label="主营品类" prop="mainCategories">
        <el-input v-model="ruleForm.mainCategories" disabled />
      </el-form-item>
      <el-form-item label="年销售额（万元）" prop="annualSalesRevenue">
        <el-input v-model="ruleForm.annualSalesRevenue" disabled />
      </el-form-item>
      <el-form-item label="主要客户" prop="mainCustomers">
        <el-input v-model="ruleForm.mainCustomers" disabled />
      </el-form-item>
      <el-form-item label="预估账期" prop="estimatedAccountingPeriod">
        <el-input v-model="ruleForm.estimatedAccountingPeriod" disabled />
      </el-form-item>
      <el-form-item label="应收余额（万元）" prop="accountsReceivableBalance">
        <el-input v-model="ruleForm.accountsReceivableBalance" disabled />
      </el-form-item>
      <div style="width: 100%">
        <el-form-item label="留言" prop="infoContent" style="width: 100%">
          <el-input v-model="ruleForm.infoContent" type="textarea" disabled />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { queryContactListDetail } from '@/api/contactUs/index'

export default {
  props: {
    // disabled: {
    //   type: Boolean,
    //   default: false
    // }
    // deatailsInfo: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  data() {
    return {
      key: 0,
      ruleForm: {
        id: '',
        enterpriceCn: '',
        contactName: '',
        contactPost: '',
        email: '',
        phoneNumber: '',
        enterpriseType: '',
        mainCategories: '',
        annualSalesRevenue: '',
        mainCustomers: '',
        estimatedAccountingPeriod: '',
        accountsReceivableBalance: '',
        infoContent: ''
      },
      rules: {}
    }
  },

  created() {
    if (this.$route.query && this.$route.query.id !== '') {
      this.queryDetails(this.$route.query.id)
    }
  },
  methods: {
    // 查询联系我们详情
    queryDetails(id) {
      queryContactListDetail(id).then((res) => {
        console.log(res)
        const fieldArr = ['enterpriceCn',
          'contactName',
          'contactPost',
          'email',
          'phoneNumber',
          'enterpriseType',
          'mainCategories',
          'annualSalesRevenue',
          'mainCustomers',
          'estimatedAccountingPeriod',
          'accountsReceivableBalance',
          'infoContent']
        console.log(fieldArr)
        fieldArr.forEach(el => {
          this.ruleForm[el] = res.data[el]
        })
      })
    }
  }
}
</script>

<style  scoped>

</style>
