<template>
  <div>
    <div class="box" @scroll="handleScroll">
      <el-breadcrumb class="mt20 forPc" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled />
          </el-icon>
          首页
        </el-breadcrumb-item>
        <!--        <el-breadcrumb-item :to="{ name: 'vip' }">会员之家</el-breadcrumb-item>-->
        <el-breadcrumb-item @click="changeType(0)"><a class="pointer">会员权益</a></el-breadcrumb-item>
        <el-breadcrumb-item v-if="type==1">广汽传祺</el-breadcrumb-item>
        <el-breadcrumb-item v-if="type==2">广汽昊铂</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card class="mt20 mb20" :body-style="{padding:'30px'}" v-if="type==0">
        <el-row align="middle" justify="center" :gutter="30">
          <el-col :lg="12" :sm="24" @click="changeType(2)">
            <img class="ctu" src="@/assets/img/hb.png"/>
          </el-col>
          <el-col :lg="12" :sm="24" @click="changeType(1)">
            <img class="ctu" src="@/assets/img/cq.png"/>
          </el-col>
        </el-row>
      </el-card>


      <el-row :gutter="30" v-if="type!=0">
        <el-col :lg="16" :sm="24">
          <el-card class="mt20 mb20" :body-style="{padding:'30px'}">
            <h3 class="text-center ">
              {{ type==1?detail.name:detail2.name }}</h3>
            <div class="nInfo">
              <span>{{ detail.belongTime }}</span> |
              <span v-if="detail.author">责任编辑：{{ detail.author }}</span>
            </div>
            <el-divider />
            <img class="tutu" src="@/assets/img/tu.jpg" v-if="type==1">
            <img class="tutu" src="@/assets/img/tu2.jpg" v-if="type==2">
          </el-card>
        </el-col>
        <el-col :lg="8" :sm="24" style="padding-top: 20px">
          <el-card class="mb20" :body-style="{background:'#F4F6F9'}">
            <h3 ref="formA" class="text-center">预约登记</h3>
            <el-form label-width="110" size="large">
              <el-form-item label="客户类型" required>
                <el-radio-group v-model="form.type">
                  <el-radio label="单位用户">单位用户</el-radio>
                  <el-radio label="个人会员">个人会员</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="关注车型" required>
                <el-select v-model="carType" multiple placeholder="请选择关注车型" style="width: 100%;">
                  <el-option v-for="(item,index) in type==1?carTypeList:carTypeList2" :key="index" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
              <el-form-item label="联系人姓名" required>
                <el-input v-model="form.name" placeholder="请输入姓名" clearable />
              </el-form-item>
              <el-form-item label="联系人电话" required>
                <el-input v-model="form.telNo" placeholder="请输入手机号码" clearable />
              </el-form-item>
              <el-form-item label="所在省市区" required>
                <el-cascader
                  v-model="regionIdArr"
                  style="width: 100%;"
                  :options="regionList" :props="{ label:'text' }"
                  placeholder="请选择省市区"
                />
              </el-form-item>

              <el-form-item label="会员信息" required>
                <el-input v-model="form.code" placeholder="请输入证件号/会员编号" />
              </el-form-item>
              <!--              <div class="pline">-->
              <!--                <el-checkbox v-model="isAgree"/>-->
              <!--                同意<a class="text-danger" @click="showPrivacy">《隐私政策》</a>-->
              <!--              </div>-->
              <div class="text-center">
                <el-button type="primary" round size="large" class="mt20 submitBtn" @click="submit">提交登记</el-button>
              </div>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <div class="forWei" style="height: 80px;" />
    </div>

    <div v-if="showBtn" class="fixed-b-Bar text-center forWei">
      <img src="@/assets/img/btn.png" @click="scrollToAnchor(formA)">
    </div>

    <el-dialog v-model="dialogVisible" title="隐私政策" max-width="100%" width="500">
      <div>
        This is a message
      </div>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button type="primary" round @click="agree">
            我已阅读并同意相关隐私政策
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { chuangQi, getRegionsList } from '@/apiPc/common'
import _ from 'lodash'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const detail = ref({
  name: '中国跆拳道协会一图读懂会员权益——广汽传祺权益',
  belongTime: '2024-11-21',
  author: '王意'
})
const detail2 = ref({
  name: '中国跆拳道协会一图读懂会员权益——广汽昊铂权益',
  belongTime: '2024-11-21',
  author: '王意'
})
const form = ref({})
const type = ref(0)

const carTypeList = ref([
  { name: '传祺向往M8乾崑' },
  { name: '传祺向往S7' },
  { name: '传祺ES9' },
  { name: '传祺E8+' },
  { name: '传祺新能源E9' },
  { name: '传祺新能源ES9' },
  { name: '传祺 M6' },
  { name: '传祺 M8' },
  { name: '传祺 GS8' },
  { name: '传祺GS3影速' },
  { name: '传祺 影豹' }
])
const carTypeList2 = ref([
  { name: '昊铂SSR' },
  { name: '昊铂GT' },
  { name: '昊铂HT' },
  { name: '昊铂HL' }
])
const formA = ref(null)
const regionList = ref([])
const regionIdArr = ref([])
const carType = ref([])
const isAgree = ref(true)
const dialogVisible = ref(false)
const showBtn = ref(true)

watch(() => route.query.type, (val) => {
  type.value = val || 0
})
onMounted(() => {
  type.value = route.query.type || 0
  getRegion()
})
const changeType = (n) => {
  reset()
  type.value = n
  router.push({
    path: '/CQ/index',
    query: {
      type: n
    }
  })
}
const getRegion = () => {
  getRegionsList().then(res => {
    regionList.value = res.data
  })
}
const showPrivacy = () => {
  dialogVisible.value = true
}
const scrollToAnchor = (val) => {
  if (val) {
    val.scrollIntoView({ behavior: 'smooth' })
  }
}
const agree = () => {
  dialogVisible.value = false
  isAgree.value = true
}
const handleScroll = (event) => {
  const container = event.target
  // if (container.scrollHeight - container.scrollTop === container.clientHeight) {
  if (container.scrollTop > 1200) {
    showBtn.value = false
  } else {
    showBtn.value = true
  }
}
const submit = () => {
  if (!form.value.name) {
    return ElMessage.error('请输入姓名')
  }
  if (!form.value.telNo) {
    return ElMessage.error('请输入手机号码')
  }
  // 验证手机号格式
  var pattern = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
  if (!pattern.test(form.value.telNo)) {
    return ElMessage.error('请输入正确的手机号')
  }
  if (regionIdArr.value.length == 0) {
    return ElMessage.error('请选择所在省市区')
  }
  if (carType.value.length == 0) {
    return ElMessage.error('请选择关注车型')
  }
  // if (!isAgree.value) {
  //   return ElMessageBox.confirm('我已阅读并同意相关隐私政策', '提示', {
  //     confirmButtonText: '确定',
  //     cancelButtonText: '取消'
  //   }).then(() => {
  //     isAgree.value = true
  //   })
  // }
  // 会员编号
  if (!form.value.code) {
    return ElMessage.error('请输入会员编号')
  }
  form.value.focusCar = carType.value.join(',')
  form.value.provinceId = regionIdArr.value[0]
  form.value.cityId = regionIdArr.value[1]
  form.value.areaId = regionIdArr.value[2]

  // 提交请求
  console.log(form.value)
  chuangQi(form.value).then(res => {
    ElMessageBox.confirm(res.msg, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(() => {
      // 提交成功，清空表单
    })
    reset()
  })
}
const reset = () => {
  form.value = {}
  regionIdArr.value = []
  carType.value = []
}
</script>

<style scoped lang="scss">
.box {
  overflow-y: auto;
}

.tutu {
  max-width: 100%;
  margin: auto;
}

.nInfo {
  text-align: center;
  font-size: 14px;
  color: #929AA0;

  span {
    margin: 0 10px;
  }
}

.pline {
  padding-left: 80px;
  font-size: 14px;
  color: #8F8E94;
  display: flex;
  align-items: center;
  gap: 10px;

  a {
    color: #AD181F;
  }
}

.submitBtn {
  font-size: 20px;
  color: #FFFFFF;
  max-width: 188px;
  width: 100%;
}

.forWei {
  display: none;
  opacity: 0;
}
.pointer{cursor: pointer;}
.ctu{    max-width: 100%;cursor: pointer;
  display: block;
  margin: auto;}
@media screen and (max-width: 600px) {
  .box {
    width: 96%;
    height: 100vh;
  }
  :deep(.el-card__body) {
    padding: 10px !important;
  }
  .forWei {
    display: block;
    opacity: 1;
  }
  .forPc {
    display: none;
  }
  @keyframes pop {
    0% {scale: 1}
    10% {scale: 0.9}
    15% {scale: 1}
    20% {scale: 0.9}
    25% {scale: 1}
    100% {scale: 1}
  }
  .fixed-b-Bar {
    padding: 15px 0;
    box-sizing: border-box;

    img {animation: pop infinite 4s;
      height: 50px;
      margin: auto;
    }
  }
}
</style>