<template>
  <div class="about-me__container">
    <div class="nav-bar__wrap">
      <div class="about-me__header">
        <!-- 公司信息展示 -->
        <div class="about-me__info">
          <span class="about-me__name"><Wxopendata type="userName" :openid="account_info.name"></Wxopendata></span>
          <userImage class="about-me__avatar" :img_url="account_info.img_url" :user_name="account_info.name" width="1.12rem" height="1.12rem"></userImage>
        </div>
        <van-cell title-class="platform-title" v-if="user_info.company_info" :title="user_info.company_info.name" is-link/>
      </div>
    </div>
    <div class="about-blank__wrap"></div>
    <van-cell is-link @click="openMoney()">
      <template slot="title">
        <span class="cell-item__title">到期时间:{{endTime}}</span>
      </template>
      <template slot="default" v-if="isAdministrator&&(expireDate<30||expireDate==30)">
          <span class="color_yellow">去续费</span>
       </template>
      <template slot="icon">
        <icon class="cell-item__icon color-blue" name="repetition_cycle"/>
      </template>
    </van-cell>
    <van-cell is-link @click="openfx()">
      <template slot="title">
        <span class="cell-item__title">推荐功道云给好友</span>
      </template>
      <template slot="icon">
        <icon class="cell-item__icon" name="fx" style="width: 0.48rem;height: 0.5rem;padding: 0 0.03rem 0 0.04rem"/>
      </template>
    </van-cell>
    <div v-if="$store.getters.user_info && $store.getters.user_info.try_user == 1">
      <van-cell-group>
        <div slot="title">当前体验用户角色</div>
        <van-cell to="/change_role" is-link>
        <template slot="title">
          {{$store.getters.user_info.company_info.name}}
          (<span v-for="(item, index) in $store.getters.user_info.employee_detail.role_list">{{item.remark}}</span>)
        </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell @click.stop="createCompany">
          <template #icon>
            <icon class="cell-item__icon" name="create_company"/>
            <span class="cell-item__title">创建我的企业</span>
          </template>
        </van-cell>
      </van-cell-group>
      <div class="contact_tel">
        <van-divider>服务热线</van-divider>
        <p><a href="tel:400-6877-880" style="color: #238dfa; font-size: 0.3rem; display: block; font-weight: bold;"><van-icon color="#238dfa" size="0.5rem" style="vertical-align: middle; padding-right:0.1rem" name="phone" />400-6877-880</a></p>
        <p style="line-height: 0.5；color: #adadad; text-decoration: underline; font-size: 0.2rem;" @click="go_website">www.g107.com</p>
      </div>
    </div>
  <!-- 分享 -->
  <van-action-sheet v-model="show" get-container="boby" title="分享功道云">
    <share :share_data="share_data" @successFx="successFx" :isShowQQ="true"></share>
  </van-action-sheet>
  </div>
</template>

<script>

import Vue from 'vue'
import {Image, Divider, ActionSheet, Dialog} from 'vant'
import {getToken, getRole_noe} from '@/utils/auth'
import share from '@/components/common/share'
import userImage from '@/components/common/user_image'
import moment from 'moment'

Vue.use(Divider).use(ActionSheet).use(Dialog)
export default {
  data () {
    return {
      account_info: {},
      user_info: {},
      show: false,
      expireDate: '', // 到期剩余天数
      endTime: '', // 到期时间
      isAdministrator: false, // 是否管理员
      share_data: {
        type: '',
        title: '',
        content: '',
        thumbs: '',
        href: ''
      }
    }
  },
  components: {
    [Image.name]: Image,
    userImage,
    share
  },
  mounted () {
    // this.account_info = JSON.parse(window.plus ? plus.storage.getItem('account_info') : localStorage.getItem('account_info')).data
    this.account_info = JSON.parse(window.plus ? plus.storage.getItem('user_info').data : localStorage.getItem('user_info')).data 
    this.user_info = JSON.parse(window.plus ? plus.storage.getItem('user_info') : localStorage.getItem('user_info')).data
    if (this.user_info.id) {
      this.isAdministrator = getRole_noe()
      var startTime = moment().format('YYYY-MM-DD')
      var endTime = moment(Number(this.user_info.company_info.expire_time) * 1000).format('YYYY-MM-DD')
      this.endTime = endTime
      this.expireDate = moment(endTime).diff(moment(startTime), 'days')// 获取两个时间的差值
    }
  },
  methods: {
    openMoney () {
      Dialog.alert({
        message: `
          <div style="text-align:center;">
            <div style="font-size: 0.36rem;text-align:center;font-weight: 600;">续费/升级</div>
            <div style="font-size: 0.28rem">请在功道云积分服务群中联系客服顾问或电话咨询：<span class='color-blue'>400-6877-880</span></div>
          </div>`,
        theme: 'round-button'
      }).then(() => {})
    },
    successFx (is) {
      // this.$toast.loading({message: '分享成功'})
      this.show = false
    },
    openfx () {
      this.$toast('请点击右上角分享')
      return
    },
    // 重启应用
    restartApp () {
      window.plus ? plus.runtime.restart() : ''
    },
    quitApp () {
      window.plus ? plus.runtime.quit() : ''
    },
    // 打开官网
    go_website () {
      if (window.plus) {
        plus.runtime.openURL('http://www.g107.com/')
      } else {
        window.open('http://www.g107.com/')
      }
    },
    toAccount () {
      this.$router.push({name: 'account'})
    },
    createCompany () {
      this.$router.push({name: 'create_company', params: {onsuccess: this.getCompanyData.bind(this)}})
    },
    getCompanyData (done) {
      this.$toast.loading({mask: true, message: '正在加载'})
      request({url: '/api/account/site', method: 'get'}).then(res => {
        if (res.data.code === 1) {
          this.data = res.data.data
        }
      }).finally(() => {
        this.$toast.clear()
        done && done()
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .color_yellow{
    cursor:pointer;
  }
  .about-me__container {
    font-size: 0.32rem;
    color: #303133;

    & .nav-bar__wrap {
      position: relative;
      height: 1.9rem;
      background-color: #26a2ff;

      & .about-me__header {
        position: relative;
        top: 0.36rem;
        margin: 0 0.32rem;
        height: 2.68rem;
        border-radius: 0.16rem;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 0 0.1rem rgba(0,0,0,0.2);

        & .about-me__info {
          display: flex;
          padding: 0 0.48rem 0 0.32rem;
          height: 1.72rem;
          border-bottom: 0.02rem solid #F5F7FA;
          align-items: center;
          justify-content: space-between;
        }

        & .about-me__name {
          font-size: 0.36rem;
          font-weight: 600;
        }

        & .about-me__avatar {
          width: 1.12rem;
          height: 1.12rem;
        }
      }

      & .platform-title > span {
        font-size: 0.28rem;
        color: #606266;
      }
    }

    & .about-blank__wrap {
      height: 1.4rem;
      background: #fff;
    }

    & .cell-item__icon {
      width: 0.56rem;
      height: 0.56rem;
    }
    & .repetition_cycle {
      width: 0.56rem;
      height: 0.56rem;
    }
    & .cell-item__title {
      display: inline-block;
      padding-left: 0.12rem;
      vertical-align: middle;
      width: 4rem;
      line-height: 0.50rem;
    }

    & /deep/ .van-icon-arrow {
      font-size: 0.3rem;
      color: #E4E7ED;
    }
  }

  .contact_tel{
    text-align: center;
    margin-top: 1.5rem;
    & p{
      margin: 0 auto;
    }
    & .van-divider{
      border-color: #d8d8d8;
      margin-bottom: 0.1rem;
    }
  }
</style>
