<template>
  <a-card :bordered="false" class="allLdDetail-page-info">
    <!-- 搜索条件 -->
    <div class="allLdDetail-searchForm">
      <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="refresh">
        <a-row :gutter="24">
          <a-col :xs="24" :sm="12" :md="8" :lg="5">
            <a-form-item label="创建时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-range-picker
                id="allLdDetail-time"
                v-model="time"
                style="width: 100%;"
                :format="dateFormat"
                :placeholder="['开始时间','结束时间']"
                :disabledDate="disabledDate"
                @change="onChange" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="8" :lg="5">
            <a-form-item label="变动类型" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <v-select
                v-model="queryParam.changeType"
                ref="changeType"
                id="allLdDetail-status"
                code="GOLD_CHANGE_TYPE"
                placeholder="请选择"
                allowClear></v-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="8" :lg="5">
            <a-form-item label="变动原因" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <v-select
                v-model="queryParam.operateType"
                ref="operateType"
                id="allLdDetail-status"
                code="GOLD_OPERATE_TYPE_ALL"
                placeholder="请选择"
                allowClear></v-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="8" :lg="5">
            <a-form-item label="用户手机" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-input id="allLdDetail-customerMobile" allowClear :maxLength="11" v-model="queryParam.customerMobile" placeholder="请输入用户手机" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="8" :lg="4">
            <a-button class="handle-btn serach-btn" id="allLdDetail-btn-serach" type="primary" @click="refresh">查询</a-button>
            <a-button class="handle-btn" type="" id="allLdDetail-btn-reset" @click="handleReset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 总计 -->
    <a-alert type="info" showIcon style="margin-bottom:15px">
      <div class="ftext" slot="message">共<span> {{ total }} </span>条，乐豆变动总计<span> {{ ldChangeNum }} </span>个</div>
    </a-alert>
    <!-- 列表 -->
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
    </s-table>
  </a-card>
</template>

<script>
import { STable, VSelect } from '@/components'
import { offPartnerGoldLog, getStatistic } from '@/api/userInfo.js'
import moment from 'moment'
import getDate from '@/libs/getDate.js'
export default {
  name: 'AllLdDetail',
  components: { STable, VSelect },
  data () {
    return {
      formItemLayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 }
      },
      // 将默认近七天时间日期回显在时间选择框中
      time: [
        moment(getDate.getRecentday().starttime, this.dateFormat),
        moment(getDate.getRecentday().endtime, this.dateFormat)
      ],
      total: 0, // 总条数
      ldChangeNum: 0, // 乐豆变动量总计
      dateFormat: 'YYYY-MM-DD',
      // 查询参数
      queryParam: {
        beginDate: null, // 开始时间
        endDate: null, // 结束时间
        customerMobile: '', // 用户手机
        changeType: '', // 类型
        operateType: '' // 原因
      },
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
        { title: '创建时间', dataIndex: 'createDate', width: 200, align: 'center' },
        { title: '用户手机', dataIndex: 'customerMobile', width: 200, align: 'center' },
        { title: '变动类型', dataIndex: 'changeTypeDictValue', width: 200, align: 'center' },
        { title: '变动原因', dataIndex: 'operateTypeDictValue', width: 200, align: 'center' },
        { title: '乐豆变动量（个）', dataIndex: 'changeNum', width: 200, align: 'center' }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const searchData = Object.assign(parameter, this.queryParam)
        if (this.time && this.time.length) {
          searchData.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
          searchData.endDate = moment(this.time[1]).format('YYYY-MM-DD')
        } else {
          searchData.beginDate = null
          searchData.endDate = null
        }
        return offPartnerGoldLog(Object.assign(parameter, searchData)).then(res => {
          if (res.status == 200) {
            const no = (res.data.pageNo - 1) * res.data.pageSize
            for (let i = 0; i < res.data.list.length; i++) {
              const _item = res.data.list[i]
              _item.no = no + i + 1
            }
            // 总条数
            this.total = res.data.count
            return res.data
          }
        })
      }
    }
  },
  methods: {
    // 不可选日期
    disabledDate (date, dateStrings) {
      return date && date.valueOf() > Date.now()
    },
    // 创建时间change
    onChange (dates, dateStrings) {
      if ((dates, dateStrings)) {
        this.queryParam.beginDate = dateStrings[0]
        this.queryParam.endDate = dateStrings[1]
      }
    },
    // 查询
    refresh () {
      this.$refs.table.refresh(true)
      this.getTotal()
    },
    // 重置
    handleReset () {
      this.time = [
        moment(getDate.getRecentday().starttime, this.dateFormat),
        moment(getDate.getRecentday().endtime, this.dateFormat)
      ]
      this.queryParam = {
        beginDate: null, // 开始时间
        endDate: null, // 结束时间
        customerMobile: '', // 用户手机
        changeType: '', // 类型
        operateType: '' // 原因
      }
      this.$refs.table.refresh(true)
      this.getTotal()
    },
    // 总计
    getTotal () {
      const params = this.queryParam
      if (this.time && this.time.length) {
        params.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
        params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
      } else {
        params.beginDate = null
        params.endDate = null
      }
      getStatistic(params).then(res => {
        if (res.status == 200) {
          this.ldChangeNum = res.data || 0
        } else {
          this.ldChangeNum = 0
        }
      })
    }
  },
  mounted () {
    this.getTotal()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.time = [
        moment(getDate.getRecentday().starttime, this.dateFormat),
        moment(getDate.getRecentday().endtime, this.dateFormat)
      ]
      vm.queryParam = {
        beginDate: null, // 开始时间
        endDate: null, // 结束时间
        customerMobile: '', // 用户手机
        changeType: '', // 类型
        operateType: '' // 原因
      }
    })
  }
}
</script>
<style lang="less" scoped>
	.allLdDetail-page-info{
		.page-header{
			margin-bottom: 15px;
			span{
				margin-left: 20px;
			}
			.page-header-info{
				margin-left:0;
				font-weight: bold;
			}
		}
    .allLdDetail-searchForm{
      .ant-form-inline .ant-form-item{
        width: 100%;
      }
      // 搜索框的下间距
      .ant-form-item {
      	margin-bottom: 15px;
      }
      .handle-btn{
        margin-top: 4px;
      }
      .serach-btn{
        margin-right: 10px;
      }
    }
  }
</style>
