<script lang="ts" setup>
interface ButtonItem {
  name: string
  key: string
}

const props = defineProps({
  // 画布id（必填确保唯一性）
  canvasId: {
    type: String,
    default: 'myCanvas',
  },
  // 图表数据
  data: {
    type: Object,
    default: () => ({}),
  },
  // 图表配置项
  options: {
    type: Object,
    default: () => ({}),
  },
  // 图标类型
  type: {
    type: String,
    default: 'column',
  },
  // 图标标题
  title: {
    type: String,
    default: '标题',
  },
  // 数据指标按钮集合
  buttonsData: {
    type: Array as PropType<ButtonItem[]>,
    default: () => [
      {
        name: '订单数量',
        key: 'orderNum',
      },
      {
        name: '订单金额',
        key: 'orderMoney',
      },
    ],
  },
  // 日期范围按钮集合
  dateRangeData: {
    type: Array as PropType<ButtonItem[]>,
    default: () => [
      {
        name: '今天',
        key: '1',
      },
      {
        name: '近7日',
        key: '2',
      },
      {
        name: '近 30 日',
        key: '3',
      },
    ],
  },
  // 数据指标选中的项
  btndata: {
    type: String,
    default: '',
  },
  // 数据指标选中的项
  btntime: {
    type: String,
    default: '',
  },
})

const emits = defineEmits(['clickData', 'update:btntime', 'clickTime', 'update:btndata'])

const chartData = ref({})
const generalBtnStyle = ref({
  height: '50rpx',
  padding: '10rpx 40rpx',
  borderRadius: '20rpx',
})

const locaBtnlData = ref('')
const locaBtnlTime = ref('')
const btnStyle = computed(() => {
  return {
    ...generalBtnStyle.value,
    backgroundColor: '#f6f6f6',
    color: '#767676',
  }
})
const btnStyle_activ = computed(() => {
  return {
    ...generalBtnStyle.value,
    backgroundColor: '#ebf4fd',
    color: '#68a3e5',
  }
})

function handleBtnDataClick(item: ButtonItem) {
  emits('clickData', item)
  emits('update:btndata', item.key)
}

function handleBtnTimeClick(item: ButtonItem) {
  emits('clickTime', item)
  emits('update:btntime', item.key)
}

function setOptions(echartsData: any) {
  if (!echartsData) {
    return
  }
  chartData.value = echartsData
}

watch(() => props.data, (newVal) => {
  setOptions(props.data)
})
watch(() => props.btndata, (newVal) => {
  locaBtnlData.value = newVal
}, { immediate: true })
watch(() => props.btntime, (newVal) => {
  locaBtnlTime.value = newVal
}, { immediate: true })
</script>

<template>
  <view class="container">
    <!-- 标题 -->
    <view class="title_bar">
      {{ props.title }}
    </view>
    <!-- 筛选栏 -->
    <view class="filter_bar">
      <view class="filter_row">
        <text class="title">数据指标</text>
        <view class="btn_group">
          <uv-button
            v-for="(item) of props.buttonsData"
            :key="item.key"
            :custom-style="locaBtnlData === item.key ? btnStyle_activ : btnStyle"
            :text="item.name"
            :custom-text-style="{
              fontSize: '26rpx',
            }"
            @click="handleBtnDataClick(item)"
          />
        </view>
      </view>
      <view class="filter_row">
        <text class="title">日期范围</text>
        <view class="btn_group">
          <uv-button
            v-for="(item) of props.dateRangeData"
            :key="item.key"
            :custom-style="locaBtnlTime === item.key ? btnStyle_activ : btnStyle"
            :text="item.name"
            :custom-text-style="{
              fontSize: '26rpx',
            }"
            @click="handleBtnTimeClick(item)"
          />
        </view>
      </view>
    </view>
    <qiun-data-charts
      :type="props.type"
      :opts="props.options"
      :canvas-id="props.canvasId"
      :chart-data="chartData"
      :ontouch="true"
      :canvas2d="true"
    />
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: calc(100% - 40rpx);
  padding: 20rpx;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 15rpx;
  margin-bottom: 30rpx;

  .title_bar {
    font-size: 34rpx;
    color: #0d0d0d;
    font-weight: bold;
    margin: 10px 0;
  }

  .filter_bar {
    width: 100%;

    .filter_row {
      display: flex;
      margin-bottom: 40rpx;

      .title {
        font-size: 26rpx;
        color: #cbcbcb;
        margin-right: 20rpx;
        padding-top: 8rpx;
        flex-shrink: 0;
      }

      .btn_group {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;
        justify-content: flex-start;
      }
    }
  }
}
</style>
