<!--
 * @Date: 2023-05-05 10:07:58
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-05-20 10:57:51
 * @FilePath: \ParentWeb\src\views\device\watchSetting\drownWhiteList.vue
 * @description:
-->
<template>
  <div class="drown-white-list">
    <van-nav-bar title="免告警水域" :border="true" left-arrow @click-left="onNavBack" />
    <div class="main" v-show="isPageShow">
      <div class="list" v-if="drownList.length > 0">
        <div class="item" v-for="(item, index) in drownList" :key="index">
          <p>
            <span>poiId：{{ item.poiId }}</span>
          </p>
          <p>
            <span>水域类型：{{ item.title }}</span>
          </p>
          <p>
            <span>水域名称：{{ item.address }}</span>
          </p>
          <p>
            <span>设置时间：{{ item.createTime }}</span>
          </p>
          <div class="btn-con">
            <div class="btn" @click="onDelete(item.imei, item.poiId)">
              <p>删除</p>
            </div>
          </div>
        </div>
      </div>
      <div class="noData" v-else>
        <p>暂无数据~</p>
      </div>
    </div>
  </div>
</template>

<script>
import APIAlarm from '@/api/core';
import { isNotNull } from '@/services/utils-service';
import DialogService from '@/services/dialog-service';
import ToastService from '@/services/toast-service';
export default {
  name: '',
  data() {
    return {
      date: new Date().Format('yyyy-MM-dd'),
      bloodIcon: require('../../../assets/myself/health/blood_icon.png'),
      drownList: [],
      isPageShow: false
    };
  },
  computed: {
    imei() {
      return this.$store.getters.serialNo;
    }
  },
  created() {
    this.getAuth();
    this.getDrownReportFilterQuery();
  },
  methods: {
    getAuth() {
      let manufactorId = '5bf13062-a41e-4d00-ba14-1101aad12650';
      APIAlarm.getAuth({ manufactorId: manufactorId }).then(res => {
        this.$store.commit('gatewayToken', res.data.data);
      });
    },
    onNavBack() {
      this.$router.push({
        name: 'dangerAreaMonitor'
      });
    },
    getDrownReportFilterQuery() {
      ToastService.loading({ message: '数据加载中' });
      let reqBody = {
        imei: this.imei /* '864316050221113' */
      };
      APIAlarm.getDrownReportFilterQuery(reqBody)
        .then(res => {
          if (res.data.code === 106 || res.data.code === 104) {
            // token过期
            this.getAuth();
            setTimeout(() => {
              this.getDrownReportFilterQuery();
            }, 1500);
          } else {
            let data = res.data.data;
            if (isNotNull(data)) {
              console.log('水域告警白名单数据', data);
              this.drownList = data;
            }
          }
          ToastService.success({ message: '数据加载完成' });
          this.isPageShow = true;
        })
        .catch(e => {
          console.log(e);
          ToastService.clear();
          this.isPageShow = true;
        });
    },
    onDelete(imei, poiId) {
      DialogService.confirm({
        message: '是否要删除此告警水域',
        showCancelButton: true
      })
        .then(() => {
          this.deleteDrownReportFilter(imei, poiId);
        })
        .catch(() => {});
    },
    deleteDrownReportFilter(imei, poiId) {
      ToastService.loading({
        message: '删除中'
      });
      let reqBody = {
        imei: imei || this.imei,
        poiId: poiId
      };
      APIAlarm.drownReportFilterDelete(reqBody)
        .then(res => {
          let data = res.data;
          console.log('删除data', data);
          if (data.code === 0) {
            ToastService.success({
              message: '删除成功'
            });
          }
          this.getDrownReportFilterQuery();
        })
        .catch(e => {
          DialogService.confirm({
            message: `${e.message}`
          });
        })
        .finally(() => {
          setTimeout(() => {
            ToastService.clear();
          }, 1500);
        });
    }
  }
};
</script>

<style scoped lang="scss">
.drown-white-list {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  .main {
    height: calc(100vh - 160px);
    overflow: scroll;
    .list {
      @include center();
      flex-direction: column;
      .item {
        width: 600px;
        margin: 20px 0;
        padding: 30px;
        font-size: 32px;
        border: 2px solid $border_color;
        border-radius: 15px;
        p {
          padding: 8px 0;
        }
        .btn-con {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .btn {
            height: 60px;
            width: 220px;
            @include center();
            border-radius: 30px;
            margin-top: 20px;
            background-color: red;
            color: #fff;
          }
        }
      }
    }
    .noData {
      height: 450px;
      @include center();
      margin: 200px auto 0;
      /* background: url('../../../assets/myself/news-noData.png') center no-repeat;
      background-size: 336px 236px; */
      p {
        @include colorAndFont(#999, 28);
        margin: 200px auto 0;
      }
    }
  }
}
</style>
