<template>
  <div class="chart-box">
    <header-cell>
      <h3>意向客户</h3>
      <select-building slot="action" @change="handleBuildingChange"></select-building>
    </header-cell>

    <el-table v-loading="loading" :data="dataset"  border  center  style="width: 100%; margin-top: 16px">
      <el-table-column label="用户姓名" prop="personName"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="意向楼盘" prop="buildingName"></el-table-column>
      <el-table-column label="意向值" prop="intention"></el-table-column>
    </el-table>
  </div>
</template>

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

const { mapActions } = createNamespacedHelpers("indexEcharts")

export default {
  name: 'IntentionalCustomers',
  props: ['value'],
  components: {
    HeaderCell: () => import('@/components/HeaderCell'),
  },
  data() {
    return {
      loading: false,
      dataset: [],
    }
  },
  methods: {
    ...mapActions(['getIntentionUsers']),
    handleBuildingChange(buildingId) {
      this.getData({ buildingId })
    },
    getData(filters = {}) {
      const endDate = new Date()
      const startDate = dayjs().subtract(7, 'day').toDate()

      this.loading = true
      this.getIntentionUsers({ startDate, endDate, ...filters}).then((dt) => {
        this.loading = false
        this.dataset = dt
      }).catch(() => {
        this.loading = false
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang="scss" src="./style.scss"></style>