<template>
  <div v-if="storeList.length > 1">
    <el-dropdown @command="onChangeStore">
      <span class="change-store-btn">
        {{ getActiveStoreName }}
        <i class="iconfont-hb3 iconxiajiantou change-store-icon"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="change-store-popper">
        <div class="store-list">
          <el-dropdown-item v-for="el in storeList" :key="el.enterpriseId" :class="['store-item', { actived: el.enterpriseId == activedStoreId }]" :command="el.enterpriseId">
            <div>
              <div class="dis_f ai_c">
                <div class="store-name txt_ellipsis" :class="[el.defaultFlag == 1 ? 'maxW_170' : 'maxW_250']">{{ el.brandName }}</div>
                <div class="default-store-tag" v-if="el.defaultFlag == 1">默认商户</div>
              </div>
              <div class="txt_ellipsis maxW_250 FS_12">{{ el.enterpriseName }}</div>
            </div>
            <i class="el-icon-check checked" v-if="el.enterpriseId == activedStoreId"></i>
          </el-dropdown-item>
        </div>
        <el-dropdown-item class="change-default-store" command="changeDefaultStore">
          <div class="change-default-store-btn">更改默认商户</div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog :visible.sync="changeStore.show" append-to-body title="更改默认商户" width="600px" @closed="onClosed">
      <div class="change-store-title">选择商户</div>
      <el-select class="change-store-selector" v-model="changeStore.storeId">
        <el-option v-for="el in storeList" :key="el.enterpriseId" :label="el.brandName" :value="el.enterpriseId"></el-option>
      </el-select>
      <div slot="footer">
        <el-button @click="changeStore.show = false">取消</el-button>
        <el-button type="primary" :loading="changeStore.loading" @click="onSave">确定</el-button>
      </div>
    </el-dialog>
    <expired-dialog :visible.sync="isExpired"></expired-dialog>
  </div>
</template>

<script>
import { getRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';
import expiredDialog from '@/components/company/expired-dialog.vue';
export default {
  name: 'ChangeStore',
  components: { expiredDialog },
  data() {
    return {
      changeStore: {
        show: false,
        loading: false,
        storeId: ''
      },
      storeList: [],
      activedStoreId: '',
      isExpired: false
    };
  },
  computed: {
    getActiveStoreName() {
      const store = this.storeList.find(el => el.enterpriseId == this.activedStoreId) || {};
      return store.brandName ? store.brandName : '';
    }
  },
  created() {
    this.getStoreList();
    this.activedStoreId = JSON.parse(sessionStorage.getItem('userInfos') || '{}').enterpriseId;
  },
  methods: {
    getStoreList() {
      getRequest('/haoban-manage3-web/wx-enterprise-list', { filteRight: 1 }).then(resp => {
        const { errorCode, result } = resp.data || {};
        if (errorCode != 1) {
          errorMsg.errorMsg(resp.data);
          return;
        }
        this.storeList = Array.isArray(result) ? result : [];
      });
    },
    onChangeStore(enterpriseId) {
      if (enterpriseId == 'changeDefaultStore') {
        this.changeStore.show = true;
        return;
      }
      if (enterpriseId == this.activedStoreId) return;
      this.$emit('changeStore', true);
      getRequest('/haoban-manage3-web/enterprise-is-over', { enterpriseId })
        .then(res => {
          const { errorCode, result } = res.data || {};
          if (errorCode != 1) {
            errorMsg.errorMsg(res.data);
            return;
          }
          this.isExpired = result;
          if (!result) {
            sessionStorage.setItem('hbReloadPath', this.$route.path);
            setTimeout(() => {
              location.reload();
            }, 100);
          }
        })
        .finally(() => this.$emit('changeStore', false));
    },
    // onClosed() {},
    onSave() {
      this.changeStore.loading = true;
      getRequest('/haoban-manage3-web/set-default-gicenterprise', { enterpriseId: this.changeStore.storeId })
        .then(res => {
          const { errorCode } = res.data || {};
          if (errorCode != 1) {
            errorMsg.errorMsg(res.data);
            return;
          }
          this.getStoreList();
          this.changeStore.show = false;
          this.$message.succes('设置成功');
        })
        .finally(() => {
          setTimeout(() => {
            this.changeStore.loading = false;
          }, 100);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.FS_12 {
  font-size: 12px;
}
.maxW_170 {
  max-width: 170px;
}
.maxW_250 {
  max-width: 250px;
}
.txt_ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dis_f {
  display: flex;
}
.ai_c {
  align-items: center;
}
.change-store-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 48px;
  padding: 9px;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  border-radius: 4px;
  cursor: pointer;
  .change-store-icon {
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    transition: 0.3s;
  }
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    z-index: 1;
    transform: translateY(-50%);
    height: 24px;
    border-left: 1px solid #dcdfe6;
  }
  &:hover {
    background: #f2f3f5;
    .change-store-icon {
      transform: rotateZ(180deg);
    }
  }
}
.change-store-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  line-height: 20px;
}
.change-store-selector {
  width: 100%;
}
</style>
<style lang="scss">
.change-store-popper {
  padding: 7px 0 0 !important;
  width: 300px;
  box-sizing: border-box;
  .el-dropdown-menu__item {
    padding: 0;
  }
  .store-list {
    max-height: 350px;
    overflow-y: auto;
  }
  .store-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    + .store-item {
      margin-top: 4px;
    }
    &.actived {
      background: #f7f8fa;
      .store-name {
        color: #2f54eb;
        font-weight: 500;
      }
      .checked {
        color: #2f54eb;
      }
    }
    &:hover {
      background: #f7f8fa;
    }
    .store-name {
      margin-right: 5px;
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      line-height: 20px;
    }
    .default-store-tag {
      padding: 0 4px;
      height: 18px;
      text-align: center;
      line-height: 18px;
      font-size: 12px;
      font-weight: 400;
      color: #2f54eb;
      background: #dee3fc;
      border-radius: 2px;
    }
  }
  .change-default-store {
    margin-top: 7px;
    padding: 0 12px;
    .change-default-store-btn {
      width: 100%;
      height: 36px;
      font-size: 14px;
      font-weight: 400;
      color: #2f54eb;
      line-height: 36px;
      border-top: 1px solid #e4e7ed;
      cursor: pointer;
    }
  }
}
</style>
