<template>
  <div class="consumption">
    <div class="consumption-card">
      <div class="card-block">
        <div>
          <div>账户余额（元）</div>
          <div class="amount">{{ user.ACCOUNT_BALANCE }}</div>
        </div>

        <navigator
          open-type="redirect"
          url="/pages/homeFn/integral/index"
          class="jump-btn"
        >
          积分记录
          <image
            src="https://eshangtech.com/ShopICO/consumption/to-other.png"
            style="width: 25rpx; height: 25rpx"
            mode="aspectFit"
          ></image>
        </navigator>
      </div>
    </div>
    <!-- <div class="consumption-history">
				<div><span>{{pageMsg.part_consumer_today}}</span><span>今日累计消费</span></div>
				<div><span>{{pageMsg.part_consumer_this_month}}</span><span>当月累计消费</span></div>
			</div> -->

    <!-- <div class="consumption-btn-box">
			<div class="consumption-btn" hover-class="" @tap="getToday()">本日</div>
			<div class="consumption-btn" @tap="getWeek()">本周</div>
			<div class="consumption-btn" @tap="getMonth()">本月</div>
		</div>
		<div class="consumption-search-box">
			<div class="search-by-date" v-show="searchByDate===0" @tap="searchByDate=1">
				<i class="ico-timer"></i>
				按日期查询
				</div>
			<div class="search-content" v-show="searchByDate===1">
				<div class="search-content-unit">
					<span>起始日期</span>
					<p>
						<span class="date-color" @click="onShowDatePicker(0)">{{searchTime[0]}}</span>
						<span style="margin: 0 10px">至</span>
						<span class="date-color" @click="onShowDatePicker(1)">{{searchTime[1]}}</span>
					</p>
				</div>
			
			</div>
		</div>
		<date-Picker v-model="showPicker" :init="searchTime[timeFlag]" type="date" @selected="onSelected"/> -->
    <div class="consumption-title">
      <div>交易记录</div>
      <div class="consumption-title-des">
        <block v-if="pageMsg.screenName != '选择日期'">
          <span @click="pageMsg.isScreen = !pageMsg.isScreen">{{
            pageMsg.screenName
          }}</span>
        </block>
        <block v-else>
          <picker
            mode="date"
            :value="searchTime[0]"
            start="2016-01-01"
            :end="pageMsg.nowDay"
            class="searchTime-tag"
            @change="pickDate($event, 0)"
          >
            <view class="picker">
              {{ searchTime[0] }}
            </view>
          </picker>
          ~
          <picker
            mode="date"
            :value="searchTime[1]"
            start="2016-01-01"
            :end="pageMsg.nowDay"
            class="searchTime-tag"
            @change="pickDate($event, 1)"
          >
            <view class="picker">
              {{ searchTime[1] }}
            </view>
          </picker>
          <!-- <span class="searchTime-tag" @click.stop="pickDate">{{searchTime[0]}}</span> ~ <span class="searchTime-tag" @click.stop="pickDate">{{searchTime[1]}}</span> -->
        </block>
        <van-icon
          @click="pageMsg.isScreen = !pageMsg.isScreen"
          :name="pageMsg.isScreen ? 'arrow-up' : 'arrow-down'"
          size="36rpx"
          color="#999999"
          custom-style="transition:all .2s;vertical-align:middle;margin-left:16rpx;padding-bottom:4rpx;"
        />

        <div class="sreen-box" v-show="pageMsg.isScreen">
          <div
            class="sreen-unit"
            v-for="(u, o) in screenCodes"
            :key="o"
            @click="selectTime(u)"
          >
            <i v-if="u.id === 0" class="screen-ico"></i>{{ u.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="consumption-content">
      <block v-for="(unit, i) in consumptionRecord" :key="i">
        <!-- <p class="consumption-content-date">{{unit.date}}</p> -->
        <div class="consumption-content-unit">
          <div class="cp-u-left">
            <i
              class="ico-shop"
              :class="{
                'ico-hym': unit.RECODE_TYPE === 3010,
                'ico-md': unit.RECODE_TYPE === 3000,
                'ico-hy':
                  unit.RECODE_TYPE !== 3000 && unit.RECODE_TYPE !== 3010,
              }"
            ></i>
            <div>
              <p class="cp-u-title">{{ unit.SHOPNAME }}</p>

              <p class="cp-u-type">{{ unit.RECODE_TYPENAME }}</p>
            </div>
          </div>
          <div>
            <p
              class="cp-u-price"
              :class="{
                colorOr: unit.RECODE_AMOUNT < 0,
                colorGr: unit.RECODE_AMOUNT > 0,
              }"
            >
              <span style="font-size: 24rpx">{{
                unit.RECODE_AMOUNT > 0 ? "+" : ""
              }}</span
              >{{ unit.RECODE_AMOUNT }}
            </p>
            <p class="cp-u-type">{{ unit.date }}</p>
          </div>
        </div>
      </block>
    </div>
    <div v-if="loadingType == 0">
      <no-data :text="'您没有消费记录'" :isShow="consumptionRecord.length > 0" />
    </div>
  </div>
</template>

<script>
import NoData from "@/components/noData.vue";
import { mapGetters } from "vuex";
export default {
  data() {
    let nowMounthS = this.$utils.cutDate(new Date(), "YYYY-MM") + "-01";
    let nowMounthE = this.$utils.cutDate(new Date(), "YYYY-MM-DD");
    let nowWeekS = this.$utils.cutDate(
      new Date(),
      "YYYY-MM-DD",
      -(new Date().getDay() - 1)
    );
    return {
      loadingType: 1,
      searchByDate: 0,
      searchTime: [],
      consumptionRecord: [],
      timeFlag: 0,
      showPicker: false,
      screenCodes: [
        {
          id: 0,
          name: "选择日期",
          value: "",
        },
        {
          id: 1,
          name: "本月",
          value: [nowMounthS, nowMounthE],
        },
        {
          id: 2,
          name: "本周",
          value: [nowWeekS, nowMounthE],
        },
        {
          id: 3,
          name: "今天",
          value: [nowMounthE, nowMounthE],
        },
      ],
      pageMsg: {
        getAmount: 0,
        useAmount: 0,
        screenName: "本月",
        nowDay: nowMounthE,

        isScreen: false,
      },
    };
  },
  components: {
    NoData
  },
  computed: {
    ...mapGetters(["user"]),
  },
  methods: {
    selectTime(item) {
      this.pageMsg.screenName = item.name;
      if (item.id !== 0) {
        this.searchTime = item.value;

        this.consumptionRecord = [];
        this.getConsuptionRecord();
      }
      this.pageMsg.isScreen = !this.pageMsg.isScreen;
    },
    pickDate(event, index) {
      this.searchTime[index] = event.mp.detail.value;
      // if (this.searchTime) {

      this.consumptionRecord = [];
      this.getConsuptionRecord();
      // }
    },
    getConsuptionRecord() {
      let _this = this;

      _this.$api
        .postCoop({
          action_type: "GetMembershipConsumptionList",
          action_data: _this.user.INDUSTRY_MEMBERSHIP_ID,
          STARTDATE: _this.searchTime[0],
          ENDDATE: _this.searchTime[1],
        })
        .then(function (res) {
          _this.consumptionRecord = res.MembershipConsumption;
          // let getAmount = 0
          // let useAmount = 0
          res.MembershipConsumption.map((v) => {
            v.date = _this.$utils.cutDate(
              new Date(v.RECODE_DATE),
              "YYYY-MM-DD"
            );
            if (
              v.RECODE_TYPE === 1000 ||
              v.RECODE_TYPE === 1010 ||
              v.RECODE_TYPE === 1050
            ) {
              v.sign = 1; // 正数
              // getAmount += v.RECODE_AMOUNT
              v.RECODE_AMOUNT = Math.round(v.RECODE_AMOUNT * 100) / 100;
            } else {
              v.sign = 0; // 负数
              // useAmount += v.RECODE_AMOUNT
              v.RECODE_AMOUNT = (Math.round(v.RECODE_AMOUNT * 100) / 100) * -1;
            }
          });
          // _this.pageMsg.getAmount = Math.round(getAmount * 100) / 100
          // _this.pageMsg.useAmount = Math.round(useAmount * 100) / 100

          _this.loadingType = 0;
        });
    },
    getToday() {
      let _this = this;
      _this.searchTime[0] = _this.$utils.cutDate(new Date(), "YYYY-MM-DD");
      _this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY-MM-DD");
      _this.getConsuptionRecord();
    },
    getWeek() {
      let _this = this;
      _this.searchTime[0] = _this.$utils.cutDate(
        new Date(),
        "YYYY-MM-DD",
        -(new Date().getDay() - 1)
      );
      _this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY-MM-DD");
      _this.getConsuptionRecord();
    },
    getMonth() {
      let _this = this;
      _this.searchTime[0] = _this.$utils.cutDate(
        new Date(),
        "YYYY-MM-DD",
        -(new Date().getDate() - 1)
      );
      _this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY-MM-DD");
      _this.getConsuptionRecord();
    },
    onShowDatePicker(f) {
      // 显示
      this.showPicker = true;
      this.timeFlag = f;
    },
    onSelected(data) {
      // 选择
      this.searchTime[this.timeFlag] = data.value;
    },
  },
  onUnload() {
    this.pageMsg.isScreen = false;
  },
  onLoad() {
    this.loadingType = 1; // 正在在加载
    this.pageMsg.screenName = "本月";
    this.getMonth();
    // this.getMemberInfo()
  },
};
</script>

<style lang="stylus" scoped>
.consumption {
  background: #fff;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

// .consumption-amount
// font-size 32rpx
// text-align center
// width 100%
// height 332rpx
// // background url("https://eshangtech.com/ShopICO/consumption/consumption-bg.png") no-repeat center
// background-size contain
// box-sizing border-box
// padding-top 16rpx
.consumption-card {
  font-size: 32rpx;
  text-align: center;
  color: #fff;
  width: 100%;
  height: 284rpx;
  background: url('https://eshangtech.com/ShopICO/consumption/c-bg.png') no-repeat center;
  background-size: contain;
  box-sizing: border-box;
  padding: 68rpx 50rpx 68rpx 80rpx;
}

.card-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount {
  color: #fff;
  text-align: left;
  font-size: 60rpx;
  margin-top: 16rpx;
}

.jump-btn {
  background: url('https://eshangtech.com/ShopICO/consumption/c-btn.png') no-repeat center;
  width: 190rpx;
  height: 68rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  background-size: contain;
  border-radius: 34rpx;
  justify-content: center;
}

.consumption-history {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.consumption-history>div {
  width: 50%;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
}

.consumption-history>div:first-child {
  border-right: 2px solid #fff;
}

.consumption-history>div span {
  display: block;
}

.consumption-btn-box {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0;
  background-color: #fff;
}

.consumption-btn {
  width: 210rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  text-align: center;
  color: #fff;
  background-color: #4aa3f5;
  box-shadow: 0 0 8rpx #4aa3f5;
}

.consumption-search-box {
  background-color: #fff;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
}

.search-by-date {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  height: 80rpx;
}

.ico-timer {
  /* background url(../../../static/img/zq.png) no-repeat center */
  background-size: contain;
  height: 45rpx;
  width: 45rpx;
  margin-right: 8rpx;
}

.search-content-unit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  padding: 0 40rpx;
}

.search-content-unit + .search-content-unit {
  border-top: 1rpx solid #eee;
}

.date-color {
  color: #4aa3f5;
}

.consumption-title {
  padding: 0 32rpx;
  font-size: 32rpx;
  font-weight: bolder;
  margin-top: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.consumption-title-des {
  font-size: 28rpx;
  font-weight: normal;
  position: relative;
  color: #999999;
}

.sreen-box { // 
  position: absolute;
  padding: 20rpx 32rpx;
  width: 215rpx;
  right: -12rpx;
  border-radius: 16rpx;
  background: url('https://eshangtech.com/ShopICO/consumption/consumption-screen-bg.png') no-repeat center;
  background-size: contain;
  box-sizing: border-box;
  height: 288rpx;
  z-index: 1;
  top: 59rpx;
  transition: all 0.2s;
}

.sreen-unit {
  height: 64rpx;
  line-height: 64rpx;
  font-size: 24rpx;
  color: #454545;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sreen-unit+.sreen-unit {
  border-top: 1rpx solid #ededed;
}

.screen-ico {
  background: #fff url('https://eshangtech.com/ShopICO/consumption/consumption-screen.png') no-repeat center;
  background-size: contain;
  height: 27rpx;
  width: 31rpx;
  // display inline-block
  // vertical-align middle
  margin-right: 12rpx;
}

.searchTime-tag {
  background: #f2f1f1;
  height: 48rpx;
  line-height: 48rpx;
  font-size: 24rpx;
  width: 176rpx;
  color: #999;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.consumption-content {
  /* background-color #fff */
  padding-bottom: 20rpx;
}

.consumption-content-date {
  color: #999;
  font-size: 12px;
  padding-bottom: 10rpx;
  padding-left: 40rpx;
}

.consumption-content-unit {
  display: flex;
  padding: 0 32rpx;
  line-height: 42rpx;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-top: 28rpx;
}

.ico-shop {
  /* background url(../../../static/img/xiaofei_shop.png) no-repeat center */
  background-size: contain;
  height: 70rpx;
  width: 70rpx;
  margin-right: 16rpx;
}

.ico-hym {
  background: url('https://eshangtech.com/ShopICO/consumption/hymxf.png') no-repeat center; // eshangtech.com/ShopICO/consumption/hymxf.png) no-repeat center
}

.ico-md {
  background: url('https://eshangtech.com/ShopICO/consumption/mdxf.png') no-repeat center; // eshangtech.com/ShopICO/consumption/mdxf.png) no-repeat center
}

.ico-hy {
  background: url('https://eshangtech.com/ShopICO/consumption/hyxf.png') no-repeat center; // eshangtech.com/ShopICO/consumption/hyxf.png) no-repeat center
}

.ico-shop {
  background-size: contain;
  height: 72rpx;
  width: 72rpx;
  margin-right: 8rpx;
}

.cp-u-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.cp-u-title {
  font-size: 28rpx;
  color: #494949;
}

.cp-u-type {
  font-size: 24rpx;
  color: #939393;
}

.colorOr {
  color: #D86E35;
}

.colorGr {
  color: #45AB58;
}

.cp-u-price {
  text-align: right;
  font-size: 32rpx;
}
</style>
