<template>
  <div>
    <yd-tab v-model="tab2" :callback="fn" :prevent-default="false" :item-click="itemClick">
        <yd-tab-panel v-for="(item, index) in items" :label="item.label" :key="index">
            <yd-cell-group v-if="tab2==0">
                <van-empty v-if="sysFences.length==0" image="search" description="查询不到任何系统围栏" />
                <yd-cell-item type="label" class="cell-item-padding"  v-for="(sysItem, index) in sysFences" :key="sysItem.id">
                    <div slot="left">
                        <div style="display:flex;flex-direction:column">
                            <h4>{{sysItem.name}}</h4>
                            <div style="display: flex;justify-content: space-around;align-items:center;">
                                <yd-icon slot="icon" name="chakan" size="0.35rem" color="#2196f3" custom @click.native="watchSysFence(index)"></yd-icon>
                                <van-tag plain type="primary" style="height:0.4rem;margin-left:0.5rem" >
                                  {{sysItem.fence_type_text}}
                                </van-tag>
                                <!-- <yd-icon slot="icon" name="xiugai" size="0.4rem" color="#FF685D" custom></yd-icon>
                                <yd-icon slot="icon" name="shanchu" size="0.4rem" color="#FF685D" custom></yd-icon> -->
                            </div>
                        </div>
                    </div>

                    <div slot="right" class="cell-right-layout" v-if="sysItem.fence_type != 2">
                      <div class="right-column-area">
                        <div class="right-switch-area">
                          <span style="margin:5px">进告警</span> 
                          <van-switch :value="sysItem.inFenceAlarm" size="0.4rem" active-color="#4cd864" disabled />
                        </div>
                        <div class="right-wrap-area">
                          <span style="margin:5px">出告警</span>
                          <van-switch :value="sysItem.outFenceAlarm" size="0.4rem" active-color="#4cd864" disabled />
                        </div>
                      </div>
                    </div>
                    
                </yd-cell-item>
            </yd-cell-group>

            <yd-cell-group v-if="tab2==1">
                <van-empty v-if="fenceList.length==0" image="error" description="暂未设置任何个人围栏" />
                <yd-cell-item type="label" class="cell-item-padding" v-for="(item,index) in fenceList" :key="item.id">
                    <div slot="left">
                        <div style="display:flex;flex-direction:column">
                            <h4>{{item.name}}</h4>
                            <div style="display: flex;width: 2rem;justify-content: space-around;">
                                <!-- <yd-icon slot="icon" name="chakan" size="0.35rem" color="#2196f3" custom></yd-icon> -->
                                <yd-icon slot="icon" name="xiugai" size="0.34rem" color="#2196f3" custom @click.native="editFence(index)"></yd-icon>
                                <yd-icon slot="icon" name="shanchu" size="0.35rem" color="#FF685D" custom @click.native="delFence(item.id, item.name)"></yd-icon>
                                
                            </div>
                        </div>
                    </div>

                     

                    <div slot="right" class="cell-right-layout">
                        <!-- <yd-badge type="primary">进围栏告警</yd-badge> -->
                        <div class="right-area-left">
                          <span>推送间隔</span> 
                          <span style="display:flex;justify-content:center;align-items:center" @click="showIntervalDialog(item)">
                            <span style="font-size:12px;color:blue">{{item.sent_interval ? (item.sent_interval/60) + '分' :'未设置'}}</span> 
                            <van-icon style="margin-left:2px" name="setting" size="15" color="#2196f3" />
                          </span>
                        </div>
                      <div class="right-column-area">
                        <div class="right-switch-area">
                          <span style="margin:5px">进围栏告警</span> 
                          <van-switch :value="fenceList[index].inFenceAlarm" size="0.4rem" active-color="#4cd864" @input="changeFenceAlarmType(item.id, index, 'in', $event)" />
                        </div>
                        <div class="right-wrap-area">
                          <span style="margin:5px">出围栏告警</span>
                          <van-switch :value="fenceList[index].outFenceAlarm" size="0.4rem" active-color="#4cd864" @input="changeFenceAlarmType(item.id, index,'out', $event)" />
                        </div>
                      </div>
                      <!-- <div class="right-switch-area">
                        
                        <van-switch v-model="outFenceAlarm" size="0.4rem" active-color="#4cd864" />
                      </div> -->
                        <!-- <yd-switch slot="right" v-model="ydswitch"></yd-switch> -->
                    </div>
                      
                </yd-cell-item>
            </yd-cell-group>

        </yd-tab-panel>
    </yd-tab>

    <van-dialog v-model="stepShow" :title="intervalTitle" show-cancel-button @confirm="updateInterval">
      <div style="display:flex;justify-content:center;align-items:center">
        <span style="font-size:14px">设置推送间隔:</span>
        <van-stepper v-model="timeInterval" min="1" max="720" />
        <span style="font-size:14px">分钟</span>
      </div>
    </van-dialog>


  <router-link to="/fence_add">
    <div class="fl-buttomright-button" v-if="tab2==1">
      <i style="font-size:24px">+</i>
    </div>
  </router-link>
    


  </div>
</template>

<script type="text/babel">
import Vue from 'vue'; 
import 'vant/lib/index.css';
import { Switch, Dialog, Notify,Empty,Tag ,Stepper,Icon } from 'vant';

Vue.use(Empty);
Vue.use(Switch);
Vue.use(Dialog);
Vue.use(Notify);
Vue.use(Tag );
Vue.use(Stepper);
Vue.use(Icon);

export default {
  data() {
    return {
        tab2: 1,
        inFenceAlarm: false,
        outFenceAlarm: false,

        sysFences: [
        ],
        fenceList: [
        ],
        stepShow: false,
        timeInterval: 5,
        intervalTitle: '',
        selectSetFenceId: '',

        items: [
            {label: '系统围栏', content: 'aaaaaaaaaaa'},
            {label: '用户围栏', content: 'bbbbbbbbbbb'},
        ]
    };
  },
  mounted(){
    this.itemClick(1)
  },

  methods: {
    fn(label, key) {
        console.log(label, key);
    },
    itemClick(key) {
        this.$dialog.loading.open('数据加载中');
        this.tab2 = key;
        let that= this;
        if(key == 1){
          that.$http
          .get("/getUserFences&userid=" + localStorage.getItem("userid"))
          .then(res => {
              let resp = res.data;

              if(!resp.success){
                that.fenceList = [];
                this.$dialog.loading.close();
                return;
              }

              that.fenceList= resp.data;

              this.$dialog.loading.close();

              
          })
          .catch(res => {
              console.log(res);
              this.$dialog.loading.close();
          });
        }else{
          
          that.$http
          .get("/getSystemFences&userid=" + localStorage.getItem("userid") + '&userType=' + localStorage.getItem("userType"))
          .then(res => {
              let resp = res.data;

              if(!resp.success){
                this.$dialog.toast({
                    mes:resp.message
                });
                that.sysFences = [];
                this.$dialog.loading.close();
                return;
              }

              that.sysFences= resp.data;

              this.$dialog.loading.close();

              
          })
          .catch(res => {
              console.log(res);
              this.$dialog.loading.close();
          });
        }



    },
    changeFenceAlarmType(id, index, inOut, status){
      let that= this;
      let postData = {
        id: id,
        alarmType: inOut,
        value: status
      }
      that.$http({
            method:'post',
            url:"/changeUserFenceAlarmStatus",
            data:JSON.stringify(postData)
          }).then(({ data }) => {
            if(!data.success){
              that.$dialog.toast({
                  mes: data.message
              })
              return;
            }

            if(inOut == 'in'){
              that.fenceList[index].inFenceAlarm = status;
            }else{
              that.fenceList[index].outFenceAlarm = status;
            }

            

          });
    },

    showIntervalDialog(item){

      this.stepShow = true
      this.intervalTitle = '【' + item.name + '】'
      this.selectSetFenceId = item.id
      this.timeInterval = item.sent_interval ? item.sent_interval/60 :  5
       
    },
    updateInterval(){
      let that = this;
          that.$http
          .get("/setFenceAlarmInterval&fenceId=" + that.selectSetFenceId + '&interval=' + that.timeInterval)
          .then(res => {
              let resp = res.data;

              if(!resp.success){
                this.$dialog.toast({
                    mes:resp.message
                });
                return;
              }
              that.itemClick(1);
              Notify({ type: 'success', message: '设置成功' });
          })
          .catch(res => {
              console.log(res);
          });
    },
    watchSysFence(index){
      let fence  = this.sysFences[index];
      this.$router.push({path: '/sysfence_watch'});
      console.log(fence, 'handle')
      localStorage.setItem('clickFence', JSON.stringify(fence) )
    },
    editFence(index){
      let fence  = this.fenceList[index];
      this.$router.push({path: '/fence_edit'});
      console.log(fence, 'handle')
      localStorage.setItem('clickFence', JSON.stringify(fence) )
    },
    delFence(id, name){
      let that = this;
      Dialog.confirm({
        title: '操作确认',
        message: '确定要<font style="color:red">删除</font>围栏【'+ name +'】',
      })
        .then(() => {
          that.$http
          .get("/delUserFence&fenceId=" + id + '&userid=' + localStorage.getItem("userid"))
          .then(res => {
              let resp = res.data;

              if(!resp.success){
                this.$dialog.toast({
                    mes:resp.message
                });
                return;
              }
              that.itemClick(1);
              Notify({ type: 'success', message: '删除成功' });

              
          })
          .catch(res => {
              console.log(res);
          });


          
        })
        .catch(() => {
          // on cancel
        });
    }

  }
};
</script>
<style>

.fl-buttomright-button{
  position: fixed;
  bottom: 2rem;
  right: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 50%;
  height: 54px;
  width: 54px;
  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-area-left{
    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>