<template>
  <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.businessType"></Radio>
      <Radio :label="{text: '企业', value: 2}" style="flex: 0 1 50%;" v-model="model.businessType"></Radio>
    </RadioGroup>

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

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

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

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

        <FormItem>
          <CDatePick label="营业执照有效期" v-model="model.time"></CDatePick>
        </FormItem>

        <FormItem>
          <CUpload label="个体工商户营业执照正本照片" v-model="model.licenseOriginalImage" @file-change="fileChange"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="个体工商户营业执照副本照片" v-model="model.licenseCopyImage" @file-change="fileChange"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="经营者身份证正面照片" v-model="model.certFaceImage" @file-change="fileChange"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="经营者身份证反面照片" v-model="model.certReverseImage" @file-change="fileChange"></CUpload>
        </FormItem>
      </template>

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

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

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

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

        <FormItem>
          <CDatePick label="营业执照有效期" v-model="model.time"></CDatePick>
        </FormItem>

        <FormItem>
          <CUpload label="企业营业执照正本照片" v-model="model.licenseOriginalImage" @file-change="fileChange"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="企业营业执照副本照片" v-model="model.licenseCopyImage" @file-change="fileChange"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="法人身份证正面照片" v-model="model.certFaceImage" @file-change="fileChange"></CUpload>
        </FormItem>

        <FormItem>
          <CUpload label="法人身份证反面照片" v-model="model.certReverseImage" @file-change="fileChange"></CUpload>
        </FormItem>
      </template>
    </Form>

    <div :class="submitClass" @touchend="onSubmit">确认提交</div>
  </div>
</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';
import { createNamespacedHelpers } from 'vuex';

const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  'license/form'
);

export default {
  data() {
    return {
      model: {
        businessType: 1,
        businessName: '',
        socialCreditCode: '',
        certName: '',
        certNo: '',
        time: {
          start_time: '',
          expire_time: '',
          noLimit: false
        },
        licenseOriginalImage: [],
        licenseCopyImage: [],
        certFaceImage: [],
        certReverseImage: [],
        forceRecomputeCounter: 1
      },
    };
  },
  methods: {
    async onSubmit() {
      const user = await this.$sdk.getUser();

      if (!user.uid) {
        this.$sdk.goLogin();
        return;
      }

      if (!this.inNotEmpty) {
        return;
      }

      if (this.validate()) {
        this.toast = this.$createToast({
          type: 'loading',
          txt: '正在提交中',
          mask: true
        }).show();

        const result = await this.saveLicense(this.model);

        await this.sleep(1000);

        this.toast && this.toast.hide();

        if (result && result.code === 200) {
          this.$store.commit('license/form/FETCH_UFO_STATUS_SUCCESS', {status: 0});
        } else {
          this.$createToast({
            type: 'error',
            txt: result.message,
            mask: true
          }).show();
        }
      }
    },
    sleep(n) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, n);
      });
    },
    validate() {
      return this.$refs.form && this.$refs.form.validate();
    },
    ...mapActions(['fetchToken', 'saveLicense', 'licenseStatus']),
    fileChange() {
      this.model.forceRecomputeCounter += 1;
    }
  },
  computed: {
    submitClass() {
      return [
        'footer',
        {
          active: this.inNotEmpty
        }
      ];
    },
    inNotEmpty() {
      return this.model.forceRecomputeCounter && this.model.businessName &&
        this.model.socialCreditCode &&
        this.model.certName &&
        this.model.certNo &&
        this.model.licenseOriginalImage.length === 1 &&
        this.model.licenseOriginalImage[0] && this.model.licenseOriginalImage[0].response && this.model.licenseOriginalImage[0].response.data &&
        this.model.licenseCopyImage.length === 1 &&
        this.model.licenseCopyImage[0] && this.model.licenseCopyImage[0].response && this.model.licenseCopyImage[0].response.data &&
        this.model.certFaceImage.length === 1 &&
        this.model.certFaceImage[0] && this.model.certFaceImage[0].response && this.model.certFaceImage[0].response.data &&
        this.model.certReverseImage.length === 1 &&
        this.model.certReverseImage[0] && this.model.certReverseImage[0].response && this.model.certReverseImage[0].response.data &&
        (this.model.time.noLimit ? this.model.time.start_time : this.model.time.start_time && this.model.time.expire_time);
    },
    ...mapState(['needLogin'])
  },
  mounted() {
    this.fetchToken();
  },
  watch: {
    needLogin(newVal) {
      if (newVal) {
        this.$yoho.goLogin({});
      }
    }
  },
  components: {
    LayoutApp,
    FixedBottom,
    RadioGroup,
    Form,
    FormItem,
    Radio,
    CInput: Input,
    CUpload: Upload,
    CDatePick: DatePick
  }
};
</script>

<style lang="scss" scoped>
  .title {
    font-size: 68px;
    font-weight: bolder;
    margin-bottom: 20px;
  }

  .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-top: 12px;
    padding-left: 40px;
    padding-right: 40px;
  }

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

  .wrapper-radio {
    margin: 55px 0;
  }

  .loading {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>