<template>
  <transition name="move">
    <div
      v-show="showFlag"
      ref="food"
      class="food">
      <div class="food-content">
        <div class="image-header">
          <img
            :src="food.product_img_url"
            alt="">
          <div
            class="back"
            @click="hide">
            <van-icon
              color="#fff"
              name="close"
              size="30px"/>
          </div>
        </div>
        <div class="content">
          <div class="title-wrap">
            <h1 class="title">{{ food.product_name }}</h1>
            <p>{{ food.product_sale_num }}人推荐</p>
          </div>
          <div class="detail">
            <p class="options">
              <span
                v-for="(item, index) in food.product_skus"
                :key="index"
                :class="{'active': index === 0}">{{ item.product_sku }}</span>
            </p>
          </div>
          <div
            v-for="(item, index) in food.product_attachs"
            :key="index"
            class="detail">
            <div class="subtitle-wrap">
              <h1 class="title">{{ item.attach_name }}</h1>
              <p>（最多可选{{ item.attach_max_num }}个）</p>
            </div>
            <p class="options">
              <span
                v-for="(attr, idx) in item.attach_content"
                :key="idx">{{ attr }}</span>
            </p>
          </div>
          <div class="detail">
            <div class="subtitle-wrap">
              <h1 class="title">商品详情</h1>
            </div>
            <div class="des" v-html="food.product_desc"></div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="price">
          <span class="now">￥{{food.price}}</span><span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
        </div>
        <div class="cartcontrol-wrapper">
          <cartcontrol :food="food" @add="addFood"></cartcontrol>
        </div>
        <transition name="fade">
          <div v-show="!food.count || food.count===0" class="buy" @click.stop.prevent="addFirst">
            加入购物车
          </div>
        </transition>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
import Vue from 'vue'
import cartcontrol from '../cartcontrol/cartcontrol'
import { Icon } from 'vant'

const ALL = 2

export default {
  props: {
    food: {
      type: Object
    }
  },
  data () {
    return {
      showFlag: false,
      selectType: ALL,
      onlyContent: true,
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    }
  },
  methods: {
    show () {
      this.showFlag = true
      this.selectType = ALL
      this.onlyContent = true
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.food, {
            click: true
          })
        } else {
          this.scroll.refresh()
        }
      })
    },
    hide () {
      this.showFlag = false
    },
    addFirst (event) {
      if (!event._constructed) {
        return
      }
      this.$emit('add', event.target)
      Vue.set(this.food, 'count', 1)
    },
    needShow (type, text) {
      if (this.onlyContent && !text) {
        return false
      }
      if (this.selectType === ALL) {
        return true
      } else {
        return type === this.selectType
      }
    },
    addFood (target) {
      this.$emit('add', target)
    },
    selectRating (type) {
      this.selectType = type
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    },
    toggleContent () {
      this.onlyContent = !this.onlyContent
      this.$nextTick(() => {
        this.scroll.refresh()
      })
    }
  },
  components: {
    cartcontrol,
    'van-icon': Icon
  }
}
</script>

<style lang="scss" scoped>
.food {
  position: fixed;
  left: 0;
  top: 20px;
  bottom: 0;
  z-index: 60;
  width: 100%;
  transform: translate3d(0, 0, 0);

  &.move-enter-active, &.move-leave-active {
    transition: all 0.2s linear;
  }

  &.move-enter, &.move-leave-active {
    transform: translate3d(0, 100%, 0);
  }

  .food-content {
    min-height: 90%;
    border-radius: 16px 16px 0 0;
    background: #fff;
  }

  .image-header {
    position: relative;
    width: 100%;
    height: 210px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 4px 0 rgba(13, 13, 13, 0.37);
    overflow: hidden;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .back {
      position: absolute;
      right: 5px;
      top: 5px;
      display: flex;
      align-items: center;
    }
  }

  .content {
    padding-bottom: 68px;

    .title {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1F1E1E;
      line-height: 25px;
      letter-spacing: 1px;
    }

    .title-wrap {
      padding: 13px 0 11px 20px;
      border-bottom: 1px solid #F2F2F2;

      p {
        margin-top: 2px;
        font-size: 12px;
        color: #736F6F;
        line-height: 17px;
      }
    }
  }
}

.detail {
  padding-left: 20px;

  .subtitle-wrap {
    display: flex;
    align-items: center;
    margin-top: 20px;

    p {
      margin-left: 4px;
      font-size: 14px;
      color: #D32323;
      line-height: 20px;
    }
  }

  .options {
    display: flex;
    flex-flow: row wrap;

    span {
      width: 98px;
      height: 32px;
      border-radius: 16px;
      border: 1px solid #F2F2F2;
      margin-left: 20px;
      margin-top: 14px;
      font-size: 14px;
      color: #1F1E1E;
      line-height: 32px;
      text-align: center;

      &:nth-of-type(3n+1) {
        margin-left: 0;
      }

      &.active {
        border: none;
        color: #FFFFFF;
        background: #D32323;
        box-shadow: 0 2px 4px 0 rgba(210, 199, 199, 0.31);
      }
    }
  }

  .des {
    margin-top: 16px;

    ::v-deep p {
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1F1E1E;
      line-height: 17px;
    }
  }
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 68px;
  padding: 0 20px;
  background: #FFFFFF;
  box-shadow: 0px -2px 4px 0px rgba(13, 13, 13, 0.03);

  .price {
    font-size: 21px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #D32323;
    line-height: 29px;
  }

  .buy {
    position: absolute;
    right: 20px;
    top: 18px;
    width: 110px;
    height: 32px;
    background: #D32323;
    border-radius: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 32px;
    text-align: center;
  }
}
</style>
