<template>
  <div>
    <van-tabs v-model="active" @change="changeTab">
    <!-- 安全围栏 -->
      <van-tab title="安全围栏" name="inout">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="padding-bottom: 1rem;">
          <template v-if="fenceList.length">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              @load="onLoad"
            >
              
            <div class="box-card" 
                v-for="item in fenceList"
                :key="item.id">
              <van-row type="flex" justify="space-between">
                <van-col :span="20" style="font-weight:600;">
                  <span>{{item.name}}</span>
                  <van-icon name="eye" color="#2196f3" 
                    @click="$router.push({name:'yys_fence_fenceshape', query: {type:'inout',id:item.id}})" 
                  />
                </van-col>

                
                <van-col :span="2" style="text-align:right;">
                  <van-icon name="setting" color="#219600" 
                    @click="$router.push({name:'yys_fence_addedit', query: {type:'inout',id:item.id}})" 
                  />
                </van-col>
                <van-col :span="2" style="text-align:right;">
                  <van-icon name="delete" color="#ff0000" @click="deleteFence(item)" />
                </van-col>

              </van-row>

              <van-row :gutter="16"  style="margin-top:10px;">
                <van-col :span="12" style="display:flex;justify-content: space-between;">
                  <span>进告警</span>
                  <van-switch size="0.4rem" active-color="#4cd864" inactive-color="#dcdee0"
                    :value="item.inAlarm" 
                    @input="changeState('in',item,$event)" 
                  />
                </van-col>
                <van-col :span="12" style="display:flex;justify-content: space-between;">
                  <span>出告警</span>
                  <van-switch :value="item.outAlarm" @input="changeState('out',item,$event)" size="0.4rem" active-color="#4cd864" inactive-color="#dcdee0" />
                </van-col>
              </van-row>
            </div>

            </van-list>
          </template>
          <van-empty v-else description="暂无数据" />
        </van-pull-refresh>
      </van-tab>
      <!-- SOS围栏 -->
      <van-tab title="SOS围栏" name="sos">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <template v-if="fenceList.length">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              @load="onLoad"
            >
              <div class="box-card" 
                  v-for="item in fenceList"
                  :key="item.id">
                <van-row type="flex" justify="space-between">
                  <van-col :span="20" style="font-weight:600;">
                    <span>{{item.name}}</span>
                    <van-icon name="eye" color="#2196f3" 
                      @click="$router.push({name:'yys_fence_fenceshape', query: {type:'sos',id:item.id}})" 
                    />
                  </van-col>

                  
                  <van-col :span="2" style="text-align:right;">
                    <van-icon name="setting" color="#219600" 
                      @click="$router.push({name:'yys_fence_addedit', query: {type:'sos',id:item.id}})" 
                    />
                  </van-col>
                  <van-col :span="2" style="text-align:right;">
                    <van-icon name="delete" color="#ff0000" @click="deleteFence(item)" />
                  </van-col>

                </van-row>

              </div>
              
            </van-list>
          </template>
          <van-empty v-else description="暂无数据" />
        </van-pull-refresh>
      </van-tab>

    </van-tabs>

    <router-link :to="{name:'yys_fence_fenceshape',query:{type:active}}">
      <div class="fl-buttomright-button">
        <i style="font-size:24px">+</i>
      </div>
    </router-link>
    <!-- 遮罩层 -->
    <van-overlay :show="showOverlay">
      <div class="wrapper" >
        <van-loading type="spinner" color="#1989fa" vertical>处理中...</van-loading>
      </div>
    </van-overlay>

  </div>
</template>

<script type="text/babel">
import Vue from 'vue'; 
import { 
  Switch,Tag,Overlay,Loading,
  Dialog,Notify,Empty,
  Tab,Tabs,
  List,CellGroup,Cell,PullRefresh,
  Row,Col,Icon,Field,Popup,Picker } from 'vant';

Vue.use(Empty);
Vue.use(Switch);
Vue.use(Overlay);
Vue.use(Dialog);
Vue.use(Notify);
Vue.use(Tag);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(List);
Vue.use(Cell);
Vue.use(Field);
Vue.use(Row);
Vue.use(Col);
Vue.use(Icon);
Vue.use(PullRefresh);
Vue.use(Popup);
Vue.use(Picker);
Vue.use(Loading);

export default {
  data() {
    return {
      error: false,
      refreshing: false,
      loading: false,
      finished: false,

      active: "sos",

      showOverlay: false,

      inFenceAlarm: false,
      outFenceAlarm: false,

      sysFences: [],
      fenceList: [],

      items: [
          {label: '系统围栏', content: ''},
          {label: '用户围栏', content: ''},
      ]
    };
  },
  created() {
    this.userid = localStorage.getItem("yysUserid");
    this.openid = localStorage.getItem("openid");
    let cacheActive = localStorage.getItem("active_fence_tab");

    if (cacheActive) {
      this.active = cacheActive;
    }

  },
  mounted(){
    this.onLoad();
  },

  methods: {
    // 删除围栏
    deleteFence(fence) {
      Dialog.confirm({
        title: '提醒',
        message: "确定要<span style='color: red;'>删除</span>围栏【"+ fence.name +"】吗？",
      })
      .then(resp => {
        this.$http.get('deleteYysFences&openid='+this.openid+'&userid='+this.userid+'&id='+fence.id)
            .then(resp=>{
              this.$notify({type:'success',message:resp.data.message})
              this.onLoad();
            })
            .catch(err => {
              console.log(err);
              this.$notify('出错了')
            })
      }).catch(err=>{})

    },
    // 切换告警选择
    changeState(type, item, val) {
      // 显示遮罩层
      this.showOverlay = true;

      let postData = {
        id: item.id,
        alarmType: type,
        value: val
      }
      this.$http.post('changeUserFenceAlarmStatus', JSON.stringify(postData))
          .then(resp => {
            this.showOverlay = false;
            if (resp.status === 200 && resp.data.success) {
              let text = type + 'Alarm';
              item[text] = val;
            }
          })
          .catch(err => {
            console.log(err);
            this.showOverlay = false;
            this.$notify('出错了,请稍后重试');
          })

    },
    // 显示详情
    showDetail(alarm_id) {
      if (!alarm_id) {
        this.$notify('获取告警信息失败');
        return;
      }
      let query = {
        id: alarm_id
      }
      this.$router.push({ path: "/yys_alarm_detail", query: query });
    },
    // 下拉刷新
    onRefresh() {
      this.fenceList = [];

      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    // 切换标签
    changeTab(val) {
      localStorage.setItem("active_fence_tab", val);
      this.onRefresh();
    },
    // 加载数据
    onLoad() {
      let type = null;

      switch (this.active) {
        case 'sos':
          type = 2;
          break;
        case 'inout':
          type = 0;
          break;
        default:
          type = 0;
          break;
      }

      this.$http.get("/getYysFences&userid=" + this.userid+'&openid='+this.openid+'&type='+ type)
          .then(resp => {
            this.loading = false;
            this.refreshing = false;
            
            if (resp.status !== 200 || !resp.data.success) {
              this.$notify(resp.data.message || '出错了')
              return;
            }

            this.finished = true;
            this.fenceList = resp.data.data || [];
              
          })
          .catch(res => {
            
            this.loading = false;
            this.refreshing = false;
            this.error = true;
            console.log(res);
          });


    },

  }
};
</script>
<style>

.box-card {
  line-height: 24px;
  margin: 10px 10px;
  padding: 10px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #323233;
  box-sizing: border-box;
  background-color: #ffffff;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.fl-buttomright-button{
  position: fixed;
  bottom: 1.3rem;
  right: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  background-color: #2196f3;
  box-shadow:0 0 6px gray ;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 12px;
}
.right-column-area{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.right-wrap-area{
  display: flex;
  flex-direction: wrap;
  justify-content: center;
  align-items: center;
}

.cell-item-padding{
  padding: 0.1rem 0.1rem 0.1rem 0.24rem;
}
.cell-right-layout{
  display: flex;
  align-items: center;
}

.radio-column{
  display: flex;
  flex-direction: column;
}



</style>