<template>
  <div class="app-container">
    <!-- 用户select选项 -->
    <el-row :gutter="15" class="m-t-0">
      <el-col :span="4">
        <SelectionShopId class="w-100" v-model="shop_id" :allSel="true" />
      </el-col>
      <el-col :span="8">
        <DatePickerOrder class="w-100" />
      </el-col>
    </el-row>
    <!-- 统计标签 -->
    <el-row :gutter="10" class="m-t-20">
      <el-col :span="8">
        <div class="statBox rad4 flex p-10">
          <div class="flex3 flex mc column">
            <div class="flex">
              <div class="p-4 bg-white rad2 fc-b fb">成交额</div>
              <div class="p-4 m-l-5">￥23441.44</div>
            </div>
            <div class="flex m-t-5">
              <div class="p-4 bg-white rad2 fc-b fb">退款额</div>
              <div class="p-4 m-l-5">￥23441.44</div>
            </div>
            <div class="flex m-t-5">
              <div class="p-4 bg-white rad2 fc-b fb">订单总数</div>
              <div class="p-4 m-l-5">18单</div>
            </div>
          </div>
          <div class="flex1 flex mc mac">
            <div class="rad-c w-50px h-50px bg-white fb fc f-s-32 fc-b l-h-50">日</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SelectionShopId from '@/components/SelectionShopId.vue'
import DatePickerOrder from '@/components/DatePickerOrder.vue'

export default {
  name: 'Stat',
  data () {
    return {
      shop_id: '' // 搜索条件 商铺id
    }
  },
  components: {
    SelectionShopId,
    DatePickerOrder
  },
  computed: {

  },
  methods: {
  },
  watch: {
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.statBox {
  background-color: $brand-color;
  height: 30vh;
  color: $white-color;
}
</style>
