<template>
  <div class="container">
    <custom-title   class="title-block" :title="info.ticketName">
    </custom-title>
    <div class="main">
      <div class="content1">
        <div class="wrap1">
          <image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/47742fc2-6608-48da-b2f8-b47b36eaffbb.png"></image>
        </div>
        <div class="wrap2">
          {{info.ticketName}}
        </div>
      </div>
      <div class="content2">
        <image :src="info.ticketImage"></image>
      </div>
      <div class="content3"  >
        <display-box :styleColor="{backgroundColor: '#B1292E'}">
          <template #l1 >
            <div class="box-left">
              门票名称
            </div>
          </template>
          <template #r1 >
            <div class="box-right">
              门票名称
            </div>
          </template>
          <template #l2 >
            <div class="box-left">
              剩余数量
            </div>
          </template>
          <template #r2 >
            <div class="box-right">
              1023/20000
            </div>
          </template>
        </display-box>
      </div>
      <div class="content4"></div>
      <div class="content5">
        <display-box>
          <template #l1 >
            <div  class="box-left">
              预留手机号 <span style="font-size: 18rpx">(+86)</span>
            </div>
          </template>
          <template #r1 >
            <div>
              <input type="text" placeholder="填写手机号" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
            </div>
          </template>
          <template #l2 >
            <div class="box-left">
              验证码
            </div>
          </template>
          <template #r2 >
            <div  style="position: relative;width: 100%">
              <div >
                <input type="text" placeholder="填写验证码" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
              </div>

              <div style="position: absolute;top: 50%;transform: translateY(-50%);right: 12rpx;color: #B1292E;font-size: 24rpx">获取验证码</div>
            </div>
          </template>
        </display-box>
      </div>
      <div class="content6">
        <display-box>
          <template #l1>
            <div  class="box-left">
             选择时间
            </div>
          </template>
          <template #r1 >
            <div class="r1">
              <div class="r1_1">2023年12月16日</div>
              <div class="r1_2" @click="showWin=true">
                <image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2c4872f9-aee5-4b04-9494-94b08c282ed9.png"></image>
              </div>
            </div>
          </template>
          <template #l2 >
            <div class="box-left">
              选择人数
            </div>
          </template>
          <template #r2 >
            <div class="r2">
              <div class="r2_1" >
                *单次最多可预约10人
              </div>
             <div class="r2_2">
                <div class="r2_2_1">
                  <image src="../../static/zu1149@3x.png"></image>
                </div>
               <div class="r2_2_2">
                 <input type="text">
               </div>
               <div class="r2_2_3">
                 <image src="../../static/zu1150@3x.png"></image>
               </div>
             </div>
            </div>
          </template>
        </display-box>
      </div>
      <div class="content7">
        *请填写所有参观人的身份证信息
      </div>
      <div class="content8">
        <div class="wrap1">  <display-box>
          <template #l1>
            <div class="box-left">
              真实姓名
            </div>
          </template>
          <template #r1>
            <div class="box-right">
              <input type="text"  placeholder="请填写您的真实姓名" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
            </div>
          </template>
          <template #l2>
            <div class="box-left">
              身份证号码
            </div>
          </template>
          <template #r2>
            <div class="box-right">
              <input type="text"  placeholder="填写您的身份证号码" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
            </div>
          </template>
        </display-box></div>
      </div>
      <div class="content9">
        <div class="wrap1">*预约后信息不可更改，请仔细核对预约信息</div>
        <div class="wrap2">预约</div>
      </div>
        <tm-drawer :height="1054" :round="8" hideHeader inContent ref="calendarView" :placement="'bottom'" v-model:show="showWin">
          <div class="content10" >
            <div class="wrap1">
              <image src="../../static/Close@3x.png"></image>
            </div>
            <div class="wrap2">
              请选择参观日期
            </div>
            <div class="wrap3"></div>
            <div class="wrap4">
              当前年月：2023年12月
            </div>
            <div class="wrap3"></div>
            <div class="wrap5">
              <div class="wrap5_1">
                <div class="wrap5_1_1">
                  12月02日·周六
                </div>
                <div class="wrap5_1_2">
                  *不可预约
                </div>
              </div>
              <div class="wrap5_2">
                <div class="wrap5_2_1">
                  12月03日·周日
                </div>
                <div class="wrap5_2_2">
                  *可预约
                </div>
                <div class="wrap5_2_3">
                  今日
                </div>
              </div>
              <div class="wrap5_3">
                <div class="wrap5_3_1">
                  12月04日·周一
                </div>
                <div class="wrap5_3_2">
                  *可预约
                </div>
                <div class="wrap5_3_3">
                  明日
                </div>
              </div>
              <div class="wrap5_4">
                <div class="wrap5_4_1">更多</div>
                <div class="wrap5_4_2">
                  <image src="../../static/lj781@3x.png"></image>
                </div>
              </div>
            </div>
            <div class="wrap3"></div>
            <div class="wrap6">
              请选择参观时间
            </div>
            <div class="wrap7">
              <div class="wrap7_1">
                <div class="wrap7_1_1">08:00入场</div>
                <div class="wrap7_1_2">*不可选</div>
              </div>
              <div class="wrap7_2">
                <div class="wrap7_2_1">10:00入场</div>
                <div class="wrap7_2_2">*可选</div>
              </div>
              <div class="wrap7_3">
                <div class="wrap7_3_1">12:00入场</div>
                <div class="wrap7_3_2">*可选</div>
              </div>
              <div class="wrap7_2">
                <div class="wrap7_2_1">10:00入场</div>
                <div class="wrap7_2_2">*可选</div>
              </div>
            </div>
            <div class="wrap3"></div>
            <div class="wrap8">
              *参观当日需要携带游客本人身份证件<br/>
              *入馆时间：<br/>
              工作日08:30-18:00、节假日/双休09:00-20:00（具体时间以景区为准）<br/>
            </div>
            <div class="wrap3" style="margin-bottom: 30rpx"></div>
            <div class="wrap9">确定</div>
          </div>
        </tm-drawer>
    </div>
  </div>
</template>

<script setup>
import displayBox from '@/components/display-box/index.vue'
import {useMainStore} from "@/store"
import {ref} from 'vue'
const showWin=ref(true)
const store=useMainStore()
const info=ref(uni.getStorageSync('currentBooking'))
const rpxToPx=(rpx)=>{
  const systemInfo = uni.getSystemInfoSync();
  const screenWidth = systemInfo.windowWidth;
  return rpx * screenWidth / 750;
}
</script>

<style lang="scss" scoped>
.content10{
  position: relative;
  padding: 64rpx 24rpx 108rpx 24rpx;
  .wrap9{
    margin: 0 auto;

    width: 436rpx;
    height: 60rpx;
    background-color: #000;
    color: #fff;
    font-size: 28rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrap8{
    margin-bottom: 24rpx;
    margin-top: 18rpx;
    font-size: 20rpx;
    color:#B29E92 ;
  }
  .wrap7{
    margin-bottom: 70rpx;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    .wrap7_3{
      box-sizing: border-box;
      border-radius: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 152rpx;
      height: 98rpx;
      background-color: #F7963B;
      .wrap7_3_2{
        font-size: 16rpx;
        color: #fff;
      }
      .wrap7_3_1{
        margin-bottom: 2rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
    .wrap7_2{
      border: 2rpx solid #F7963B;
      box-sizing: border-box;
      border-radius: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 152rpx;
      height: 98rpx;
      background-color: #fff;
      .wrap7_2_2{
        font-size: 16rpx;
        color: #B29E92;
      }
      .wrap7_2_1{
        margin-bottom: 2rpx;
        color: #000;
        font-size: 24rpx;
      }
    }
    .wrap7_1{
      border-radius: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 152rpx;
      height: 98rpx;
      background-color: #D8D8D8;
      .wrap7_1_2{
        font-size: 16rpx;
        color: #868686;
      }
      .wrap7_1_1{
        margin-bottom: 2rpx;
        color: #000;
        font-size: 24rpx;
      }
    }
  }
  .wrap6{
    margin-top: 38rpx;
      font-size: 32rpx;
    color: #000;

  }
  .wrap5{
    margin-bottom: 72rpx;
    margin-top: 54rpx;
    display: flex;
    justify-content: space-between;
    .wrap5_4{
      width: 60rpx;
      height: 98rpx;
      border-radius: 30rpx;
      background-color: #F7963B;
      display: flex;
      align-items: center;
      justify-content: center;
      .wrap5_4_1{
        margin-right: 8rpx;
        font-size: 20rpx;
        color: #fff;

        writing-mode: vertical-rl;
      }
      .wrap5_4_2{

        image{
          width: 11.77rpx;
          height: 25.53rpx;

        }
      }
    }
    .wrap5_3{
      position: relative;
      width: 196rpx;
      height: 98rpx;
      background-color: #F7963B;
      border-radius: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .wrap5_3_3{
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        bottom: -40rpx;
        font-size: 24rpx;
        color: #F7963B;
      }
      .wrap5_3_2{
        color: #fff;
        font-size: 16rpx;
      }
      .wrap5_3_1{
        margin-bottom: 10rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
    .wrap5_2{
      border: 2rpx solid #F7963B;
      box-sizing: border-box;
      width: 196rpx;
      height: 98rpx;
      background-color: #fff;
      border-radius: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      .wrap5_2_3{
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        bottom: -40rpx;
        font-size: 24rpx;
        color: #F7963B;
      }
      .wrap5_2_2{
        color: #B29E92;
        font-size: 16rpx;
      }
      .wrap5_2_1{
        margin-bottom: 10rpx;
        color: #000;
        font-size: 24rpx;
      }
    }
    .wrap5_1{
      width: 196rpx;
      height: 98rpx;
      background-color: #D8D8D8;
      border-radius: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .wrap5_1_2{
        color: #868686;
        font-size: 16rpx;
      }
      .wrap5_1_1{
        margin-bottom: 10rpx;
        color: #000;
        font-size: 24rpx;
      }
    }
  }
  .wrap4{
    margin-bottom: 24rpx;
    margin-top: 16rpx;
    font-size: 24rpx;
    color:#F7963B;
  }
  .wrap3{
    background-color: #868686;
    height: 1rpx;

    width: 100%;
  }
  .wrap2{
    margin-bottom: 44rpx;
    font-weight: bold;
    color: #000;
    font-size: 32rpx;
  }
  .wrap1{
    top: 52rpx;
    right: 46rpx;
    position: absolute;
    width: 48rpx;
    height: 48rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
}
.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  .main{
    overflow-y: auto;
    box-sizing: border-box;
    padding: 32rpx 42rpx 0 42rpx;
    width: 100vw;
    flex: 1;
    background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
    background-size: 100%;

    .content9{
      margin-bottom: 78rpx;
      margin-top: 80rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .wrap2{
        margin-top: 14rpx;
        font-size: 28rpx;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000;
        border-radius: 30rpx;
        width: 436rpx;
        height: 60rpx;
      }
      .wrap1{
        color: #B1292E;
        font-size: 16rpx;
      }
    }
    .content8{
      margin-top: 12rpx;
      .wrap1{
        .box-left{
          color: #000;
          font-size: 24rpx;
        }
      }
    }
    .content7{
      color: #F7963B;
      margin-top: 20rpx;
      font-size: 24rpx;
    }
    .content6{
      margin-top:24rpx;
      .r2{
        position: relative;
        .r2_2{
          position: absolute;
          top: 50%;
          transform: translateY(-45%);
          right: 0;
          display: flex;
          align-items: center;
          .r2_2_3{
            width: 31rpx;
            height: 31rpx;
            image{
              height: 100%;
              width: 100%;
            }
          }
          .r2_2_1{
            width: 31rpx;
            height: 31rpx;
            margin-right: 10rpx;
            image{
              height: 100%;
              width: 100%;
            }
          }
          .r2_2_2{
            margin-right: 10rpx;
            input{
        text-align: center;
              color: #000;
              font-size: 24rpx;
              width: 114rpx;
              height: 54rpx;
              background-color: #EFEFEF;
            }

          }
        }
        .r2_1{
          color: #B29E92;
          font-size: 16rpx;
        }
      }
      .r1{
        position: relative;
        .r1_2{
          top: 50%;
          position: absolute;
          transform: translateY(-50%);
          right: 12rpx;
          image{
            width: 64rpx;
            height: 32rpx;
          }
        }
      }
      .box-left{
        display: flex;
        align-items: center;
        color: #000;
        font-size: 24rpx;
      }
    }
    .content5{
      margin-top:40rpx ;
      .r2{
        position: relative;

        .r2_2{
          right: 42rpx;
          top: 50%;
          transform: translateY(-10%);
          position: absolute;
          color:#B1292E ;
          font-size: 24rpx;
        }

      }
      .box-left{
        color: #000;
        font-size: 24rpx;
      }
    }
    .content4 {
      margin-top: 30rpx;
      height: 1rpx;
      width: 100%;
      background-image: url("../../static/zx303@3x.png");
      background-size: 100%;
    }
    .content3{
      margin-top: 20rpx;
      .box-right{
        color: #fff;
        font-size: 24rpx;
      }
      .box-left{
        color: #fff;
        font-size: 24rpx;
      }
    }
    .content2{
      margin-top: 12rpx;
border-radius: 20rpx;
      overflow: hidden;

      image{
        width: 664rpx;
        height: 354rpx;
      }
    }
    .content1{
      box-sizing: border-box;
      background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/20a57e10-8b08-4694-b083-d09e345a58a4.png");
      width: 100%;
      height: 60rpx;
      background-size: 100%;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      .wrap2{
        font-size: 32rpx;
        color: #fff;
      }
      .wrap1{
        margin-right: 10rpx;
        image{
          width: 21.18rpx;
          height: 29rpx;
        }
      }
    }
  }
}
/*.top{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  overflow-y: auto;
    flex-grow: 1;
    width: 100%;
    background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
    background-size: 100%;
    padding: 0 32rpx 38rpx 32rpx;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 32rpx;
        box-sizing: border-box;
        overflow-y: auto;

        .title {
            width: 100%;
            background: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/f4eff459-319c-4588-8efe-8638b5c66a4f.png") no-repeat;
            background-size: cover;
            height: 60rpx;
            display: flex;
            align-items: center;
            padding: 10rpx 20rpx;
            box-sizing: border-box;
            color: #fff;
        }

        .card {
            margin-top: 20rpx;
            width: 100%;
            height: 190rpx;
            background-color: #fff;
            border-radius: 24rpx;
            padding: 32rpx;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            color: black;

            .card-item {
                display: flex;
                align-items: center;
            }

            .name {
                width: 200rpx;
                border-right: 1rpx solid #BBC5E0;
            }

        }

        .title-detail {
            margin-top: 20rpx;
            width: 100%;
            height: 190rpx;
            background-color: #B1292E;
            border-radius: 24rpx;
            padding: 32rpx;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;

            .item {
                display: flex;
                color: #fff;
                align-items: center;
                font-size: 28rpx;

                .name {
                    width: 200rpx;
                    border-right: 1rpx solid #fff;
                }

                .code {
                    flex: 1;
                    margin-left: 20rpx;
                    color: #000000;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .inputCode {
                        width: 250rpx;
                    }
                }

                .stepper {
                    flex: 1;
                    margin-left: 20rpx;
                    color: #000000;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .time {
                    flex: 1;
                    width: 100%;
                    display: flex;
                    margin-left: 20rpx;
                    color: #000000;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }

        .line {
            margin: 30rpx 0;
            width: 100%;
            border-bottom: 1rpx #BBC5E0 dashed;
        }
    }

    :deep(.stepper--flex) {
        width: 130rpx !important;
    }

}*/
</style>