<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-25 16:30:46
 -->
<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 flex flex-space-between">
                <span class="font-16 color-303133 font-w-600 line-h-32">已使用</span>
                <set-tip v-if="!checkShow" :tipText="tipText"></set-tip>
              </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" 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 v-if="noPurchaseApp.length" class="bg-space"></div>
            <div :class="['index-body-left_bottom border-box', noPurchaseApp.length ? 'bottom-0' : 'bottom-9999']">
              <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-date-info">
                  <div class="font-14 color-909399 p-t-10 m-b-13" style="font-weight:300;">{{ new Date().getTime() | timeStampToYm }}</div>
                  <div class="font-12 color-909399">农历{{ getLunarDay(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()) }}</div>
                  <div class="serve-date-day">
                    <div class="serve-date-day_inner ">
                      <div class="color-fff font-26 p-t-10" style="letter-spacing: 2px;">{{ new Date().getDate() }}</div>
                      <div class="color-fff font-12">{{ weeks[new Date().getDay()] }}</div>
                    </div>
                  </div>
                </div>
                <div class="serve-version flex">
                  <span class="w-86 font-14 color-909399 text-left">企业</span>
                  <span class="font-14 color-303133">{{ versionData.corpName }}</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.smallVersion }}</span>
                </div>
                <div v-if="false" class="serve-store flex m-t-20">
                  <span class="w-86 font-14 color-909399 text-left">
                    <!-- <el-popover placement="top-start" title="" width="200" trigger="hover" content="GIC已同步上线门店总数，实时获取">
                      <span class="w-86 font-14 color-909399 text-left" slot="reference" style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">门店总数</span>
                    </el-popover> -->
                    <el-tooltip class="item" effect="dark" content="GIC已同步上线门店总数，实时获取" placement="top-start">
                      <span class="w-86 font-14 color-909399 text-left" style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">门店总数</span>
                    </el-tooltip>
                  </span>
                  <span class="font-14 color-303133 ">{{ versionData.storeTotal }}</span
                  ><!-- <span v-if="versionData.storeTotal > versionData.storeNum" class=" cursor-pointer font-12 p-l-10 color-f5222d" @click="toOverStore">（{{ versionData.storeTotal - 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 m-t-15">
                <li v-for="(item, index) in helpList" :key="index + 'help'" class="cursor-pointer font-14 color-606266" @click="toRedirect(item)">
                  {{ item.helpTitle }}
                </li>
                <li class="text-center li-more cursor-pointer" @click="goUdesk">查看更多</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <template v-if="taskTipShow">
        <div class="task-tip-wrap">
          <i class="el-icon-warning"></i>
          <div class="task-tip-content">
            <p>话务任务应用下线通知：</p>
            <p>1. 话务任务预计将于5月下旬下线，功能将由销售线索替代；</p>
            <p>2. 后续如需下发任务，请通过GIC智能引擎中企微任务下发；</p>
            <p>3. 话务任务下线后，智能引擎话务及好办企微任务也会下线，不良评价任务将转移至其他应用，请知悉。</p>
          </div>
          <i class="el-icon-close" @click="taskTipClose"></i>
        </div>
      </template>
      <!-- <vue-gic-footer></vue-gic-footer> -->
    </div>
  </div>
</template>
<script>
// 公共头部菜单
import setTip from '@/components/app/set-tip.vue';
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 {
      taskTipShow: false,
      checkShow: true,
      tipText: '请先完成商户初始化设置后，再进行其他操作',
      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: '应用描述应用描述应用描述应用描述应用描述'
        } */
      ],
      weeks: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      // 未购买应用
      noPurchaseApp: [],
      versionData: {
        id: 1,
        smallVersion: '',
        corpName: '',
        date: new Date().getTime(),
        storeNum: 100,
        storeTotal: ''
      },

      helpList: [
        /* {
          helpId: 1,
          helpTitle: '测试帮助中心',
          helpUrl: ''
        } */
      ]
    };
  },
  methods: {
    // getExpired() {
    //   const that = this;
    //   let para = {
    //     enterpriseId: that.wxEnterpriseId || localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : ''
    //   };
    //   getRequest('/haoban-manage3-web/enterprise-is-over', para)
    //     .then(res => {
    //       let resData = res.data;
    //       if (resData.errorCode == 1) {
    //         that.expiredFlag = resData.result;
    //         return;
    //       }
    //       errMsg.errorMsg(resData);
    //     })
    //     .catch(function(error) {
    //       that.$message.error({
    //         duration: 1000,
    //         message: error.message
    //       });
    //     });
    // },
    /**
     * 跳转更多 udesk
     */
    goUdesk() {
      window.open('https://demogic.udesk.cn/hc/categories/96671?api_name=');
    },
    /* eslint-disable */
    getLunarDay(solarYear, solarMonth, solarDay) {
      // 拷贝别人又自己调整过的获取农历日期的代码，想要原来的代码估计百度一下就有了
      const madd = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
      // const tgString = '甲乙丙丁戊己庚辛壬癸'
      // const dzString = '子丑寅卯辰巳午未申酉戌亥'
      const numString = '一二三四五六七八九十';
      const monString = '正二三四五六七八九十冬腊';
      const CalendarData = [0xa4b, 0x5164b, 0x6a5, 0x6d4, 0x415b5, 0x2b6, 0x957, 0x2092f, 0x497, 0x60c96, 0xd4a, 0xea5, 0x50da9, 0x5ad, 0x2b6, 0x3126e, 0x92e, 0x7192d, 0xc95, 0xd4a, 0x61b4a, 0xb55, 0x56a, 0x4155b, 0x25d, 0x92d, 0x2192b, 0xa95, 0x71695, 0x6ca, 0xb55, 0x50ab5, 0x4da, 0xa5b, 0x30a57, 0x52b, 0x8152a, 0xe95, 0x6aa, 0x615aa, 0xab5, 0x4b6, 0x414ae, 0xa57, 0x526, 0x31d26, 0xd95, 0x70b55, 0x56a, 0x96d, 0x5095d, 0x4ad, 0xa4d, 0x41a4d, 0xd25, 0x81aa5, 0xb54, 0xb6a, 0x612da, 0x95b, 0x49b, 0x41497, 0xa4b, 0xa164b, 0x6a5, 0x6d4, 0x615b4, 0xab6, 0x957, 0x5092f, 0x497, 0x64b, 0x30d4a, 0xea5, 0x80d65, 0x5ac, 0xab6, 0x5126d, 0x92e, 0xc96, 0x41a95, 0xd4a, 0xda5, 0x20b55, 0x56a, 0x7155b, 0x25d, 0x92d, 0x5192b, 0xa95, 0xb4a, 0x416aa, 0xad5, 0x90ab5, 0x4ba, 0xa5b, 0x60a57, 0x52b, 0xa93, 0x40e95];
      if (!(solarYear < 1921 || solarYear > 2100)) {
        solarMonth = parseInt(solarMonth) > 0 ? solarMonth - 1 : 11;
        const timeArr = [solarYear, solarMonth, solarDay];
        let TheDate = timeArr.length !== 3 ? new Date() : new Date(timeArr[0], timeArr[1], timeArr[2]);
        let total;
        let m;
        let n;
        let k;
        let isEnd = false;
        let theDateYear = TheDate.getFullYear();
        total = (theDateYear - 1921) * 365 + Math.floor((theDateYear - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;
        if (theDateYear % 4 === 0 && TheDate.getMonth() > 1) {
          total++;
        }
        for (m = 0; ; m++) {
          k = CalendarData[m] < 0xfff ? 11 : 12;
          for (n = k; n >= 0; n--) {
            if (total <= this.getBit(CalendarData[m], n)) {
              isEnd = true;
              break;
            }
            total = total - this.getBit(CalendarData[m], n);
          }
          if (isEnd) {
            break;
          }
        }
        let cMonth;
        let cDay; // cYear,
        // cYear = 1921 + m
        cMonth = k - n + 1;
        cDay = total;
        if (k === 12) {
          if (cMonth === Math.floor(CalendarData[m] / 0x10000) + 1) {
            cMonth = 1 - cMonth;
          }
          if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {
            cMonth--;
          }
        }
        // let run = ''
        let cDayStr = numString.charAt(cDay - 1);
        /* if (cMonth < 1) {
                              run = '(闰)'
                            } */
        if (cDay % 10 !== 0 || cDay === 10) {
          cDayStr = numString.charAt((cDay - 1) % 10);
        }
        return cDay === 1 ? monString.charAt(cMonth - 1) + '月初一' : monString.charAt(cMonth - 1) + '月' + (cDay < 11 ? '初' : cDay < 20 ? '十' : cDay < 30 ? '廿' : '三十') + cDayStr; // tgString.charAt((cYear - 4) % 10) + dzString.charAt((cYear - 4) % 12) + '年 ' + run + monString.charAt(cMonth - 1) + '月' +
      }
    },
    getBit(m, n) {
      // 也是拷贝的，不是很明白这段代码干嘛的，不过很明显是处理二进制数据的
      return 29 + ((m >> n) & 1);
    },
    /**
     * 帮助中心跳转
     */
    toRedirect(item) {
      if (!item.helpUrl) {
        return false;
      }
      window.open(item.helpUrl);
    },
    /**
     * 路由跳转
     */
    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.openFlag == 1 ? '关闭' : '开启';

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

    postSwitch(item) {
      let that = this;
      let para = {
        wxEnterpriseId: that.wxEnterpriseId || localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).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 = {
        wxEnterpriseId: that.wxEnterpriseId || localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
        applicationId: item.applicationId,
        openFlag: item.openFlag ? 1 : 0
      };
      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('');
        });
    },
    toTipTask() {
      if (!sessionStorage.getItem('taskTip')) {
        this.taskTipShow = true;
      }
    },
    taskTipClose() {
      this.taskTipShow = false;
      sessionStorage.setItem('taskTip', true);
    },

    /**
     * 获取帮助中心
     */
    getHelpData() {
      const that = this;
      getRequest('/haoban-manage3-web/get-help-list', {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.helpList = resData.result || [];
            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 = {
        wxEnterpriseId: that.wxEnterpriseId || localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
        type: type // 1已购买2未购买
      };
      getRequest('/haoban-manage3-web/application-open-close-list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            resData.result.open.forEach(ele => {
              ele.openFlag = 1;
            });
            that.purchaseApp = JSON.parse(JSON.stringify(resData.result.open)) || [];

            resData.result.close.forEach(ele => {
              ele.openFlag = false;
            });
            that.noPurchaseApp = JSON.parse(JSON.stringify(resData.result.close)) || [];

            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
          });
        });
    },
    /**
     *  登录 --- api
     */
    toLogin() {
      const that = this;
      return new Promise((resolve, reject) => {
        let para = {};
        getRequest('/haoban-manage3-web/get-login-info', para)
          .then(res => {
            let resData = res.data;
            if (resData.errorCode == 1) {
              // localStorage.removeItem('userInfos');
              localStorage.setItem('userInfos', JSON.stringify(resData.result));
              resolve(resData.result.wxEnterpriseId);
              return;
            }
            errMsg.errorMsg(resData);
            resolve({
              wxEnterpriseId: ''
            });
          })
          .catch(function(error) {
            resolve({
              wxEnterpriseId: ''
            });
            that.$message.error({
              duration: 1000,
              message: error.message
            });
          });
      });
    },
    /**
     *  获取显示的提示
     */
    getTipData() {
      const that = this;
      let para = {};
      getRequest('/haoban-manage3-web/is-wx-enterprise-secret-set', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.checkShow = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取企业数据
     */
    getCompanyData() {
      const that = this;
      const para = {
        wxEnterpriseId: that.wxEnterpriseId
      };
      getRequest('/haoban-manage3-web/wxEnterprise-detail', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.versionData = resData.result;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  async mounted() {
    const that = this;
    that.getBindData();
    that.wxEnterpriseId = await that.toLogin();
    that.getAppData(1);
    that.getHelpData();
    that.toTipTask();
    /* that.getAppData(2); */
    // that.getTipData();
    that.getCompanyData();

    that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 92 + 'px';
  },
  components: {
    vueOfficeHeader,
    setTip
  }
};
</script>
<style lang="scss" scoped>
.color-f5222d {
  color: #f5222d;
}

.line-h-32 {
  line-height: 32px;
}

.font-26 {
  font-size: 26px;
}

.p-t-10 {
  padding-top: 10px;
}

.m-t-15 {
  margin-top: 15px;
}

.m-b-13 {
  margin-bottom: 5px;
}
.m-b-13 {
  margin-bottom: 13px;
}

.w-86 {
  width: 86px;
}

.serve-date-info {
  position: relative;
  margin-bottom: 45px;
  .serve-date-day {
    position: absolute;
    top: 0;
    right: 23px;
    width: 74px;
    height: 67px;
    text-align: center;
    .serve-date-day_inner {
      position: relative;
      height: 100%;
      text-align: center;
      background: linear-gradient(180deg, rgba(47, 84, 235, 1) 0%, rgba(116, 153, 253, 1) 100%);
      border-radius: 0 0 10px 10px;
      &::after {
        content: '';
        width: 0;
        height: 0;
        border-left: 37px solid transparent;
        border-right: 37px solid transparent;
        border-bottom: 10px solid #fff;
        position: absolute;
        bottom: 0px;
        left: 50%;
        -webkit-transform: translate(-50%);
        -moz-transform: translate(-50%);
        transform: translate(-50%);
      }
    }
  }
}

#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;
                  width: 20px;
                  height: 20px;
                  .el-dropdown-link {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    i {
                      color: #c0c4cc;
                    }
                    &:hover {
                      i {
                        color: #606266;
                      }
                    }
                  }
                }
                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 {
            position: relative;
            bottom: 0;
            width: 100%;
            padding: 10px;
            background: #fff;
            transition: all 0.3s;
            &.bottom-0 {
              bottom: 0;
            }
            &.bottom-9999 {
              bottom: -9999px;
            }
            .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: 0px 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: 40px;
                line-height: 40px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                transition: all 0.3s;
                &:hover {
                  color: #303133;
                  -webkit-transform: translateX(5px);
                  -moz-transform: translateX(5px);
                  transform: translateX(5px);
                }
                /* border-bottom: 1px solid #e4e7ed; */
                &.li-more {
                  font-size: 14px;
                  color: #909399;
                  &:hover {
                    color: #2f54ed;
                    -webkit-transform: translateX(0px);
                    -moz-transform: translateX(0px);
                    transform: translateX(0px);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
/* 隐藏 头部 */

.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;
}
@keyframes show {
  0% {
    top: 0;
    opacity: 0;
  }
  100% {
    top: 56px;
    opacity: 1;
  }
}
.task-tip-wrap {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  animation: 0.3s show;
  display: flex;
  padding: 10px 17px;
  background: #f0f5ff;
  border-radius: 2px;
  border: 1px solid #85a5ff;
  .el-icon-warning {
    margin-top: 5px;
    margin-right: 9px;
    font-size: 12px;
    color: #2f54eb;
  }
  .el-icon-close {
    font-size: 12px;
    color: #909399;
    cursor: pointer;
  }
  .task-tip-content {
    font-size: 13px;
    font-weight: 400;
    color: #303133;
    line-height: 22px;
    p {
      cursor: default;
      user-select: none;
    }
  }
}
</style>
<style></style>
