<!--  -->
<template>
  <div class="person-list-container">
    <van-nav-bar title="人员列表" :left-arrow="true" left-text="返回" @click-left="onNavBack">
      <van-icon name="plus" slot="right" @click="onAddPerson" />
    </van-nav-bar>
    <div class="main" v-show="isPageShow">
      <div class="person-list" v-if="personList.length > 0">
        <div class="item" v-for="(item, index) in personList" :key="index">
          <img :src="item.avatar" alt="" />
          <div class="infos">
            <p>昵称: {{ item.nickName }}</p>
            <p>IMEI: {{ item.imei || '无' }}</p>
          </div>
          <div class="action">
            <div class="btn" @click="onUnBind(item)">
              <!-- 根据deviceId是否为空判断可以解绑还是绑定设备 -->
              <span>{{ item.deviceId ? '解绑' : '绑定' }}设备</span>
            </div>
            <div class="btn" @click="onDelete(item)">
              <span>删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="person-list no-data" v-else>
        <!-- <img src="~/@/assets/img/news-noData.png" alt="" /> -->
        <p>暂无人员信息</p>
      </div>
    </div>
  </div>
</template>

<script>
import APIHealthUser from '@/api/health-user';
import APIDevice from '@/api/device';
import ToastService from '../../services/toast-service';
import DialogService from '../../services/dialog-service';
import { isNull } from '@/services/utils-service';
export default {
  data() {
    return {
      personList: [],
      isPageShow: false
    };
  },
  created() {},
  mounted() {
    this.getPersonList();
  },
  methods: {
    getPersonList() {
      ToastService.loading();
      APIHealthUser.personList()
        .then(res => {
          console.log('人员列表', res);
          if (res.data.stateCode === 1) {
            const list = res.data.data;
            if (list) {
              this.personList = list;
              if (isNull(this.$store.getters.personId)) {
                this.$store.commit('personId', list[0].id);
              }
              if (isNull(this.$store.getters.deviceId)) {
                this.$store.commit('deviceId', list[0].deviceId);
                this.$store.commit('serialNo', list[0].imei);
              }
            }
          } else {
            this.personList = [];
          }
        })
        .catch(() => {
          this.isPageShow = true;
        })
        .finally(() => {
          ToastService.clear();
          this.isPageShow = true;
        });
    },
    onNavBack() {
      this.$router.push({
        // 2023.11.27 需求变更 如果 路由带有backRouter 则优先返回 backRouter，否则再判断fromRouter
        name: 'Myself'
      });
    },
    onAddPerson() {
      this.$router.push({
        name: 'personInfos',
        query: {
          from: 'personList',
          showLeft: true,
          backRouter: 'personList',
          toRouter: 'personList'
        }
      });
    },
    onUnBind(item) {
      if (!item.deviceId) {
        this.$store.commit('personId', item.id);
        // 未绑定设备
        this.$router.push({
          name: 'deviceBinding',
          query: {
            from: 'personList',
            backRouter: 'personList',
            toRouter: 'personList'
          }
        });
      } else {
        this.$store.commit('personId', item.id);
        DialogService.confirm({
          title: '解绑设备',
          message: `解绑设备后将无法查看${name}的定位轨迹及相关通知，是否确定解绑？`,
          showCancelButton: true
        })
          .then(() => {
            ToastService.loading({ message: '正在解绑' });
            APIDevice.unbindDevice({
              headers: { AuthToken: this.$store.getters.authToken },
              deviceId: item.deviceId,
              userId: this.$store.getters.userId,
              personId: Number(item.id)
            })
              .then(res => {
                ToastService.clear();
                let item = res.data;
                if (item.stateCode == 1) {
                  ToastService.success({
                    message: '解绑成功',
                    onClose: () => this.getPersonList()
                  });
                  this.$store.commit('deviceId', '');
                  this.$store.commit('serialNo', '');
                } else {
                  DialogService.confirm({
                    title: '解绑失败',
                    message: item.message || ''
                  });
                }
              })
              .catch(() => ToastService.clear());
          })
          .catch(() => {});
      }
    },
    onDelete(item) {
      this.$store.commit('personId', item.id);
      DialogService.confirm({
        title: '删除人员',
        message: `是否确定删除人员？`,
        showCancelButton: true
      }).then(() => {
        // todo删除接口
        ToastService.loading({ message: '正在删除' });
        APIHealthUser.deletePerson({
          personId: Number(item.id)
        })
          .then(res => {
            ToastService.clear();
            let item = res.data;
            if (item.stateCode == 1) {
              if (Number(item.id) == Number(this.$store.getters.personId)) {
                this.$store.commit('deviceId', '');
                this.$store.commit('serialNo', '');
              }
              this.$store.commit('personId', '');
              ToastService.success({
                message: '删除成功',
                onClose: () => this.getPersonList('false')
              });
            } else {
              DialogService.confirm({
                title: '删除失败',
                message: item.message || ''
              });
            }
          })
          .catch(() => ToastService.clear());
      });
    }
  }
};
</script>
<style scoped lang="scss">
.person-list-container {
  height: 100vh;
  overflow: hidden;
  .main {
    position: relative;
    height: calc(100vh - 100px);
    width: 100%;
    background-color: #fff;
    overflow: scroll;
    .person-list {
      position: relative;
      height: 90vh;
      width: 100%;
      background-color: #fff;
      overflow: scroll;
      .item {
        position: relative;
        padding: 20px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid $border_color;
        img {
          height: 80px;
          width: 80px;
          border-radius: 50%;
          object-fit: contain;
        }
        .infos {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          width: 45%;
          padding-left: 10px;
          p {
            font-size: 28px;
            padding: 10px 0;
          }
        }
        .action {
          @include center();
          .btn {
            height: 40px;
            min-width: 100px;
            margin: 0 10px;
            padding: 10px 8px;
            background-color: $blue;
            color: #fff;
            font-size: 26px;
            border-radius: 10px;
            @include center();
          }
        }
      }
    }
    .no-data {
      @include center();
      flex-direction: column;
      img {
        height: 220px;
        width: 351px;
        @include center();
      }
      p {
        color: #999;
        font-size: 26px;
      }
    }
  }
}
/* @import url(); 引入css类 */
</style>