<template>
  <div class="contmin">
    <div class="head-tab">
      <span :class="active == 'USER' ? 'active' : ''" @click="active = 'USER'">个人中心</span>
      <span :class="active == 'USER' ? '' : 'active'" @click="active = 'INFO',getListData()">消息中心</span>
    </div>
    <div v-if="active == 'USER'" class="userinfo">
      <div>
        <div class="toux"><img src="@/assets/lz/tx.png" />头像</div>
        <ul>
          <li>
            <span>姓名：</span>
            <el-input readonly v-model="params.userName"></el-input>
          </li>
          <li>
            <span>性别：</span>
            <el-input readonly v-model="params.sex"></el-input>
          </li>
          <li>
            <span>手机号：</span>
            <el-input readonly v-model="params.mobile"></el-input>
          </li>
          <li>
            <span>身份证号码：</span>
            <el-input readonly v-model="params.idEntityCard"></el-input>
          </li>
          <li>
            <span>警号：</span>
            <el-input readonly v-model="params.inDustRialId"></el-input>
          </li>
          <li>
            <span>所属部门：</span>
            <el-input readonly v-model="params.ssbm"></el-input>
          </li>
        </ul>
      </div>
    </div>
    <div v-else class="xiaoxi">
      <ul v-loading="loading">
        <li v-for="(item, index) in tableData" :key="index">
          <img v-show="item.xtLrrid !== 'admin'" class="icon" src="@/assets/images/situationPresentation/top-message.png"/>
          <img v-show="item.xtLrrid === 'admin'" class="xxx" src="@/assets/images/situationPresentation/top_message_xt.png"/>
          <div class="item-head">
            <span>{{ item.xtLrrid == "admin" ? "来自系统的通知" : `来自${item.xtLrrxm}的信息`}}</span>
            <div>
              <el-icon class="icon" size="16px" color="#206bcf"><Clock /></el-icon>{{ item.xtLrsj }}
            </div>
          </div>
          <p> {{ item.xxnr }} </p>
          <div class="btn">
            <span v-if="item.xtLrrid != 'admin'">
              <el-icon class="icon" size="16px" color="#e88e2a"><Edit /></el-icon>回复
            </span>
          </div>
        </li>
        <el-empty
          description="没有数据"
          :image-size="150"
          v-if="!loading && tableData.length <= 0"
        />
      </ul>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { getUserOrFjInfo } from "@/api/user-manage";
import { ref, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getItem } from "@/utils/storage";
import { getPageList, sendMsg } from "@/api/editPassword.js";
const router = useRouter();
const active = ref("USER");
const total = ref(0);
const listQuery = ref({
  pageNum: 1,
  pageSize: 20
});
const params = ref({});
const loading = ref(false)
function getUserInfo() {
  let id = getItem("USERID");
  let dept = getItem("deptId");
  let sfzh=localStorage.getItem('idEntityCard')
  getUserOrFjInfo({id,sfzh}).then((res) => {
    params.value = res;
    params.value.sex = res.sex == "1" ? "男" : "女";
    params.value.ssbm = dept[dept.length - 1].deptName;
  });
}

// 获取列表
function getListData() {
  loading.value = true
  getPageList(listQuery.value).then((res) => {
    loading.value = false
    tableData.value = res.records;
    total.value = res.total;
  }).catch(()=>{
    loading.value = false
  });
}
const tableData = ref([]);

/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageNum = 1;
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageNum = currentPage;
  getListData();
};


onMounted(() => { getUserInfo(); });
watch(() => router.currentRoute.value.fullPath,
  (val) => {
    active.value = val === "/editPassword" ? 'USER':'INFO'
  }
);
</script>

<style lang='scss' scoped>
.contmin {
  height: 100%;
  padding: 0 2%;
  background: url("~@/assets/images/situationPresentation/user_info.png")no-repeat;
  background-size: 100% 100%;
}
.head-tab {
  padding: 2%;
  span {
    display: inline-block;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    background: #02296a;
    margin-right: 12px;
  }
  span.active {
    background: #0d59b2;
  }
}
.userinfo {
  width: 100%;
  display: flex;
  justify-content: center;
  > div {
    width: 40%;
    height: 40%;
    .toux {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-left: 100px;
      img {
        border: 1px solid rgb(58, 73, 235);
        width: 80px;
        height: 80px;
        margin-bottom: 8px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    ul li {
      display: flex;
      align-items: center;
      margin: 24px 0;
      > span {
        width: 150px;
        text-align: right;
      }
    }
  }
}
.xiaoxi {
  ul {
    height: calc(100vh - 300px);
    overflow-y: scroll;
  }
  li {
    border: 1px solid rgb(1, 124, 255);
    padding: 12px 12px 12px 36px;
    margin: 12px 12px 0 0;
    position: relative;
    .icon {
      position: absolute;
      left: 10px;
      top: 12px;
    }
    .xxx{
      position: absolute;
      left: 5px;
      top: 5px;
    }
    .item-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        position: relative;
        .icon {
          position: absolute;
          top: 0;
          left: -12px;
        }
      }
    }
    p {
      color: #aeaeae;
    }
    .btn {
      display: flex;
      justify-content: flex-end;
      > span {
        cursor: pointer;
        position: relative;
        margin-left: 32px;
        .icon {
          position: absolute;
          top: 1px;
          left: -10px;
        }
      }
      > span:hover {
        color: #0d59b2;
      }
    }
  }
}
::v-deep .el-input__inner {
  background-color: #053390;
  border: 1px solid #00BFFF;
}
::v-deep .el-empty{
  margin-top: 10vw;
}
::v-deep .el-loading-mask{
  background: rgba(0,0,0,.5);
}
</style>
