<template>
  <div>
    <title-bar title="客户信息预登记" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>

    <van-form @submit="onSubmit">
      <div class="information-registration v-scroller">
        <div class="basic-information">
          <sub-title>基础信息</sub-title>
          <table>
            <tr>
              <td>
                <mobile-input v-model="type_of_certificate" :rules="[{ required: true, message: '不可为空' }]" label="证件类型:" />
              </td>
              <td>
                <mobile-input v-model="ID_number" :rules="[{ required: true, message: '不可为空' }]" label="证件号码:" />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <mobile-input v-model="customer_name" :rules="[{ required: true, message: '不可为空' }]" label="客户名称:" />
              </td>
            </tr>
            <tr>
              <td>
                <mobile-input v-model="contact_person" :rules="[{ required: true, message: '不可为空' }]" label="联系人:" />
              </td>
              <td>
                <mobile-input v-model="contact_number" :rules="[{ required: true, message: '不可为空' }]" label="联系电话:" />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <mobile-input v-model="contact_address" :rules="[{ required: true, message: '不可为空' }]" label="联系人地址:" />
              </td>
            </tr>
            <tr>
              <td colspan="2"><mobile-input v-model="business_scope" rows="3" label="经营范围:" :rules="[{ required: true, message: '不可为空' }]" type="textarea" show-word-limit /></td>
            </tr>
            <tr>
              <td>
                <mobile-input v-model="legal_representative" :rules="[{ required: true, message: '不可为空' }]" label="法定代表人:" />
              </td>
              <td>
                <mobile-input v-model="legal_representative_certificate_number" :rules="[{ required: true, message: '不可为空' }]" label="法定代表人证件号码:" />
              </td>
            </tr>
            <tr>
              <td>
                <mobile-input v-model="time_in_the_industry" :rules="[{ required: true, message: '不可为空' }]" label="从事该行业时间:" />
              </td>
              <td>
                <mobile-input v-model="nature_of_business_premises" :rules="[{ required: true, message: '不可为空' }]" label="经营场所性质:" />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <mobile-input v-model="business_premises_address" :rules="[{ required: true, message: '不可为空' }]" label="经营场所地址:" />
              </td>
            </tr>
          </table>
        </div>
        <div class="company-policy">
          <sub-title>公司章程</sub-title>
          <div class="company-policy-content">
            <div class="charter-label general-meeting-of-shareholders">
              <div></div>
              <div>股东与股东大会</div>
            </div>
            <div class="charter-label director-supervisor">
              <div></div>
              <div>董监高</div>
            </div>
            <div class="charter-label accounting-system">
              <div></div>
              <div>财务会计制度 利润分配和内...</div>
            </div>
            <div class="charter-label company">
              <div></div>
              <div>公司合并 分离 解散和清算</div>
            </div>
          </div>
        </div>
      </div>
      <div class="submit-and-cancel" style="margin-top: 1%; display: flex; justify-content: center">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
/**
 * @Description 客户信息预登记
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:10
 */
@Component({
  name: "CustomerInformationRegistration",
})
export default class CustomerInformationRegistration extends Vue {
  pageTitle = ""; // 页面标题
  type_of_certificate = "";
  ID_number = "";
  customer_name = "";
  contact_person = "";
  contact_number = "";
  contact_address = "";
  business_scope = "";
  legal_representative = "";
  legal_representative_certificate_number = "";
  time_in_the_industry = "";
  nature_of_business_premises = "";
  business_premises_address = "";
  onClick() {
    console.log(111111);
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
  }
  onSubmit(values: any) {
    console.log(values);
  }
}
</script>

<style scoped lang="scss">
.information-registration {
  width: 80%;
  height: calc(100vh - 180px);
  margin: 0 auto;
}
table {
  width: 100%;
  tr {
    vertical-align: top;
  }
}
::v-deep .d-form-field .van-field__label {
  width: 110px;
  text-align: right;
}
::v-deep .van-button--round {
  width: 15%;
  margin: 0 1%;
}
::v-deep .van-button--round span {
  font-size: 18px;
}
.submit-and-cancel button {
  width: 30%;
  background-color: #fd5065;
  border: 1px solid #fd5065;
}

.company-policy-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.company-policy-content > div {
  width: 25.6%;
  margin: 1% 1%;
}
.charter-label > div:nth-child(1) {
  width: 100%;
  padding: 28.85%;
  background-color: #f8f8f8;
}
.charter-label > div:nth-child(2) {
  width: 100%;
  font-size: 18px;
  color: white;
  padding: 2.5% 4%;
}
table {
  width: 90%;
  margin: 0 auto;
}
.general-meeting-of-shareholders > div:nth-child(2) {
  background-color: #f16602;
}
.director-supervisor > div:nth-child(2) {
  background-color: #3aa07f;
}
.accounting-system > div:nth-child(2) {
  background-color: #d027b2;
}
.company > div:nth-child(2) {
  background-color: #dac90c;
}
</style>