<?php
/* Template Name: food home bak */
get_header('food');

//獲取預設info
$home_info = new stdClass;
$home_info->cate1 = get_post_meta(267, "cate1", true);
$home_info->part2_m_url = get_post_meta(267, "part2_m_url", true);
$home_info->part2_pc_url = get_post_meta(267, "part2_pc_url", true);
$home_info->part2_cate = get_post_meta(267, "part2_cate", true);
$home_info->about_company_url = get_post_meta(267, "about_company_url", true);
$home_info->about_content = get_post_meta(267, "about_content", true);
$home_info->about_phone = get_post_meta(267, "about_phone", true);
$home_info->about_call = get_post_meta(267, "about_call", true);
$home_info->about_fax = get_post_meta(267, "about_fax", true);
$home_info->about_addr = get_post_meta(267, "about_addr", true);
$home_info->about_addr_en = get_post_meta(267, "about_addr_en", true);
$home_info->payme_url = get_post_meta(267, "payme_url", true);
?>

<app id="app">
  <yq-header></yq-header>

  <main class=" w-100 py-[0.2rem] md:w-[768px] md:mx-auto xl:w-[1280px]">
    <!-- 輪播 -->
    <div v-if="a_banner.length > 0" class=" relative w-100 px-[0.3rem]">
      <div @click="toBannerLink()" class=" w-full h-[2.3rem] md:h-[4.6rem]">
        <img v-for="(item, key) in a_banner" :key="'bannerimg'+item.id" v-show="banner_current == key" :class="banner_show?' opacity-100':' opacity-0'" class=" transition-opacity duration-700 cursor-pointer rounded-[0.2rem] w-full h-full bg-main" :src="item.banner_url">
      </div>

      <!-- 指示點 -->
      <div class=" absolute bottom-[0.1rem] left-1/2 -translate-x-1/2 flex justify-center">
        <div v-for="(item, key) in a_banner" :key="'banner'+item.id" :class="banner_current==key?'bg-white':'bg-sub-white'" class=" ml-[0.2rem] first:ml-0 w-[0.33rem] h-[0.04rem]"></div>
      </div>

      <img @click="preBanner()" class=" cursor-pointer w-[0.66rem] h-[0.66rem] md:w-[1rem] md:h-[1rem] absolute left-[-0.04rem] md:left-[-0.16rem] top-1/2 -translate-y-1/2" src="<?php showFoodAppPath('img/scroll-left.png') ?>">
      <img @click="nextBanner()" class=" cursor-pointer w-[0.66rem] h-[0.66rem] md:w-[1rem] md:h-[1rem] absolute right-[-0.04rem] md:right-[-0.16rem] top-1/2 -translate-y-1/2" src="<?php showFoodAppPath('img/scroll-right.png') ?>">
    </div>

    <!-- 欄目 -->
    <yq-title class=" mt-[0.4rem] md:mt-[0.96rem]"></yq-title>

    <!-- 招牌產品 -->
    <yq-food-list-one id="part1" :list="product_list_one" class=" mt-[0.3rem]"></yq-food-list-one>

    <!-- share-list-2 -->
    <yq-food-list-two :list="product_list_two"></yq-food-list-two>

    <!-- 欄目 -->
    <yq-title id="hot" class=" mt-[0.4rem] md:mt-[0.96rem]" title="熱銷推薦" en-title="Hot selling recommendation"></yq-title>

    <!-- tag -->
    <div class=" w-full mt-[0.3rem] px-[0.3rem] flex flex-wrap justify-center">
      <span v-for="(item, key) in a_cate" @click="get_cate_product(key)" :class="current_cate == key?'bg-main border-[0.02rem] border-main text-white':'bg-white border-[0.02rem] border-999 text-999'" class=" cursor-pointer mr-[0.2rem] mb-[0.3rem] px-[0.2rem] py-[0.07rem] rounded-[0.04rem] text-[0.24rem] leading-[0.2rem]">{{item}}</span>
    </div>

    <yq-food-list-one :list="a_cate_product" class=" mt-[0.3rem]"></yq-food-list-one>

    <a href="/food-home" class=" flex w-full px-[0.3rem] mt-[0.4rem] md:mt-[0.96rem]">
      <img class=" w-full h-auto rounded-[0.1rem]" src="<?php showFoodAppPath('img/home-share.png') ?>">
    </a>

    <!-- 欄目 -->
    <yq-title id="about-us" class=" mt-[0.4rem] md:mt-[0.96rem]" title="關於我們" en-title="About US"></yq-title>

    <div class=" mt-[0.3rem] px-[0.3rem] mb-[0.5rem]">
      <div class=" flex flex-col md:flex-row md:items-center">
        <img class=" w-full h-auto rounded-[0.1rem] md:w-[5rem] md:h-[5rem]" :src="home_info.about_company_url" />

        <div class=" md:ml-[0.3rem]">
          <img class=" w-[2.21rem] h-[1rem] mt-[0.4rem] md:w-[1.61rem] md:h-[0.73rem] md:mt-0" src="<?php showFoodAppPath('img/about-logo2.png') ?>" />

          <div class=" text-333 text-[0.24rem] leading-[0.32rem] mt-[0.4rem]">
            {{home_info.about_content}}
          </div>
        </div>
      </div>

      <div class=" mt-[0.4rem] w-full h-[0.02rem] bg-main"></div>

      <div class=" flex flex-col md:flex-row md:items-center md:mt-[0.4rem]">
        <!-- <div class=" flex mt-[0.4rem] md:mt-0 items-center">
          <img class=" w-[0.32rem] h-[0.32rem]" src="<?php showFoodAppPath('img/phone.png') ?>">
          <div class=" text-main text-[0.24rem] leading-[0.32rem] ml-[0.04rem] ">移動電話:</div>
          <a class=" font-bold ml-[0.2rem] font-f-din text-333 text-[0.36rem] leading-[0.44rem]" :href="'tel://'+home_info.about_phone">{{home_info.about_phone}}</a>
        </div>
        <div class=" hidden md:flex mx-[0.2rem] items-center">|</div> -->
        <div class=" flex mt-[0.2rem] md:mt-0 items-center">
          <img class=" w-[0.32rem] h-[0.32rem]" src="<?php showFoodAppPath('img/call.png') ?>">
          <div class=" text-main text-[0.24rem] leading-[0.32rem] ml-[0.04rem] ">公司電話:</div>
          <a class=" font-bold ml-[0.2rem] font-f-din text-333 text-[0.36rem] leading-[0.44rem]" :href="'tel://'+home_info.about_call">{{home_info.about_call}}</a>
        </div>
        <div class=" hidden md:flex mx-[0.2rem] items-center">|</div>
        <div class=" flex mt-[0.2rem] md:mt-0 items-center">
          <img class=" w-[0.32rem] h-[0.32rem]" src="<?php showFoodAppPath('img/fax.png') ?>">
          <div class=" text-main text-[0.24rem] leading-[0.32rem] ml-[0.04rem] ">公司電郵:</div>
          <a class=" font-bold ml-[0.2rem] font-f-din text-333 text-[0.36rem] leading-[0.44rem]" :href="'mailto://'+home_info.about_fax">{{home_info.about_fax}}</a>
        </div>
      </div>
      <div class=" flex mt-[0.2rem] items-start">
        <div class=" flex items-center mt-[0.1rem] flex-shrink-0 h-[0.32rem]">
          <img class=" w-[0.32rem] h-[0.32rem]" src="<?php showFoodAppPath('img/local.png') ?>">
          <div class=" text-main text-[0.24rem] leading-[0.32rem] ml-[0.04rem]">公司地址:</div>
        </div>
        <div class=" ml-[0.2rem]">
          <div class=" font-bold font-f-din text-333 text-[0.36rem] leading-[0.44rem]">{{home_info.about_addr}}</div>
          <div class=" mt-[0.2rem] font-f-arial text-333 text-[0.20rem] leading-[0.28rem]">{{home_info.about_addr_en}}</div>

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

  </main>

  <yq-footer></yq-footer>
</app>

<script>
  const local_url = '<?php echo $local_url ?>'
  const home_info = JSON.parse('<?php echo json_encode($home_info) ?>')
  new Vue({
    el: "#app",
    components: {
      'yq-title': httpVueLoader('<?php showFoodAppPath('components/yq-title.vue?v=1') ?>'),
      'yq-food-list-one': httpVueLoader('<?php showFoodAppPath('components/yq-food-list-one.vue?v=1') ?>'),
      'yq-food-list-two': httpVueLoader('<?php showFoodAppPath('components/yq-food-list-two.vue?v=1') ?>'),
      'yq-header': httpVueLoader('<?php showFoodAppPath('components/yq-header.vue?v=5') ?>'),
      'yq-footer': httpVueLoader('<?php showFoodAppPath('components/yq-footer.vue?v=2') ?>'),
    },
    created() {
      this.get_banner()
      this.get_product_list_one()
      this.get_product_list_two()
      this.get_cate()

      this.linkBanner()
    },
    data: {
      banner_show: true,
      product_list_one: [],
      product_list_two: [],
      a_banner: [],
      banner_current: 0,
      a_cate: [],
      a_cate_product: [],
      current_cate: 0,
      scrollFlag: true,
      bannerObj: null
    },
    methods: {
      linkBanner() {
        this.bannerObj = setInterval(() => {
          this.nextBanner()
        }, 8000);
      },
      toBannerLink() {
        if(this.a_banner[this.banner_current].banner_url) {
          window.open(this.a_banner[this.banner_current].banner_url , '_blank')
        }
      },
      preBanner() {
        clearInterval(this.bannerObj)
        this.bannerObj = null

        this.banner_show = false

        setTimeout(() => {
          let temp = this.banner_current - 1
          this.banner_current = temp < 0?this.a_banner.length-1:temp

          this.banner_show = true

          this.linkBanner()
        }, 700);

      },
      nextBanner() {
        clearInterval(this.bannerObj)
        this.bannerObj = null

        this.banner_show = false

        setTimeout(() => {
          let temp = this.banner_current + 1
          this.banner_current = temp > this.a_banner.length-1?0:temp

          this.banner_show = true

          this.linkBanner()
        }, 700);
      },
      async get_cate() {
        let res = await axios({
          method: 'post',
          url: '/api/',
          data: Qs.stringify({
            module: 'cate',
            action: 'r_cate'
          })
        });

        if(res.status == 200) {
          let data = res.data;
          if(data.rc == 0) {
            this.a_cate = data.res.cate_list
            this.a_cate_product = data.res.product_list
          }
        }

        if(this.scrollFlag) {
          this.scrollFlag = false
          setTimeout(() => {
            this.$nextTick(() => {
              if(window.location.href.indexOf('#') > -1) {
                window.scrollTo({top:document.getElementById(window.location.href.split('#')[1]).offsetTop, behavior: 'smooth'})
              }
            })
          }, 0);
        }
      },
      async get_cate_product(key) {
        this.current_cate = key
        let res = await axios({
          method: 'post',
          url: '/api/',
          data: Qs.stringify({
            module: 'product',
            action: 'get_product_by_cate',
            cate: [ this.a_cate[this.current_cate] ],
            limit: 6
          })
        });

        if(res.status == 200) {
          let data = res.data;
          if(data.rc == 0) {
            this.a_cate_product = data.res
          }
        }
      },
      async get_banner() {
        let res = await axios({
          method: 'post',
          url: '/api/',
          data: Qs.stringify({
            module: 'banner',
            action: 'get_banner',
            banner_type: 1
          })
        });

        if(res.status == 200) {
          let data = res.data;
          if(data.rc == 0) {
            this.a_banner = data.res
          }
        }
      },
      async get_product_list_one() {
        let res = await axios({
          method: 'post',
          url: '/api/',
          data: Qs.stringify({
            module: 'product',
            action: 'get_product_by_cate',
            cate: [ home_info.cate1 ],
            limit: 6
          })
        });

        if(res.status == 200) {
          let data = res.data;
          if(data.rc == 0) {
            this.product_list_one = data.res
          }
        }

      },
      async get_product_list_two() {
        let res = await axios({
          method: 'post',
          url: '/api/',
          data: Qs.stringify({
            module: 'product',
            action: 'get_product_by_date',
            limit: 4
          })
        });

        if(res.status == 200) {
          let data = res.data;
          if(data.rc == 0) {
            this.product_list_two = data.res
          }
        }
      }
    }
  })
</script>

<?php get_footer('food'); ?>