<?php
/* Template Name: food index */
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);
?>

<style>
  .top-row {
    position: relative;
    width: 1.4rem;
    height: 0.3rem;
    background-color: #fff;
    border: 0.03rem solid #0045C1;
    border-radius: 0.05rem;
  }

  .top-row::before,
  .top-row::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
  }

  .top-row::before {
    left: 0.1rem;
    top: -0.08rem;
    border-left: 0.08rem solid transparent;
    border-bottom: 0.08rem solid #0045C1;
    border-right: 0.08rem solid transparent;
  }

  .top-row::after {
    left: 0.125rem;
    top: -0.05rem;
    border-left: 0.06rem solid transparent;
    border-bottom: 0.06rem solid #fff;
    border-right: 0.06rem solid transparent;
  }
</style>

<app id="app">
  <index-header>
    <a href="/" class=" cursor-pointer w-100 py-[0.2rem] flex items-center justify-center">
      <img class=" w-[1.33rem] h-[0.6rem] md:w-[2.43rem] md:h-[1.1rem]" src="<?php showFoodAppPath('img/about-logo2.png') ?>" />
      <div class=" ml-[0.4rem] flex flex-col text-333">
        <div class=" text-[0.5rem] leading-[0.6rem] font-bold">
          友誠食品餐飲有限公司
        </div>
        <div class=" text-[0.24rem]">Integrity Food and Catering Limited</div>
        
        <div class="top-row mt-[0.05rem]">
          <div class=" w-full text-center text-main text-[0.18rem]">友誠集團成員</div>
        </div>
      </div>
    </a>

    <!-- index-tabs -->
    <div id="index-tabs" class=" w-100 bg-main scroll-hidden flex items-center md:justify-center overflow-x-scroll">
      <a href="/" class=" hover:bg-268AFF cursor-pointer flex-shrink-0 bg-268AFF px-[0.3rem] h-[0.6rem] text-[0.24rem] flex items-center justify-center font-bold text-white">
        主頁
      </a>
      <div class=" hover:bg-268AFF cursor-pointer flex-shrink-0 bg-main px-[0.3rem] h-[0.6rem] text-[0.24rem] flex items-center justify-center text-white">
        公司介紹
      </div>
      <div class=" hover:bg-268AFF cursor-pointer flex-shrink-0 bg-main px-[0.3rem] h-[0.6rem] text-[0.24rem] flex items-center justify-center text-white">
        餐飲成員
      </div>
      <div class=" hover:bg-268AFF cursor-pointer flex-shrink-0 bg-main px-[0.3rem] h-[0.6rem] text-[0.24rem] flex items-center justify-center text-white">
        客戶
      </div>
      <div class=" hover:bg-268AFF cursor-pointer flex-shrink-0 bg-main px-[0.3rem] h-[0.6rem] text-[0.24rem] flex items-center justify-center text-white">
        最新動向
      </div>
      <div class=" hover:bg-268AFF cursor-pointer flex-shrink-0 bg-main px-[0.3rem] h-[0.6rem] text-[0.24rem] flex items-center justify-center text-white">
        聯繫我們
      </div>
      <div @click="toYoucheng()" class=" hover:bg-268AFF cursor-pointer flex-shrink-0 bg-main px-[0.3rem] h-[0.6rem] text-[0.24rem] flex items-center justify-center text-white">
        友誠集團官網
      </div>
    </div>
  </index-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] mt-[0.2rem]">
      <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>

    <div class=" flex flex-col md:flex-row mt-[0.5rem]">
      <div class=" md:min-w-[4.8rem]">
        <!-- 成員 header -->
        <div class=" flex items-center mx-[0.3rem] py-[0.1rem] border-b-[0.04rem] border-main border-solid">
          <img class=" w-[0.48rem] h-[0.48rem]" src="<?php showFoodAppPath('img/person.png') ?>" />
          <div class=" ml-[0.1rem] text-333 text-[0.28rem] leading-[0.4rem] font-bold">
            友誠食品餐飲有限公司成員
          </div>
        </div>

        <div class=" flex flex-col mt-[0.2rem] mx-[0.3rem]">
          <a href="/food-home/" class=" cursor-pointer hover:border-main flex items-center h-[0.6rem] w-full  border-b-[0.01rem] border-e6 border-solid">
            <span class=" text-333 text-[0.24rem] leading-[0.36rem]">
            · 友好嘢
            </span>
            <span class=" ml-auto text-main text-[0.24rem] leading-[0.36rem]">
              >>
            </span>
          </a>
          <div class=" cursor-pointer hover:border-main flex items-center h-[0.6rem] w-full  border-b-[0.01rem] border-e6 border-solid">
            <span class=" text-333 text-[0.24rem] leading-[0.36rem]">
            · New Taste Kitchen / 新品味
            </span>
            <span class=" ml-auto text-main text-[0.24rem] leading-[0.36rem]">
              >>
            </span>
          </div>
          <div class=" cursor-pointer hover:border-main flex items-center h-[0.6rem] w-full  border-b-[0.01rem] border-e6 border-solid">
            <span class=" text-333 text-[0.24rem] leading-[0.36rem]">
            · 其他公司成員A
            </span>
            <span class=" ml-auto text-main text-[0.24rem] leading-[0.36rem]">
              >>
            </span>
          </div>
          <div class=" cursor-pointer hover:border-main flex items-center h-[0.6rem] w-full  border-b-[0.01rem] border-e6 border-solid">
            <span class=" text-333 text-[0.24rem] leading-[0.36rem]">
            · 其他公司成員B
            </span>
            <span class=" ml-auto text-main text-[0.24rem] leading-[0.36rem]">
              >>
            </span>
          </div>
        </div>
      </div>

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

    </div>


    <!-- fb header -->
    <a href="https://www.facebook.com/int.foodandCatering" class=" cursor-pointer mt-[0.5rem] flex items-center mx-[0.3rem] py-[0.1rem] border-b-[0.04rem] border-main border-solid">
      <img class=" w-[0.48rem] h-[0.48rem]" src="<?php showFoodAppPath('img/person.png') ?>" />
      <div class=" ml-[0.1rem] text-333 text-[0.28rem] leading-[0.4rem] font-bold">
        Facebook
      </div>
    </a>

    <!-- FB IMG -->
    <a id="index-fb" href="https://www.facebook.com/int.foodandCatering" class=" cursor-pointer w-100 scroll-hidden flex items-center mt-[0.4rem] overflow-x-scroll mx-[0.3rem] md:mb-[0.5rem]">
      <img v-for="item in a_fb_img" class=" flex-shrink-0 min-w-[2rem] h-[2rem] ml-[0.3rem] first:ml-0" :key="item.id" :src="item.fb_url" :title="item.fb_text">
    </a>
  </main>

  <footer class=" w-100 md:w-[768px] md:mx-auto xl:w-[1280px] px-[0.3rem] mb-[0.2rem]">
    <div class=" p-[0.3rem] bg-main rounded-[0.2rem]">
      <div class=" flex items-center">
        <a href="/" class=" hidden md:flex ml-[0.08rem] items-center flex-1">
          <img class=" w-[0.71rem] h-[0.32rem] flex-shrink-0" :src="local_url+'img/footer-logo2.png'" alt="logo2"/>
        </a>
        <a href="/" class=" flex md:hidden ml-[0.08rem] items-center flex-1">
          <img class=" w-[1.1rem] h-[0.5rem] flex-shrink-0" :src="local_url+'img/footer-logo2.png'" alt="logo2"/>
        </a>
        <img class=" w-[0.41rem] h-[0.41rem]" :src="local_url+'img/f-fb.png'" />
        <img class=" w-[0.41rem] h-[0.41rem] ml-[0.1rem]" :src="local_url+'img/f-tt.png'" />
        <img class=" w-[0.41rem] h-[0.41rem] ml-[0.1rem]" :src="local_url+'img/f-wechat.png'" />
        <img class=" w-[0.41rem] h-[0.41rem] ml-[0.1rem]" :src="local_url+'img/f-wb.png'" />
      </div>
      <div class=" mt-[0.2rem] w-100 h-[0.02rem] bg-white"></div>
      <div class=" flex flex-col md:flex-row items-center mt-[0.2rem]">
        <div class=" flex items-center text-[0.2rem] leading-[0.2rem] text-white">
          <a href="/" class=" ml-[0.3rem] first:ml-0">主頁</a>
          <a href="/" class=" ml-[0.3rem] first:ml-0">公司介紹</a>
          <a href="/" class=" ml-[0.3rem] first:ml-0">餐飲成員</a>
          <a href="/" class=" ml-[0.3rem] first:ml-0">客戶</a>
          <a href="/" class=" ml-[0.3rem] first:ml-0">最新動向</a>
          <a href="/" class=" ml-[0.3rem] first:ml-0">關於我們</a>
        </div>
        <div class=" mt-[0.2rem] md:mt-0 md:ml-auto text-[0.18rem] leading-[0.2] text-white">Copyright © 2022-2023 Integrity Food and Catering Limited. All Rights Reserved</div>
      </div>
    </div>
  </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",
    created() {
      this.get_banner()
      this.get_fb_img()

      this.linkBanner()
    },
    mounted() {
      this.$nextTick(() => {
        let i_type_tabs = document.getElementById("index-fb");
        i_type_tabs.addEventListener("wheel", (event) => {
          event.preventDefault();
          i_type_tabs.scrollLeft += event.deltaY;
        })

        let i_type_tabs2 = document.getElementById("index-tabs");
        i_type_tabs2.addEventListener("wheel", (event) => {
          event.preventDefault();
          i_type_tabs2.scrollLeft += event.deltaY;
        })
      })
    },
    data: {
      banner_show: true,
      product_list_one: [],
      product_list_two: [],
      a_banner: [],
      a_fb_img: [],
      banner_current: 0,
      a_cate: [],
      a_cate_product: [],
      current_cate: 0,
      scrollFlag: true,
      bannerObj: null
    },
    methods: {
      toYoucheng() {
        antd.message.info('敬請期待！')
      },
      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_fb_img() {
        let res = await axios({
          method: 'post',
          url: '/api/',
          data: Qs.stringify({
            module: 'fb',
            action: 'get_fb_img'
          })
        });

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

        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'); ?>