<template>
  <div class="sidebar_partner_sites" :class="{collapse: collapse}">
    <el-popover
      :key="renderPopover"
      :placement="collapse? 'right' : 'bottom'"
      popper-class="partnerPopover"
      width="250"
      trigger="click">
      <div class="chose_partner">
        <div class="partner_list">
          <div class="search_box">
            <el-input v-model="keyword" clearable />
          </div>
          <div v-for="item in filterPartnerSite"
            :key="item.partner_id"
            class="partner_box"
          >
            <div class="partner_name flex_item" @click="p_switchPartner(item)">
              <div>{{item.partner_name}} <span class="isSelected" v-if="item.selected">(当前加盟商)</span></div>
              <!-- <i class="icon el-icon-arrow-right"></i> -->
            </div>
            <!-- <div v-for="site in item.sites" :key="site.site_id"
              class="site_name flex_item"  @click="switchSite(site, item.partner_id)">
              <span>{{site.site_name}}</span>
              <i class="icon el-icon-arrow-right"></i>
            </div> -->
          </div>
        </div>
      </div>
      <div slot="reference" class="reference_box">
        <img v-if="logo" :src="logo" class="sidebar-logo-h5">
        <div v-if="!collapse" class="partner_site">
          <div class="_item">{{curPartner.partner_name}}</div>
          <div v-if="curSite && showNavSite === 'Y'" class="_site_wrap">
            <i class="icon el-icon-arrow-right"></i>
            <div class="_item">{{curSite.site_name}}</div>
          </div>
          <i class="icon el-icon-arrow-down"></i>
        </div>
      </div>
    </el-popover>

  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex"
import { getSiteIdFromCookie, SET_JFB_SESSION_CID } from "@/utils/auth.js"
export default {
  name: 'SidebarPartnerSite',
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  watch: {
    collapse(){
      this.renderPopover = Date.now();
    }
  },
  computed: {
    ...mapGetters([
      "partnerSite",
      "logo",
      "user"
    ]),
    ...mapState({
      partnerHost: state => state.partnerHost,
      showNavSite: state => state.showNavSite || "Y"
    }),
    curPartner(){
      let cur = this.partnerSite.find(item => item.selected);
      return cur || {}
    },
    curSite(){
      if(!this.site_id) return null;
      else return this.curPartner.sites?.find(item => item.site_id == this.site_id) || null;
    },
    filterPartnerSite(){
      if(!this.keyword) return this.partnerSite;
      else{
        return this.$xdHelper.cloneDeep(this.partnerSite).filter(item => item.partner_name.indexOf(this.keyword) > -1)
      }
    }
  },
  data(){
    return {
      keyword: "",
      renderPopover: "renderPopover",
      site_id: ""
    }
  },
  created(){
    this.site_id = getSiteIdFromCookie();
  },
  methods: {
    ...mapActions({
      switchPartner: "switchPartner"
    }),

    p_switchPartner(item){
      console.log("switchPartner", item);
      this.switchPartner({partner_id: item.partner_id})
        .then(res => {
          SET_JFB_SESSION_CID();
          if(this.partnerHost) location.href = this.partnerHost;
          else location.href = "/";
        })
        .catch(error=>{
          this.$message({
            message: '切换加盟商失败，请重试',
            duration: 3000
          })
          if(this.$xdLog && typeof this.$xdLog.setARMSError === 'function'){
            this.$xdLog.setARMSError(error);
          }
          else throw error;
        })
    },
    async switchSite(site, partner_id){
      console.log("switchSite", site);
      this.switchPartner({partner_id})
        .then(res=>{
          SET_JFB_SESSION_CID();
          let baseUrl = this.$setting['siteIndex'] || '//sandbox-editx.jufubao.cn';
          window.location.href = `${baseUrl}/?site_id=${site.site_id}`;
        })
        .catch(error => {
          this.$message({
            message: '切换加盟商站点失败，请重试',
            duration: 3000
          });
          if (this.$xdLog && typeof this.$xdLog.setARMSError === 'function') {
            this.$xdLog.setARMSError(error);
          } else throw error;
        });

    },
  }
}
</script>
<style>
.partnerPopover{
  max-height: calc(100vh - 50px);
}
</style>
<style lang="less" scoped>

.sidebar_partner_sites{
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #2b2f3a;
  padding-left: 20px;
  text-align: left;
  font-size: 14px;
  color: #FFFFFF;

  .reference_box{
    display: flex;
    align-items: center;
    ._item{
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      max-width: 100px;
    }
  }

  .sidebar-logo-h5{
    height: 30px;
    width: auto;
    margin-right: 6px;
  }
  .partner_site{
    display: flex;
    align-items: center;
    color: #409EFF;

    ._site_wrap{
      display: flex;
      align-items: center;
    }

    .icon{
      margin: 0 2px;
    }
    ._item{
      cursor: pointer;
    }
  }
}
.chose_partner{
  width: 100%;
  z-index: 1;
  color: #000;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(255,255,255, 0.2);
  max-height: 600px;
  overflow: auto;

  .partner_list{
    line-height: 2;

    .search_box{
      border-bottom: 1px solid #EEEEEE;
      padding: 10px 30px;
    }
    .flex_item{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      cursor: pointer;
      .isSelected{
        color: #409EFF;
        font-size: 12px;
      }
    }
    .partner_name{
      color: #333333;
      font-weight: 500;
    }
    .site_name{
      color: #777777;
      font-weight: 400;
      padding-left: 16px;
    }
    .partner_box{
      border-bottom: 1px solid #EEEEEE;
      padding: 0 10px;
    }
  }
}
</style>
