<template>
  <div id="tags-view-container" class="tags-view-container">
    <div class="left-title">
      {{ tLang('message', '工业物联网监控平台') }}
    </div>

    <div class="right-items">
      <div class="time-frame">
        {{ tLang('message', '数据时间范围') }}：
        <el-radio-group v-model="timeFrame" fill="#60D4FB" @change="timeFrameChange">
          <el-radio-button :label="tLang('message', '今日')" value="d" />
          <el-radio-button :label="tLang('message', '本周')" value="w" />
          <el-radio-button :label="tLang('message', '本月')" value="m" />
        </el-radio-group>

      </div>
      <div style="margin-right: 10px;">
        {{ timeHtml }}
      </div>
      <el-tooltip :content="tLang('common', '选择语言')" effect="dark" placement="bottom">
        <lang-select id="lang-select" class="right-menu-item hover-effect" />
      </el-tooltip>
      <el-popover placement="bottom" :width="150" trigger="click">
        <template #reference>
          <div class="user-logout">
            <svg-icon icon-class="user" class-name="user-icon" />
          </div>
        </template>
        <el-table :data="gridData" :show-header="false">
          <el-table-column property="date" label="date">
            <template #default="{ row }">
              <el-button type="text" @click="row.option()">{{ row.text }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-popover>
    </div>

  </div>
</template>

<script setup>
import LangSelect from '@/components/LangSelect'
import { useRouter,useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user'
import useNowTime from "@/hook/nowTime";
import { useI18n } from 'vue-i18n'

let { te, t } = useI18n();
let { proxy } = getCurrentInstance()
let router = useRouter()
let route = useRoute()
let { timeHtml } = useNowTime();
let userStore = useUserStore()

let timeFrame = ref(route.params.timeFrame||'d')
let gridData = ref([
  { text: proxy.tLang('common', '退出登录'), option: logout },
])

function timeFrameChange(val) {
  timeFrame.value = val
  if (val == 'd') {
    router.push({ path: '/index' })
  } else{
    router.push({ path: '/history_'+val })
  }
}

function logout() {
  proxy.$modal.confirm(proxy.tLang('common', '确定注销并退出系统吗？'), proxy.tLang('common', '提示'), {
    confirmButtonText: proxy.tLang('common', '确定'),
    cancelButtonText: proxy.tLang('common', '取消'),
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index';
    })
  }).catch(() => { });
}
onMounted(() => {
})

</script>

<style lang='scss' scoped>
.right-menu-item {
  width: 48px;
  height: 48px;
  margin-right: 10px;
}

.user-icon {
  cursor: pointer;
  font-size: 30px;
  vertical-align: middle;
}

.user-logout {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.tags-view-container {
  position: relative;
  height: 48px;
  width: 100%;
  background: #02AADC;
  color: #fff;
  border-bottom: 1px solid #131617;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;

  .left-title {
    margin-left: 10px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
  }

  .right-items {
    height: 48px;
    width: 65%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .time-frame {
      width: 400px;
      height: 48px;
      margin-right: 10px;
      font-size: 14px;
      color: #fff;
      line-height: 46px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

  }



}
</style>
