<template>
  <div>
    <van-nav-bar title="我的组织" left-text="返回" @click-left="$route_back" left-arrow>
      <!-- <template slot="right" class="department_right_nav">
        <van-dropdown-menu  duration="0.3" text="text"  class="head_dropdown_menu">
          <van-dropdown-item title="•••"  @change="plus_menu" :options="option" />
        </van-dropdown-menu>
      </template> -->
    </van-nav-bar>
    <div class="body_com has_header">
      <scroller>
        <div v-for="(item, index) in list" :key="index" style="padding-top:0.2rem; padding-left:0.2rem; padding-right:0.2rem;">
          <van-panel :title="item.site.name" style="box-shadow: 0 2px 4px rgba(140,140,140,0.1);border-radius:0.12rem;" class="company_name">
            <div style="padding:0.16rem 0.32rem; font-size:0.28rem; color:#666;">
              <p v-if="item.account_id == item.site.account_id">创建时间：{{ item.create_time | datetime }}</p>
              <p v-else>加入时间：{{ item.create_time | datetime }}</p>
            </div>
            <div slot="footer" style="text-align: right;"><van-button size="small" @click="login(item.site.id)" :loading="item.pass_loading" type="info">进入企业</van-button></div>
          </van-panel>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { getToken, setToken } from '@/utils/auth';
import Vue from 'vue';
import moment from 'moment';
import { Panel,DropdownMenu,DropdownItem } from 'vant';

Vue.use(Panel).use(DropdownMenu).use(DropdownItem);

export default {
  name: 'login_company_list',
  data() {
    return {
      page: 0,
      list: [],
      option: [{ text: '账号注销', value: 1 }],
    };
  },
  filters: {
    datetime(time) {
      return moment(time * 1000).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  // created() {
  //   this.get_site_list();
  // },
  activated(){
    this.get_site_list();
  },
  methods: {
    plus_menu (val) {
      if (val) {
        this.$router.push('/verify')
      }
    },
    get_site_list() {
      this.$toast.loading({
        mask: false,
        message: '获取企业信息'
      });
      this.$axios('get', '/api/pro/account/site', '', 'token').then(res => {
        this.$toast.clear();
        if (res.data.code === 1) {
          this.list = res.data.data;
          if (this.list.length === 1) {
            this.login(this.list[0].site.id);
          }
        } else {
          this.$toast('获取企业失败');
        }
      });
    },
    login(id) {
      this.$toast.loading({
        mask: false,
        message: '正在登录,请稍候'
      });
      this.$axios('post', '/api/pro/employee-login', { site_id: id }).then(res => {
        const item = res.data.data;
        setToken(item.token);
        this.$removeCache('user_info');
        this.$store.commit('SET_USERINFO', res.data.data); // 设置员工信息
        window.sessionStorage.setItem('__VCKEEPALIVE__', JSON.stringify(['/','/home']))
        window.sessionStorage.setItem('routers', '/');
        window.location.href = window.location.href.split('#')[0];
      }).finally(() => {
        this.$toast.clear();
      });
    }
  }
};
</script>

<style scoped>
.body_com {
  height: calc(100% - 1rem);
  position: relative;
  background-color: #f5f5f5;
}
.company_name /deep/ .van-cell__title span {
  color: #1c1c1c;
  font-weight: bold;
}
.text{
  text-align: center;
  color: #969799;
  font-size: 0.28rem;
  padding: 0.2rem 0;
}
/deep/ .van-dropdown-menu__bar {
  background-color: transparent;
}
/deep/ .van-dropdown-menu__title{
  color: #FFF;
}
/deep/ .van-dropdown-menu__title::after{
  display: none;
}
/deep/ .van-nav-bar__right{
  overflow: hidden;
}
/deep/ .van-dropdown-menu__title--active{
  color: #FFF!important;
}
</style>
