<template>
  <div id="detailInfo">
    <el-row>
      <el-col :span="24" class="top">
        <span class="shu"></span><span class="title">{{ formTitle }}</span>
      </el-col>
      <el-col :span="24" class="form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <span v-if="ruleForm.status === '1' || ruleForm.status === '1'">
            <el-form-item label="认证状态:">
              <span>{{ ruleForm.status === '0' ? '认证中' : ruleForm.status === '1' ? '认证通过' : '认证失败' }}</span>
            </el-form-item>
          </span>
          <el-form-item label="企业名称:">
            <el-input v-model="ruleForm.company_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码:">
            <el-input v-model="ruleForm.reg_num" disabled></el-input>
          </el-form-item>
          <el-form-item label="企业类型:">
            <el-input v-model="ruleForm.type" disabled></el-input>
          </el-form-item>
          <el-form-item label="法定代表人:">
            <el-input v-model="ruleForm.person" disabled></el-input>
          </el-form-item>
          <el-form-item label="注册资本(万):">
            <el-input v-model="ruleForm.capital" disabled></el-input>
          </el-form-item>
          <el-form-item label="注册地址:">
            <el-input v-model="ruleForm.address" disabled></el-input>
          </el-form-item>
          <el-form-item label="成立日期:">
            <el-input v-model="ruleForm.establish_date" disabled></el-input>
          </el-form-item>
          <el-form-item label="营业到期时间:">
            <el-input v-model="ruleForm.valid_period" disabled></el-input>
          </el-form-item>
          <el-form-item label="经营范围:">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" v-model="ruleForm.business" disabled></el-input>
          </el-form-item>
          <span v-if="ruleForm.status === '0'">
            <el-form-item>
              <el-button type="primary" @click="submitForm()">认证通过</el-button>
              <el-button type="danger" @click="resetForm('ruleForm')">认证失败</el-button>
            </el-form-item>
          </span>
        </el-form>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="licenseDialog">
      <el-image :src="licenseImage" style="height:100%;width:100% "></el-image>
    </el-dialog>
    <el-dialog :visible.sync="cardFrontDialog">
      <el-image :src="cardFrontImage" style="height:100%;width:100% "></el-image>
    </el-dialog>
    <el-dialog :visible.sync="cardBackDialog">
      <el-image :src="cardBackImage" style="height:100%;width:100% "></el-image>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'detailInfo',
  props: {
    ruleForm: null,
    formTitle: null,
  },
  components: {},
  data: () => ({
    belong_addr_province: '吉林省',
    licenseDialog: false,
    licenseImage: '',
    cardFrontDialog: false,
    cardFrontImage: '',
    cardBackDialog: false,
    cardBackImage: '',
    rules: {},
  }),
  created() {},
  computed: {},
  methods: {
    submitForm() {
      this.$emit('submitForm', { data: this.ruleForm });
    },
    resetForm(ruleForm) {
      this.$emit('resetForm', { data: this.ruleForm });
    },
    showLicense(licenseUrl) {
      if (licenseUrl) {
        this.$set(this, `licenseImage`, licenseUrl);
        this.$set(this, `licenseDialog`, true);
      } else {
        this.$set(this, `licenseDialog`, false);
      }
    },
    showCardFront(cardFrontUrl) {
      if (cardFrontUrl) {
        this.$set(this, `cardFrontImage`, cardFrontUrl);
        this.$set(this, `cardFrontDialog`, true);
      } else {
        this.$set(this, `cardFrontDialog`, false);
      }
    },
    showCardBack(cardBackUrl) {
      if (cardBackUrl) {
        this.$set(this, `cardBackImage`, cardBackUrl);
        this.$set(this, `cardBackDialog`, true);
      } else {
        this.$set(this, `cardBackDialog`, false);
      }
    },
    // uploadSuccess({ type, data }) {
    //   if (type !== 'logo') {
    //     let arr = _.get(this.ruleForm, type);
    //     if (arr !== undefined) {
    //       this.ruleForm[type].push({ name: data.name, uri: data.uri });
    //     } else {
    //       let newArr = [{ name: data.name, uri: data.uri }];
    //       this.$set(this.ruleForm, `${type}`, newArr);
    //     }
    //   } else {
    //     this.$set(this.ruleForm, `${type}`, data.uri);
    //   }
    // },
  },
};
</script>
<style lang="less" scoped>
.top .shu {
  float: left;
  width: 4px;
  height: 20px;
  background: rgba(233, 2, 29, 1);
}
.top .title {
  float: left;
  padding: 0 10px;
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: rgba(40, 40, 40, 1);
}
.form {
  padding: 0 200px 0 0;
}
/deep/.el-button {
  color: #fff;
  background-color: red;
  border-color: red;
}
</style>
