<template>
  <div>
    <div class=" p-[0.2rem] main-footer rounded-[0.2rem]  w-100 md:w-[768px] md:mx-auto xl:w-[1280px]">
      <!--      fixed top-0 z-40-->
      <pc-header class=" hidden md:flex md:w-[768px] md:mx-auto xl:w-[1280px] items-center mt-[0.16rem] mb-[0.16rem]">
        <a href="/" class=" flex ml-[0.08rem] items-center">
          <img class=" h-[0.5rem] " :src="local_url+'/img/MedicalMediaChannel/组 1264.png'" alt="logo"/>
          <div class=" text-[0.23rem] leading-[0.35rem] font-bold text-white ml-[0.1rem]"></div>
        </a>

        <div class=" ml-auto flex px-[0.2rem] items-center w-[3rem] h-[0.36rem] bg-f5 rounded-full mr-2">
          <input v-model="search" @keyup.enter="hdSearch" placeholder="Search"
                 class=" text-[0.18rem] leading-[0.2rem] outline-none w-full h-full bg-f5" type="text">
          <img @click="hdSearch" class=" w-[0.24rem] h-[0.24rem] flex-shrink-0 cursor-pointer"
               :src="local_url+'img/search.png'" alt="search">
        </div>
      </pc-header>

      <div class=" hidden md:flex h-[0.62rem]"></div>
      <header class=" w-100 md:w-[768px] md:mx-auto h-[1rem] flex xl:hidden items-center px-[0.3rem]">
        <a href="/" class=" flex ml-[0.08rem] items-center flex-1">
          <img class="flex md:hidden  w-[1.87rem]" :src="local_url+'/img/MedicalMediaChannel/组 1264.png'" alt="logo"/>
          <div class=" text-[0.35rem] leading-[0.48rem] font-bold text-white ml-[0.1rem]"></div>

        </a>
        <a-dropdown :trigger="['click']">
          <img class=" w-[0.48rem] h-[0.48rem] ml-[0.2rem] flex-shrink-0" :src="local_url+'img/menu.png'" alt="menu"/>
          <a-menu slot="overlay">

            <a-menu-item v-for="item in menu_list" :key="item.id">
              <a :href="item.path">{{ item.title }}</a>
            </a-menu-item>

          </a-menu>
        </a-dropdown>
      </header>

      <!--      hidden xl:flex hidden xl:inline-->
      <div class="flex items-center text-1E2B5C mt-[0.2rem] text-[0.2rem]">
        <div class=" hidden xl:flex">
          <div class="w-auto mx-1 menu_a_div " v-for="item in menu_list" :key="item.id">
            <a :href="item.path" class="text-white ">{{ item.title }}</a>
          </div>
        </div>

        <div class=" flex ml-auto">

          <div v-if="user_info.ID > 0" class="text-center mt-0.5 mr-[0.26rem] relative">
            <a href="/mmc-shop-car"
               class=" ml-[0.04rem] text-white text-[0.18rem] leading-[0.2rem]"><img
                :src="local_url+'img/MedicalMediaChannel/cart.png'" class="w-[0.46rem] h-[0.46rem]">
              <div style="background: #EA6908;"
                   class=" text-white text-[0.18rem] absolute w-[0.36rem] h-[0.26rem] rounded-[0.13rem] left-[-0.18rem] top-[0.1rem]">
                <span class="mb-[0.1rem]">{{ user_info.cart_num }}</span>
              </div>
            </a>
          </div>

          <div v-if="user_info.ID > 0" class="text-center mt-0.5 mr-[0.26rem]"><img
              :src="local_url+'img/MedicalMediaChannel/ring.png'"
              class="w-[0.46rem] h-[0.46rem]">
          </div>

          <div v-if="user_info.ID > 0" class="text-center mt-0.5 mr-[0.26rem]">
            <a href="/mmc-user/">
              <img
                  :src="local_url+'img/MedicalMediaChannel/setting.png'"
                  class="w-[0.46rem] h-[0.46rem]">
            </a>
          </div>

          <div v-if="user_info.ID == 0" @click="showLoginModel()"
               class=" cursor-pointer  text-white text-[0.18rem] leading-[0.2rem] mt-0.5">登入/註冊
          </div>
          <a-dropdown v-else class=" mt-0.5 " :trigger="['click']">
            <div class=" flex items-center cursor-pointer">
              <img class="w-[0.46rem] h-[0.46rem]" :src="local_url+'img/MedicalMediaChannel/user.png'" alt="user"/>
              <div class=" ml-[0.16rem] text-white text-[0.18rem] leading-[0.2rem]">{{
                  user_info.user_name.substring(0, 20)
                }}</div>
            </div>
            <a-menu slot="overlay">
              <a-menu-item key="0">
                <a @click="loginOut">退出</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>

      </div>
    </div>
    <yq-model ref="login"></yq-model>
  </div>
</template>

<script>
module.exports = {
  props: {
    search_text: {
      type: String,
      default: ""
    }
  },
  components: {
    'yq-model': httpVueLoader(local_url + 'components/yq-modal.vue?v=1'),
  },
  data() {
    return {
      search: "",
      menu_list: [
        {
          id: 28,
          title: "首頁",
          path: "/zone_medicalmediachannel",
          img_url: "",
        }, {
          id: 29,
          title: "所有產品",
          img_url: "<?php echo $doMain; ?>/food-app/img/MedicalMediaChannel/组 1257@2x.png",
          path: "/products_search/",
        }, {
          id: 31,
          title: "聯繫我們",
          img_url: "<?php echo $doMain; ?>/food-app/img/MedicalMediaChannel/组 1259@2x.png",
          path: "/contact_form_medicalmediachannel/",
        }, {
          id: 999,
          title: "醫學媒體頻道",
          img_url: "<?php echo $doMain; ?>/food-app/img/MedicalMediaChannel/组 1260@2x.png",
          path: "/medicine-zone"
        },
         {
          id: 32,
          title: "比賽",
          img_url: "<?php echo $doMain; ?>/food-app/img/MedicalMediaChannel/组 1260@2x.png",
          path: "/competition_search"
        },
      ],
    }
  },
  created() {
    this.search = this.search_text
  },
  methods: {
    toUserInfo(key) {
      sessionStorage.user_active_nav = key
      window.location.href = "/mmc-user"
    },
    hdSearch() {
      if (window.location.href.indexOf("products_search") > -1) {
        this.$emit('search', this.search)
      } else {
        sessionStorage.search_text = this.search
        window.location.href = "/products_search"
      }
    },
    showLoginModel() {
      this.$refs.login.changeShow()
    },
    loginOut() {
      let postForm = document.createElement("form");

      postForm.method = "post";
      postForm.action = "";
      postForm.style = "display:none";

      let actionInput = document.createElement("input");
      actionInput.setAttribute("name", 'action');
      actionInput.setAttribute("value", 'loginout');
      postForm.appendChild(actionInput);

      document.body.appendChild(postForm);
      postForm.submit();
    },
  }
}
</script>