<template>
<div>
  <xm-search size="medium" @submit="search">
    <div>
      <el-form-item label="选择项目">
        <select-building v-model="formData.buildingId"></select-building>
      </el-form-item>
      <el-form-item label="用户事件">
        <el-select v-model="formData.eventType" placeholder="所有事件组">
          <el-option v-for="item in bizEventTypes" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formData.event" placeholder="请选择事件">
          <el-option v-for="item in bizEvents" :key="item.eventCode" :label="item.eventName" :value="item.eventCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="属性">
        <el-select v-model="formData.activity" placeholder="请选择属性">
          <el-option v-for="item in eventProperties" :key="item.propertyCode" :label="item.propertyName" :value="item.propertyCode"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <el-form-item>
      <el-button type="text" @click="() => getDataOf(7)">最近7天</el-button>
      <el-button type="text" @click="() => getDataOf(30)">最近1月</el-button>
    </el-form-item>
    <el-form-item>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="margin-left: 16px">
      </el-date-picker>
    </el-form-item>
  </xm-search>
  
  <user-behavior :data-zoom="true" ref="chart" mode="all"></user-behavior>
</div>
</template>

<script>
import dayjs from 'dayjs'
import { createNamespacedHelpers } from "vuex"

const { mapActions } = createNamespacedHelpers("indexEcharts")

export default {
  components: {
    UserBehavior: () => import('./components/UserBehavior')
  },
  data() {
    return {
      formData: {
        eventType: '',
        event: '',
        activity: '',
        buildingId: '',
        pageSize: 9999,
      },
      dateRange: [],
      bizEvents: [],
      bizEventTypes: [],
      eventProperties: [],
    };
  },
  computed: {},
  watch: {
    formData: {
      handler(nw) {
        const { eventType, buildingId } = nw
        if (!eventType && !buildingId) return

        this.getBizEventProperties({ eventType, buildingId }).then((dt) => (this.eventProperties = dt))
      },
      deep: true
    }
  },
  methods: {
    ...mapActions([
      'getBizEvents',
      'getBizEventTypes',
      'getBizEventProperties',
    ]),
    search() {
      const [startDate, endDate] = this.dateRange
      this.$refs.chart.getData({ startDate, endDate, ...this.formData })
    },
    getDataOf(days) {      
      const endDate = new Date()
      const startDate = dayjs().subtract(days, 'day').toDate()

      this.$refs.chart.getData({ startDate, endDate, ...this.formData })
    },
  },
  mounted() {
  },
  created () {
    this.getBizEvents().then((dt) => (this.bizEvents = dt))
    this.getBizEventTypes().then((dt) => (this.bizEventTypes = dt))
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}
.system-table-search {
  display: block;
  margin: 16px auto 0;
  height: 60px;
  width: 100%;
}

.system-table-search ul > li {
  margin-right: 20px;
  display: flex;
  float: left;
  align-items: center;
  margin-bottom: 10px;
  span {
    margin-right: 10px;
  }
}

.system-table-search ul {
  font-size: 15px;
  white-space: nowrap;
  padding: 0;
}
.btn {
  margin-left: 60px;
}
</style>


