<template>
  <div id="agent_customer_container">
    <!--    筛选模块-->
    <div class="filter_container margin-xs flex">
      <view class='cu-tag round padding' v-for="(filter,index) in filter_list" :key="index"
            :class="{'bg-orange':filter_action==filter.id,'bg-white':filter_action != filter.id}"
            @click="change_filter(filter.id)"
      >
        {{ filter.name }}
      </view>

      <button class="cu-btn" @click="show_datetime_picker">自定义时间
        <text class="cuIcon-unfold"></text>
      </button>
    </div>


    <!--      收益模块-->
    <div class="profit_container">
      <van-row>
        <van-col span="8" v-for="(type,index) in customer_types" :key="index"
                 @click="toggle_type(type.id)"
        >
          <div class="bg " :class="[type.id == customer_type_action?'bg_action':'bg_normal']">
            <view class="padding-top-lg">
              <text>{{ type.name }}</text>
            </view>
          </div>
        </van-col>
      </van-row>
      <view>


      </view>
    </div>

    <!--    小title-->
    <div class="line_container padding">
      <div>
        <text class="text-sm text-gray">共{{ customer_count }}个客户</text>
        <van-divider customStyle="border:.1px solid;margin:0px;"/>
      </div>
    </div>
    <!--  列表-->
    <view class="solid-bottom padding-lr-sm" v-for="(user,index) in user_list" :key="index">
      <van-card>
        <view slot="thumb" class="cu-avatar lg round margin-left"
              style="background-image:url(https://img.shuimuai.com/web/icon_dingdan.png);"></view>
        <view slot="title" class="flex justify-between">
          <view>
            <text class="text-sm">{{ user.user_name }}</text>
          </view>
          <view>
            <text class="text-normal">最后下单时间&emsp;</text>
            <text class="text-gray text-sm">2018/09/24 10:44</text>
          </view>
        </view>

        <view slot="num" class="flex justify-end">
          <view>
            <text class="text-normal text-sm margin-right-lg">成交额</text>
            <text class="text-xxl">{{ user.price_total }}</text>
          </view>
        </view>
        <view slot="price">
          <view>
            <text class="text-normal text-sm">订单数 {{ user.count }}</text>
          </view>
        </view>
      </van-card>
    </view>

    <van-calendar
      :show="calendar_show"
      type="range"
      @close="do_calendar_close"
      @confirm="do_calendar_confirm"
      :min-date="min_date"
      :max-date="max_date"
    ></van-calendar>

    <van-toast id="van-toast"/>

  </div>
</template>

<script>

import {agentUserList} from "../../../requests/agent";
import Toast from '../../../../static/vant/toast/toast'

var $this
export default {
  name: "agent_customer_container",
  components: {},
  data() {
    return {
      //筛选列表
      filter_list: [
        {
          id: 1,
          name: "全部"
        },
        {
          id: 2,
          name: "今日",
          start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime() / 1000),
          end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime() / 1000)
        },
        {
          id: 3,
          name: "昨日",
          start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000).getTime() / 1000),
          end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 1000).getTime() / 1000)
        },
        {
          id: 4,
          name: "近七日",
          start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 60 * 60 * 1000).getTime() / 1000),
          end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime() / 1000)
        }
      ],
      // 筛选选中项
      filter_action: 1,
      userinfo: {
        //累计收益
        profit: 16824.50,
        //含待结算
        unsettle_account: 65.00,
      },
      //客户数量
      customer_count: 0,
      calendar_show: false,
      start_time: "",
      end_time: "",
      filter_date: "",
      //最小日期应该为用户使用的第一个月开始
      min_date: false,
      max_date: false,
      //客户类型
      customer_types: [
        {
          id: 1,
          name: "全部客户"
        },
        {
          id: 2,
          name: "一级客户"
        },
        {
          id: 3,
          name: "二级客户"
        },
      ],
      user_list: [],
      customer_type_action: 1
    }
  },
  methods: {
    //修改筛选时间
    change_filter($id) {
      $this.filter_date = ""
      $this.filter_action = $id
      $this.filter_list.forEach(($val, $index) => {
        if ($val['id'] == $id) {
          $this.get_user_list($this.customer_type_action - 1, $val['start_time'], $val['end_time'])
        }
      })
    },
    //  自定义筛选时间
    show_datetime_picker() {
      $this.filter_action = 0
      $this.calendar_show = true
    },
    //  关闭日历选择
    do_calendar_close() {
      $this.calendar_show = false
    },
    formatDate(date) {
      date = new Date(date);
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    //  选择日历后
    do_calendar_confirm($event) {
      let [start, end] = $event.mp.detail;
      $this.filter_date = $this.formatDate(start) + '-' + $this.formatDate(end)
      $this.start_time = Math.round(new Date(start).getTime() / 1000)
      $this.end_time = Math.round(new Date(new Date(new Date(end).getTime() + 24 * 60 * 60 * 1000 - 1).getTime()).getTime() / 1000)
      $this.get_user_list($this.customer_type_action - 1, $this.start_time, $this.end_time)
      $this.calendar_show = false
    },
    //  切换客户类型筛选
    toggle_type($id) {
      $this.customer_type_action = $id
      //根据类型获取用户列表
      $this.get_user_list($id - 1)
    },
    get_user_list($type, $start_time, $end_time) {
      Toast.loading({
        message: "加载中",
        duration: 0
      })
      let $params = {}
      if ($type) {
        $params['type'] = $type
      }
      if ($start_time && $end_time) {
        $params['start_time'] = $start_time
        $params['end_time'] = $end_time
      }
      agentUserList($params).then((res) => {
        Toast.clear()
        let $data = res.data;
        $this.user_list = $data.data
        $this.customer_count = $this.user_list.length
      })
    }
  },
  mounted() {
    $this.min_date = new Date(2020, 10, 11).getTime()
    $this.max_date = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime()
    $this.get_user_list(0, false, false)
  },
  created() {
    $this = this
  }
}
</script>

<style scoped>
.text-normal {
  color: #6A6A6A;
}

.profit_container {
  margin: 30px 0px 0px;
}

.bg_action {
  width: 118px;
  height: 77px;
  background-image: url("https://img.shuimuai.com/web/frame_xuanzhongkehu.png");

  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 24px;
}

.bg_normal {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6C6C6C;
  line-height: 24px;

  width: 118px;
  height: 68px;
  background-image: url("https://img.shuimuai.com/web/frame_weixianzhongkehu.png");
}

.bg {
  text-align: center;
  background-size: 100% 100%;
  background-position: center;
}
</style>
