<template>
  <action-sheet @hidden="onHidden" @hide="onHide" @shown="onShown" position="right" ref="popup" :full="true">
      <div class="buy-sheet">
        <div class="header">
          <div class="back-wrapper flex" @touchend="onBack">
            <div class="back"></div>
          </div>
        </div>
        <div class="title">
          <h1>添加尺码</h1>
          <h3>请选择希望添加的尺码</h3>
        </div>
        <size-list ref="sizeList"
                   :list="unusedSizeList"
                   :multiple="true"
                   :simple-price="true"
                   :selected="selected"
                   @select="onSelected" />
        <cube-button :disabled="!canRequest"
          @click="_requestSize"><cube-loading v-if="loading"></cube-loading>提交申请</cube-button>
    </div>
  </action-sheet>
</template>

<script>
import { Button, Loading } from 'cube-ui';
import { get } from 'lodash';
import { createNamespacedHelpers } from 'vuex';

import LayoutApp from '../../../components/layout/layout-app';
import SizeList from './size-list';
import ActionSheet from './action-sheet';
import stateShortCutsMixins from '../mixins';

const { mapActions } = createNamespacedHelpers('product');

export default {
  name: 'SizeRequest',
  mixins: [stateShortCutsMixins],
  props: {
    productId: {
      type: Number,
    },
  },
  components: {
    LayoutApp,
    SizeList,
    ActionSheet,
    'cube-button': Button,
    'cube-loading': Loading,
  },
  data() {
    return {
      selected: [],
      loading: false,
    };
  },
  computed: {
    sizeList() {
      return get(this.productDetail, 'goods_list[0].size_list', null);
    },
    otherSizeList() {
      return get(this.productDetail, 'goods_list[0].otherSizeList', null);
    },
    unusedSizeList() {
      return this.otherSizeList;
    },
    canRequest() {
      return this.selected.length !== 0 && !this.loading;
    },
  },
  mounted() {
    this.$refs.popup.show();
  },
  methods: {
    ...mapActions(['requestSize']),
    onHidden() {
      this.$emit('hidden');
    },
    onHide() {
      this.$emit('hide');
    },
    onShown() {
      if (this.$refs.sizeList) {
        this.$refs.sizeList.refreshScroll();
      }
    },
    _requestSize() {
      const size_ids = this.selected.map(item => item.size_id).join(',');
      const goods_id = this.productDetail.goods_list[0].goods_id;

      this.requestSize({ product_id: this.productId, goods_id, size_ids }).then(() => {
        this.$createDialog({
          type: 'alert',
          content: '您的尺码添加申请已提交，我们会尽快审核并通知您，请耐心等待',
          confirmBtn: {
            text: '我知道了'
          },
          onConfirm: () => {
            this.onBack();
          },
        }).show();
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    onSelected({selected}) {
      this.selected = selected;
    },
    onBack() {
      this.$refs.popup.hide();
    },
  },
};
</script>

<style lang="scss" scoped>
  @import "../product-detail";

  .buy-sheet {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;

    .size-list {
      flex: 1;
      padding: 10px 40px;
    }
  }

  .header {
    width: 100%;
    height: 90px;
    padding-left: 40px;
    padding-right: 40px;
    background-color: #fff;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;

    .flex {
      display: flex;
      align-items: center;
    }

    .back-wrapper {
      height: 100%;
      width: 120px;
    }

    .back {
      width: 48px;
      height: 48px;
      background: url(~statics/image/address/close.png) no-repeat;
      background-size: cover;
    }
  }

  .title {
    padding: 20px 40px;

    h1, h3 {
      margin: 0;
      font-weight: normal;
    }

    h1 {
      font-size: 64px;
      color: #000;
      letter-spacing: 0.82px;
      line-height: 82px;
    }

    h3 {
      font-size: 28px;
      color: #999;
      letter-spacing: 0;
    }
  }

  .cube-btn {
    box-sizing: border-box;
    border-radius: 0;
    padding: 0;
    line-height: 60px;
    font-size: 14px;
    background: #002b47;

    &.cube-btn_disabled {
      background: #999;
    }
  }
</style>