<template>
     <div  class="minwidth1200 wechat-point-details">
     <div class="con-container">
     <v-nav :navpath="navpath"></v-nav>
      <div class="wrap table-container">
        <div class="mBottom20">
          <el-date-picker  class="w250" v-model="dateTime"  value-format="yyyy-MM-dd"  type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTimeChange"></el-date-picker>
            <el-select
            v-model="searchType"
            placeholder="所有"
            @change="handleChange"
            >
            <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.key"
                :value="item.value"
            ></el-option>
            </el-select>
        </div>
         <div class="mBottom40">
          <div class="table-content">
            <el-table
              :data="listData"
              tooltip-effect="dark"
              ref="multipleTable"
            >
              <el-table-column
                prop="businessOccurrenceTime"
                label="时间"
              >
                 <template slot-scope="{row}">
                  {{ row.businessOccurrenceTime | formatTime }}
                </template>
              </el-table-column>
              <el-table-column
                prop="businessTypeName"
                label="类型"
              >
              </el-table-column>
              <el-table-column
                prop="storedValueChange"
                label="日志详情"
              >
              <template slot-scope="{ row }">
                 <span :style="row.storedValueChange>0?'color:green':'color:red'">
                     <span v-show="row.storedValueChange>0">+</span>
                     {{row.storedValueChange}}
                     <span v-show="row.businessType==1&&row.presentValue">
                       (其中赠送金额{{row.presentValue}})
                     </span>
                 </span>
              </template>
              </el-table-column>
              <el-table-column
                prop="storeName"
                label="门店"
              ></el-table-column>
              <el-table-column
                prop="clerkName"
                label="操作人员"
              ></el-table-column>
              <el-table-column
                prop="rechargeOrderNum"
                label="储值订单号"
              >
              </el-table-column>
              <el-table-column
                prop="relationCostOrderNum"
                label="关联消费订单号"
              ></el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
              >
              </el-table-column>
            </el-table>
            <div
              class="page mTop20"
              v-if="page.totalCount > 0"
            >
              <dm-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[20, 40, 60, 80]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="page.totalCount"
              >
              </dm-pagination>
            </div>
          </div>
        </div>
      </div>
            </div>
     </div>
</template>
<script>
import nav from "../../common/navbar/navbar.vue";
import {
  checkFalse,
  checkStatus
} from "../../../static/js/checkStatus";
import { doFetch } from "../../components/axios/api";
import url from "../../components/axios/url";
import { formatLongTime } from "@/utils/utils";
export default ({
  components: {
    "v-nav": nav
  },
  data() {
      return {
       navpath: [
        {
          name: "首页",
          path: ""
        },
        {
          name: "客户列表",
          path: "/allCustomers"
        },
        {
          name: "会员详情",
          path: "/customerDetail?memberId=" + this.$route.query.memberId
        },
        {
          name: "储值明细",
          path: "/storedValue?memberId=" + this.$route.query.memberId
        }
      ],
      selectData:[
          {
              label:'所有',
              value:0
          },
          {
              label:'充值',
              value:1
          },
          {
              label:'消费',
              value:2
          },
          {
              label:'退款',
              value:3
          },
          {
              label:'退卡',
              value:4
          },
          {
              label:'储值调整',
              value:5
          }
      ],
       memberId: this.$route.query.memberId || "",
      page: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 0
      },
      listData:[],
      typeList:[
          {
              value: 0, 
              key: "所有"
          }
      ],
      searchType:0,
      beginTime: "",
      endTime: "",
      dateTime:'',
      }
  },
  filter:{
      typeFilter(val){
          let type = ''
          switch(val){
           case 1:
            type = '充值'
            break;
           case 2:
            type = '消费'
            break;
             case 3:
            type = '退款'
            break;
             case 4:
            type = '退卡'
            break;
             case 5:
            type = '储值调整'
            break;
          }
          return type;
      }
  },
  mounted(){
      console.log('ss');
     this.memberStoredTypeList()
     this.getListData();
  },
  methods:{
    handleChange() {
      this.page.currentPage = 1;
      this.getListData();
    },
    handleTimeChange(val) {
      this.dateTime = val?val:[];
      this.getListData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getListData();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getListData();
    },
    memberStoredTypeList() {
        doFetch(url.memberStoredTypeList).then(res => {
          if (res.data.response.errorCode === 0) {
            const {typeList=[]} = res.data.response.result;
            this.typeList = this.typeList.concat(typeList);
          } else {
            checkFalse(res.data.message);
          }
        })
        .catch(err => {
          checkStatus(err);
        });
    },
    getListData() {
        doFetch(url.memberStoredRecordList,{
        memberId: this.memberId,
        pageSize: this.page.pageSize,
        currentPage: this.page.currentPage,
        searchType: this.searchType,
        beginTime: this.dateTime[0] ,
        endTime: this.dateTime[1]
      }).then(res => {
          if (res.data.errorCode === 0) {
            const {currentPage, totalCount, result=[]} = res.data.result.page;
            this.listData = result;
            this.page.currentPage = currentPage;
            this.page.totalCount = totalCount;
          } else {
            checkFalse(res.data.message);
          }
        })
        .catch(err => {
          checkStatus(err);
        });
    }
  }
})
</script>
<style  lang="stylus">
.wechat-point-details {
  height: 100%;
  overflow: auto;

  .table-container {
    padding: 20px;
    margin: 20px;
    background-color: #fff;
  }
}
</style>
