<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-05-10 09:43:35
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-19 11:11:58
 -->
<template>
  <div class="my-customer-wrap common-set-wrap">
    <div class="right-content">
      <common-app-top :appName="appName" :appIcon="appIcon" @selectBrandId="selectBrandId"> </common-app-top>
      <div class="right-box" :style="{ 'min-height': bgHeight }">
        <div class="apps-content flex" :style="{ 'min-height': bgHeight }">
          <div class="apps-content-right">
            <transition name="fade" mode="out-in">
              <router-view :brandId="activeBrand" :activeGroupId="activeGroup"></router-view>
            </transition>
          </div>
        </div>
      </div>
    </div>
    <expired-dialog v-if="expiredFlag" :forbidFlag="forbidFlag"></expired-dialog>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import appDetail from '@/components/app/app-detail.vue';
import commonAppTop from '@/components/app/common-app-top.vue';
import commonDetailLeft from '@/components/app/app-detail-left.vue';
import expiredDialog from '@/components/app/expired-dialog.vue';
import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
import { getRequest } from '@/api/api';
export default {
  name: 'reviewed',
  data() {
    return {
      bgHeight: window.screen.availHeight - 380 + 'px',
      appName: '签到',
      appIcon: '',
      activeBrand: '', // 商户(品牌) id
      activeGroup: '', // 商户(品牌) groupId
      expiredFlag: false,
      forbidFlag: 'forbid',
      gicEnterpriseId: ''
    };
  },
  computed: {},
  methods: {
    getExpired() {
      const that = this;
      let para = {
        enterpriseId: that.gicEnterpriseId
      };
      getRequest('/haoban-manage-web/enterprise/enterprise-is-over', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.expiredFlag = resData.result;
            that.forbidFlag = 'expired';
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 禁用
     */
    getUpdated() {
      const that = this;
      let para = {
        enterpriseId: that.gicEnterpriseId
      };
      getRequest('/haoban-manage-web/enterprise/enterprise-is-use-three', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!resData.result) {
              that.getExpired();
            } else {
              that.expiredFlag = resData.result;
              that.forbidFlag = 'forbid';
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },

    /**
     * 返回 的 brandId
     */
    selectBrandId(id, groupId, gicEnterpriseId) {
      let that = this;
      that.activeBrand = id;
      that.activeGroup = groupId;
      that.gicEnterpriseId = gicEnterpriseId;
      that.getUpdated(); // 3.0
    }
  },
  watch: {
    activeBrand: function(newData, oldData) {
      const that = this;
      that.activeBrand = newData;
    },
    activeGroup: function(newData, oldData) {
      const that = this;
      that.activeGroup = newData;
    }
  },
  mounted() {
    let that = this;
    let iconUrl = that.$route.query.appIcon;
    if (iconUrl) {
      that.appIcon = window.unescape(iconUrl);
    }
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    appDetail,
    commonAppTop,
    commonDetailLeft,
    expiredDialog
  }
};
</script>
<style type="text/scss" lang="scss" scoped>
.my-customer-wrap {
  height: 100%;
}

.right-content {
  /*width: 100%;*/
  padding: 24px;
  min-height: calc(100% - 160px);
  .my-customer-top {
    position: relative;
    height: 43px;
    line-height: 43px;
    .my-customer-return {
      position: absolute;
      left: 0px;
      bottom: 10px;
      width: 78px;
      height: 32px;
      border-radius: 18px;
    }

    .my-customer-brand {
      position: absolute;
      right: 0;
      bottom: 18px;
      width: 93px;
      height: 32px;
    }

    .my-customer-name {
      width: 200px;
      margin: 0 auto;

      i {
        font-size: 14px;
        color: #fff;
      }
      span {
        font-size: 16px;
        color: #000;
      }

      .app-icon {
        display: inline-block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        border-radius: 4px;
        background: -webkit-linear-gradient(left, #7ab6fb, #508bfe);
        background: -moz-linear-gradient(left, #7ab6fb, #508bfe);
        background: linear-gradient(left, #7ab6fb, #508bfe);
      }
    }
  }
  .right-box {
    // background: #fff;
    min-height: 500px;
    padding: 0px;

    .apps-content {
      .apps-content-left {
        height: 100%;
        background: #fff;
        overflow-x: hidden;
        overflow-y: auto;

        .apps-content-left__title {
          height: 55px;
          line-height: 55px;
          padding: 0 0 0 18px;
        }

        .tab-left-list-cell {
          position: relative;
          text-align: left;
          margin-top: 15px;
          height: 30px;
          line-height: 30px;
          white-space: nowrap;
          overflow: hidden;
          cursor: pointer;

          &:hover {
            background: rgba(24, 144, 255, 0.06);
            i {
              color: #1890ff;
            }
          }
          &.active-tab {
            background: rgba(24, 144, 255, 0.06);
            &::before {
              content: ' ';
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              width: 2px;
              background: #1890ff;
              z-index: 1;
            }
            i {
              color: #1890ff;
            }
          }

          .child-tab-left-list {
            li {
              position: relative;
              text-align: left;
              height: 30px;
              line-height: 30px;
              white-space: nowrap;
              overflow: hidden;
              cursor: pointer;

              &:hover {
                background: rgba(24, 144, 255, 0.06);
                i {
                  color: #1890ff;
                }
              }
              &.active-tab {
                background: rgba(24, 144, 255, 0.06);
                &::before {
                  content: ' ';
                  position: absolute;
                  left: 0;
                  top: 0;
                  bottom: 0;
                  width: 2px;
                  background: #1890ff;
                  z-index: 1;
                }
                i {
                  color: #1890ff;
                }
              }
            }
          }
        }
      }
      .apps-content-right {
        width: 100%;
        // background: #fff;
      }
    }
  }
}
</style>
