<template>
  <div class="salesRecordItem">
    <div class="top flex-h" @click="toDetail">
      <span>销售名称：</span>
      <span>{{data.name}}</span>
      <div class="flex-item">
        <i class="iconfont icon-jiantou-right"></i>
      </div>
    </div>
    <div class="itemBody flex-h">
      <div class="flex-item">
        <div>
          <span>已发出<em>{{data.cardAndCoupon.usedNum}}</em>张卡券</span>
          <!-- <div class="progress">
            <div :style="{width: (data.cardAndCoupon.usedNum/data.cardAndCoupon.totalNum).toFixed(2) * 100 + '%', background: returnProgressColor((data.cardAndCoupon.usedNum/data.cardAndCoupon.totalNum).toFixed(2) * 100)}"></div>
          </div> -->
          <a :class="{'grey': !fibdata.coupon }" @click="triggerCardAndCoupon(data)">{{ fibdata.coupon ? '开启卡券' : '关闭卡券' }}</a>
        </div>
      </div>
      <div class="flex-item">
        <div>
          <span>已送出<em>{{data.drink.usedNum}}</em>杯饮品</span>
          <!-- <div class="progress">
            <div :style="{width: (data.drink.usedNum/data.drink.totalNum).toFixed(2) * 100 + '%', background: returnProgressColor((data.drink.usedNum/data.drink.totalNum).toFixed(2) * 100)}"></div>
          </div> -->
          <a :class="{'grey': !fibdata.order }" @click="triggerDrink(data)">{{ fibdata.order ? '开启饮品' : '关闭饮品' }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  props: {
    data: {
      type: Object,
      default: () => { }
    },
    fibdata: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {

    }
  },
  computed: {

  },
  components: {

  },
  created () {
    console.log(this.fibdata)
  },
  methods: {
    triggerCardAndCoupon (item) { // 切换卡券状态
      this.$emit('triggerCardAndCoupon', { type: this.fibdata.coupon ? 'open' : 'close', data: item })
    },
    triggerDrink (item) { // 切换饮品状态
      this.$emit('triggerDrink', { type: this.fibdata.order ? 'open' : 'close', data: item })
    },
    toDetail () {
      this.$emit('toDetail', this.data)
    },
    returnProgressColor (val) { // 返回进度条颜色
      if (val <= 33) {
        return '#45bfa1'
      } else if (val <= 66) {
        return '#ff9800'
      } else {
        return '#ff2b00'
      }
    },
  }
}
</script>

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