<template>
  <LayoutApp>
    <div class="pane-body">
      <div class="title">营业执照认证</div>
      <p class="desc">UFO平台将严格保密您的认证信息，请按照种类分别填写以下信息，保证上传的图片文字清晰可见，认证成功后我们将会第一时间通知您。</p>

      <RadioGroup class="wrapper-radio">
        <Radio :label="{text: '个体工商户', value: 1}" style="flex: 0 1 50%;" v-model="model.type"></Radio>
        <Radio :label="{text: '企业', value: 2}" style="flex: 0 1 50%;" v-model="model.type"></Radio>
      </RadioGroup>

      <Form v-if="model.type === 1">
        <FormItem>
          <CInput label="个体工商户名称" place-holder="请填写个体工商户名称"></CInput>
        </FormItem>

        <FormItem>
          <CInput label="统一社会信用代码" place-holder="请填写统一社会信用代码"></CInput>
        </FormItem>

        <FormItem>
          <CInput label="经营者姓名" place-holder="请填写认证姓名"></CInput>
        </FormItem>

        <FormItem>
          <CInput label="经营者身份证号" place-holder="请填写个体身份证号"></CInput>
        </FormItem>

        <FormItem>
          <CDatePick label="营业执照有效期"></CDatePick>
        </FormItem>

        <FormItem>
          <CUpload label="个体工商户营业执照正本照片"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="个体工商户营业执照副本照片"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="上传个人身份证正面照片"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="上传个人身份证反面照片"></CUpload>
        </FormItem>
      </Form>

      <Form v-else>
        <FormItem>
          <CInput label="企业名称" place-holder="请填写企业名称"></CInput>
        </FormItem>

        <FormItem>
          <CInput label="统一社会信用代码" place-holder="请填写统一社会信用代码"></CInput>
        </FormItem>

        <FormItem>
          <CInput label="法人姓名" place-holder="请填写法人姓名"></CInput>
        </FormItem>

        <FormItem>
          <CInput label="法人身份证号" place-holder="请填写法人身份证号"></CInput>
        </FormItem>

        <FormItem>
          <CDatePick label="营业执照有效期"></CDatePick>
        </FormItem>

        <FormItem>
          <CUpload label="企业营业执照正本照片"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="企业营业执照副本照片"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="上传法人身份证正面照片"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="上传法人身份证反面照片"></CUpload>
        </FormItem>
      </Form>
      <div class="footer active">确认提交</div>
    </div>

  </LayoutApp>
</template>

<script>
import LayoutApp from '../../components/layout/layout-app';
import FixedBottom from '../components/fixed-bottom';
import Radio from '../components/radio';
import RadioGroup from '../components/radio-group';
import Form from '../components/form';
import FormItem from '../components/form-item';
import Input from '../components/input';
import Upload from '../components/upload';
import DatePick from '../components/date-pick';


export default {
  data() {
    return {
      model: {
        type: 1,
        businessName: '',
        code: '',
        name: '',
        id: '',
        start_time: '',
        end_time: '',
        is_limit: false,
        licence_image_side: [],
        licence_image_other_side: [],
        id_image_side: [],
        id_image_other_side: []
      },
    };
  },
  methods: {

  },
  components: {
    LayoutApp,
    FixedBottom,
    RadioGroup,
    Form,
    FormItem,
    Radio,
    CInput: Input,
    CUpload: Upload,
    CDatePick: DatePick
  }
};
</script>

<style lang="scss" scoped>
  .title {
    font-size: 68px;
  }

  .footer {
    width: 100%;
    height: 120px;
    text-align: center;
    line-height: 120px;
    font-size: 28px;
    margin: 40px 0;
    color: white;
    background-color: #ccc;

    &.active {
      background-color: #002b47;
    }
  }

  .pane-body {
    height: 100%;
    overflow: scroll;
    padding-left: 40px;
    padding-right: 40px;
  }

  .desc {
    font-size: 24px;
    line-height: 1.5;
    color: #999;
  }

  .wrapper-radio {
    margin: 60px 0;
  }
</style>