<style lang="scss" scoped>
.search-bar {
  display: flex;
  align-items: center;
}
.search-box p {
  display: inline-block;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>
<style>
.data-display-statistics{
  margin: 10px 0;
}
.data-display-statistics .ant-card-body {
  display: flex;
  justify-content: center;
}
.data-display-statistics p,
.data-display-statistics span {
  text-align: center;
  line-height: 40px;
  font-size: 30px;
  font-weight: 600;
  color: red;
  margin: 0;
}
.search-box .ant-card-body {
  padding: 5px 15px;
}
.data-display-statistics .ant-card-body .styleElse {
  line-height: 60px;
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
}
.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  display: none !important;
}
.yincang .ant-col-6 p {
  text-align: left;
  color: red;
  font-size: 16px;
  font-weight: 500;
}
.ant-table-thead div {
  font-weight: 700;
}
.tool-tip {
  position: absolute;
  top: 65px;
  right: 10px;
}
</style>
<template>
  <div class="data-display-statistics">
    <a-card :title="title" :bordered="false">
      <countTo
        :startVal="0"
        :endVal="kuaishou[typeName]"
        :duration="duration"
        :decimals="typeName=='cost'||typeName=='discountCost'?2:0"
        style="overflow:auto"
      ></countTo>
      <a-icon
        v-if="kuaishou[typeThan]>0&&active==1"
        type="rise"
        class="styleElse"
        style="color:red;"
      />
      <a-icon
        v-else-if="kuaishou[typeThan]<0&&active==1"
        type="fall"
        class="styleElse"
        style="color:#0bcd74;"
      />
      <a-icon v-else-if="active==1" type="minus" class="styleElse" style="color:#0bcd74" />
      <span
        v-if="active==1"
        :style="kuaishou[typeThan]>0?'color:red':'color:#0bcd74'"
        class="styleElse"
        style="  margin-left:0"
      >{{kuaishou[typeThan]?Math.abs(kuaishou[typeThan]*100).toFixed(2)+'%':'0.00%'}}</span>
      <a-tooltip placement="topRight" class="tool-tip" v-show="active==1">
        <template slot="title">
          <span>{{kuaishou.maxHour}}点之前所有数据对比</span>
        </template>
        <a-icon type="exclamation-circle" />
      </a-tooltip>
    </a-card>
  </div>
</template>

<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import countTo from 'vue-count-to'
export default {
  name: 'lifting',
  components: {
    ACol,
    ARow,
    countTo
  },
  props: {
    active: {
      type: Number,
      default() {
        return 1
      }
    },
    kuaishou: {
      type: Object,
      default() {
        return {
          aclick: 0,
          aClickProportion: 0,
          cost: 0,
          costProportion: 0,
          photoClick: 0,
          photoClickroportion: 0,
          photoShow: 0,
          showProportion: 0,
          discountCost: 0,
          discountCostProportion: 0
        }
      }
    },
    title: {
      type: String,
      default() {
        return ''
      }
    },
    typeName: {
      type: String,
      default() {
        return ''
      }
    },
    typeThan: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data: function() {
    return {
      duration: 1000
    }
  },
  filters: {},
  methods: {},
  watch: {},
  distoryed() {},
  mounted: function() {}
}
</script>
