<template>
  <el-card>
    <el-row :gutter="10">
      <el-col :span="24" class="lastBottom">
        <el-date-picker
          v-model="dateValue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="dateTimes"
        />
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="询价笔数" name="first">
            <el-row :gutter="10">
              <el-col :span="16">
                <QuotationTrend />
              </el-col>
              <el-col :span="8">
                <RankList />
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="报价笔数" name="second"><QuotationTrend /></el-tab-pane>
          <el-tab-pane label="交货笔数" name="third"><QuotationTrend /></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

  </el-card>
</template>

<script>
import QuotationTrend from './QuotationTrend.vue'
import RankList from './RankList.vue'

export default {
  components: {
    QuotationTrend,
    RankList
  },
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: 1,
        type: 2
      },
      dateValue: [new Date(2023, 4, 1, 10, 10), new Date(2023, 3, 31, 10, 10)],
      loading: false,
      noticeContent: '',
      noticeTitle: '',
      activeName: 'first'
    }
  },
  created() {
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.card-title {
  font-size: 14px;
}
.lastBottom {
  position: relative;
}
.dateTimes {
  position: absolute;
  right: 0;
}
.rankList {
  height: 40px;
}

</style>
