<template>
  <div class="toolbar">
    <right-toolbar :search="false"
      @queryTable="queryTable">
      <el-tooltip class="item"
        effect="dark"
        content="日期合并/分散"
        placement="top">
        <el-button circle
          icon="Calendar"
          @click="dateMergeFn()" />
      </el-tooltip>
      <el-tooltip class="item"
        effect="dark"
        content="切换图表"
        placement="top">
        <el-button circle
          icon="Histogram"
          @click="changeType()" />
      </el-tooltip>

    </right-toolbar>
  </div>
  <el-table :data="data"
    style="width: 100%">
    <el-table-column prop="platformStore"
      label="店铺" />
    <el-table-column prop="date"
      label="日期"
      v-if="!dateMerge" />
    <el-table-column v-for="str in column"
      :prop="columnKey[str]"
      :label="str"
      :formatter="formatterFn" />
  </el-table>
</template>

<script lang="ts"
  setup>
  const columnKey = {
    '支付买家数': 'zfmj',
    '交易增速': 'jyzs',
    '独立访客范围': 'uv',
    '流量增速': 'llzs'
  }
  const props = defineProps({
    column: {
      type: Object,
      default: () => {
        return {}
      },
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    dateMerge: { // 是否把日期数据合并
      type: Boolean,
      default: false,
    }
  })

  const formatterFn = (row, column, cellValue) => {
    let result = cellValue
    if (column.property === 'jyzs' || column.property === 'llzs') {
      result += '%'
    }
    if (props.dateMerge) {
      result += ' / 平均每日'
    }
    return result
  }

  const emits = defineEmits(['changeType', 'queryTable', 'dateMerge'])

  const queryTable = () => {
    emits('queryTable')
  }

  const changeType = () => {
    emits('changeType', 'charts')
  }

  const dateMergeFn = () => {
    emits('dateMerge')
  }

</script>

<style scoped
  style="sass">
  .toolbar {
    float: right;
  }
</style>