<template>
    <div class="bg-[#F2F2F2]">
      <!-- Contact section -->
      <div class="box2">
        <div class="flex flex-wrap justify-center pb-[50px] md:pb-[50px] px-4 md:px-0">
          <div class="md:w-[50%]" style="display: flex;align-items: self-start;flex-wrap: wrap;justify-content: right;height: 800px;margin-top: 119px;">
            <img :src="images_top" class="w-[585px] h-[585px]" alt="Product Image">
            <div class="flex justify-start w-[585px] ">
                <img @click="imgsChange(item)" class="w-[102px] h-[102px] pr-[10px]" :src="item" v-for="(item,index) in info.images" :key="index">
            </div>
          </div>

          <div class="w-full md:w-[50%] px-4 md:px-[115px] pt-6 md:pt-[115px]">
            <div class="contactTit">
                <h3 class="text-[22px] md:text-[30px] font-bold mb-[20px]" style="color: #3D3D3D;">{{locale  == 'zh' ? info.title : info.en_title }}</h3>
                <div class="mb-[30px]"> {{locale  == 'zh' ? info.profile : info.en_profile }}</div>
                <a href="#contactpro">
                    <button 
                        type="submit"
                        class="contactBut flex justify-center items-center bg-[#0C4DA9]"
                        >
                        <img src="/images/zixun.png" class="w-[32px] " >
                        <span class="text-[#ffffff] text-[22px] ml-2" >{{ $t('contact_b5') }}</span>
                    </button>
                </a>
            </div>

            <div class="contactTit">
                <h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('products_details') }}</h5>
                <div class="mt-[20px]">{{locale  == 'zh' ? info.content : info.en_content }}</div>
            </div>

            <div class="contactTit" id="contactpro">
              <h5 class="text-[22px] md:text-[24px] font-bold h5s" style="color: #0C4DA9;">{{ $t('contact_b4') }}</h5>
              <form class="contactForm mt-6 md:mt-12 w-full md:w-[500px]" @submit.prevent="submitForm">
                <input 
                  v-model="formData.name"
                  class="contactInput w-full md:w-[500px]" 
                  type="text" 
                  :placeholder="$t('message_b1')"
                />
                <input 
                  v-model="formData.emil"
                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]" 
                  type="text" 
                  :placeholder="$t('message_b2')"
                />
                <input 
                  v-model="formData.mobile"
                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]" 
                  type="text" 
                  :placeholder="$t('message_b3')"
                />
                <input 
                  v-model="formData.company"
                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]" 
                  type="text" 
                  :placeholder="$t('message_b4')"
                />
                <input 
                  v-model="formData.subject"
                  class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[500px]" 
                  type="text" 
                  :placeholder="$t('message_b5')"
                />
                <div class="relative mt-4 md:mt-8 w-full md:w-[500px]">
                  <textarea 
                    v-model="formData.content"
                    id="myTextarea" 
                    :placeholder="$t('message_b6')" 
                    rows="6"
                    maxlength="100"
                    class="w-full md:w-[500px]"
                  ></textarea>
                  <div class="char-count">{{ formData.content.length }}/100</div>
                </div>
                
                <div class="flex justify-start mt-4 md:mt-6">
                  <button 
                    type="submit"
                    class="contactBut"
                  >
                    {{ $t('contact_b5') }}
                  </button>
                </div>
              </form>
              
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive ,onMounted} from 'vue'
  import { useI18n } from 'vue-i18n'
  const { locale,t} = useI18n()
  import { useStore } from '~/store'
  import $api from '@/service/webRequest'
  const store = useStore()
  const route = useRoute()
  const id = ref('')
  const images_top = ref('')
  const info = ref({})
  // 表单数据
  const formData = reactive({
    name: '',
    mobile: '',
    content: '',
    emil:'',
    subject:'',
    company:''
  })
  onMounted(() => {
    id.value = route.params.id;
    getInfo()
})

    const getInfo=()=>{
        $api.get("/api/websiteproduct/details/"+id.value)
            .then((res: any) => {
                console.log(res)
                info.value = res.data.data
                images_top.value = res.data.data.image
            })
            .catch((err) => {
                console.dir(err)
            })
    }
  // 社交分享功能
  const shareToLink = (item) => {
      // 实现Instagram分享
      window.open(item.link, '_blank');
  }
  const imgsChange = (e) => {
    images_top.value = e;
  }
  // 表单提交方法
  const submitForm = () => {
    console.log(formData);
    
    // 这里可以添加表单验证逻辑
    if (!formData.name) {
      alert(t('message_name_required'))
      return
    }
    
    if (!formData.mobile) {
      alert(t('message_phone_required'))
      return
    }
    if (!formData.content) {
      alert(t('message_message_required'))
      return
    }
    $api.post("/api/websiteproduct/leave_word",{
        name:formData.name,
        mobile:formData.mobile,
        content:formData.content,
        emil:formData.emil,
        subject:formData.subject,
        company:formData.company,
        product_id:id.value
    })
          .then((res: any) => {
              console.log(res)
        if(res.data.status==200){
          alert(t('contact_success'))
        }else{
          alert(t('contact_error'))
        }
        formData.name = '';
        formData.mobile = '';
        formData.content = '';
        formData.subject = '';
        formData.emil = '';
        formData.company = '';
          })
          .catch((err) => {
              console.dir(err)
          })
    // 重置表单
    // formData.name = ''
    // formData.mobile = ''
    // formData.content = ''
  }
  
 
  </script>
  
  <style scoped>
  /* 可以添加一些特定的样式，但大部分已经通过Tailwind实现 */
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  
  .fadeInLeft {
    animation-name: fadeInLeft;
  }
  
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  .contactTit {
      background: #ffffff;
      margin-bottom:30px;
      padding: 30px;
      border-radius: 10px;
  }
  .contactTit h5 span {
      font-weight: 400;
      font-size: 22px;
      color: #1C1C1C;
      line-height: 26px;
      text-align: left;
      margin-left: 4px;
  }
  .h5s::before {
        content:'1';
        width: 3px;
        height: 26px;
        margin-right: 10px;
        background: #0C4DA9;
  }
  @media (max-width: 768px) {
    .contactTit h3 span {
      font-size: 16px;
      line-height: 20px;
    }
  }
  .contactInput{border-radius:6px;
    border: 1px solid #BBBBBB;font-size: 24px;color: #000;height: 50px;}
  .contactInput::placeholder {color: #999999;}
  .contactInput:focus {outline: none;}
  @media (max-width: 768px) {
    .contactInput {
      font-size: 18px;
      height: 40px;
    }
  }
  #myTextarea {padding: 10px;border-radius: 6px;margin-top: 32px;border: 1px solid #BBBBBB;font-weight: 400;font-size: 24px;color: #000;line-height: 22px;resize: none; /* 禁止用户调整文本域大小 */}
  #myTextarea::placeholder {color: #999999;}
  #myTextarea:focus {outline: none;}
  @media (max-width: 768px) {
    #myTextarea {
      font-size: 16px;
      line-height: 18px;
      margin-top: 16px;
    }
  }
  .char-count {position: absolute;bottom: 5px; /* 根据需要调整距离底部的位置 */right: 10px; /* 根据需要调整距离右侧的位置 */font-size: 12px; /* 根据需要调整字体大小 */color: #999999;}
  .text-area-container {position: relative;width: 100%;}
  .contactBut{ width: 232px;
height: 54px;
border-radius: 0px 0px 0px 0px;
border: 1px solid #0C4DA9;
color: #0C4DA9;
}
  @media (max-width: 768px) {
    .contactBut {
      font-size: 18px;
      line-height: 22px;
    }
    .contactBut::after {
      width: 100px;
      height: 10px;
      margin-bottom: 20px;
    }
  }
  .contactForm{width: 100%;}
  .contactTit h8 {
      font-weight: bold;
      font-size: 24px;
      color: #175FCB;
      line-height: 28px;
      text-align: left;
  }
  @media (max-width: 768px) {
    .contactTit h8 {
      font-size: 20px;
      line-height: 24px;
    }
  }
  .contactdx8{
    width: 100%;
    margin-top: 5px;
    border-top: 2px solid #175FCB;
  }
  </style>
  