{extend name="public/base" /}
{block name="title"}
{notempty name="product.seo_title"}<title>{$product.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{/block}
{block name="seo"}
{notempty name="product.seo_keywords"}
<meta name="keywords" content="{$product.seo_keywords}" />
<meta name="description" content="{$product.seo_desc}" />
{else/}
{__BLOCK__}
{/notempty}
{/block}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__CSS__/product_detail.css" />
{/block}
{block name="main"}
<div class="orico_Page_prdetail">
  <!--产品详情内容 -->
  <div class="oriprdetail">
    <!--产品路径-->
    <div class="product_address">
      <a class="pathname" href="/">首页</a>
      {volist name="product_categorys" id="ca"}
      <div class="arrow"></div>
      <a class="pathname" href="{:url('product/category', ['id' => $ca.id])}">{$ca.name}</a>
      {/volist}
    </div>
    <!-- 产品主图切换和参数详情-->
    <div class="cp">
      <!--左边图片 -->
					<div class="cpfl">
						<div class="preview">
							<div class="smallImg">
								<div class="scrollbutton smallImgUp disabled"></div>
								<div id="imageMenu">
									<ul id="image_list">
										<li id="onlickImg" class="on">
											<img src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-2.jpg">
										</li>
										<li class=""> <img
												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-PNG.png">
										</li>
										<li class=""> <img
												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-SIZE.jpg">
										</li>
										<li class=""> <img
												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-1.jpg">
										</li>
										<li class=""> <img
												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-2.jpg">
										</li>
										<li class=""> <img
												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-3.jpg">
										</li>
										<li class=""> <img
												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-5.jpg">
										</li>
										<li class=""> <img
												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-6.jpg">
										</li>
										<li class=""> <img
												src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35u3&amp;c3-800-4.png">
										</li>
									</ul>
								</div>
								<div class="scrollbutton smallImgDown"></div>
							</div><!--smallImg end-->
							<div id="vertical" class="bigImg">
								<img src="https://www.orico.com.cn/uploads/product/DD35-C3/DD35-C3-SIZE.jpg"
									id="midimg">
							</div><!--bigImg end-->
						</div>
					</div>

      <!-- 右边产品详情 -->
      <div class="cprh">
        <div class="cpcon">
          <p class="ctit1">{$product.name|default=''}</p>
          <p>{$product.desc|default=''}</p>
          <div class="proTfg">
            <ul class="swt-Table">
              {volist name="product_params" id="pp"}
              <li class="Table-Row">
                <div class="ms3 Table-Cell">{$pp.name}</div>
                <div class="ms2 Table-Cell"></div>
                <div class="ms4 Table-Cell">{$pp.value}</div>
              </li>
              {/volist}
            </ul>
          </div>
          <!-- 颜色-->
          {volist name="product_sku_attrs" id="ps"}
          <div class="prcolors">
            <div class="dt">{$ps.attr_name}</div>
            <ul class="dowebok">
              {volist name="ps.attr_values" id="pv" key="k"}
              {assign name="attr_value_type" value=":rgb_or_image($pv.attr_value)" /}
              <a {eq name='k' value='1' }class="on" {/eq} data-sku_id="{$pv.sku_id}">
                {eq name="attr_value_type" value="IMAGE"}
                <span class="itemcolor"><img src="{$pv.attr_value}" /></span>
                {elseif condition="$attr_value_type == 'RGB'" /}
                <span class="itemcolor" {:style(['background-color'=>$pv.attr_value])}></span>
                {else /}
                <span>{$pv.attr_value}</span>
                {/eq}
              </a>
              {/volist}
            </ul>
          </div>
          {/volist}
        </div>
        <!-- 按钮-->
        <div class="buy">
          {volist name="product_purchase_links" id="ppp"}
          <a class="thebt bttype1" href="{$ppp.link}">{$ppp.platform_name}</a>
          {/volist}
          <a class="thebt bttype3" id="open_form_modal">{:lang('product_detail.display_form')}</a>
        </div>
      </div>
    </div>
    <!-- 产品介绍详情-->
    <div class="oriprInfo">
      <div class="titleprinfo">
        <a href="#detail">{:lang('product_detail.detail_section_title')}</a>
        <span>|</span>
        <a href="#related">{:lang('product_detail.related_products')}</a>
      </div>
      <!-- 富文本渲染-->
      <div class="products_des" id="detail">
        {$product.detail|default=''|raw}
      </div>
    </div>
    <!-- 相关产品 -->
    {notempty name="product_related"}
    <div id="related">
      <p>{:lang('product_detail.related_products')}</p>
      <div>
        <ul>
          {volist name="product_related" id="related"}
          <li>
            <a href="{:url('product/detail', ['id' => $related.id])}">
              <img src="{$related.cover_img}" alt="{$related.name}" />
              <p>{$related.name}</p>
              <p>{$related.spu}</p>
            </a>
          </li>
          {/volist}
        </ul>
      </div>
    </div>
    {/notempty}
    <!-- 弹框-->
    <div id="form_modal" class="XJmodal">
      <div class="XJmodal-content">
        <span class="close">&times;</span>
        <h2>{:lang('product_detail.display_form')}</h2>
        <form action="" method="post" autocomplete="off">
          <div class="tkitem">
            <div class="form-group">
              <label for="firstName">
                <strong style="color: red; margin-right: 0.3125rem;"> * </strong>
                {:lang('product_detail.form_name')}</label>
              <div>
                <input type="text" name="first_name" id="firstName"
                  placeholder="{:lang('product_detail.form_first_name_placeholder')}" class="detail-w">
                <input type="text" name="last_name" id="lastName"
                  placeholder="{:lang('product_detail.form_last_name_placeholder')}" class="detail-w">
              </div>
            </div>
            <div class="form-group">
              <label for="corp">
                <strong style="color: red; margin-right: 0.3125rem;"> * </strong>
                {:lang('product_detail.form_corp')}
              </label>
              <input type="text" name="corp_name" id="corp" class="detail-w01">
            </div>
          </div>
          <div class="tkitem">
            <div class="form-group">
              <label for="email">
                <strong style="color: red; margin-right: 0.3125rem;"> * </strong> Email
                {:lang('product_detail.form_email')}
              </label>
              <input type="text" name="email" id="email" class="detail-w01">
            </div>
            <div class="form-group">
              <label for="phone">
                <strong style="color: red; margin-right: 0.3125rem;"> * </strong> Phone
                {:lang('product_detail.form_phone')}
              </label>
              <input type="text" name="phone" id="phone" class="detail-w01">
            </div>
          </div>
          <div class="tkitem">
            <div class="form-group">
              <label for="country">
                <strong style="color: red; margin-right: 0.3125rem;"> * </strong>
                {:lang('product_detail.form_country')}
              </label>
              <select name="country_name" id="country">
                <option value="">{:lang('product_detail.form_country_placeholder')}</option>
                {volist name="country_list" id="country"}
                <option value="{$country}">{$country}</option>
                {/volist}
              </select>
            </div>
            <div class="form-group">
              <label for="industry">
                <strong style="color: red; margin-right: 0.3125rem;"> * </strong>
                {:lang('product_detail.form_industry')}
              </label>
              <input type="text" name="industry" id="industry" class="detail-w01">
            </div>
          </div>
          <div class="tkitem">
            <div class="form-group" style="width: 100%;margin-right: 0px;">
              <label for="message">
                <strong style="color: red; margin-right: 0.3125rem;"> * </strong>
                {:lang('product_detail.form_inquiry')}
              </label>
              <textarea name="message" id="message"></textarea>
            </div>
          </div>
          <button type="button" id="send" class="submit-btn">{:lang('product_detail.form_submit')}</button>
        </form>
      </div>
    </div>
  </div>
  <!-- 点击主图放大图片观看 -->
  <div class="enlarge-img">
    <div class="scrollbutton_01 smallImgUp"></div>
    <img />
    <div class="scrollbutton_01 smallImgDown"></div>
    <div class="close"><span>x</span></div>
  </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
  $(document).ready(function () {
    // 切换图册
    $('.prcolors .dowebok a').click(function () {
      // 移除所有 .on 类
      $(this).addClass('on').siblings('a').removeClass('on');
      // 获取当前点击的元素的 data-sku_id 值
      var skuId = $(this).data('sku_id');
      // 根据 skuId 显示对应的预览
      $('#preview' + skuId).show().siblings('.preview').hide();
    })

    // 获取模态框和打开按钮以及关闭按钮
    var modal = $("#form_modal");
    var openBtn = $("#open_form_modal");
    var closeBtn = $(".close");
    // 打开模态框
    openBtn.click(function () {
      modal.show();
    });
    // 关闭模态框
    closeBtn.click(function () {
      modal.hide();
    });
    // 当用户点击模态框外部时，关闭模态框
    $(window).click(function (event) {
      if (event.target === modal[0]) {
        modal.hide();
      }
    });
    // 处理表单提交
    modal.find("form").submit(function (e) {
      e.preventDefault();
      var formData = $(this).serialize();
      // 这里可以添加代码将formData发送到服务器
      // 例如通过AJAX
      console.log("提交的数据: " + formData);
      // 提交成功后可以选择关闭模态框
      modal.hide();
    });

    // 提交询盘
    $('#send').click(function () {
      var form = $(this).parents('form');
      $.ajax({
        url: "{:url('product/inquiry')}",
        type: 'POST',
        data: form.serialize(),
        success: function (r) {
          if (r.code == 0) {
            form[0].reset(); // 重置表单
            modal.hide();
          }
          alert(r.msg);
        },
        error: function (e) {
          console.error(e);
        }
      })
    });
    /*图片放大效果*/
    $(".bigImg").click(function () {
      $(".enlarge-img").show();
    });
    $(".enlarge-img .close").click(function () {
      $(".enlarge-img").hide();
    });
  });
</script>
{/block}