<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-03-25 11:27:28
 -->
<template>
  <div id="index">
    <vue-office-header ref="headerMenu" :projectName="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView"> </vue-office-header>
    <div id="content" class="content">
      <div class="content-body border-box" style="min-height: calc(100vh - 46px);">
        <div class="index-body flex flex-row">
          <div class="index-body-left">
            <div class="index-body-left_top border-box">
              <div class="app-title font-16 color-303133">已使用</div>
              <ul>
                <li class="border-box" v-for="(item, index) in purchaseApp" :key="index + 'app'" @click="toAppView(item)">
                  <div class="app-li-cell border-box flex">
                    <div class="app-cell-left">
                      <img :src="item.applicationUrl" alt="img" />
                    </div>
                    <div class="app-cell-right flex flex-column flex-align-center flex-pack-center">
                      <div class="app-name font-14 color-303133">{{ item.applicationName }}</div>
                      <div v-if="!item.applicationPath" class="app-info">
                        <span class="font-14 color-909399">里面为空~</span>
                        <!-- <div class="app-version font-12 color-909399">{{ item.versionName }}</div> -->
                        <!-- <div class="app-date font-12 color-909399">{{ item.date | timeStampToYmd }}</div> -->
                      </div>
                    </div>
                    <div class="app-cell-arrow">
                      <el-dropdown class="app-cell-dropdown" trigger="hover">
                        <span class="el-dropdown-link"><i class="el-icon-more el-icon--right color-606266" style="cursor: pointer;"></i> </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item class="p-0">
                            <span @click.stop="changeSwitch(item)">{{ item.openFlag == 1 ? '停用' : '启用' }}</span>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="bg-space"></div>
            <div class="index-body-left_bottom border-box">
              <div class="app-title font-16 color-303133">已停用</div>
              <ul>
                <li class="border-box" v-for="(item, index) in noPurchaseApp" :key="index + 'appno'">
                  <div class="app-li-cell  border-box flex">
                    <div class="app-cell-left">
                      <img :src="item.applicationUrl" alt="img" />
                    </div>
                    <div class="app-cell-right">
                      <div class="app-name stop-app-name font-14 color-303133">{{ item.applicationName }}</div>
                      <div class="app-info stop-app-info">
                        <el-switch v-model="item.openFlag" active-text="" inactive-text="" @change="changeAppSwitch($event, item)"> </el-switch>
                        <!-- <div class="app-describe font-12 color-909399">{{ item.describe }}</div> -->
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="index-body-right">
            <div class="index-body-right_top border-box">
              <div class="serve-info">
                <div class="serve-version flex">
                  <span class="w-86 font-14 color-909399 text-left">版本</span>
                  <span class="font-14 color-303133">{{ versionData.name }}</span>
                </div>
                <div class="serve-date flex m-t-20">
                  <span class="w-86 font-14 color-909399 text-left">到期时间</span>
                  <span class="font-14 color-303133">{{ versionData.date | timeStampToYmd }}</span>
                </div>
                <div class="serve-store flex m-t-20">
                  <span class="w-86 font-14 color-909399 text-left">门店容量</span>
                  <span class="font-14 color-303133 ">{{ versionData.storeAllNum }}/{{ versionData.storeNum }}</span
                  ><span v-if="versionData.storeAllNum > versionData.storeNum" class=" cursor-pointer font-12 p-l-10 color-f5222d" @click="toOverStore">（{{ versionData.storeAllNum - versionData.storeNum }}家门店溢出）</span>
                </div>
                <div class="serve-btn text-center m-t-30">
                  <el-button type="primary" @click="goShopping">前往订购</el-button>
                </div>
              </div>
            </div>
            <div class="bg-margin-10"></div>
            <div class="index-body-right_bottom border-box">
              <div class="help-title font-16 color-303133 font-w-600">帮助中心</div>
              <ul class="help-list">
                <li v-for="(item, index) in helpList" :key="index + 'help'" class="font-14 color-606266">
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- <vue-gic-footer></vue-gic-footer> -->
    </div>
  </div>
</template>
<script>
// 公共头部菜单
import vueOfficeHeader from '@/components/vue-office-header';
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
export default {
  name: 'index',
  data() {
    return {
      projectName: 'haoban-manage-web', // 当前项目名
      contentHeight: '0px', // 页面内容高度
      collapseFlag: false, // 折叠参数
      showCustomDialog: false, // 自定义弹框显示标志
      customType: '', // 自定义弹框标志
      customTitle: '', //  自定义弹框标题
      wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
      // 购买应用
      purchaseApp: [
        /* {
                applicationId: 1,
                applicationUrl: 'https://hope.demogic.com/mobile-haoban-file/images/appicon/workbench/customer_center.png',
                applicationName: '我的顾客',
                versionName: '基础版',
                date: new Date().getTime(),
                describe: '应用描述应用描述应用描述应用描述应用描述'
              } */
      ],
      // 未购买应用
      noPurchaseApp: [
        {
          applicationId: 1,
          applicationUrl: 'https://hope.demogic.com/mobile-haoban-file/images/appicon/workbench/customer_center.png',
          applicationName: '测试应用',
          describe: '应用描述',
          openFlag: false
        }
      ],
      versionData: {
        id: 1,
        name: '基础版',
        date: new Date().getTime(),
        storeNum: 100,
        storeAllNum: 150
      },
      helpList: [
        {
          id: 1,
          name: '测试帮助中心'
        }
      ]
    };
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(route) {
      this.$router.push(route);
    },

    /**
     * 跳转溢出门店
     */
    toOverStore() {
      const that = this;
      that.changeRoute('/overStoreList');
    },
    /**
     * 跳转应用
     */
    toAppView(item) {
      const that = this;
      if (!item.applicationPath) {
        //无更多设置项，不可进入!
        showMsg.showmsg('无更多设置项，不可进入!', 'warning');
        return false;
      }
      that.changeRoute(`${item.applicationPath}`);
    },

    /**
     * 跳转购买
     */
    goShopping(item) {
      const that = this;
      that.changeRoute(`/`);
    },

    /**
     *  处理路由跳转
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      that.$router.push({
        path: val.path
      });
    },

    /**
     * 启用停用应用
     */
    changeSwitch(item) {
      const that = this;
      let flag = item.status == 1 ? '关闭' : '开启';

      that
        .$confirm(`确认${flag}【${item.applicationName}】应用吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.postSwitch(item);
        })
        .catch(() => {});
    },

    postSwitch(item) {
      let that = this;
      let para = {
        wxEnterpriseId: that.wxEnterpriseId,
        applicationId: item.applicationId,
        openFlag: item.openFlag == 1 ? 0 : 1
      };
      getRequest('/haoban-manage3-web/open-or-close', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('操作成功', 'success');
            that.getAppData(1);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     * 启用停用应用
     */
    changeAppSwitch(e, item) {
      const that = this;
      that
        .$confirm(`确定要${e == true ? '启用' : '停用'}【${item.applicationName}】？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.postAppSwitch(item);
        })
        .catch(() => {
          item.openFlag = false;
        });
    },
    postAppSwitch(item) {
      const that = this;
      let para = {};
      getRequest('/haoban-manage3-web/open-or-close', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('启用成功', 'success');
            that.getAppData(1);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     *   折叠事件
     */
    collapseTag(val) {
      const that = this;
      that.collapseFlag = val;
    },

    /**
     *  弹窗提示
     */
    toAlert() {
      const that = this;
      that
        .$confirm('您所在企业尚未订购好办 ，请前往升级版本后继续使用。', '提示', {
          confirmButtonText: '立即前往订购',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          window.open('');
        });
    },
    toTip() {
      const that = this;
      that
        .$confirm('您没有该功能的使用权限，请联系管理员授权后继续使用。', '提示', {
          confirmButtonText: '知道了',
          type: 'warning'
        })
        .then(() => {
          window.open('');
        });
    },

    /**
     *  获取企业信息
     */
    getEnterpriseData() {
      const that = this;
      getRequest('/haoban-manage-web/home/find-enterprise-info', {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            resData.result.balance = Number(resData.result.balance).toFixed(2);
            if (resData.result.yesterdayUseNumber == 0) {
              resData.result.yesterdayUseNumber = String(resData.result.yesterdayUseNumber);
            }
            that.companyObj = resData.result;
            that.$nextTick(() => {
              that.getUserData();
            });
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getUserData() {
      const that = this;
      getRequest('/haoban-manage-web/emp/get-user-info', {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            localStorage.setItem('userInfos', JSON.stringify(resData.result));
            that.$nextTick(() => {
              that.$refs.headerMenu.getHeaderMenu();
            });
            return;
          }
          that.$message.error({
            duration: 1000,
            message: resData.message
          });
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     *  获取数据概览
     */
    getAppData(type) {
      const that = this;
      let para = {
        type: type // 1已购买2未购买
      };
      getRequest('/haoban-manage3-web/application-list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (type == 1) {
              that.purchaseApp = JSON.parse(JSON.stringify(resData.result));
            } else {
              that.noPurchaseApp = JSON.parse(JSON.stringify(resData.result));
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     *  获取绑定
     */
    getBindData() {
      const that = this;
      let para = {};
      getRequest('/haoban-manage3-web/has-bind-contract', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!resData.result) {
              that.getBindUrl();
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     *  获取绑定
     */
    getBindUrl() {
      const that = this;
      let para = {};
      getRequest('/haoban-manage3-web/get-auth-url', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            window.location.href = `${resData.result}`;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.getAppData(1);
    that.getBindData();
    /* that.getAppData(2); */
    that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 92 + 'px';
  },
  components: {
    vueOfficeHeader
  }
};
</script>
<style lang="less" scoped>
.color-f5222d {
  color: #f5222d;
}

.w-86 {
  width: 86px;
}

#index {
  .content {
    padding-top: 46px;
    box-sizing: border-box;
    /*overflow: auto;*/
    min-width: 1400px;
    height: auto;
    background: #f0f2f5;
    .content-body {
      display: flex;
      flex-direction: column;
      padding: 20px;
      background: #f0f2f5;
      overflow: hidden;
      /* display */
      .top {
        vertical-align: top;
      }
      .middle {
        vertical-align: middle;
      }
      .m-t-24 {
        margin-top: 24px;
      }
      .m-r-24 {
        margin-right: 24px;
      }
      .bg-margin-10 {
        width: 100%;
        height: 10px;
        background: #f0f2f5;
      }
      .border-b-e4e7e7 {
        border-bottom: 1px solid #e4e7e7;
      }
      .radius-2 {
        border-radius: 2px;
      }
      .icon-zidingyi {
        cursor: pointer;
        &:hover {
          color: #2f54eb;
        }
      }
      .icon-xinxixianshi {
        cursor: pointer;
        color: #909399;
        font-size: 14px;
      }
      .square-item {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        i {
          font-size: 24px;
          color: #fff;
        }
      }
      .index-body {
        width: 100%;
        min-height: 340px;
        .index-body-left {
          flex: 1;
          margin: 0px 10px 0px 0px;
          min-height: calc(100vh - 86px);
          background: #fff;
          .app-title {
            padding: 15px 0 18px 10px;
            font-weight: 600;
          }
          ul {
            font-size: 0;
            li {
              display: inline-block;
              padding: 0 10px;
              font-size: 14px;
              cursor: pointer;
              height: 106px;
              .app-li-cell {
                position: relative;
                width: 186px;
                height: 81px;
                padding: 10px;
                border-radius: 4px;
                border: 1px solid #e4e7ed;
                transition: all 0.3s;
                .app-cell-arrow {
                  position: absolute;
                  right: 10px;
                  top: 8px;
                }
                img {
                  width: 60px;
                  height: 60px;
                  border-radius: 10px;
                }
                .app-cell-right {
                  padding-left: 10px;
                  .app-name {
                    align-self: flex-start;
                    line-height: 22px;
                    &.stop-app-name {
                      margin-top: 6px;
                    }
                  }
                  .app-info {
                    margin-top: 3px;
                    line-height: 16px;
                    &.stop-app-info {
                      margin-top: 6px;
                    }
                  }
                }
              }
              &:hover {
                .app-li-cell {
                  // border-color: #2f54eb;
                  -webkit-transform: translateY(-3px);
                  -moz-transform: translateY(-3px);
                  -o-transform: translateY(-3px);
                  transform: translateY(-3px);
                  box-shadow: 0 2px 7px rgba(122, 138, 203, 0.2);
                }
              }
            }
          }
          .index-body-left_top {
            width: 100%;
            padding: 10px;
            background: #fff;
          }
          .bg-space {
            width: 100%;
            height: 10px;
            background: #f0f2f5;
          }
          .index-body-left_bottom {
            width: 100%;
            padding: 10px;
            background: #fff;
            .app-describe {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        .index-body-right {
          width: 312px;
          background: #fff;
          .index-body-right_top {
            width: 100%;
            height: 197px;
            padding: 30px 0 20px 30px;
            background: #fff;
            .serve-btn {
              .el-button--primary {
                width: 133px;
                height: 32px;
                // background: #2f54eb;
                border-radius: 2px;
              }
            }
          }
          .index-body-right_bottom {
            width: 100%;
            // height: 100%;
            padding: 30px;
            background: #fff;
            .help-list {
              li {
                height: 50px;
                line-height: 50px;
                overflow: hidden;
                text-overflow: ellipse;
                border-bottom: 1px solid #e4e7ed;
              }
            }
          }
        }
      }
    }
  }
}
/* 隐藏 头部 */

.navheader {
  div.itemlink-gic.bottom {
    display: none;
  }
  a.itemlink.bottom {
    display: none;
  }
}

.el-table__empty-block {
  height: 256px;
}

.el-table__empty-text {
  width: auto;
  margin-bottom: 80px;
  &::before {
    content: ' ';
    display: block;
    width: 60px;
    height: 60px;
    background: url(../../assets/no-data_icon.png) no-repeat center;
    margin: 0px auto 22px auto;
  }
}

.el-submenu__title {
  height: 40px;
  line-height: 40px;
}

.user-header-pop {
  min-width: 95px;
}

.el-popover.user-header-pop {
  min-width: 95px;
}

.el-menu.el-menu--popup {
  background: #020b21;
  border-radius: 4px;
}
/* 输入框 focus*/

.el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-input__inner:focus,
.el-form-item.is-success .el-textarea__inner,
.el-form-item.is-success .el-textarea__inner:focus {
  border-color: #dcdfe6;
}
/* 箭头*/

.icon-to-pre {
  cursor: pointer;
  font-size: 18px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.icon-to-next {
  cursor: pointer;
  font-size: 18px;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
/* 富文本编辑器 */

.mce-tinymce {
  -webkit-box-shadow: none;
  box-shadow: none;
}
</style>
