<template>
  <div class="location-monitor-container">
    <!-- nav -->
    <div class="nav-bar">
      <van-nav-bar title="危险区监测" left-text="返回" @click-left="onNavBack" left-arrow>
        <template #right>
          <!--  <div class="setupClock_save" @click="onSubmit">保存</div> -->
          <van-button type="primary" @click="onSubmit" size="small">保存</van-button>
        </template>
      </van-nav-bar>
    </div>
    <!-- main -->
    <div class="main">
      <!-- 体温 -->
      <div class="list">
        <div class="item">
          <div class="left">
            <span class="title">涉水监测:</span>
          </div>
          <div class="right">
            <van-switch v-model="drownConfig.enabled" :active-color="$green" />
          </div>
        </div>

        <div class="item left-gray time" v-show="false">
          <div class="left">
            <span class="title gray">是否取消告警:</span>
          </div>
          <div class="right time">
            <van-switch v-model="date.enable" :active-color="$green" />
          </div>
        </div>
        <div class="item left-gray time" style="margin-left: 20px" v-show="false">
          <div class="left">
            <span class="title gray">取消告警时段:</span>
          </div>
          <div class="right time">
            <div
              class="time-item"
              v-for="(item, index) in date.dateList"
              :key="index"
              @click="onClickDate('update', item)"
            >
              <!-- <van-swipe-cell> -->
              <span>{{ item.startTime }} - {{ item.endTime }}</span>
              <img :src="rightIcon" alt="" />
              <template slot="right">
                <van-button square type="danger" text="删除" />
              </template>
              <!-- </van-swipe-cell> -->
            </div>
            <!-- <div class="time-item" @click="onClickDate('add')" v-show="date.dateList.length < 10">
                            <span>添加时段</span>
                            <img :src="rightIcon" alt="">
                        </div>
                        <div class="time-item" v-show="date.dateList.length === 10">
                            <span>监测时段最大可设置10个</span>
                        </div> -->
          </div>
        </div>

        <div class="item left-gray" v-show="drownConfig.enabled">
          <div class="left">
            <span class="title gray">检测周期:</span>
          </div>
          <div class="right" @click="onClick('intervallvl')">
            <span>{{ drownConfig.intervallvl1 }} + {{ drownConfig.intervallvl2 }}分钟</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

        <div class="item left-gray" v-show="drownConfig.enabled">
          <div class="left">
            <span class="title gray">告警阈值:</span>
          </div>
          <div class="right" @click="onClick('warningdistance')">
            <span>{{ drownConfig.warningdistance }}米</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

        <div class="item left-gray" v-show="drownConfig.enabled">
          <div class="left">
            <span class="title gray">涉水停留告警间隔：</span>
          </div>
          <div class="right" @click="onClick('reportfreq')">
            <span>{{ drownConfig.reportfreq }}分钟</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

        <div class="item left-gray" v-show="drownConfig.enabled">
          <div class="left">
            <span class="title gray">告警提示持续次数:</span>
          </div>
          <div class="right" @click="onClick('warningtimes')">
            <span>{{ drownConfig.warningtimes }}次</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>
        <div class="item left-gray" v-show="drownConfig.enabled">
          <div class="left">
            <span class="title gray">首次告警逗留设置:</span>
          </div>
          <div class="right" @click="onClick('delaytimes')">
            <span>{{ drownConfig.delaytimes }}次</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

        <div class="item left-gray" v-show="drownConfig.enabled">
          <div class="left">
            <span class="title gray">时速免告警(≥):</span>
          </div>
          <div class="right" @click="onClick('ignorespeed')">
            <span>{{ drownConfig.ignorespeed }}公里</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

        <div class="item left-gray" v-show="drownConfig.enabled">
          <div class="left">
            <span class="title gray">免告警水域：</span>
          </div>
          <div class="right" @click="onDrownWhiteList()">
            <span>查看</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

        <div class="item alarmType left-gray" v-show="drownConfig.enabled">
          <div class="left">
            <span class="title gray">告警方式:</span>
          </div>
          <div class="right">
            <div class="checkbox-group">
              <van-checkbox
                name="vibrateenabled"
                v-model="drownConfig.vibrateenabled"
                shape="square"
                direction="horizontal"
                >震动</van-checkbox
              >
              <van-checkbox name="lcdenabled" v-model="drownConfig.lcdenabled" shape="square" direction="horizontal"
                >亮屏</van-checkbox
              >
              <van-checkbox name="musicenabled" v-model="drownConfig.musicenabled" shape="square" direction="horizontal"
                >声音</van-checkbox
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <van-dialog
      v-model="dialog.isDialogshow"
      show-cancel-button
      cancel-button-text="返回"
      @cancel="onCancelReportfreq"
      :show-confirm-button="false"
    >
      <template #title>
        <div class="title">
          <span>设置</span>
        </div>
      </template>
      <template #default>
        <div class="dialog-container">
          <div class="selectConfirm">
            <div class="con">
              <van-cell v-for="(item, index) in dialog.confirmData" :key="`selectVPT${index}`" @click="onSelect(item)">
                <div class="text">
                  <div v-html="item.text"></div>
                </div>
                <em :class="['circle', { on: selectConfirmActive == index }]"></em>
              </van-cell>
            </div>
          </div>
        </div>
      </template>
    </van-dialog>

    <van-dialog
      v-model="isIntervalDialogshow"
      :show-cancel-button="true"
      cancel-button-text="返回"
      @cancel="onCancelIntervallvl1"
      confirm-button-text="确认"
      :show-confirm-button="true"
    >
      <template #title>
        <div class="title">
          <span>水域采集频率修改</span>
        </div>
      </template>

      <template #default>
        <!-- <div class="tips-header">
                    <p>水域上报周期为高频(即10分钟)</p>
                </div> -->
        <div class="danger-dialog-container">
          <div class="item left-gray">
            <div class="left">
              <span class="title gray">1000米内采集周期为:</span>
            </div>
            <div class="right" @click="onClickIntervallvl('intervallvl1')">
              <span>{{ drownConfig.intervallvl1 }}分钟</span>
              <img :src="rightIcon" alt="" />
            </div>
          </div>
          <div class="item left-gray">
            <div class="left">
              <span class="title gray">300米内采集周期为:</span>
            </div>
            <div class="right" @click="onClickIntervallvl('intervallvl2')">
              <span>{{ drownConfig.intervallvl2 }}分钟</span>
              <img :src="rightIcon" alt="" />
            </div>
          </div>
        </div>
        <div class="tips">
          <p class="red">温馨提示:</p>
          <p>周期越小，告警越及时，也越耗电</p>
        </div>
      </template>
    </van-dialog>

    <!-- 时间选择器弹窗 -->
    <van-dialog v-model="dateDialog.show" :show-confirm-button="false" :close-on-click-overlay="true" @close="onCancel">
      <template #default>
        <div class="date-dialog-container">
          <div class="date-top">
            <div :class="['top-item', { active: date.currentCount === 0 }]" @click="onChooseDate(0)">
              <span>开始时段</span>
            </div>
            <div :class="['top-item', { active: date.currentCount === 1 }]" @click="onChooseDate(1)">
              <span>结束时段</span>
            </div>
          </div>
          <div class="date-bottom">
            <van-datetime-picker
              v-show="date.currentCount === 0"
              v-model="date.defaultStartTime"
              type="time"
              :formatter="formatter"
              :show-toolbar="false"
              :item-height="itemHeight"
              :visible-item-count="4"
            />
            <van-datetime-picker
              v-show="date.currentCount === 1"
              v-model="date.defaultEndTime"
              type="time"
              :formatter="formatter"
              :show-toolbar="false"
              :item-height="itemHeight"
              :visible-item-count="4"
            />
          </div>
          <div class="button-box">
            <!-- <div class="button" @click="onCancel">
                            <span>关闭</span>
                        </div> -->
            <div class="button">
              <p @click="onCancel">返回</p>
              <p @click="onConfirm" class="confirm">完成</p>
            </div>
          </div>
        </div>
      </template>
    </van-dialog>
    <!-- 涉水停留告警间隔弹窗 -->
    <van-dialog
      v-model="isMeterDialogshow"
      :show-cancel-button="false"
      :show-confirm-button="false"
      @cancel="onCancelMeter"
    >
      <template #title>
        <div class="title">
          <span>告警阈值设置</span>
        </div>
      </template>
      <template #default>
        <div class="meter-dialog-container">
          <div class="selectConfirm">
            <div class="con">
              <p>请设置多少米内产生告警：</p>
              <div class="input-con">
                <label for="">告警阈值: </label>

                <input
                  type="text"
                  maxlength="2"
                  oninput="value=value.replace(/\s+/g,'')"
                  v-model.trim="drownConfig.warningdistance"
                />
                <label for="">米 </label>
              </div>
              <!-- <p>温馨提示：</p> -->
              <!-- <p>设置范围：30~500之间</p> -->
              <p class="error-tips">{{ warningDistanceTips }}</p>
            </div>
            <div class="button">
              <p @click="onCancelMeter">返回</p>
              <p @click="onConfirmMeter" class="confirm">确认</p>
            </div>
          </div>
        </div>
      </template>
    </van-dialog>

    <!-- 告警提示持续次数弹窗 -->
    <van-dialog
      v-model="isWarningtimeShow"
      :show-cancel-button="false"
      :show-confirm-button="false"
      @cancel="onCancelWarning"
    >
      <template #title>
        <div class="title">
          <span>告警提示持续次数</span>
        </div>
      </template>
      <template #default>
        <div class="meter-dialog-container">
          <div class="selectConfirm">
            <div class="con">
              <p>请设置告警提示持续次数：</p>
              <p class="tips">设置范围：2~30之间</p>
              <!-- <p>(范围2至30)</p> -->
              <div class="input-con">
                <label for="">持续次数: </label>

                <input
                  type="text"
                  maxlength="2"
                  oninput="value=value.replace(/\s+/g,'')"
                  v-model.trim="drownConfig.warningtimes"
                />
                <label for="">次 </label>
              </div>
              <!-- <p>温馨提示：</p> -->
              <!-- <p>设置范围：30~500之间</p> -->
              <p class="error-tips">{{ warningtimesTips }}</p>
            </div>
            <div class="button">
              <p @click="onCancelWarning">返回</p>
              <p @click="onConfirmWarning" class="confirm">确认</p>
            </div>
          </div>
        </div>
      </template>
    </van-dialog>

    <!-- 延迟告警采样次数弹窗 -->
    <van-dialog
      v-model="isDelaytimesShow"
      :show-cancel-button="false"
      :show-confirm-button="false"
      @cancel="onCancelDelaytimes"
    >
      <template #title>
        <div class="title">
          <span>首次告警逗留设置</span>
        </div>
      </template>
      <template #default>
        <div class="meter-dialog-container">
          <div class="selectConfirm">
            <div class="con">
              <p>请设置首次告警逗留次数：</p>
              <p class="tips">设置范围：1~3之间</p>
              <div class="input-con">
                <label for="">逗留次数: </label>

                <input
                  type="text"
                  maxlength="1"
                  oninput="value=value.replace(/\s+/g,'')"
                  v-model.trim="drownConfig.delaytimes"
                />
                <label for="">次 </label>
              </div>
              <!-- <p>温馨提示：</p> -->
              <!-- <p>设置范围：30~500之间</p> -->
              <p class="error-tips">{{ delaytimesTips }}</p>
            </div>
            <div class="button">
              <p @click="onCancelDelaytimes">返回</p>
              <p @click="onConfirmDelaytimes" class="confirm">确认</p>
            </div>
          </div>
        </div>
      </template>
    </van-dialog>

    <!-- 时速免告警设置 -->
    <van-dialog
      v-model="isSpeedDialogshow"
      :show-cancel-button="false"
      :show-confirm-button="false"
      @cancel="onCancelSpeed"
    >
      <template #title>
        <div class="title">
          <span>时速免告警设置</span>
        </div>
      </template>
      <template #default>
        <div class="meter-dialog-container">
          <div class="selectConfirm">
            <div class="con">
              <p>请设置时速免告警参数：</p>
              <p class="tips">设置范围：0~20之间</p>
              <div class="input-con">
                <label for="">免告警时速: </label>

                <input
                  type="text"
                  maxlength="2"
                  oninput="value=value.replace(/\s+/g,'')"
                  v-model.trim="drownConfig.ignorespeed"
                />
                <label for="">公里 </label>
              </div>
              <!-- <p>温馨提示：</p> -->
              <!-- <p>设置范围：30~500之间</p> -->
              <p class="error-tips">{{ warningSpeedTips }}</p>
            </div>
            <div class="button">
              <p @click="onCancelSpeed">返回</p>
              <p @click="onConfirmSpeed" class="confirm">确认</p>
            </div>
          </div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import ToastService from '@/services/toast-service';
import DialogService from '@/services/dialog-service';
import APIHealthy from '@/api/heathly';
export default {
  name: '',
  data() {
    return {
      rightIcon: require('../../../assets/myself/health/right_more.png'),
      checked: false,
      sampleinteval: '', //上报频率-定位检测
      waterAreaAlarmType: ['vibrateenabled', 'lcdenabled', 'musicenabled'], //体温告警方式
      heartrateAlarmType: ['heartratevibrateenabled', 'heartratelcdenabled', 'heartratereportenabled'], //心率
      spo2AlarmType: ['spo2vibrateenabled', 'spo2lcdenabled', 'spo2reportenabled'], //血氧
      isMeterDialogshow: false,
      dialog: {
        isDialogshow: false,
        title: '上报频率',
        confirmData: []
      },
      //    危险区域上报停留周期
      reportfreqList: [
        {
          text: '5分钟',
          model: 0,
          checked: false,
          value: 5
        },
        {
          text: '10分钟',
          model: 1,
          checked: false,
          value: 10
        },
        {
          text: '20分钟',
          model: 2,
          checked: false,
          value: 20
        }
      ],
      intervallvlList: [
        {
          text: '1分钟',
          model: 0,
          checked: false,
          value: 1
        },
        {
          text: '2分钟',
          model: 1,
          checked: false,
          value: 2
        },
        {
          text: '3分钟',
          model: 2,
          checked: false,
          value: 3
        },
        {
          text: '4分钟',
          model: 3,
          checked: false,
          value: 4
        },
        {
          text: '5分钟',
          model: 4,
          checked: false,
          value: 5
        }
      ],
      intervallvlList2: [
        {
          text: '1分钟',
          model: 0,
          checked: false,
          value: 1
        }
      ],
      //    告警阈值
      meterList: [
        {
          text: '30米',
          model: 0,
          checked: false,
          className: 'circle',
          value: 30,
          name: '体温监测'
        },
        {
          text: '50米',
          model: 1,
          checked: false,
          className: 'circle',
          value: 50,
          name: '体温监测'
        },
        {
          text: '150米',
          model: 2,
          checked: false,
          className: 'circle',
          value: 150,
          name: '体温监测'
        },
        {
          text: '250米',
          model: 3,
          checked: false,
          className: 'circle',
          value: 250,
          name: '体温监测'
        },
        {
          text: '300',
          model: 4,
          checked: false,
          className: 'circle',
          value: 300,
          name: '体温监测'
        },
        {
          text: '350米',
          model: 5,
          checked: false,
          className: 'circle',
          value: 350,
          name: '体温监测'
        },
        {
          text: '450米',
          model: 6,
          checked: false,
          className: 'circle',
          value: 450,
          name: '体温监测'
        },
        {
          text: '500米',
          model: 7,
          checked: false,
          className: 'circle',
          value: 500,
          name: '体温监测'
        }
      ],
      selectConfirmActive: 0, // 弹窗选中的下标
      currentDiallogName: '', //当前弹窗的名字
      //    设置涉水的参数
      drownConfig: {
        imei: this.$store.getters.serialNo,
        enabled: 0,
        distancelvl1: 1000,
        intervallvl1: 5,
        gpsenabledlvl1: 1,
        distancelvl2: 300,
        intervallvl2: 1,
        gpsenabledlvl2: 1,
        warningdistance: 50,
        vibrateenabled: 0,
        lcdenabled: 0,
        musicenabled: 0,
        reportenabled: 1,
        reportfreq: 5,
        isTime: 0,
        times: [
          {
            startTime: '06:00',
            endTime: '13:00'
          },
          {
            startTime: '14:00',
            endTime: '21:00'
          }
        ],
        warningtimes: 10, //告警连续提示次数
        ignorespeed: 10, //时速免告警
        delaytimes: 1 //延迟告警采样次数（1~10），当发生水域告警时，延迟指定的次数后告警
      },
      //    是否显示检测周期-采集周期弹窗
      isIntervalDialogshow: false,
      itemHeight: Number(((document.body.clientWidth / 750) * 95).toFixed()), // 日历组件item高度
      date: {
        model: null,
        defaultStartTime: '08:00',
        defaultEndTime: '21:00',
        currentCount: 0,
        enable: null,
        dateList: [{ startTime: '08:00', endTime: '21:00', model: 0, reqTime: '08002100' }]
      },
      dateDialog: {
        show: false
      },
      warningDistanceTips: '',
      isCanSave: null,
      currentIntervallvl1: null || 2,
      currentMeter: '' || 50,
      currentReportfreq: null || 3,
      currentWarningtimes: '', //告警连续提示次数
      isWarningtimeShow: false,
      warningtimesTips: '',
      isWarnTimesCanSave: null,

      isSpeedDialogshow: false,
      warningSpeedTips: '',
      isWarnSpeedCanSave: null,
      currentIgnorespeed: '', //时速免告警

      currentDelaytimes: '', //延迟告警采样次数（0~10），当发生水域告警时，延迟指定的次数后告警
      isDelaytimesShow: false,
      delaytimesTips: '',
      isDelaytimesCanSave: null
    };
  },
  computed: {
    imei() {
      return this.$store.getters.serialNo;
    },
    deviceType() {
      return this.$store.getters.deviceType;
    }
  },
  watch: {
    'drownConfig.warningtimes': {
      handler(n, o) {
        let reg = /^[0-9]+[0-9]*$/;
        console.log('o', o);
        if (n === '') {
          this.warningtimesTips = '持续次数不能为空';
          this.isWarnTimesCanSave = false;
        } else if (!reg.test(n)) {
          this.warningtimesTips = '持续次数只能为整数';
          this.isWarnTimesCanSave = false;
        } else if (parseInt(n) < 2 || parseInt(n) > 30) {
          this.warningtimesTips = '请输入2-30的整数';
          this.isWarnTimesCanSave = false;
        } else {
          console.log('可以保存');
          this.warningtimesTips = '';
          this.isWarnTimesCanSave = true;
        }
      },
      deep: true
    },
    'drownConfig.delaytimes': {
      handler(n, o) {
        let reg = /^[0-9]+[0-9]*$/;
        console.log('o', o);
        if (n === '') {
          this.delaytimesTips = '首次告警逗留不能为空';
          this.isDelaytimesCanSave = false;
        } else if (!reg.test(n)) {
          this.delaytimesTips = '首次告警逗留只能为整数';
          this.isDelaytimesCanSave = false;
        } else if (parseInt(n) < 1 || parseInt(n) > 3) {
          this.delaytimesTips = '请输入1-3的整数';
          this.isDelaytimesCanSave = false;
        } else {
          console.log('可以保存');
          this.delaytimesTips = '';
          this.isDelaytimesCanSave = true;
        }
      },
      deep: true
    },
    'drownConfig.ignorespeed': {
      handler(n, o) {
        console.log('o', o);
        let reg = /^[0-9]+[0-9]*$/;
        if (n === '') {
          this.warningSpeedTips = '免告警时速不能为空';
          this.isWarnSpeedCanSave = false;
        } else if (!reg.test(n)) {
          this.warningSpeedTips = '免告警时速是只能为整数';
          this.isWarnSpeedCanSave = false;
        } else if (parseInt(n) < 0 || parseInt(n) > 20) {
          this.warningSpeedTips = '请输入0-20的整数';
          this.isWarnSpeedCanSave = false;
        } else {
          console.log('可以保存');
          this.warningSpeedTips = '';
          this.isWarnSpeedCanSave = true;
        }
      },
      deep: true
    },
    'drownConfig.warningdistance': {
      handler(n) {
        let reg = /^[1-9]+[0-9]*$/;
        if (n === '') {
          this.warningDistanceTips = '告警阈值不能为空';
          this.isCanSave = false;
        } else if (!reg.test(n)) {
          this.warningDistanceTips = '告警阈值只能为整数';
          this.isCanSave = false;
        } else if (parseInt(n) < 30 || parseInt(n) > 60) {
          this.warningDistanceTips = '请输入30-60的整数';
          this.isCanSave = false;
        } else {
          this.warningDistanceTips = '';
          this.isCanSave = true;
        }
      },
      deep: true
    }
  },
  created() {
    this.getDrownConfig();
  },
  methods: {
    //   返回
    onNavBack() {
      this.$router.push({
        name: 'watchSetting'
      });
    },
    // 保存
    onSubmit() {
      //ToastService.loading({message: "设置中"});
      // dataObj[Object.keys(tempData)[index]] = item
      let reqBody = {}; //用新对象去接收原来对象里的值
      Object.values(this.drownConfig).filter((item, index) => {
        if (typeof item === 'boolean') {
          item = item === false ? 0 : 1;
          reqBody[Object.keys(this.drownConfig)[index]] = item;
        } else {
          reqBody[Object.keys(this.drownConfig)[index]] = item;
          /*  reqBody.distancelvl1 = 1000;
                reqBody.distancelvl2 = 300;
                reqBody.gpsenabledlvl1 = 1;
                reqBody.gpsenabledlvl2 = 1; */
        }
      });
      reqBody.imei = this.imei;
      (reqBody.isTime = false), (reqBody.times = this.date.dateList);
      reqBody.warningdistance = Number(reqBody.warningdistance);
      reqBody.delaytimes = Number(reqBody.delaytimes);
      reqBody.ignorespeed = Number(reqBody.ignorespeed);
      reqBody.warningtimes = Number(reqBody.warningtimes);
      reqBody.reportfreq = this.shiftReportfreq(this.drownConfig.reportfreq);
      console.log('reqBody', reqBody, 'this.drownConfig', this.drownConfig);
      /* return */
      APIHealthy.setDrownConfig(reqBody)
        .then(res => {
          console.log('设置', res);
          if (res.data.stateCode === 1) {
            ToastService.success({ message: '设置成功' });
            if (this.deviceType === '1' || this.deviceType === 1) {
              // 设备类型 1 是设备 跳回设备页面
              setTimeout(() => {
                this.$router.push({
                  name: 'device'
                });
              }, 1500);
            } else {
              // 手表设备 跳回设置页
              setTimeout(() => {
                this.$router.push({
                  name: 'watchSetting'
                });
              }, 1500);
            }
          } else {
            DialogService.confirm({
              title: '设置失败',
              message: `${res.data.message}`
            });
          }
        })
        .catch(e => {
          DialogService.confirm({
            title: '设置失败',
            message: `${e.message}`
          });
        })
        .finally(() => {
          setTimeout(() => {
            ToastService.clear();
          }, 1500);
        });
    },
    // 选择弹窗数据
    onSelect(data) {
      this.drownConfig[this.currentDiallogName] = data.value;
      this.selectConfirmActive = data.model;
      this.dialog.isDialogshow = false;
    },
    // 点击菜单列表
    onClick(name) {
      this.currentDiallogName = name;
      this.dialog.confirmData = [];
      if (name === 'reportfreq') {
        this.dialog.confirmData = this.reportfreqList;
        let seclectIndex = this.dialog.confirmData.findIndex(item => {
          return item.value === this.drownConfig[name];
        });
        this.selectConfirmActive = seclectIndex;
        this.dialog.isDialogshow = true;
      } else if (name === 'intervallvl') {
        // 危险区域内监测周期
        if (name === 'intervallvl2') {
          this.dialog.confirmData = this.intervallvlList2;
        } else if (name === 'intervallvl1') {
          this.dialog.confirmData = this.intervallvlList;
        }
        let seclectIndex = this.dialog.confirmData.findIndex(item => {
          return item.value === this.drownConfig[name];
        });
        this.selectConfirmActive = seclectIndex;
        this.isIntervalDialogshow = true;
      } else if (name === 'warningdistance') {
        // 危险区域告警阈值
        this.isMeterDialogshow = true;
      } else if (name === 'warningtimes') {
        // 危险区域告警阈值
        this.isWarningtimeShow = true;
      } else if (name === 'ignorespeed') {
        // 危险区域告警阈值
        this.isSpeedDialogshow = true;
      } else if (name === 'delaytimes') {
        // 首次告警逗留弹窗
        this.isDelaytimesShow = true;
      }
    },
    onCancelIntervallvl1() {
      console.log('点击了返回');
      this.drownConfig.intervallvl1 = this.currentIntervallvl1;
      /* this.drownConfig.warningdistance = this.currentMeter; */
    },
    onCancelReportfreq() {
      /* this.drownConfig.reportfreq = this.shiftReportfreqthis(this.currentReportfreq); */
    },
    // 点击检测周期菜单
    onClickIntervallvl(name) {
      console.log('name', name, name === 'intervallvl');
      this.currentDiallogName = name;
      this.dialog.confirmData = [];
      if (name === 'intervallvl2') {
        this.dialog.confirmData = this.intervallvlList2;
      } else if (name === 'intervallvl1') {
        console.log('this.intervallvlList', this.intervallvlList);
        this.dialog.confirmData = this.intervallvlList;
      }
      let seclectIndex = this.dialog.confirmData.findIndex(item => {
        return item.value === this.drownConfig[name];
      });
      this.selectConfirmActive = seclectIndex;
      this.dialog.isDialogshow = true;
    },
    // 获取涉水区域参数
    getDrownConfig() {
      ToastService.loading({ message: '数据加载中' });
      APIHealthy.getDrownConfig(this.imei)
        .then(res => {
          console.log('res', res);
          ToastService.success({ message: '数据加载完成' });
          if (res.data.data === null) {
            this.isCanSave = true;
            return;
          }
          let data = res.data.data.config;
          if (res.data.data.time.length === 0) {
            const currentStartTime = new Date().Format('hh:mm');
            const currentEndTime = new Date(new Date().getTime() + 3 * 3600 * 1000).Format('hh:mm');
            console.log('currentStartTime', currentStartTime, currentEndTime);
            this.date.dateList = [
              {
                startTime: currentStartTime,
                endTime: currentEndTime
              }
            ];
          } else {
            this.date.dateList = res.data.data.time;
          }
          this.date.enable = res.data.data.isTime;
          if (data) {
            console.log('定位data', data);
            this.drownConfig = { ...data };
            this.drownConfig.enabled = data.enabled === 1;
            this.drownConfig.reportfreq = this.shiftReportfreq(this.drownConfig.reportfreq);
            this.currentIntervallvl1 = data.intervallvl1;
            this.currentMeter = data.warningdistance;
            this.drownConfig.warningtimes = data.warningtimes;
            this.drownConfig.ignorespeed = data.ignorespeed;

            this.currentDelaytimes = data.delaytimes || 0;
            this.currentWarningtimes = data.warningtimes;
            this.currentIgnorespeed = data.ignorespeed;
          }
        })
        .catch(e => {
          console.log('e', e);
          DialogService.confirm({
            message: `${e.message}`
          });
        })
        .finally(() => {
          setTimeout(() => {
            ToastService.clear();
          }, 1500);
        });
    },
    onClickDate(action, data) {
      this.date.action = action;
      if (action === 'update') {
        this.date.defaultStartTime = data.startTime;
        this.date.defaultEndTime = data.endTime;
        //this.date.model = data.model;
      }
      this.dateDialog.show = true;
    },
    onCancel() {
      this.resetDate();
    },
    onConfirm() {
      if (this.date.action === 'add') {
        let dateObj = {
          startTime: this.date.defaultStartTime,
          endTime: this.date.defaultEndTime,
          model: this.date.dateList.length,
          reqTime: this.date.defaultStartTime.replace(':', '') + this.date.defaultEndTime.replace(':', '')
        };
        this.date.dateList.push(dateObj);
        this.resetDate();
      } else if (this.date.action === 'update') {
        this.date.dateList[0].startTime = this.date.defaultStartTime;
        this.date.dateList[0].endTime = this.date.defaultEndTime;
        //this.date.dateList[0].reqTime = this.date.defaultStartTime.replace(':', '') + this.date.defaultEndTime.replace(':', '');
        this.resetDate();
      }
      console.log('this.date.dateList', this.date.dateList);
    },
    resetDate() {
      this.dateDialog.show = false;
      this.date.currentCount = 0;
      this.date.defaultStartTime = '08:00';
      this.date.defaultEndTime = '21:00';
      this.date.action = '';
      this.date.model = null;
    },
    formatter(type, val) {
      if (type === 'hour') {
        return val + '时';
      }
      if (type === 'minute') {
        return val + '分';
      }
      return val;
    },
    shiftReportfreq(value) {
      switch (value) {
        case 5:
          return 3;
        case 10:
          return 6;
        case 20:
          return 12;
        case 3:
          return 5;
        case 6:
          return 10;
        case 12:
          return 20;
      }
    },
    onChooseDate(value) {
      this.date.currentCount = value;
    },
    onCancelMeter() {
      this.isMeterDialogshow = false;
      this.drownConfig.warningdistance = this.currentMeter;
      //this.warningDistanceTips = '';
    },
    // 选择告警阈值
    onConfirmMeter() {
      if (this.isCanSave) {
        this.isMeterDialogshow = false;
        this.warningDistanceTips = '';
      }
    },
    // 查看免告警水域
    onDrownWhiteList() {
      this.$router.push({
        name: 'drownWhiteList'
      });
    },
    // 告警提示持续次数弹窗设置-取消
    onCancelWarning() {
      this.isWarningtimeShow = false;
      this.drownConfig.warningtimes = this.currentWarningtimes;
    },
    // 告警提示持续次数弹窗设置-确认
    onConfirmWarning() {
      console.log('isWarnTimesCanSave', this.isWarnTimesCanSave);
      if (this.isWarnTimesCanSave) {
        this.isWarningtimeShow = false;
        this.warningtimesTips = '';
      }
    },
    // 速免告警提弹窗设置-取消
    onCancelSpeed() {
      this.isSpeedDialogshow = false;
      this.drownConfig.ignorespeed = this.currentIgnorespeed;
    },
    // 时速免告警提弹窗设置-确认
    onConfirmSpeed() {
      console.log('isWarnSpeedCanSave', this.isWarnSpeedCanSave);
      if (this.isWarnSpeedCanSave) {
        this.isSpeedDialogshow = false;
        this.warningSpeedTips = '';
      }
    },
    // 首次告警逗留弹窗设置-取消
    onCancelDelaytimes() {
      this.isDelaytimesShow = false;
      this.drownConfig.delaytimes = this.currentDelaytimes;
    },
    // 首次告警逗留弹窗设置-确认
    onConfirmDelaytimes() {
      console.log('isDelaytimesCanSave', this.isDelaytimesCanSave);
      if (this.isDelaytimesCanSave) {
        this.isDelaytimesShow = false;
        this.delaytimesTips = '';
      }
    }
  }
};
</script>

<style scoped lang="scss">
.location-monitor-container {
  height: 100vh;
  overflow: hidden;
  .nav-bar {
    height: 90px;
    padding: 0 20px;
  }
  .main {
    height: calc(100vh - 160px);
    background-color: $background;
    padding: 20px;
    overflow: scroll;
    .list {
      height: auto;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 20px;
      .item {
        height: auto;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #e5e5e5;
        .left {
          @include center();
          span {
            color: #282828;
            font-size: 32px;
          }
          .title {
            font-weight: 450;
            &.gray {
              color: gray;
            }
          }
        }
        .right {
          @include center();
          img {
            height: 35px;
            width: 35px;
          }
          span {
            font-size: 32px;
            margin-right: 10px;
            color: #aaaaaa;
          }
          .checkbox-group {
            @include center();
            .van-checkbox {
              padding: 5px;
            }
          }
        }
        &.left-gray {
          padding-left: 30px;
          color: gray;
          font-size: 32px;
        }
        &.alarmType {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .left {
          }
          .right {
            margin-left: 40px;
            @include center();
          }
        }
      }
    }
  }
  .title {
    padding: 10px 0;
    font-size: 32px;
  }
  .tips-header,
  .tips {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 20px 30px;
    p {
      font-size: 30px;
      color: gray;
    }
  }
  .tips {
    .red {
      margin: 10px 0;
      color: red;
    }
  }
  .danger-dialog-container {
    padding: 10px 30px;
    //@include center();
    flex-direction: column;
    .item {
      height: auto;
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid #e5e5e5;
      .left {
        @include center();
        span {
          color: #282828;
          font-size: 32px;
        }
        .title {
          font-weight: 450;
          &.gray {
            color: gray;
          }
        }
      }
      .right {
        /* width: 60%; */
        @include center();
        img {
          height: 35px;
          width: 35px;
        }
        span {
          font-size: 32px;
          margin-right: 10px;
          color: #aaaaaa;
        }
      }
      &.left-gray {
        //padding-left: 30px;
        color: gray;
      }
      &.alarmType {
        height: 180px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        .left {
        }
        .right {
          margin-left: 40px;
          width: 60%;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
        }
      }
    }
  }
  .date-dialog-container {
    min-height: 550px;
    .date-top {
      width: 100%;
      height: 120px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top-item {
        height: 100%;
        width: 50%;
        @include center();
        //border-right: .5 solid #e5e5e5;
        background-color: #e5e5e5;
        border-bottom: 2px solid #e5e5e5;
        span {
          font-size: 32px;
          color: #000;
        }
        &.active {
          background-color: #fff;
        }
      }
    }
    .date-bottom {
      height: 380px;
    }
    .button-box {
      position: absolute;
      bottom: 0;
      height: 90px;
      width: 100%;
      z-index: 999;
      background-color: #fff;
      @include center();
      .button {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        p {
          font-size: 32px;
          height: 80px;
          width: 40%;
          color: #000;
          @include center();
        }
        .confirm {
          color: $green;
        }
      }
    }
  }
  .meter-dialog-container {
    padding: 30px 40px 0 40px;
    font-size: 32px;
    .selectConfirm {
      padding: 0;
    }
    .con {
      width: 100%;
      overflow: scroll;
      padding-bottom: 20px;
      border-bottom: 1px solid #999;
      .select-con {
        height: 400px;
        overflow: scroll;
        padding: 15px 0;
      }
      .tips {
        color: red;
        padding: 0;
        margin: 15px 0;
      }
    }
    .button {
      height: 80px;
      @include center();
      p {
        font-size: 32px;
        color: #000;
      }
    }
    .input-con {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      label {
        color: #000;
      }
      input {
        // width: 100%;
        margin-left: 15px;
        display: flex;
        width: 80px;
        height: 72px;
        text-indent: 15px;
        border-bottom: 1px solid #000;
      }
    }
    p {
      font-size: 32px;
      margin: 15px 0;
      color: #999;
    }
    .error-tips {
      color: red;
    }
    .button {
      display: flex;
      justify-content: space-around;
      align-items: center;
      p {
        width: 40%;
        color: #000;
        @include center();
      }
      .confirm {
        color: $green;
      }
    }
  }
  .title {
    font-size: 32px;
  }
  .selectConfirm {
    padding: 0;
    .con {
      .van-cell {
        height: 60px;
        .van-cell__value {
          em {
            font-style: normal;
            position: absolute;
            top: 0;
            right: 0;
            @include colorAndFont(#999, 24);
            &.circle {
              width: 20px;
              height: 20px;
              border: 2px solid #bfbfbf;
              border-radius: 50%;
              position: absolute;
              right: 15px;

              &.on {
                border-color: $green;

                &:before {
                  content: '';
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  width: 14px;
                  height: 14px;
                  background: $green;
                  border-radius: 50%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
