<template>
  <div class="my  ibps-fixed-bottom">
    <van-sticky>
      <van-nav-bar :title="generateTitle()" />
    </van-sticky>
    <div class="ibps-cell-wrapper ibps-top-wrapper">

      <!-- <van-card
        :thumb="avatar"
        :desc="org||$t('common.company')"
        @click="userInfo()"
      >
        <div
          slot="title"
          style="font-size:20px; margin-top: 10px; color: #333333;"
        >
          {{ userName }}
        </div>
        <template #tags>
          <van-tag plain size="large" type="primary">{{ position }}</van-tag>
        </template>
      </van-card> -->
      <van-card :thumb="avatar" :desc="org||$t('common.company')" centered @click="userInfo()">
        <div slot="title" class="ibps-user-title">
          <span class="ibps-user-title__name">{{ userName }}</span>
          <van-tag v-if="position" plain :size="size" type="primary">{{ position }}</van-tag>
        </div>
        <div slot="desc" class="ibps-user-desc">
          {{ org||$t('common.company') }}
        </div>
      </van-card>
    </div>

    <van-cell-group>
      <van-cell :title="$t('platform.my.change-password.title')" icon="lock" is-link to="changePassword" :size="size" />
      <lang-select />
    </van-cell-group>

    <div class="divider" />
    <van-cell-group>
      <!-- <van-cell :title="$t('platform.my.help')" icon="question" is-link :size="size" @click="help" /> -->
      <!-- <van-cell :title="$t('platform.my.about')" icon-prefix="ibps-icon" icon="logo" is-link :size="size"
        @click="about" /> -->
      <switch-environment v-if="$nodeEnv === 'development'" />

    </van-cell-group>

    <!-- 退出登录 -->
    <van-cell-group>
      <van-row type="flex" justify="center" class="ibps-cell-wrapper">
        <van-col span="24">
          <van-button type="default" block :size="size" @click="logout">
            {{ $t('platform.my.logout') }}
          </van-button>
        </van-col>
      </van-row>
    </van-cell-group>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import defaultImage from '@/assets/images/logo/lc.png'
  import { getFile } from '@/utils/image'
  // import LcCard from '@/components/LcCard'
  import LangSelect from './lang-select'
  import SwitchEnvironment from '@/views/system/switch-environment'
  import navbar from '@/mixins/navbar'

  export default {
    components: {
      LangSelect,
      SwitchEnvironment
    },
    mixins: [navbar],
    data() {
      const { first = '', second = '' } = this.$store.getters.level
      const { userId, userList = [], deptList = [], menus, userInfo } = this.$store.getters
      const t1 = deptList.find(i => i.positionId === first) || {}
      const t2 = deptList.find(i => i.positionId === second) || {}
      // console.log(first, second, deptList)
      const locationName = second ? t1.positionName + t2.positionName : t1.positionName
      return {
        defaultImage: defaultImage,
        size: 'large',
        positionList: [],
        locationName
      }
    },
    computed: {
      ...mapState('ibps/user', [
        'info'
      ]),
      avatar() {
        const str = "/file/getImage?attachmentId="
        const photo = this.info && this.info.employee ? (/^\d+$/.test(this.info.employee.photo) ? (str + this.info.employee.photo) : this.info.employee.photo) : null
        if (this.$utils.isEmpty(photo)) {
          return this.errorImage
        }
        return getFile(photo)
      },
      errorImage() {
        return defaultImage
      },
      userName() {
        return this.info && this.info.user ? this.info.user.fullname : ''
      },
      org() {
        return this.locationName
      },
      position() {
        const positions = this.info && this.info.positions ? this.info.positions : null
        const pos = []
        if (this.$utils.isNotEmpty(positions)) {
          for (var i = 0; i < positions.length; i++) {
            pos.push(positions[i].name)
          }
        }
        return pos.join(',')
      }
    },
    methods: {
      userInfo() {
        this.$router.push({ name: 'userInfo' })
      },
      logout() {
        this.$dialog.confirm({
          title: this.$t('common.dialog.title'),
          message: this.$t('platform.my.logoutMessage')
        }).then(() => {
          this.$store.dispatch('ibps/account/logout', { vm: this }).then(() => {
            this.$router.push({ path: '/refresh' })
          })
        }).catch(() => {

        })
      },
      about() {
        this.$router.push({ path: '/my/aboutUs' })
      },
      help() {
        this.$router.push({ path: '/my/help' })
      },
      switchEnvironment() {

      }
    }
  }
</script>
<style lang="scss" scoped>
  .divider {
    height: 8px;
    background: #f8f8f8;
  }

  .my {
    min-height: calc(100vh - 55px);
    background: #f8f8f8;

    .ibps-top-wrapper {
      padding-top: 0;

      .ibps-user-title {
        display: flex;
        align-items: center;
        margin: 10px 0 6px 0;

        .ibps-user-title__name {
          font-size: 20px;
          margin-right: 15px;
          color: #333333;
          font-weight: bold;
        }
      }

      .ibps-user-desc {
        font-size: 14px;
        color: #333333;
      }
    }

    .van-card {
      background-color: #fff;

      .van-card__header {
        display: flex;
        align-items: center;
      }

      .van-card__thumb {
        width: 58px;
        height: 58px;
        margin-right: 17px;
      }
    }

  }
</style>