<template>
  <div class="mine">
    <div class="mine_box">
      <div class="mine_avatar">
        <img  :src="userInfo?.avatar" alt="">
      </div>
      <div>{{userInfo?.name}}</div>
    </div>
    <div class="mine_content">
      <div class="mine_flex">
        <div class="flex_item" @click="jump('/task')">
          <div class="item_box">任务巡检</div>
          <div class="item_box red">{{info.taskNum}}</div>
        </div>
        <div class="flex_item" @click="jump('/daily')">
          <div class="item_box">日常巡检</div>
          <div class="item_box red">{{info.dailyNum}}</div>
        </div>
        <div class="flex_item" @click="jump('/history')">
          <div class="item_box">历史巡检</div>
          <div class="item_box blue">{{info.historyNum}}</div>
        </div>
      </div>
      <div class="mine_list">
        <div class="mine_lg">
          <nut-row>
            <nut-col :span="12">
              <div class="text-left">姓名</div>
            </nut-col>
            <nut-col :span="12">
              <div class="text-right">{{userInfo?.name}}</div>
            </nut-col>
          </nut-row>
        </div>
        <div class="mine_lg">
          <nut-row>
            <nut-col :span="12">
              <div class="text-left">手机号</div>
            </nut-col>
            <nut-col :span="12">
              <div class="text-right">{{userInfo?.phone}}</div>
            </nut-col>
          </nut-row>
        </div>
        <div class="mine_lg">
          <nut-row>
            <nut-col :span="12">
              <div class="text-left">所属部门</div>
            </nut-col>
            <nut-col :span="12">
              <div class="text-right">{{userInfo?.departmentName}}</div>
            </nut-col>
          </nut-row>
        </div>
        <div class="mine_lg">
          <nut-row>
            <nut-col :span="12">
              <div class="text-left">工作地点</div>
            </nut-col>
            <nut-col :span="12">
              <div class="text-right">{{userInfo?.workLocationName}}</div>
            </nut-col>
          </nut-row>
        </div>
      </div>
      <div class="mine_button">
        <nut-button block type="info" @click="logout">退出登录</nut-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mine"
}
</script>
<script setup>
  import { onMounted, ref } from "vue";
  import { useRouter } from "vue-router";
  import tool from "../../utils/tool";
  import { getPollingNum } from "../../utils/api";

  const router = useRouter()

  const jump = (url) => {
    router.push({
      path: url
    })
  }


  const info = ref({
    dailyNum: 0,
    historyNum: 0,
    taskNum: 0
  })

  const init = () => {
    getPollingNum().then(res => {
      if(res.code === 200) {
        info.value = res.data
      }
    })
  }

  const logout = () => {
    tool.data.remove('snowy_token')
    tool.data.remove('snowy_org_id')
    tool.data.remove('snowy_user_info')
    router.replace('/login')
  }

  const userInfo = ref({})

  onMounted(() => {
    userInfo.value = tool.data.get('snowy_user_info');
    console.log(userInfo.value)
    init()
  })
</script>

<style scoped>
  .mine_box {
    width: 100%;
    height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .mine_avatar {
    width: 80px;
    height: 80px;
    margin: 0 20px;
  }
  .mine_avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
  }
  .mine_content {
    box-sizing: border-box;
    padding: 0 16px;
  }
  .mine_flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .flex_item {
    width: 100px;
    height: 70px;
    background-color: #fff;
    border-radius: 10px;
  }
  .item_box {
    width: 100%;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    text-align: center;
  }
  .red {
    color: #FF0000;
  }
  .blue {
    color: #008CFF;
  }
  .mine_list {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .mine_lg {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
  }
  .mine_lg:last-child{
    border-bottom: 0;
  }
  .text-left {
    text-align: left;
    padding-left: 10px;
  }
  .text-right {
    padding-right: 10px;
    text-align: right;
    color: #808080;
  }
  .mine_button {
    width: 100%;
  }
</style>
