<template>
  <div class="form-body">

    <div class="title">新的好物</div>

    <Form ref="form">
      <FormItem>
        <CInput label="品牌" :max-length="50" :show-required="true" :required="true" place-holder="例如：Nike, Adidas" v-model="form.brand"></CInput>
      </FormItem>

      <FormItem>
        <CInput label="商品名称" :max-length="50" :show-required="true" :required="true" place-holder="例如：Yeezy 350 v2 纯白" v-model="form.product_name"></CInput>
      </FormItem>

      <FormItem>
        <CInput label="发售价" :max-length="9" type="number" :show-required="true" :required="false" place-holder="请输入官方售价" v-model="form.price"></CInput>
      </FormItem>

      <FormItem>
        <CSingleDataPick label="发售时间" :show-required="true" :required="false" place-holder="请选择发售时间" v-model="form.sale_time"></CSingleDataPick>
      </FormItem>

      <FormItem>
        <CInput :max-length="50" label="货号" :show-required="true" :required="true" place-holder="例如：CP9366，参见合格证" v-model="form.product_code"></CInput>
      </FormItem>

      <FormItem>
        <CUpload label="商品图片" @file-change="fileChange" :show-required="true" :required="true" :max="9" v-model="form.imageList"></CUpload>
      </FormItem>

    </Form>

    <div :class="submitClass" @click="onSubmit">确认提交</div>

  </div>
</template>

<script>
import CUpload from '../../license/components/upload';
import FormItem from '../../license/components/form-item';
import Form from '../../license/components/form';
import CInput from '../../license/components/input';
import CSingleDataPick from '../components/single-data-pick';

import { createNamespacedHelpers } from 'vuex';

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

export default {
  name: 'UfoFormPage',
  data() {
    return {
      form: {
        brand: '',
        product_name: '',
        price: '',
        sale_time: '',
        product_code: '',
        imageList: [],
        forceRecomputeCounter: 1
      }
    };
  },
  components: {
    Form,
    FormItem,
    CUpload,
    CInput,
    CSingleDataPick
  },
  methods: {
    async onSubmit() {
      if (!this.validate()) {
        return;
      }

      if (!this.isNotEmpty) {
        return;
      }

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

      const result = await this.createUfoProduct(this.form);

      await this.sleep(1000);

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

      if (result && result.code === 200) {
        this.$createToast({
          type: 'text',
          txt: '您的好货信息已提交，审核通过会第一时间通知您',
          mask: true,
          time: 3000,
          $events: {
            timeout: this.finishPage
          }
        }).show();
      } else {
        this.$createToast({
          type: 'error',
          txt: result.message,
          mask: true
        }).show();
      }
    },
    ...mapActions(['fetchToken', 'createUfoProduct']),
    validate() {
      return this.$refs.form && this.$refs.form.validate();
    },
    fileChange() {
      this.form.forceRecomputeCounter += 1;
    },
    sleep(n) {
      return new Promise((resolve) => {
        setTimeout(resolve, n);
      });
    },
    finishPage() {
      this.$yoho.finishPage();
    }
  },
  computed: {
    submitClass() {
      return [
        'footer',
        {
          active: this.isNotEmpty
        }
      ];
    },
    isNotEmpty() {
      return this.form.forceRecomputeCounter && this.form.brand && this.form.product_name && this.form.product_code &&
        this.form.imageList.length >= 1 &&
        this.form.imageList[0] && this.form.imageList[0].response && this.form.imageList[0].response.data;
    },
  },
  mounted() {
    this.fetchToken();
  }
};
</script>

<style lang="scss" scoped>
.form-body {
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  padding-top: 12px;
  padding-left: 40px;
  padding-right: 40px;
}

.title {
  font-weight: bold;
  font-size: 68px;
  margin-bottom: 42px;
}

.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;
  }
}
</style>