<template>
  <view class="m-content">
    <view class="m-card m-card-one">
      <view class="m-one-first-row">
        <view class="m-ticket-name">{{ ticket.ticketname }}</view>
        <view class="m-ticket-use-time" v-if="ticket && ticket.datesettings == 1">
          <view class="m-ticket-use-time-label">
            <img class="m-img" src="/static/animg/index/predetermine_time1.svg" alt="" />
            使用有效期：
          </view>
          <view class="m-ticket-use-time-value"
            >{{ parseArrTime(ticket.usevalidityStart) }}至{{
              parseArrTime(ticket.usevalidityEnd)
            }}</view
          >
        </view>
        <view class="m-ticket-use-time" v-if="ticket && ticket.datesettings == 1">
          <view class="m-ticket-use-time-label">
            <img class="m-img" src="/static/animg/index/predetermine_time2.svg" alt="" />
            使用时间段：
          </view>
          <view class="m-ticket-use-time-value">全天</view>
        </view>
        <view class="m-ticket-use-time" v-if="ticket && ticket.datesettings == 3">
          <view class="m-ticket-use-time-label">
            <img class="m-img" src="/static/animg/index/predetermine_time2.svg" alt="" />
            使用时间段：
          </view>
          <view class="m-ticket-use-time-value"
            >{{ ticket.usertimeslotStart }}-{{ ticket.usertimeslotEnd }}
          </view>
        </view>
      </view>
      <view class="m-one-second-row">
        <view class="m-row-title">选择日期</view>
        <view class="m-date-pick-box">
          <view class="scroll-view1">
            <view
              v-for="(date, index) in dates"
              :key="index"
              class="date-item"
              @click="chooseDate(index, date.fullData)"
            >
              <view :class="['date-box', { active: index === nowIndex }]">
                <text class="date-label">{{ date.label }}</text>
                <text class="date-date">{{ date.date }}</text>
                <text class="date-price">{{ date.price }}</text>
              </view>
            </view>
          </view>
          <view class="m-more-date" @click.stop="openCalendar">
            <span>更多日期</span>
            <uni-icons type="right" size="18"></uni-icons>
          </view>
        </view>
      </view>
      <view class="m-one-third-row">
        <view class="m-ticket-count">
          <view class="m-ticket-count-label">购票数量</view>
          <view class="m-ticket-count-value">
            <uni-number-box
              v-if="maxNum == -1"
              :min="1"
              v-model="ticket.num"
              @change="changeCount($event, ticket)"
            />
            <uni-number-box
              v-else
              :min="1"
              :max="maxNum"
              v-model="ticket.num"
              @change="changeCount($event, ticket)"
            />
          </view>
        </view>
      </view>
      <view class="m-one-fourth-row">
        <view class="m-ticket-count">
          <view class="m-ticket-count-label">成人票</view>
          <view class="m-ticket-count-value" @click.stop="openPop(1)">
            <span>购买须知</span>
            <uni-icons type="right" size="16"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <view class="m-card m-card-two" v-if="ticket && ticket.touristInformation != 1">
      <view class="m-card-title">
        <view class="m-title">游客信息</view>
        <view class="m-title-tips"
          >需填 {{ ticket.touristInformation == 2 ? 1 : peopleNums() }} 位</view
        >
      </view>
      <view class="m-two-first-row">
        <view
          class="m-user-list"
          :class="item.selected ? 'active' : ''"
          v-for="item in navUserList"
          @click="selectUser(item)"
        >
          {{ item.name }}
        </view>
        <view class="m-user-list m-more-user" @click="openAddress">
          <span class="m-span">
            新增
            <br />
            更改
          </span>
          <uni-icons type="right" size="18"></uni-icons>
        </view>
      </view>
      <view class="m-two-second-row">
        <view class="m-user-list">
          <view class="m-user-list-item" v-for="(item, index) in selectUserList">
            <view class="m-list-left">
              <img
                class="m-img"
                src="/static/animg/index/predetermine_tourist.svg"
                alt=""
              />
              <span class="m-span">游客{{ index + 1 }}</span>
            </view>
            <view class="m-list-middle">
              <view class="m-middle-user-name">
                {{ item.name }}
              </view>
              <view class="m-middle-user-idCode m-gray m-m-font"
                >身份证 {{ item.idCard }}</view
              >
              <!-- <view class="m-middle-user-tel m-gray m-m-font">手机号 {{ item.tel }}</view> -->
            </view>
            <!-- <view class="m-list-right">
							<uni-icons type="compose" size="24"></uni-icons>
							<uni-icons type="trash" size="24"></uni-icons>
						</view> -->
          </view>
        </view>
      </view>
    </view>
    <view class="m-feet-box">
      <view class="m-feet-left">
        <view class="m-price">
          总价
          <span class="m-red">
            ¥
            <span class="m-red m-xxl-font">{{ sumPrice }}</span>
          </span>
        </view>
        <view class="m-nums">
          共
          <span class="m-red">{{ ticket.num ? ticket.num : 0 }}</span>
          张门票
        </view>
      </view>
      <view class="m-feet-right">
        <!-- <button class="m-prime-red" @click.stop="isPayPopup = true">支付</button> -->
        <button class="m-prime-red" @click.stop="checkOrder">支付</button>
      </view>
    </view>
    <!-- 人员 -->
    <liu-select
      :multiple="fasle"
      ref="scroll"
      :list="dataList"
      @change="chooseSuccess"
      @edit="edit"
      @add="addPerson"
    ></liu-select>
    <!-- 日历 -->
    <wu-calendar
      ref="calendar"
      @monthSwitch="changeMonth"
      :startDate="startDate"
      :selected="selected"
      :confirmFullDate="true"
      @confirm="calendarConfirm"
      :insert="false"
    ></wu-calendar>
    <!-- 重复订单提醒 -->
    <uni-popup class="m-pop-bg" ref="warningPop" type="center" border-radius="20rpx">
      <view class="m-green-bg"></view>
      <view class="m-red-bg"></view>
      <view class="m-notice-popuo">
        <view class="m-notice-ico">
          <img class="m-img" src="" alt="" />
        </view>
        <view class="m-notice-text">您有一笔相同门票的待支付订单，请优 先处理！</view>
        <view class="m-pop-feet">
          <button
            class="m-prime-line-unset m-size-middle"
            @click="continueOrder"
            size="mini"
          >
            继续下单
          </button>
          <button class="m-prime m-size-middle" size="mini" @click="goOrderList">
            前往处理
          </button>
        </view>
      </view>
    </uni-popup>
    <!-- 支付 -->
    <u-popup :show="isPayPopup" mode="bottom" @close="isPayPopup = false" round="10">
      <f-pay
        :show-title="false"
        :show="isPayPopup"
        :payMoney="orderInfo.orderInfo.orderAmount"
        :tradeNo="orderInfo.orderInfo.orderNumber"
        :order="orderInfo"
        @payResult="payResult"
      ></f-pay>
    </u-popup>
    <!-- 须知 -->
    <uni-popup ref="mPurchaseNotice" border-radius="10px 10px 0 0" :safe-area="true">
      <view class="m-purchase-notice m-pop-bg">
        <view class="m-green-bg"></view>
        <view class="m-red-bg"></view>
        <view class="m-pop-title">预定须知</view>
        <view class="m-contents">
          <view class="m-title">购买须知</view>
          <view class="m-notice-box">
            <view class="m-notice-row">
              <view class="m-tag m-tag-blue">退票规则</view>
              <view class="m-notice-row-content">{{ ticketInfos.refundRules }}</view>
            </view>
            <view class="m-notice-row">
              <view class="m-tag m-tag-blue">使用次数</view>
              <view class="m-notice-row-content">{{ ticketInfos.ticketchecksNum }}</view>
            </view>
            <view class="m-notice-row">
              <view class="m-tag m-tag-red">购票限制</view>
              <view class="m-notice-row-content">{{
                ticketInfos.ticketlimitnum == null
                  ? ticketInfos.buyticketlimit
                  : "每人限购" + ticketInfos.ticketlimitnum + "张"
              }}</view>
            </view>
            <view class="m-notice-row">
              <view class="m-tag m-tag-blue">使用时段</view>
              <view class="m-notice-row-content">{{
                ticketInfos.usertimeslotStart == ticketInfos.usertimeslotEnd
                  ? "全天"
                  : ticketInfos.usertimeslotStart + "至" + ticketInfos.usertimeslotEnd
              }}</view>
            </view>
          </view>
          <view class="m-driver"></view>
          <view class="m-title">费用说明</view>
          <view class="m-notice-table">
            <view class="m-table-head">费用包含</view>
            <view class="m-table-th">
              <view class="m-table-td">门票</view>
              <view class="m-table-td">{{ ticketInfos.ticketname }}</view>
            </view>
          </view>
          <view class="m-driver"></view>
          <view class="m-title">使用说明</view>
          <view class="m-notice-table no-border">
            <view class="m-table-th">
              <view class="m-table-td">
                <img
                  class="m-table-inside-ico"
                  src="/static/animg/index/notice_time.svg"
                  alt=""
                />
                开放时间
              </view>
              <view class="m-table-td">
                <view class="m-ul">
                  <view class="m-li">{{ ticketInfos.openTime }}</view>
                </view>
              </view>
            </view>
            <view class="m-table-th">
              <view class="m-table-td">
                <img
                  class="m-table-inside-ico"
                  src="/static/animg/index/notice_notice.svg"
                  alt=""
                />
                购票须知
              </view>
              <view class="m-table-td">
                <view class="m-ul">
                  <view class="m-li">{{ ticketInfos.ticketInfo }}</view>
                </view>
              </view>
            </view>
            <view class="m-table-th">
              <view class="m-table-td">
                <img
                  class="m-table-inside-ico"
                  src="/static/animg/index/notice_address.svg"
                  alt=""
                />
                景区地址
              </view>
              <view class="m-table-td">
                <view class="m-ul">
                  <view class="m-li">{{ ticketInfos.addressInfo }}</view>
                </view>
              </view>
            </view>
          </view>
          <!-- <view class="m-driver"></view>
					<view class="m-title">其他说明</view>
					<view class="m-notice-table no-border">
						<view class="m-table-th">
							<view class="m-table-td m-no-bg">发票说明</view>
							<view class="m-table-td m-no-bg">如需发票、请在付款完成后，在已核订 单中，申请电子发票。</view>
						</view>
					</view> -->
        </view>
      </view>
    </uni-popup>
    <!-- 新增 -->
    <uni-popup
      ref="mAddPerson"
      type="bottom"
      border-radius="10px 10px 0 0"
      :safe-area="false"
    >
      <view class="m-purchase-notice m-pop-bg">
        <view class="m-green-bg"></view>
        <view class="m-red-bg"></view>
        <view class="m-pop-title">{{ titleName }}游客</view>
        <view class="m-form-box">
          <uni-forms class="m-form" ref="peopleForm" :modelValue="baseFormData">
            <uni-row class="m-row">
              <uni-col class="m-col" :span="ticket.ischeckedIdcard == 1 ? 18 : 24">
                <uni-forms-item class="m-form-item" label="姓   名" required name="name">
                  <uni-easyinput
                    :inputBorder="false"
                    v-model="baseFormData.name"
                    placeholder="请输入姓名"
                  />
                </uni-forms-item>
                <uni-forms-item
                  v-if="ticket.ischeckedIdcard == 1"
                  class="m-form-item"
                  label="身份证"
                  required
                  name="idCard"
                >
                  <uni-easyinput
                    :inputBorder="false"
                    v-model="baseFormData.idCard"
                    placeholder="请输入身份证号"
                  />
                </uni-forms-item>
              </uni-col>
              <uni-col
                v-if="ticket.ischeckedIdcard == 1"
                class="m-col"
                span="5"
                offset="1"
              >
                <!-- ocr -->
                <lzcOCR :dataObj="dataObj" @start="start" @end="end" />
              </uni-col>
            </uni-row>
            <uni-forms-item
              v-if="ticket.ischeckedMobile == 1"
              class="m-form-item"
              label="手机号"
              required
              name="tel"
            >
              <uni-easyinput
                :inputBorder="false"
                v-model="baseFormData.tel"
                placeholder="请输入手机号"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
        <button class="m-prime m-size-middle m-custom-margin" @click="finishPeople">
          完成
        </button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import fPay from "../components/f-pay/f-pay";
import lzcOCR from "../components/lzc-OCR/lzc-OCR.vue";
import { parseTime } from "@/common/util";
import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import uPopup from "@/uni_modules/uview-ui/components/u-popup/u-popup.vue";

export default {
  components: {
    fPay,
    lzcOCR,
    uniPopup,
    uPopup,
  },
  data() {
    return {
      maxNum: -1,
      tentId: null,
      selected: null, //门票日历
      startDate: parseTime(new Date()),
      //门票须知
      ticketInfos: null,
      //生成订单信息
      orderInfo: null,
      //总价
      sumPrice: 0,
      ticket: null,
      ticketInfo: null,
      nowIndex: 0,
      titleName: "新增",
      isPayPopup: false,
      dates: [],
      numberValue: 1,
      tradeNo: "16fw61cqew6464wdc", //支付单号
      dataObj: {
        client_id: "qs5EQSE0neZZDh5sA7FmHnUL",
        client_secret: "w92jiLCNSVecfRdyBbjhcOGEQoezaC1B",
      },
      baseFormData: {
        name: null,
        idCard: null,
        tel: null,
        id: null,
        selected: false,
      },
      dataList: [], //数据源
      navUserList: [],
      selectUserList: [],
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: "请输入姓名",
            },
          ],
        },
        idCard: {
          rules: [
            {
              required: true,
              errorMessage: "请输入身份证号",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                const reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
                if (!value) {
                  callback("身份证号码不能为空");
                } else if (!reg.test(value)) {
                  callback("请输入正确的身份证号码");
                } else {
                  callback();
                }
              },
            },
          ],
        },
        tel: {
          rules: [
            {
              required: true,
              errorMessage: "请输入手机号",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
                if (!value) {
                  callback("手机号码不能为空");
                } else if (!reg.test(value)) {
                  callback("请输入正确的手机号码");
                } else {
                  callback();
                }
              },
            },
          ],
        },
      },
    };
  },
  watch: {
    ticket: {
      handler(val) {
        console.log(val, "-----");
        if (!val.num) {
          val.num = 1;
        }
        this.sumPrice = val.settlementPrice * val.num;
      },
      deep: true,
    },
  },
  onReady() {
    this.$refs.peopleForm.setRules(this.rules);
  },
  onLoad(options) {
    console.log(options);
    this.ticket = JSON.parse(decodeURIComponent(options.ticket));
    if (options.maxNum) {
      this.maxNum = options.maxNum;
    } else {
      this.maxNum = -1;
    }
    this.tentId = options.tentId;
    this.getTicketInfo(this.ticket.id);
  },
  mounted() {
    for (let i = 0; i < 7; i++) {
      this.dates.push({
        label: this.getLabel(i),
        date: this.getFormattedDate(i),
        fullData: this.getFullDate(i),
        price: "￥" + this.ticket.settlementPrice,
      });
    }

    this.ticket.date = this.dates[0].fullData;
    let that = this;
    if (this.ticket.datesettings == 2 || this.ticket.datesettings == 3) {
      //使用日期和使用小时模式：单日,这里使用日期设置不论星期还是多日都不影响返回的日期了
      //不限库存/总库存
      if (this.ticket.inventorySettings == 1 || this.ticket.inventorySettings == 2) {
        const params = {
          ticketId: that.ticket.id,
          date: that.parseTime(new Date()),
        };
        that.$Request
          .get(that.$config.getTicketDateInventory, params, null, null, false, true)
          .then((res) => {
            that.selected = [];
            res.data.forEach((items) => {
              const obj = {
                date: items.date,
                info: "库存:" + that.ticket.currentinventory,
                infoColor: "#666",
                topInfo: "",
                topInfoColor: "",
                badgeColor: "",
                disable: !items.isAvailable, // 禁用
              };
              that.selected.push(obj);
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
      //日库存
      if (that.ticket.inventorySettings == 3) {
        const params = {
          ticketId: that.ticket.id,
          date: that.parseTime(new Date()),
        };
        that.$Request
          .get(that.$config.getTicketDateInventory, params, null, null, false, true)
          .then((res) => {
            that.selected = [];
            res.data.forEach((items) => {
              const obj = {
                date: items.date,
                info: "库存:" + items.inventory,
                infoColor: "#666",
                topInfo: "",
                topInfoColor: "",
                badgeColor: "",
                disable: !items.isAvailable || items.inventory == 0, // 禁用
              };
              that.selected.push(obj);
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    }
  },
  methods: {
    //切换月份
    changeMonth(e) {
      console.log(e);
      let that = this;
      let fullDate = e.fullDate + "-01";
      if (fullDate < that.parseTime(new Date())) {
        fullDate = that.parseTime(new Date());
      }
      if (that.ticket.inventorySettings == 1 || that.ticket.inventorySettings == 2) {
        const params = {
          ticketId: that.ticket.id,
          date: fullDate,
        };
        that.$Request
          .get(that.$config.getTicketDateInventory, params, null, null, false, true)
          .then((res) => {
            that.selected = [];
            res.data.forEach((items) => {
              const obj = {
                date: items.date,
                info: "库存:" + that.ticket.currentinventory,
                infoColor: "#666",
                topInfo: "",
                topInfoColor: "",
                badgeColor: "",
                disable: !items.isAvailable, // 禁用
              };
              that.selected.push(obj);
            });
            that.$forceUpdate();
            console.log(that.selected);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      //日库存
      if (that.ticket.inventorySettings == 3) {
        const params = {
          ticketId: that.ticket.id,
          date: fullDate,
        };
        that.$Request
          .get(that.$config.getTicketDateInventory, params, null, null, false, true)
          .then((res) => {
            that.selected = [];
            res.data.forEach((items) => {
              const obj = {
                date: items.date,
                info: "库存:" + items.inventory,
                infoColor: "#666",
                topInfo: "",
                topInfoColor: "",
                badgeColor: "",
                disable: !items.isAvailable || items.inventory == 0, // 禁用
              };
              that.selected.push(obj);
            });
            that.$forceUpdate();
            console.log(that.selected);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    peopleNums() {
      return Number(this.ticket.usersNumber) * Number(this.ticket.num);
    },
    payResult(data) {
      console.log(data);
      if (data.payStatus == 1) {
        uni.showToast({ title: "支付成功", icon: "none" });
        this.isPayPopup = false;
        setTimeout(() => {
          uni.switchTab({ url: "/pages/order/order" });
        }, 1000);
      } else {
        uni.showToast({ title: "支付失败", icon: "none" });
      }
      //uni.showToast({title: data.detail.errMsg,icon:'none'});
    },
    //继续下单
    continueOrder() {
      this.$refs.warningPop.close();

      let that = this;
      const userInfo = uni.getStorageSync("userInfo");
      const extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {};
      let appId = extConfig.app_id;
      if (that.ticket.touristInformation == 1) {
        const httpData = {
          openid: userInfo.openid,
          appid: appId,
          mobile: userInfo.phone,
          settlementAmount: that.sumPrice,
          orderPrice: that.sumPrice,
          ticketInfo: {
            ticketId: that.ticket.id,
            ticketName: that.ticket.ticketname,
            num: that.ticket.num,
            ticketPrice: that.ticket.settlementPrice,
            date: that.ticket.date,
            visitorInfoList: [],
          },
        };
        uni.$u.http
          .post(URL.addOrder, httpData)
          .then((res) => {
            that.orderInfo = res.data;
            that.isPayPopup = true;
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        const httpData = {
          openid: userInfo.openid,
          appid: appId,
          mobile: userInfo.phone,
          settlementAmount: that.sumPrice,
          orderPrice: that.sumPrice,
          ticketInfo: {
            ticketId: that.ticket.id,
            ticketName: that.ticket.ticketname,
            num: that.ticket.num,
            ticketPrice: that.ticket.settlementPrice,
            date: that.ticket.date,
            visitorInfoList:
              that.ticket.touristInformation == 1
                ? []
                : [{ name: "田华", idCardNumber: "13062619890707166X" }],
          },
        };
        uni.$u.http
          .post(URL.addOrder, httpData)
          .then((res) => {
            that.orderInfo = res.data;
            that.isPayPopup = true;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //重复订单跳订单页面
    goOrderList() {
      uni.switchTab({ url: "/pages/order/order" });
    },
    //门票信息
    getTicketInfo(id) {
      this.$Request
        .get(
          this.$config.getScencAndTicketInfo,
          { ticketId: id, tenantId: this.tentId },
          null,
          null,
          false,
          true
        )
        .then((res) => {
          console.log(res);
          this.ticketInfos = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    parseArrTime(val) {
      return val.join("-");
    },
    parseTime(val) {
      return parseTime(val, "{y}-{m}-{d}");
    },
    chooseDate(index, date) {
      this.nowIndex = index;
      console.log(date);
      this.ticket.date = date;
    },
    //修改编辑游客信息
    finishPeople(form) {
      debugger;
      let that = this;
      this.$refs.peopleForm
        .validate()
        .then((res) => {
          debugger;
          that.baseFormData.id = that.dataList.length + 1;
          that.baseFormData.selected = false;
          this.$nextTick(() => {
            if (that.dataList.length > 0) {
              const index = that.dataList.findIndex(
                (item) => item.id == that.baseFormData.id
              );
              if (index != -1) {
                that.$set(that.dataList, index, that.baseFormData);
              } else {
                that.dataList.push(that.baseFormData);
              }
            } else {
              that.dataList.push(that.baseFormData);
            }
          });
          that.selectUserList = that.dataList;
          this.$forceUpdate();
          console.log("表单数据信息：", that.dataList);
          that.$refs.mAddPerson.close();
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
    //ocr开始
    start(e) {
      console.log(e);
    },
    end(e) {
      console.log(e);
    },
    //ocr结束
    //新增
    addPerson() {
      this.$refs.mAddPerson.open();
      this.$refs.scroll.close();

      this.titleName = "新增";
    },
    //编辑游客信息
    edit(val) {
      console.log(val);
      this.$refs.scroll.close();
      this.$refs.mAddPerson.open();
      this.titleName = "编辑";
      this.baseFormData = val;
    },
    //打开选择器
    openAddress() {
      this.$refs.scroll.open();
    },
    //选择成功
    chooseSuccess(e) {
      console.log("所选择的信息:", e);
    },
    //提示已有订单
    checkOrder() {
      // if (this.ticket.touristInformation == 2) {
      // 	if (!this.ticket.visitorInfoList || this.ticket.visitorInfoList.length < 1) {
      // 		uni.showToast({ title: '暂无游客信息', icon: 'none' });
      // 		return
      // 	}
      // }
      // if (this.ticket.touristInformation == 3) {
      // 	if (!this.ticket.visitorInfoList || this.ticket.visitorInfoList.length < Number(this.ticket.usersNumber) * Number(this.ticket.num)) {
      // 		uni.showToast({ title: '请填写全部游客信息', icon: 'none' });
      // 		return
      // 	}
      // }
      let that = this;
      const userInfo = uni.getStorageSync("userInfo");
      const extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {};
      let appId = extConfig.app_id;
      const params = {
        openid: userInfo.openid,
        appid: appId,
      };
      uni.$u.http
        .get(URL.searchWaitOrder, { params: params, custom: { load: false } })
        .then((res) => {
          console.log(res);
          if (res.data != 0) {
            this.$refs.warningPop.open();
          } else {
            if (that.ticket.touristInformation == 1) {
              const httpData = {
                openid: userInfo.openid,
                appid: appId,
                mobile: userInfo.phone,
                settlementAmount: that.sumPrice,
                orderPrice: that.sumPrice,
                ticketInfo: {
                  ticketId: that.ticket.id,
                  ticketName: that.ticket.ticketname,
                  num: that.ticket.num,
                  ticketPrice: that.ticket.settlementPrice,
                  date: that.ticket.date,
                  visitorInfoList: [],
                },
              };
              uni.$u.http
                .post(URL.addOrder, httpData)
                .then((res) => {
                  that.orderInfo = res.data;
                  that.isPayPopup = true;
                })
                .catch((err) => {
                  console.log(err);
                });
            } else {
              const httpData = {
                openid: userInfo.openid,
                appid: appId,
                mobile: userInfo.phone,
                settlementAmount: that.sumPrice,
                orderPrice: that.sumPrice,
                ticketInfo: {
                  ticketId: that.ticket.id,
                  ticketName: that.ticket.ticketname,
                  num: that.ticket.num,
                  ticketPrice: that.ticket.settlementPrice,
                  date: that.ticket.date,
                  visitorInfoList:
                    that.ticket.touristInformation == 1
                      ? []
                      : [{ name: "田华", idCardNumber: "13062619890707166X" }],
                },
              };
              uni.$u.http
                .post(URL.addOrder, httpData)
                .then((res) => {
                  that.orderInfo = res.data;
                  that.isPayPopup = true;
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 打开日历
    openCalendar() {
      this.$refs.calendar.open();
    },
    //选择日历
    calendarConfirm(e) {
      console.log(e);
      this.ticket.date = e.fullData;
    },
    //须知
    openPop(val) {
      switch (val) {
        case 1:
          this.$refs.mPurchaseNotice.open("top");
          break;
        default:
          break;
      }
    },
    //购票数量
    changeCount(val, ticket) {
      console.log(val);
      this.ticket.num = val;
      this.sumPrice = ticket.settlementPrice * val;
    },
    //选择游客
    selectUser(val) {
      let this_ = this;
      if (val.selected == false) {
        val.selected = true;
        this_.selectUserList.push(val);
      } else {
        val.selected = false;
        this_.selectUserList = this_.selectUserList.filter((user) => !user.selected);
      }
    },
    change(value) {
      this.numberValue = value;
    },
    // 日历
    getFormattedDate(offset) {
      const date = new Date();
      date.setDate(date.getDate() + offset);
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${month}-${day}`;
    },
    getFullDate(offset) {
      const date = new Date();
      date.setDate(date.getDate() + offset);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    getLabel(offset) {
      const dayIndex = (new Date().getDay() + offset) % 7;
      switch (offset) {
        case 0:
          return "今天";
        case 1:
          return "明天";
        case 2:
          return "后天";
        default:
          return `周${"日一二三四五六"[dayIndex]}`;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-content {
  background: linear-gradient(
    180deg,
    rgba(9, 131, 255, 0.8) 0%,
    rgba(9, 131, 255, 0) 100%
  );
  overflow: scroll;
  padding-bottom: 200rpx;

  .m-card {
    background: #ffffff;
    border-radius: 20rpx;
    margin: 25rpx;
    overflow: hidden;
    padding: 25rpx;
  }

  .m-card-one {
    .m-one-first-row {
      padding-bottom: 20rpx;
      border-bottom: solid 1rpx #ddd;

      .m-ticket-name {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #1b1b1b;
        margin-top: 10rpx;
        margin-bottom: 15rpx;
      }

      .m-ticket-use-time {
        display: flex;
        justify-content: start;

        .m-ticket-use-time-label {
          display: flex;
          align-items: center;
          color: #666666;

          .m-img {
            width: 25rpx;
            height: 25rpx;
            margin-right: 10rpx;
          }
        }
      }
    }

    .m-one-second-row {
      padding: 20rpx 0;
      border-bottom: solid 1rpx #ddd;

      .m-row-title {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #1b1b1b;
        margin-bottom: 20rpx;
      }

      .m-date-pick-box {
        display: flex;
        justify-content: center;
        align-items: center;

        .scroll-view1 {
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 200rpx;
          overflow-x: scroll;

          .date-item {
            flex-shrink: 0;
            width: 160rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10rpx;

            .date-box {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              background-color: #f5f5f5;
              border-radius: 12rpx;
              // padding: 20rpx;
              position: relative;
            }

            .date-box.active {
              background: #ebf5ff;
            }

            .date-box.active::after {
              content: "";
              width: 22rpx;
              height: 22rpx;
              position: absolute;
              right: 0;
              bottom: 0;
              background-color: #0983ff;
              background-image: url("/static/animg/index/duigou.png");
              background-repeat: no-repeat;
              background-size: 70%;
              background-position: center;
              border-radius: 12rpx 0rpx 12rpx 0rpx;
            }
          }
        }
      }

      .m-more-date {
        display: flex;
        margin-left: 20rpx;
        align-items: center;
        box-shadow: -6px 0px 8px 0px #e8e8e8;
        padding: 8rpx 0 8rpx 14rpx;
        border-radius: 10rpx;
      }
    }

    .m-one-third-row {
      .m-ticket-count {
        display: flex;
        width: 100%;
        justify-content: space-between;
        border-bottom: solid 1rpx #ddd;
        padding: 20rpx 0;

        .m-ticket-count-label {
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #1b1b1b;
        }

        ::v-deep .m-ticket-count-value {
          .uni-numbox-btns {
            border-radius: 50%;

            .uni-numbox--text {
              background: #ebf5ff;
              color: #0983ff !important;
            }

            .uni-numbox--disabled {
              color: #333 !important;
            }
          }

          .uni-numbox__value {
            background-color: #fff !important;
            font-size: 32rpx !important;
          }
        }
      }
    }

    .m-one-fourth-row {
      .m-ticket-count {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;

        ::v-deep .m-ticket-count-value {
          color: #0983ff;

          .uni-icons {
            color: #0983ff !important;
          }
        }
      }
    }
  }

  .m-card-two {
    .m-card-title {
      display: flex;
      padding: 10rpx 0 10rpx;
      align-items: baseline;

      .m-title {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #1b1b1b;
      }

      .m-title-tips {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #0983ff;
        margin-left: 20rpx;
      }
    }

    .m-two-first-row {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 20rpx 0;

      .m-user-list {
        padding: 20rpx 40rpx;
        border-radius: 12rpx;
        border: solid 1rpx #ddd;
        position: relative;
      }

      .m-user-list.active {
        background: #ebf5ff;
        border-radius: 12rpx;
        border: 1px solid #0983ff;
      }

      .m-user-list.active::after {
        content: "";
        width: 22rpx;
        height: 22rpx;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #0983ff;
        background-image: url("/static/animg/index/duigou.png");
        background-repeat: no-repeat;
        background-size: 70%;
        background-position: center;
        border-radius: 12rpx 0rpx 12rpx 0rpx;
      }

      .m-more-user {
        padding: 20rpx 10rpx 20rpx 20rpx;
        display: flex;
        align-items: center;
        margin-left: auto;

        .m-span {
          margin-right: 10rpx;
        }
      }
    }

    .m-two-second-row {
      .m-user-list {
        .m-user-list-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .m-list-left {
            width: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .m-img {
              width: 50rpx;
              height: 50rpx;
              margin-bottom: 5rpx;
            }

            .m-span {
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }
          }

          .m-list-middle {
            flex: 1;
            margin: 0 25rpx;

            .m-middle-user-name {
              font-size: 32rpx;
              font-weight: 500;
            }
          }

          .m-list-right {
            width: 100rpx;
            display: flex;
            justify-content: space-around;
          }
        }
      }
    }
  }

  .m-feet-box {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0 60rpx;
    background: #fff;
    bottom: 0;
    align-items: center;

    .m-feet-left {
      margin-left: 40rpx;
    }

    .m-feet-right {
      width: 200rpx;
      background-color: #fe2b54;
      border-radius: 20rpx;
      height: fit-content;
      margin-right: 40rpx;

      .m-prime-red {
        background-color: #fe2b54;
        color: #fff;
      }
    }
  }
}

.date-label,
.date-date,
.date-price {
  // margin: 5px 0;
}

.m-pop-bg {
  position: relative;

  .m-green-bg,
  .m-red-bg {
    position: absolute;
    width: 50%;
    height: 200rpx;
  }

  .m-green-bg {
    left: 0;
    top: 0;
    background: radial-gradient(circle, #00ffa4 0%, rgba(0, 255, 164, 0) 100%);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    opacity: 0.1;
  }

  .m-red-bg {
    right: 0;
    top: 0;
    background: radial-gradient(circle, #ff5500 0%, rgba(255, 85, 0, 0) 100%);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    opacity: 0.1;
  }
}

.m-purchase-notice {
  width: 100vw;
  height: 90vh;
  margin-top: 10vh;
  background-color: #f5f6f8;
  border-radius: 20rpx 20rpx 0 0;
  position: relative;
  overflow: scroll;

  .m-green-bg,
  .m-red-bg {
    position: absolute;
    width: 50%;
    height: 200rpx;
  }

  .m-green-bg {
    left: 0;
    top: 0;
    background: radial-gradient(circle, #00ffa4 0%, rgba(0, 255, 164, 0) 100%);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    opacity: 0.1;
  }

  .m-red-bg {
    right: 0;
    top: 0;
    background: radial-gradient(circle, #ff5500 0%, rgba(255, 85, 0, 0) 100%);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    opacity: 0.1;
  }

  .m-pop-title {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #000000;
    text-align: center;
    position: relative;
    margin: 35rpx 0;
  }

  .m-pop-title::after {
    content: "";
    width: 20%;
    height: 16rpx;
    background: linear-gradient(90deg, #0983ff 0%, rgba(9, 131, 255, 0) 100%);
    border-radius: 8rpx;
    opacity: 0.3;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }

  .m-contents {
    background-color: #fff;
    margin: 0 24rpx;
    border-radius: 20rpx;
    height: fit-content;
    position: relative;
    padding: 25rpx;

    .m-notice-box {
      background: linear-gradient(
        -90deg,
        rgba(9, 131, 255, 0.07) 0%,
        rgba(9, 131, 255, 0.04) 100%
      );
      border-radius: 12rpx;
      padding: 20rpx;

      .m-notice-row {
        display: flex;
        align-items: center;

        &:not(:last-child) {
          margin-bottom: 20rpx;
        }

        .m-tag {
          margin-right: 20rpx;
        }

        .m-notice-row-content {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #1b1b1b;
        }
      }
    }

    .m-notice-table {
      margin: 25rpx 0;

      .m-table-head {
        background: #f7f8fc;
        border-radius: 12rpx 12rpx 0rpx 0rpx;
        border: 1px solid #e0e5eb;
        line-height: 84rpx;
        padding: 0 25rpx;
      }

      .m-table-th {
        display: flex;
        border-bottom: 1px solid #e0e5eb;
        border-left: 1px solid #e0e5eb;
        border-right: 1px solid #e0e5eb;

        &:last-child {
          border-radius: 0 0 12rpx 12rpx;
        }

        .m-table-td {
          padding: 0 40rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          &:last-child {
            flex: 1;
            border-left: 1px solid #e0e5eb;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            align-items: flex-start;
          }

          font-family: PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #1b1b1b;
          line-height: 84rpx;

          .m-table-inside-ico {
            width: 32rpx;
            height: 32rpx;
            margin-top: 20rpx;
          }

          .m-ul {
            .m-li {
            }
          }
        }
      }
    }

    .no-border {
      .m-table-th {
        border: none !important;

        .m-table-td {
          background: #f7f8fc;
          border: none !important;
          margin-bottom: 6rpx;

          &:last-child {
            margin-left: 6rpx;
          }
        }
      }
    }
  }
}

.m-notice-popuo {
  position: relative;

  .m-notice-ico {
    width: 247rpx;
    height: 181rpx;
    margin: 0 auto;
    // background-color: #00ffa4;
    background-color: transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -30%;

    .m-img {
      width: 100%;
      height: auto;
    }
  }

  .m-notice-text {
    margin-top: 90rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #1b1b1b;
    line-height: 39rpx;
    padding: 0 20rpx;
  }

  .m-pop-feet {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin: 40rpx 0;
  }
}

.m-form-box {
  position: relative;
}
</style>
