<template>
  <div id="agent_income_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 text-center">
      <view>
        <text class="text-normal margin-xl">
          <template v-if="filter_date">{{ filter_date }}</template>
          <template v-else>{{ filter_list[filter_action - 1].name }}</template>
          累计订单
        </text>
      </view>
      <view>
        <text class="text-bold text-sl text-price">{{ userinfo.order_counts }}</text>
      </view>
    </div>

    <!--    小title-->
    <div class="line_container padding">
      <div>
        <text class="text-sm text-gray">订单记录</text>
        <van-divider customStyle="border:.1px solid;margin:0px;"/>
      </div>
    </div>
    <!--  列表-->
    <view class="solid-bottom padding-lr-sm" v-for="item in 3" :key="item">
      <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-normal">消费产品 &emsp;</text>
            <text>黄金会员卡</text>
          </view>
          <view>
            <text class="text-normal text-sm under_line" @click="to_detail(item)">订单详情</text>
          </view>
        </view>

        <view slot="num" class="flex justify-between align-end">
          <view>
            <view>
              <text class="text-sm text-normal">买家&emsp;</text>
              <text class="text-sm text-normal">Only is lonly</text>
            </view>
            <text class="text-gray text-sm">2018/09/24 10:44</text>
          </view>
          <view>
            <text class="text-normal text-sm margin-right">订单总价</text>
            <text class="text-xxl">39.00</text>
          </view>


        </view>
      </van-card>
    </view>

    <van-calendar
      :show="calendar_show"
      type="range"
      @close="do_calendar_close"
      @confirm="do_calendar_confirm"
    ></van-calendar>


  </div>
</template>

<script>

var $this
export default {
  name: "agent_income_container",
  components: {},
  data() {
    return {
      filter_list: [
        {
          id: 1,
          name: "全部"
        },
        {
          id: 2,
          name: "今日"
        },
        {
          id: 3,
          name: "昨日"
        },
        {
          id: 4,
          name: "近七日"
        }
      ],
      filter_action: 1,
      userinfo: {
        //累计收益
        order_counts: 14,
        //含待结算
        unsettle_account: 65.00,
      },
      calendar_show: false,
      start_time: "",
      end_time: "",
      filter_date: "",
      //最小日期应该为用户使用的第一个月开始
      min_date: false,
    }
  },
  methods: {
    //修改筛选时间
    change_filter($id) {
      $this.filter_date = ""
      $this.filter_action = $id
    },
    //  自定义筛选时间
    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(end).getTime() / 1000)
      $this.calendar_show = false
    },
    //  跳转订单详情
    to_detail($index) {
      mpvue.navigateTo({
        url:"/pages/agent/extend/detail/main"
      })
    }
  },
  mounted() {
    $this.min_date = new Date(2020, 1, 1).getTime()
  },
  created() {
    $this = this
  }
}
</script>

<style scoped>
@import "index.css";
</style>
