<template>
    <view>

        <uni-section title="2小时(时长券)" type="line" >
            <uni-card padding="0" spacing="0">
                <uni-list>
                    <uni-list-item title="适应车场"   rightText="万达商业广场"  >
                        <text></text>
                    </uni-list-item>
                    <uni-list-item title="价格：¥5/张" rightText="商户库存：0张"></uni-list-item>
                </uni-list>

            </uni-card>
        </uni-section>



        <uni-list >
            <uni-list-item  title="购买数量" >
                <template v-slot:footer>
                    <uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
                </template>
            </uni-list-item>
            <uni-list-item  title="应付金额"  >
                <template v-slot:footer>
                    <text style="color: red">¥25.00元</text>
                </template>
            </uni-list-item>
            <uni-list-item  title="支付方式" rightText="商户余额" />
            <uni-list-item  note="请认真核对购买信息,卡券一经购买概不支持退款" >
                <template v-slot:header>
                    <text style="color: red">温馨提示</text>
                </template>
            </uni-list-item>
        </uni-list>

        <view class="uni-padding-wrap uni-common-mt">
            <button type="primary" @click="dialogToggle('warn')">立即购买</button>
        </view>

        <view>
            <!-- 提示窗示例 -->
            <uni-popup ref="alertDialog" type="dialog">
                <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" content="二次确定" @confirm="dialogConfirm"
                                  @close="dialogClose"></uni-popup-dialog>
            </uni-popup>
        </view>
        <view class="formWrap">
            <uni-forms ref="baseForm" :modelValue="baseFormData" >
                <uni-forms-item label="车牌号码" required>
                    <uni-easyinput v-model="baseFormData.name" placeholder="请输入车牌号码" />
                </uni-forms-item>

                <uni-forms-item label="生效时间">
                    <uni-datetime-picker :clear-icon="false" type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/>
                </uni-forms-item>
                <uni-forms-item label="失效时间">
                    <uni-datetime-picker :clear-icon="false" type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/>
                </uni-forms-item>
            </uni-forms>
        </view>
        <uni-section title="24小时(包天券)" type="line" >
            <uni-card padding="0" spacing="0">

                <uni-list>
                    <uni-list-item title="适应车场"   rightText="万达商业广场"  >
                        <text></text>
                    </uni-list-item>
                    <uni-list-item title="价格：¥5/张" rightText="商户库存：0张"></uni-list-item>
                </uni-list>

            </uni-card>
        </uni-section>



        <uni-list >
            <uni-list-item  title="购买数量" >
                <template v-slot:footer>
                    <uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
                </template>
            </uni-list-item>
            <uni-list-item  title="应付金额"  >
                <template v-slot:footer>
                    <text style="color: red">¥25.00元</text>
                </template>
            </uni-list-item>
            <uni-list-item  title="支付方式" rightText="商户余额" />
            <uni-list-item  note="请认真核对购买信息,卡券一经购买概不支持退款" >
                <template v-slot:header>
                    <text style="color: red">温馨提示</text>
                </template>
            </uni-list-item>
        </uni-list>

        <view class="uni-padding-wrap uni-common-mt">
            <button type="primary" @click="dialogToggle('warn')">立即购买</button>
        </view>



    </view>
</template>

<script>
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      vModelValue: 3,
      title: 'picker',
      array: ['全部', '充值', '支付'],
      arrayWay: ['所有方式', '微信', '线下公对公'],
      index: 0,
      indexWay: 0,
      benginDate: currentDate,
      overDate: currentDate,

      iconType:'auto', // 图标样式
      datetimesingle: '',
      // 基础表单数据
      baseFormData: {
        name: '',
        datetimesingle: 1627529992399
      },
      // 校验规则
      rules: {
        name: {
          rules: [{
            required: true,
            errorMessage: '车牌号码不能为空'
          }]
        }
      },
    }
  },
  onLoad(params) {
    wx.showShareMenu({
      withShareTicket: true
    })

  },
  onShow() {
    var me = this;

  },
  mounted() {
    setTimeout(() => {
      this.baseFormData.datetimesingle = Date.now() - 2*24*3600*1000
      this.datetimesingle = Date.now() - 2*24*3600*1000
    },500)
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    changeLog(e) {
      console.log('change事件:', e);
    },
    dialogClose() {
      console.log('点击关闭')
    },
    dialogConfirm() {
      console.log('点击确认')
      this.messageText = `点击确认了 ${this.msgType} 窗口`
      this.$refs.message.open()
    },
    dialogToggle(type) {
      this.msgType = type
      this.$refs.alertDialog.open()
    },
    changeValue(value) {
      console.log('返回数值：', value);
    },
    blur(e) {
      console.log('blur:', e);
    },
    focus(e) {
      console.log('focus:', e);
    },
    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>
    .formWrap {
        padding: 15px;
        background-color: #fff;
    }

    /deep/ .uni-section{
        padding-bottom: 10px;
    }
    /*/deep/ .uni-datetime-picker-btn-text{*/
        /*display: none;*/
    /*}*/

</style>
