<template>
    <view>
<uni-section title="基础用法" type="line">
			<uni-list>
				<uni-list-item title="列表文字" />
				<uni-list-item title="列表文字" rightText="右侧文字" />
				<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
			</uni-list>
		</uni-section>
        <uni-section title="50%(折扣券)" type="line">
            <uni-card padding="0" spacing="0">
                <template v-slot:cover>
                    <view class="custom-cover">
                        <!--<image class="cover-image" mode="aspectFill" :src="cover">-->
                        <!--</image>-->
                        <view class="cover-content">
                            <text class="uni-subtitle uni-white">今日新闻热点</text>
                        </view>
                    </view>
                </template>
                <uni-list>
                    <uni-list-item title="今日新闻"  note="1111" rightText="111"  showArrow="false">
                        <text></text>
                    </uni-list-item>
                    <uni-list-item title="今日新闻" showArrow></uni-list-item>
                </uni-list>
                <view slot="actions" class="card-actions no-border">
                    <view class="card-actions-item" @click="actionsClick('分享')">
                        <uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
                        <text class="card-actions-item-text">分享</text>
                    </view>
                    <view class="card-actions-item" @click="actionsClick('点赞')">
                        <uni-icons type="heart" size="18" color="#999"></uni-icons>
                        <text class="card-actions-item-text">点赞</text>
                    </view>
                    <view class="card-actions-item" @click="actionsClick('评论')">
                        <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
                        <text class="card-actions-item-text">评论</text>
                    </view>
                </view>
            </uni-card>
        </uni-section>

        <!-- <view class="border-bg"></view> -->
        <uni-section title="卡片+列表" type="line">
            <uni-card padding="0" spacing="0">
                <template v-slot:cover>
                    <view class="custom-cover">
                        <!--<image class="cover-image" mode="aspectFill" :src="cover">-->
                        <!--</image>-->
                        <view class="cover-content">
                            <text class="uni-subtitle uni-white">今日新闻热点</text>
                        </view>
                    </view>
                </template>
                <uni-list>
                    <uni-list-item title="今日新闻" rightText="111" showArrow></uni-list-item>
                    <uni-list-item title="今日新闻" showArrow></uni-list-item>
                </uni-list>
                <view slot="actions" class="card-actions no-border">
                    <view class="card-actions-item" @click="actionsClick('分享')">
                        <uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
                        <text class="card-actions-item-text">分享</text>
                    </view>
                    <view class="card-actions-item" @click="actionsClick('点赞')">
                        <uni-icons type="heart" size="18" color="#999"></uni-icons>
                        <text class="card-actions-item-text">点赞</text>
                    </view>
                    <view class="card-actions-item" @click="actionsClick('评论')">
                        <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
                        <text class="card-actions-item-text">评论</text>
                    </view>
                </view>
            </uni-card>
        </uni-section>

        <view class="statistics yellow-bg uni-list-cell-pd" style="color: #fff">共18笔充值,充值总金额100.00元</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    消费类型
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChange" :value="index" :range="array">
                        <view class="uni-input">{{array[index]}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    充值方式
                </view>
                <view class="uni-list-cell-db">
                    <picker @change="bindPickerChangeWay" :value="indexWay" :range="arrayWay">
                        <view class="uni-input">{{arrayWay[indexWay]}}</view>
                    </picker>
                </view>
            </view>
        </view>


        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    开始时间
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
                        <view class="uni-input">{{benginDate}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    结束时间
                </view>
                <view class="uni-list-cell-db">
                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
                        <view class="uni-input">{{overDate}}</view>
                    </picker>
                </view>
            </view>
        </view>

        <!-- <view class="border-bg"></view> -->


        <uni-load-more class="load"
                       :content-text="contentText"
                       :status="status"
                       :icon-size="24"
                       :iconType="iconType"
                       v-if="rows.length == 0">

            <uni-list class="rechargeWrap">
                <view class="recordCon uni-list-cell-pd">
                    <text>+66</text>
                    <text>充值成功</text>
                </view>
                <view class="recordCon uni-list-cell-pd">
                    <text class="color-green">微信充值</text>
                    <text>2020-10-01 01:01:01</text>
                </view>
            </uni-list>

            <uni-list class="rechargeWrap">
                <view class="recordCon uni-list-cell-pd">
                    <text>+66</text>
                    <text>充值成功</text>
                </view>
                <view class="recordCon uni-list-cell-pd">
                    <text class="color-blue">支付宝充值</text>
                    <text>2020-10-01 01:01:01</text>
                </view>
            </uni-list>

            <uni-list class="rechargeWrap">
                <view class="recordCon uni-list-cell-pd">
                    <text>+66</text>
                    <text>充值成功</text>
                </view>
                <view class="recordCon uni-list-cell-pd">
                    <text class="color-red">线下公对公充值</text>
                    <text>2020-10-01 01:01:01</text>
                </view>
            </uni-list>

            <uni-list class="rechargeWrap">
                <view class="recordCon uni-list-cell-pd">
                    <text>-66</text>
                    <text>支付成功</text>
                </view>
                <view class="recordCon uni-list-cell-pd">
                    <text class="color-green">购买卡券</text>
                    <text>2020-10-01 01:01:01</text>
                </view>
                <view class="rechargeArrow">
                    >
                </view>
            </uni-list>



            <uni-list class="rechargeWrap">
                <view class="recordCon uni-list-cell-pd">
                    <text>-66</text>
                    <text>支付成功</text>
                </view>
                <view class="recordCon uni-list-cell-pd">
                    <text class="">停车支付</text>
                    <text>2020-10-01 01:01:01</text>
                </view>
                <view class="rechargeArrow">
                    >
                </view>
            </uni-list>

        </uni-load-more>


    </view>
</template>

<script>
import common from "../../common/common.js";
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      title: 'picker',
      array: ['全部', '充值', '支付'],
      arrayWay: ['所有方式', '微信', '线下公对公'],
      index: 0,
      indexWay: 0,
      benginDate: currentDate,
      overDate: currentDate,
      rows:[],
      pageNum:1,//当前页
      pageSize:1,//每页条数
      reload:false,
      status:'more',
      contentText:{
        contentdown:'上拉加载更多～',
        contentrefresh:'正在加载更多～',
        contentmore:'我是有底线的～'
      },
      iconType:'auto', // 图标样式
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })
    // this.mycarNumber = params.carNumber;
    // this.myorderId = params.orderId;
    // this.myparkCode = params.parkCode;
    // this.myorderState = params.orderState;
    // this.totalFee = params.totalFee
    // this.unPayFee = params.unPayFee
    // if (params.orderState == 5) {
    //   //停车补缴单 103
    //   this.mypaySrcType = '103'
    // } else {
    //   this.mypaySrcType = '101'
    // }
    // // this.GetbillQueryInfo(this.mycarNumber, this.myorderId, this.myparkCode);
    // this.getWxCode();
    // this.PDlogin();
    //console.log("xxxmake = "+this.makedateFormat());
  },
  onShow() {
    var me = this;
    var userInfo = me.getGlobalUser("globalUser");
    if (userInfo != null) {
      me.phoneNumb = userInfo.userPhone;
    }
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1]; //当前页面
    console.log('currPage.data.selCoupon = ' + currPage.data.selCoupon);
    me.selCoupon = currPage.data.selCoupon;
    console.log(JSON.stringify(me.selCoupon));
    // me.GetbillQueryInfo(me.mycarNumber, me.myorderId, me.myparkCode, me.selCoupon.cardNo, me.selCoupon.couponType, me.selCoupon
    //   .discValue);
    // GetbillQueryInfo(carnum, orderId, parkCode, cardNo, couponType, disValue) {
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    actionsClick(text){
      uni.showToast({
        title:text,
        icon:'none'
      })
    },
    bindPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.index = e.detail.value
    },
    bindPickerChangeWay: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.indexWay = e.detail.value
    },
    bindStartDateChange: function (e) {
      this.benginDate = e.detail.value
    },
    bindEndDateChange: function (e) {
      this.overDate = e.detail.value
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
  }
}
</script>

<style lang="scss" scoped>
    .rechargeWrap{
        position: relative;
        .rechargeArrow{
            position: absolute;
            right: 10px;
            top: 30px;
            font-size: 20px;
            color: #999;
        }
    }
    .recordCon {
        padding-right: 35px;
        color: #999;
        display: flex;
        justify-content: space-between;
    }

    .container {
        overflow: hidden;
    }

    .custom-cover {
        flex: 1;
        flex-direction: row;
        position: relative;
    }

    .cover-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background-color: rgba($color: #000000, $alpha: 0.4);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-left: 15px;
        font-size: 14px;
        color: #fff;
    }

    .card-actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 45px;
        border-top: 1px #eee solid;
    }
    .card-actions-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .card-actions-item-text {
        font-size: 12px;
        color: #666;
        margin-left: 5px;
    }
    .cover-image {
        flex: 1;
        height: 150px;
    }
    .no-border {
        border-width: 0;
    }
</style>
