<template>
  <div class="mainPage flex-v">
    <div class="flex-item">
      <div>
        <h4>订单信息</h4>
        <div class="list flex-h">
          <div class="flex-item">
            <ul>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>精品课程名称</span>
                  </div>
                </div>
                <span>{{courseDetail.CourseName}}</span>
              </li>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>预计开班时间</span>
                  </div>
                </div>
                <span>{{returnDate(courseDetail.BeginDate)}}</span>
              </li>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>时间描述</span>
                  </div>
                </div>
                <!-- <span v-if="courseTimeList.length">{{returnCourseTime(courseTimeList[0].BeginDate,courseTimeList[0].EndDate)}}</span> -->
                <span v-if="courseTimeList.length">{{toolClass.dateFormat(courseDetail.BeginDate,'yyyy-MM-dd') + ' ~ ' + toolClass.dateFormat(courseDetail.EndDate, 'yyyy-MM-dd')}}</span>
              </li>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>地点</span>
                  </div>
                </div>
                <span v-if="courseDetail.CaseInfo !== undefined">{{courseDetail.CaseInfo.CaseAddress}}</span>
              </li>
              <li class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>价格</span>
                  </div>
                </div>
                <span>￥{{courseDetail.Price}}</span>
              </li>
            </ul>
            <div class="selectTicket">
              <div class="flex-h" @click="couponList.length ? showLayer = true : showLayer = false">
                <div class="flex-item">
                  <div>
                    <span>优惠信息</span>
                  </div>
                </div>
                <span></span>
                <i class="iconfont icon-jiantou-right"></i>
              </div>
              <div class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>优惠券</span>
                  </div>
                </div>
                <span v-if='couponList.length <= 0 && !showCoupon'>暂无优惠券</span>
                <span v-if='couponList.length > 0 && !showCoupon' style="color:#fc6243">{{couponList.length + '张可用优惠券'}}</span>
                <span v-if='showCoupon' style="color:#fc6243">{{showCoupon}}</span>
              </div>
            </div>
            <div class="agreement">
              <span>购前需知</span>
              <div class="flex-h">
                <div class="flex-item">
                  <div>
                    <span>同意《城的空间课程服务协议》</span>
                  </div>
                </div>
                <i class="iconfont icon-gouxuan" :class="{'active': agreementOff}" @click="agreement"></i>
              </div>
            </div>
            <div class="protocol">
              <div>1. 参与城的空间课程的用户，具有完全的法律行为能力，同意遵守相关管理规章制度，应接受城的空间课程的相关服务协议，并已知晓有关的活动、健身规则与警示，承诺遵守城的空间课程的相关规定。</div>
              <div>2. 在确认本协议前，用户应了解自身身体情况，以确保用户具备参与城的空间课程的身体条件，并且没有任何不宜运动的疾病、损伤和其他缺陷。因用户自身的任何疾病、损伤和其他缺陷导致用户在接收服务时发生任何损害的，城的空间不承担任何法律责任。。</div>
              <div>3. 以下人群不能参加城的空间健身课程：手术后3月内的人群、有心血管疾病者、不能剧烈运动伤者、孕妇及哺乳期女性、产后不足6月内的人群，上课时如有隐瞒，所发生的一切后果及对他人产生的后果城的空间课程及教练均不负任何责任。如因此造成第三人损害的，由其承担赔偿责任。在课程中感到任何不适的，请及时告知课程教练，否则，如果发生身体损害，城的空间不承担法律责任。</div>
              <div>4. 为了用户的健身安全，用户训练时需穿着专业的运动服、运动鞋及运动装备。运动期间，不得参与违反国家法律法规的活动、不得穿着违反道德规范的服饰进行运动。</div>
              <div>5. 用户在参加健身锻炼时请勿携带珠宝饰品等贵重物品，以免丢失或造成意外。物品遗失概不负责。</div>
              <div>6. 请您认真阅读以上内容，报名成功即认为您同意此服务协议。</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-h">
      <div class="flex-item">
        <div>
          <span>总计￥<em>{{courseDetail.Price}}</em></span>
        </div>
      </div>
      <a @click="placeOrder">确认订单</a>
    </div>
    <div class="layer" :class="{'show': showLayer}"> 
      <div>
        <div class="top">
          <i class="iconfont icon-guanbi" @click="closeChoose"></i>
        </div>
        <div class="body flex-h">
          <div class="flex-item">
            <div>
              <ul>
                <li v-for="(item,index) in couponList" :key="index" @click="selectCouponItem(item)" :class="{'active':item.select}">
                  <i class="iconfont icon-gouxuan"></i>
                  <discounts :data="item"></discounts>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <a @click="sureSelectCoupon">确定</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapProjectActions, mapState: mapProjectState } = createNamespacedHelpers('majorProjects')
const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
import discounts from '../../../components/discounts/discounts'

export default {
  name: '',
  data () {
    return {
      couponList: [],
      getCouponOff: false,
      agreementOff: true, // 是否同意协议
      courseTimeList: [],
      postData: {
        CouponId: '',
        CouponName: '',
        customercouponid: ''
      },
      showLayer: false, // 显隐选择优惠券弹窗
    }
  },
  components: {
    discounts,
  },
  computed: {
    ...mapState({
      orgid: x => x.app.orgId,
      fiveA: x => x.index.fiveA,
      banner: x => x.index.banner,
      message: x => x.index.message,
      project: x => x.index.project,
      cms: x => x.index.cms,
      user: x => x.userCenter.userInfo
    }),
    ...mapProjectState({
      courseDetail: x => x.courseDetail
    }),
  },
  created () {
    this.getCouponList().then((res) => {
      res = res || []
      this.getCourseDetailInfo({ id: this.$route.query.id }).then((result) => {
        var arr = result.CourseDetail, caseid = result.CaseId
        // console.log(arr)
        this.courseTimeList = arr.sort(function (a, b) { return new Date(a.BeginDate).getTime() > new Date(b.BeginDate).getTime() ? 1 : -1 })
        var id = this.$route.query.id, arr = [], nowDate = Date.now()
        for (var n = 0; n < res.length; n++) {
          // console.log(res[n])
          res[n].Coupon.Targets = res[n].Coupon.Targets || []
          if (res[n].Coupon.CouponType === 'course' && res[n].Status === 1) {
            if (res[n].Coupon.IsAll && res[n].CaseId === caseid && nowDate > new Date(res[n].StartDate).getTime() && nowDate < new Date(res[n].EndDate).getTime()) {
              this.couponList.push({
                title: res[n].Coupon.CouponName,
                desc: res[n].Coupon.Share.UseInstruction,
                time: this.toolClass.dateFormat(res[n].EndDate),
                useType: '未使用',
                tag: '课程',
                id: res[n].CustomerCouponId,
                select: false,
                hideBtn: true
              })
            } else {
              for (var a = 0; a < res[n].Coupon.Targets.length; a++) {
                if (res[n].Coupon.Targets[a].TargetId === id && nowDate > new Date(res[n].StartDate).getTime() && nowDate < new Date(res[n].EndDate).getTime() && res[n].CaseId === caseid) {
                  this.couponList.push({
                    title: res[n].Coupon.CouponName,
                    desc: res[n].Coupon.Share.UseInstruction,
                    time: this.toolClass.dateFormat(res[n].EndDate),
                    useType: '未使用',
                    tag: '课程',
                    id: res[n].CustomerCouponId,
                    select: false,
                    hideBtn: true
                  })
                }
              }
            }
          }
        }
        this.getCouponOff = true
        // console.log(JSON.stringify(this.couponList))
      })
    })
  },
  methods: {
    ...caseTableActions([
      'getCouponList',
    ]),
    sureSelectCoupon () {
      var bool = false
      for (var n = 0; n < this.couponList.length; n++) {
        if (this.couponList[n].select) {
          bool = true
          this.postData.customercouponid = this.couponList[n].id
          this.showCoupon = this.couponList[n].title
        }
      }
      if (!bool) {
        this.postData.customercouponid = ''
      }
      this.closeChoose()
    },
    closeChoose () {
      this.showLayer = false
    },
    selectCouponItem (item) { // 选择优惠券
      if (!item.select) {
        for (var n = 0; n < this.couponList.length; n++) {
          this.couponList[n].select = false
        }
        item.select = true
      } else {
        this.showCoupon = ''
        item.select = false
      }
    },
    placeOrder () { // 下单
      if (!this.agreementOff) {
        this.$toast('请先阅读服务协议并同意')
        return false
      }
      this.placeOrderForCourse({
        id: this.$route.query.ordersid,
        payload: {
          customercouponid: this.postData.customercouponid,
        }
      }).then((res) => {
        // console.log(JSON.stringify(res))
        this.$dialog.alert({
          title: '下单成功！'
        }).then(() => {
          // this.$router.push({name: 'majorProjects'})
          window.history.go(-2)
        })
      })
    },
    ...mapProjectActions([
      'getCourseDetailInfo',
      'placeOrderForCourse',
    ]),
    returnCourseTime (val, endVal) { // 返回课时时间
      val = new Date(val)
      endVal = new Date(endVal)
      return this.returnNum(val.getMonth() + 1) + '/' + this.returnNum(val.getDate()) + ' 周' + '日一二三四五六'.split('')[new Date(val).getDay()] + ' ' + this.returnNum(val.getHours()) + ':' + this.returnNum(val.getMinutes()) + '~' + this.returnNum(endVal.getHours()) + ':' + this.returnNum(endVal.getMinutes())
    },
    returnNum (val) {
      return val > 9 ? val : '0' + val
    },
    returnDate (val) {
      val = new Date(val)
      return this.returnNum(val.getMonth() + 1) + '月' + this.returnNum(val.getDate()) + '日'
    },
    onConfirm (value, index) {
      this.postData.CouponId = value.id
      this.postData.CouponName = value.value
      this.showLayer = false
    },
    onCancel () {
      this.showLayer = false
    },
    agreement () { // 同意协议
      this.agreementOff = !this.agreementOff
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>