<template>

  <Head>
    <Title>{{ tdk?.tdk_title }}</Title>
    <Meta :content=tdk?.tdk_keyword name="keywords" />
    <Meta :content=tdk?.tdk_description name="description" />
    <Meta name="baidu-site-verification" content="" />
  </Head>
  <!-- <div class="top">
  </div> -->
  <Header></Header>
  <!-- <Carousel></Carousel> -->
  <ProductBanner :title='ProductBanner_title' :Subtitle="ProductBanner_Subtitle"></ProductBanner>

  <section>
    <div class="product">
      <div class="container">
        <div class="row">
          <div class="product_left col-xs-12 col-sm-12 col-md-12 col-lg-3">
            <div class="product_left_menu">
              <h2>{{ $t('home.products.type_title') }}</h2>
              <ul id="accordion" class="accordion">
                <li v-for='item in ProductTypeList_namelist'
                  :class="item.product_type_guid == detail_data.product_type_guid ? 'active' : ''">
                  <nuxt-link :to="getHerf('/product/product_list/' + item.product_type_id + '-1')" class="jump">
                    <div class="link">
                      {{ item.product_type_name }}
                    </div>
                  </nuxt-link>
                </li>
              </ul>
            </div>
          </div>


          <div class="product_max col-xs-12 col-sm-12 col-md-12 col-lg-9">
            <div class="row productbetween">

              <div class="productzoomimg col-xs-12 col-sm-12 col-md-12 col-lg-6">
                <Magnify :imgSrc='checkimg' :imgBigSrc='checkimg' :imgBigRect='imgBigRect' rate="200">
                </Magnify>
                <div class="exzoom">
                  <div class="exzoom_nav">
                    <p class="exzoom_nav_inner">
                      <span :class="count - 1 == i ? 'exzoom_span current' : 'exzoom_span'"
                        v-for="(item, i) in product_list_img" :key="i" @mouseenter="changetype">
                        <img :src="item" width="60">
                      </span>
                    </p>
                  </div>
                  <p class="exzoom_btn">
                    <a href="javascript:void(0);" class="exzoom_prev_btn" @click="exzoo_click(0)">
                      &lt;
                    </a>
                    <a href="javascript:void(0);" class="exzoom_next_btn" @click="exzoo_click(1)">
                      &gt;
                    </a>
                  </p>
                </div>
              </div>
              <div class="productnametitle col-xs-12 col-sm-12 col-md-12 col-lg-6">
                <h1>{{ detail_data.product_name }}</h1>
                <p></p>
                <span @click="concatjump"> {{ $t('home.products.detail.contact') }}</span>
              </div>
            </div>


            <div class="productmorecontent">
              <div class="productshow_title">
                <span></span>
                <h3> {{ $t('home.products.detail.description') }}</h3>
              </div>
              <div v-html="detail_data.product_details" class="detail_class">

              </div>


              <div>
                <h2 class="collapse_title">{{ $t('home.products.detail.qustion') }}</h2>
                <div class="collapse_detail">
                  <el-collapse v-model="activeNames" @change="handleChange" accordion>
                    <div class="detail_div" v-for='(item, i) in product_faq'>
                      <el-collapse-item :title="item.faq_questions" :name="i">
                        <div>{{ item.faq_answer }}</div>
                      </el-collapse-item>
                    </div>
                  </el-collapse>

                </div>
              </div>
              <div id="procontact" class="productmorecontent">
                <div class="productshow_title">
                  <span></span>
                  <h3>  {{ $t('home.products.detail.contact') }}</h3>
                </div>
                <div role="form" lang="en-US">
                  <div>

                    <div class="feedbackForm">
                      <div class="line">
                        <input type="text" v-model="form_data.leave_message_name" size="40"
                          :placeholder="$t('common.message_us.name')" />
                      </div>
                      <div class="line">
                        <input type="text" v-model="form_data.leave_message_phone" size="40"
                          :placeholder="$t('common.message_us.tel')" />
                      </div>
                      <div class="line">
                        <input type="email" v-model="form_data.leave_message_email" size="40"
                          :placeholder="$t('common.message_us.email')" />
                      </div>
                      <div class="line">
                        <textarea v-model="form_data.leave_message_info" cols="40" rows="10"
                          :placeholder="$t('common.message_us.msg')"></textarea>
                      </div>
                      <div class="messageUsForm__error ">{{ errorMsg }}</div>
                      <input class="btn" type="submit" :value="$t('common.message_us.submit')"
                        @click="form_submit" /><br />
                    </div>
                  </div>
                  <div v-show="showSuccess">{{ $t('common.message_us.success') }}</div>

                </div>
              </div>

              <div class="productmorecontent">
                <div class="productshow_title">
                  <span></span>
                  <h3>  {{ $t('home.products.detail.other') }}</h3>
                </div>
                <div>
                  <ProductInfiniteRotation :slidesPerView="slidesPerView" :bannerList="bannerList"></ProductInfiniteRotation>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>


  </section>
  <Final></Final>
  <PopupSidebar></PopupSidebar>
  <PopupMessageUs></PopupMessageUs>
  <!-- <PopupImagePreview :images="images" v-model="current"></PopupImagePreview> -->
</template>

<script setup>
let tdk = ref({})
const route = useRoute()
const router = useRouter()
// 预对接
let product_list_img = ref([])
let bannerList = ref([])
let product_faq = ref([])
const { t, locale } = useI18n()
let all_data = reactive([{
  product_type_id: 0,
  product_type_link: null,
  product_type_name: t('home.products.all'),
}])
let ProductBanner_Subtitle = ref([t('common.header.home'), t('common.header.products')])
let ProductBanner_title = ref()
let checkimg = ref('')
let count = ref(1)
let form_data = ref({
  leave_message_name: '',
  leave_message_phone: '',
  leave_message_email: '',
  leave_message_info: '',
})
let imgRect = ref({ h: 40, w: 50, l: 0 })
let imgBigRect = ref({ h: 50, w: 50, l: 51, t: 0 })
const slidesPerView = ref(3)
/**  基础变量  **/
onMounted(() => {
  createMediaList({
    480(m) {
      if (m.matches) {
        slidesPerView.value = 1
      } else {
        slidesPerView.value = 3
      }
    }
  })
  // createMediaList({
  //   1199(ctx) {
  //     if (ctx.matches) {
  //       imgRect.value = {w: 35, l: 0}
  //       console.log(ctx, 1199, true);
  //       imgBigRect.value = {h: 50, w: 50, l: 35, t: 0}
  //     } else {
  //       imgRect.value = {w: 45, l: 0}
  //       console.log(ctx, 1199, false);
  //       imgBigRect.value = {h: 50, w: 50, l: 45, t: 0}
  //     }
  //
  //   },
  //
  //   // 1399(ctx) {
  //   //   if (ctx.matches) {
  //   //     imgRect.value = {w: 45, l: 0}
  //   //     console.log(ctx, 1399, true);
  //   //     imgBigRect.value = {h: 50, w: 50, l: 48, t: 0}
  //   //   }
  //   // },
  //
  //   767(ctx) {
  //     if (ctx.matches) {
  //
  //       imgRect.value = {w: 57, l: 0}
  //       console.log(ctx, 767, true);
  //     } else {
  //       imgRect.value = {w: 75, l: 0}
  //       console.log(ctx, 767, false);
  //       imgBigRect.value = {h: 0, w: 0, l: 0, t: 0}
  //     }
  //   },
  //   991(ctx) {
  //     if (ctx.matches) {
  //
  //       imgRect.value = {w: 75, l: 0}
  //       console.log(ctx, 991, true);
  //       imgBigRect.value = {h: 0, w: 0, l: 0, t: 0}
  //     } else {
  //       imgRect.value = {w: 35, l: 0}
  //       console.log(ctx, 991, false);
  //       imgBigRect.value = {h: 0, w: 0, l: 0, t: 0}
  //     }
  //
  //   },
  // })
  /**
   * 字体自适应，当小于880的时候字体-=1，480的时候-=1
   * */
  fontSizeReactive({
    880: 1,
    480: 1,
  })
})
const changetype = function () {
  let element = document.getElementsByClassName('exzoom_span')
  console.log(element, '@@@@@')
  for (let i = 0; i < element.length; i++) {
    element[i].addEventListener('mouseenter', function () {
      for (let s = 0; s < element.length; s++) {
        element[s].classList.remove('current')

      }
      element[i].classList.add('current')
      count.value = i + 1;
      checkimg.value = product_list_img.value[count.value - 1]
    });
  }

}
let queryParams = ({
  product_id: parseInt(route.params.id),
  locale: locale.value
})
let localeParams = ({
  // product_type_id: 0,

  locale: locale.value

})
let detail_data = ref('')
// const getProductInfo = function () {
  useFetch('/api/product/getProductInfo', { params: queryParams }).then(res => {
    detail_data.value = JSON.parse(res.data.value).data
    product_list_img.value = detail_data.value.product_img.split(',')
    checkimg.value = product_list_img.value[0]
    // let name=ProductTypeList_namelist.value.filter(f=>f.product_type_guid==detail_data.value.product_type_guid)
    ProductBanner_title.value = detail_data.value.product_name
  })
// }
let ProductTypeList = ref([])
let ProductTypeList_namelist = ref([])
useFetch('/api/product/getProductTypeTree', { params: localeParams }).then(res => {
  ProductTypeList.value = JSON.parse(res.data.value).data || []
  // ProductTypeList_namelist.value = ProductTypeList.value[0].children
  ProductTypeList_namelist.value = [...all_data, ...ProductTypeList.value]
  // console.log(ProductTypeList_namelist.value);
  // getProductInfo()

})
useFetch('/api/faq/getFaqList', { params: { locale: locale.value } }).then(res => {
  product_faq.value = JSON.parse(res.data.value).data || []
})

useFetch('/api/product/getProductList', { params: { locale: locale.value, product_type_id: 0 } }).then(res => {
  console.log(JSON.parse(res.data.value));
  JSON.parse(res.data.value).data.forEach(element => {
    element.product_img = element.product_img.split(",")[0];
    bannerList.value.push({
      banner_img: element.product_img,
      text: element.product_name,
      id: element.product_id,
      src: element.product_link || '/product/details/' + element.product_id
    })
  });
  console.log(bannerList.value, '@@@bannerList');

})


const concatjump = function () {
  var specificPosition = document.getElementById('procontact').offsetTop;
  // 滚动到该位置
  window.scrollTo({
    top: specificPosition,
    behavior: 'smooth' // 平滑滚动效果
  });
}
const exzoo_click = function (val) {

  if (val == 1) {

    if (count.value == product_list_img.value.length) {
      count.value = 1
      checkimg.value = product_list_img.value[count.value - 1]
    } else {
      // console.log(checkimg.value);
      count.value++
      checkimg.value = product_list_img.value[count.value - 1]
    }
  } else {

    if (count.value <= 1) {
      count.value = product_list_img.value.length
      checkimg.value = product_list_img.value[count.value - 1]
    } else {
      count.value--
      checkimg.value = product_list_img.value[count.value - 1]
    }
  }
  console.log(checkimg.value);
}
const activeNames = ref(['1'])
const handleChange = (val) => {
  console.log(val)
}

const errorMsg = ref("");
const showSuccess = ref(false)

const form_submit = function () {
  const phoneRegex = /^[+\- ()0-9]*$/;
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

  let { leave_message_name, leave_message_phone, leave_message_email, leave_message_info } = form_data.value

  if (!leave_message_name.trim()) {
    errorMsg.value = t('common.message_us.name_error')
    return
  }
  if (!leave_message_phone.trim() || !phoneRegex.test(leave_message_phone)) {
    errorMsg.value = t('common.message_us.tel_error')
    return
  }
  if (!leave_message_email.trim() || !emailRegex.test(leave_message_email)) {
    errorMsg.value = t('common.message_us.email_error')
    return
  }
  if (!leave_message_info.trim()) {
    errorMsg.value = t('common.message_us.msg_error')
    return
  }

  useFetch('/api/msg/addLeaveMessage', { params: form_data.value }).then(res => {

    console.log(JSON.parse(res.data.value));
    if (JSON.parse(res.data.value).code == 0) {
      errorMsg.value = ""
      showSuccess.value = true
      setTimeout(() => {
        showSuccess.value = false
      }, 3000)
      form_data.value = ({
        leave_message_name: '',
        leave_message_phone: '',
        leave_message_email: '',
        leave_message_info: '',
      })
    } else {
      ElMessage.error(t('home.products.detail.error'))
    }
  })

}

useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
  tdk.value = JSON.parse(res.data.value).data
})

</script>

<style scoped src="~/assets/css/ProductList/Detail/index.scss"></style>
<style scoped src="~/assets/css/ProductList/Detail/media.scss"></style>
<style scoped src="~/assets/css/index/font/iconfont.css"></style>
<style scoped src="~/assets/css/index/font2/iconfont.css"></style>

<style scoped>
.productmorecontent {
  margin-top: 60px;
}

.productmorecontent h3 {
  font-size: 36px;
  color: #A72027;
  font-weight: bold;
  padding-left: 20px;
  border-left: 4px solid #A72027;
  margin-bottom: 30px;
}

.productmorecontent p {
  font-size: 16px;
  color: #000;
  line-height: 30px;
}

.productmorecontent img {
  width: 100%;
  /* vertical-align: middle; */
  display: block;
}

.productmorecontent tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

.productmorecontent tbody tr:nth-child(even) {
  background-color: #ffffff;
}
</style>