<template>
  <div class="calcMenu" :class="{'show':show}">
    <div class="centerLabel flex-h">
      <div class="flex-item">
        <div>
          <div class="top">
            <span>确认下单信息</span>
            <span>下单完成后共计使用<em>{{totalNum}}</em>次</span>
          </div>
          <div class="content">
            <span v-if="!data.length">您还没有点单哦~</span>  
            <ul>
              <li class="flex-h" v-for="(item,index) in data" :key="index">
                <span>{{item.name}}</span>
                <span v-if="item.specname !== null && item.specname!=''">（{{item.specname}}）</span>
                <div class="flex-item">
                  <div>
                    <span>x{{item.num}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="bottom">
            <div class="flex-h" v-if="data.length">
              <span>备注：</span>
              <div class="flex-item">
                <div>
                  <textarea cols="30" rows="3" v-model="Remark"></textarea>
                </div>
              </div>
            </div>
            <ul class="flex-h">
              <li class="flex-item" @click="close">再看看</li>
              <li class="flex-item" @click="placeOrder">下单</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  props: ['show', 'data', 'totalNum'],
  data () {
    return {
      Remark:''
    }
  },
  computed: {

  },
  components: {

  },
  created () {

  },
  methods: {
    close () { // 关闭菜单
      this.$emit('closeCalcMenu')
    },
    placeOrder () { // 点单
      this.$emit('placeOrder',this.Remark)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
