<!--
 * @Date: 2023-03-22 10:36:00
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-06-30 11:00:23
 * @FilePath: \ParentWeb\src\views\device\watchSetting\wearMonitor.vue
 * @description:
-->
<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">
            <!-- <img :src="rightIcon" alt=""> -->
            <van-switch v-model="checked" :active-color="$green" />
          </div>
        </div>

        <div class="item left-gray" v-show="checked">
          <div class="left">
            <span class="title gray">检测周期:</span>
          </div>
          <div class="right" @click="onClick('interval')">
            <span>{{ interval }}分钟</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

        <div class="item left-gray time" v-show="checked">
          <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>
              <!-- <img :src="rightIcon" alt=""> -->
            </div>
          </div>
        </div>

        <!-- <div class="item alarmType left-gray" v-show="checked">
                    <div class="left">
                        <span class="title gray">未佩戴处理方式:</span>
                    </div>
                    <div class="right">
                        <div class="radio-group">
                            <van-radio-group v-model="radioModel" direction="horizontal">
                                <van-radio name="1" >不处理</van-radio>
                                <van-radio name="2" >飞行模式</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div> -->

        <!-- 佩戴提醒 -->
        <div class="item">
          <div class="left">
            <span class="title">佩戴提醒:</span>
          </div>
          <div class="right">
            <van-switch v-model="warningChecked" :active-color="$green" />
          </div>
        </div>

        <div class="item left-gray" v-show="warningChecked">
          <div class="left">
            <span class="title gray">提醒时间间隔:</span>
          </div>
          <div class="right" @click="onClick('warningInterval')">
            <span>{{ warningInterval }}分钟</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

        <div class="item left-gray" v-show="warningChecked">
          <div class="left">
            <span class="title gray">提醒次数:</span>
          </div>
          <div class="right" @click="onClick('warningTimes')">
            <span>{{ warningTimes }}次</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

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

        <!-- 佩戴状态 -->
        <div class="item alarmType left-gray hasBottom" v-show="checked">
          <div class="top">
            <!--  <div class="left">
                            <span class="title gray">当前状态:</span>
                        </div>
                        <div class="right">
                            <span>已佩戴</span>
                        </div> -->
          </div>
          <div class="bottom">
            <!-- <p>(设备未佩戴时，自动进入省电模式)</p> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <van-dialog v-model="dialog.isDialogshow" show-cancel-button :show-confirm-button="false">
      <template #title>
        <div class="title">
          <span>{{ dialog.title }}</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="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">
              <div class="btn-item" @click="onCancel" v-show="date.action !== 'update'"><p class="cancel">返回</p></div>
              <div class="btn-item" @click="onDelete" v-show="date.action === 'update'"><p class="delete">删除</p></div>
              <div class="btn-item" @click="onConfirm"><p class="confirm">完成</p></div>
            </div>
          </div>
        </div>
      </template>
    </van-dialog>

    <!-- 涉水停留告警间隔弹窗 -->
    <van-dialog
      v-model="isWearDialogshow"
      :close-on-click-overlay="false"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <template #title>
        <div class="title">
          <span>检测周期</span>
        </div>
      </template>
      <template #default>
        <div class="wear-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="interval" />
                <label for="">分钟 </label>
              </div>
              <!-- <p>温馨提示：</p> -->
              <!-- <p>设置范围：30~500之间</p> -->
              <p class="error-tips">{{ warningDistanceTips }}</p>
            </div>
            <div class="button">
              <p @click="onCancelWear">返回</p>
              <p @click="onConfirmWear" class="confirm">确认</p>
            </div>
          </div>
        </div>
      </template>
    </van-dialog>

    <!-- 提醒时间间隔间隔弹窗 -->
    <van-dialog
      v-model="isWarningIntervalShow"
      :close-on-click-overlay="false"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <template #title>
        <div class="title">
          <span>提醒时间间隔</span>
        </div>
      </template>
      <template #default>
        <div class="wear-dialog-container">
          <div class="selectConfirm">
            <div class="con">
              <p>请输入提醒时间间隔：</p>
              <p class="tips">设置范围：0~60之间</p>
              <div class="input-con">
                <label for="">时间间隔: </label>

                <input
                  type="text"
                  maxlength="2"
                  oninput="value=value.replace(/\s+/g,'')"
                  v-model.trim="warningInterval"
                />
                <label for="">分钟 </label>
              </div>
              <p class="error-tips">{{ warningIntervalTips }}</p>
            </div>
            <div class="button">
              <p @click="onCancelWarningInterval">返回</p>
              <p @click="onConfirmWarningInterval" class="confirm">确认</p>
            </div>
          </div>
        </div>
      </template>
    </van-dialog>

    <!-- 提醒次数弹窗 -->
    <van-dialog
      v-model="iswarningtimesShow"
      :close-on-click-overlay="false"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <template #title>
        <div class="title">
          <span>提醒次数</span>
        </div>
      </template>
      <template #default>
        <div class="wear-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="2" oninput="value=value.replace(/\s+/g,'')" v-model.trim="warningTimes" />
                <label for="">次 </label>
              </div>
              <!-- <p>温馨提示：</p> -->
              <!-- <p>设置范围：30~500之间</p> -->
              <p class="error-tips">{{ warningTimesTips }}</p>
            </div>
            <div class="button">
              <p @click="onCancelWarningTimes">返回</p>
              <p @click="onConfirmWarningTimes" 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';
import { checkPeriodExist } from '@/services/utils-service';
export default {
  name: '',
  data() {
    return {
      rightIcon: require('../../../assets/myself/health/right_more.png'), //右边图标
      checked: true, //是否选中
      alarmType: ['reportenabled'], //告警方式
      reportenabled: true, //是否上报数据,默认为true
      //    弹窗内容
      dialog: {
        isDialogshow: false,
        title: '提醒时间间隔',
        confirmData: [
          {
            text: '5分钟',
            model: 0,
            checked: false,
            value: 5
          },
          {
            text: '10分钟',
            model: 1,
            checked: false,
            value: 10
          },
          {
            text: '30分钟',
            model: 2,
            checked: false,
            value: 30
          },
          {
            text: '60分钟',
            model: 3,
            checked: false,
            value: 60
          }
        ]
      },
      //    日期弹窗内容
      dateDialog: {
        show: false
      },
      //    日期时间
      date: {
        action: '',
        model: null,
        defaultStartTime: '08:00',
        defaultEndTime: '21:00',
        currentCount: 0,
        dateList: [
          /* { startTime: '08:00', endTime: '21:00', model: 0, reqTime: '08002100' }, */
        ]
      },
      selectConfirmActive: 0, // 弹窗选中
      itemHeight: Number(((document.body.clientWidth / 750) * 95).toFixed()), // 日历组件item高度
      warningDistanceTips: '',
      isWearDialogshow: false,
      interval: 60, //检测周期-定位检测
      currentInterval: null,
      radioModel: '1',
      soundenabled: false,
      lcdenabled: false,
      vibrateenabled: false,
      warningIntervalTips: '',
      isWarningIntervalShow: false,
      warningInterval: 30, //新增：提醒时间间隔,取值范围(0~3600)秒
      currentWarningInterval: null,
      isWarningIntervalCanSave: null,

      warningTimesTips: '',
      iswarningtimesShow: false,
      warningTimes: 1, //新增：提醒次数,取值范围(0~200)
      currentWarningtimes: null,
      isWarningTimesCanSave: null,

      currentSoundenabled: false,
      currentVibrateenabled: false,
      currentLcdenabled: false,
      warningChecked: true
    };
  },
  watch: {
    interval: {
      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) < 3 || parseInt(n) > 60) {
          this.warningDistanceTips = '请输入3-60的整数';
          this.isCanSave = false;
        } else {
          this.warningDistanceTips = '';
          this.isCanSave = true;
        }
      },
      deep: true
    },
    warningInterval: {
      handler(n) {
        let reg = /^[0-9]+[0-9]*$/;
        if (n === '') {
          this.warningIntervalTips = '提醒时间间隔不能为空';
          this.isWarningIntervalCanSave = false;
        } else if (!reg.test(n)) {
          this.warningIntervalTips = '提醒时间间隔只能为整数';
          this.isWarningIntervalCanSave = false;
        } else if (parseInt(n) < 0 || parseInt(n) > 60) {
          this.warningIntervalTips = '请输入0-60的整数';
          this.isWarningIntervalCanSave = false;
        } else {
          this.warningIntervalTips = '';
          this.isWarningIntervalCanSave = true;
        }
      },
      deep: true
    },
    warningTimes: {
      handler(n) {
        let reg = /^[0-9]+[0-9]*$/;
        if (n === '') {
          this.warningTimesTips = '提醒次数不能为空';
          this.isWarningTimesCanSave = false;
        } else if (!reg.test(n)) {
          this.warningTimesTips = '提醒次数只能为整数';
          this.isWarningTimesCanSave = false;
        } else if (parseInt(n) < 1 || parseInt(n) > 3) {
          this.warningTimesTips = '请输入1-3的整数';
          this.isWarningTimesCanSave = false;
        } else {
          this.warningTimesTips = '';
          this.isWarningTimesCanSave = true;
        }
      },
      deep: true
    },
    warningChecked: {
      handler(n) {
        if (n === false) {
          this.warningTimes = 1;
          this.soundenabled = false;
          this.lcdenabled = false;
          this.vibrateenabled = false;
        } else {
          this.warningTimes = this.currentWarningtimes;
          this.soundenabled = this.currentSoundenabled;
          this.lcdenabled = this.currentLcdenabled;
          this.vibrateenabled = this.currentVibrateenabled;
        }
      },
      deep: true
    }
  },
  computed: {
    imei() {
      return this.$store.getters.serialNo;
    }
  },
  created() {
    this.getNowearConfig();
  },
  methods: {
    onNavBack() {
      this.$router.push({
        name: 'watchSetting'
      });
    },
    getNowearConfig(action) {
      if (action !== 'delete') {
        ToastService.loading({ message: '数据加载中' });
      }
      //ToastService.loading({message: "数据加载中"});
      APIHealthy.getNowearConfig(this.imei)
        .then(res => {
          if (action !== 'delete') {
            ToastService.success({ message: '数据加载完成' });
          }
          //ToastService.success({message: "数据加载完成"});
          let data = res.data.data;
          if (data) {
            this.checked = data.enabled === 1;
            this.interval = parseInt(data.interval / 60);
            this.currentInterval = parseInt(data.interval / 60);
            this.reportenabled = data.reportenabled === 1;
            this.radioModel = String(data.mode);
            // { startTime: '08:00', endTime: '21:00', model: 0, reqTime: '08002100' },
            this.shiftTime(data.timearea1, 0);
            this.shiftTime(data.timearea2, 1);
            this.shiftTime(data.timearea3, 2);
            this.shiftTime(data.timearea4, 3);
            this.shiftTime(data.timearea5, 4);
            this.shiftTime(data.timearea6, 5);
            this.shiftTime(data.timearea7, 6);
            this.shiftTime(data.timearea8, 7);
            this.shiftTime(data.timearea9, 8);
            this.shiftTime(data.timearea10, 9);

            this.lcdenabled = data.lcdenabled === 1;
            this.soundenabled = data.soundenabled === 1;
            this.vibrateenabled = data.vibrateenabled === 1;
            this.currentSoundenabled = data.soundenabled === 1;
            this.currentVibrateenabled = data.vibrateenabled === 1;
            this.currentLcdenabled = data.lcdenabled === 1;
            this.warningInterval = parseInt(data.warninginterval / 60) || 0;
            this.currentWarningInterval = parseInt(data.warninginterval / 60);
            this.warningTimes = data.warningtimes || 1;
            this.currentWarningtimes = data.warningtimes;
            this.warningChecked = data.warningtimes !== 0;
          }
        })
        .catch(e => {
          DialogService.confirm({
            message: `${e.message}`
          });
        })
        .finally(() => {
          /* setTimeout(() => {
                ToastService.clear();
            },1500) */
        });
    },
    onSubmit(action) {
      const messageText = action === 'delete' ? '删除' : '设置';
      if (
        this.warningChecked &&
        this.warningTimes ===
          0 /* && this.soundenabled === false && this.vibrateenabled === false && this.lcdenabled === false */
      ) {
        return DialogService.confirm({
          message: '佩戴提醒已开启，提醒次数不能设置为0次'
        });
      }
      ToastService.loading({
        message: `${messageText}中`
      });
      let reqBody = {
        imei: this.imei,
        enabled: this.checked === true ? 1 : 0, //启用 0禁用 1启用
        interval: Number(this.interval) * 60, //上报周期 分钟为单位，取值范围是2 ~120
        mode: /* Number(this.radioModel), */ 1, //2023.11.14 需求改动 默认为1 即不处理
        stoplocationenabled: 1,
        reportenabled: this.reportenabled ? 1 : 0,
        timearea1: this.getReqTime(this.date.dateList, 0),
        timearea2: this.getReqTime(this.date.dateList, 1),
        timearea3: this.getReqTime(this.date.dateList, 2),
        timearea4: this.getReqTime(this.date.dateList, 3),
        timearea5: this.getReqTime(this.date.dateList, 4),
        timearea6: this.getReqTime(this.date.dateList, 5),
        timearea7: this.getReqTime(this.date.dateList, 6),
        timearea8: this.getReqTime(this.date.dateList, 7),
        timearea9: this.getReqTime(this.date.dateList, 8),
        timearea10: this.getReqTime(this.date.dateList, 9),
        lcdenabled: this.lcdenabled === true ? 1 : 0,
        soundenabled: this.soundenabled === true ? 1 : 0,
        vibrateenabled: this.vibrateenabled === true ? 1 : 0,
        warninginterval: Number(this.warningInterval) * 60 || 0,
        warningtimes: Number(this.warningTimes) || 0
      };
      console.log('请求的reqBody', reqBody);
      /* return */
      APIHealthy.setNowearConfig(reqBody)
        .then(res => {
          if (res.data.stateCode === 1) {
            ToastService.success({ message: `${messageText}成功` });
            if (action === 'delete') {
              setTimeout(() => {
                this.date.dateList = [];
                this.getNowearConfig('delete');
              }, 1500);
            } else {
              setTimeout(() => {
                this.$router.push({
                  name: 'watchSetting'
                });
              }, 1500);
            }
          } else {
            DialogService.confirm({
              title: `${messageText}失败`,
              message: `${res.data.message}`
            });
          }
        })
        .catch(e => {
          DialogService.confirm({
            title: `${messageText}失败`,
            message: `${e.message}`
          });
        })
        .finally(() => {
          setTimeout(() => {
            ToastService.clear();
          }, 1500);
        });
    },
    // 转换时间格式
    shiftTime(time, model) {
      if (time) {
        let startTime = time.slice(0, 2) + ':' + time.slice(2, 4);
        let endTime = time.slice(4, 6) + ':' + time.slice(6, 8);
        let timeObj = {
          startTime: startTime,
          endTime: endTime,
          model: model,
          reqTime: time
        };
        this.date.dateList.push(timeObj);
      }
    },
    // 判断时间段数组里面的是否有对象,然后返回对应对象的值
    getReqTime(dateArr, index) {
      if (dateArr.length > 0) {
        if (dateArr[index]) {
          return dateArr[index].reqTime;
        } else {
          return '';
        }
      } else {
        return '';
      }
    },
    onSelect(data) {
      this.selectConfirmActive = data.model;
      this.dialog.isDialogshow = false;
      this.warningInterval = data.value;
    },
    onClick(name) {
      if (name === 'interval') {
        this.isWearDialogshow = true;
      } else if (name === 'warningInterval') {
        /* this.isWarningIntervalShow = true; */
        this.dialog.isDialogshow = true;
        let seclectIndex = this.dialog.confirmData.findIndex(item => {
          return item.value === this.warningInterval;
        });
        this.selectConfirmActive = seclectIndex;
      } else if (name === 'warningTimes') {
        this.iswarningtimesShow = true;
      } else {
        this.dialog.isDialogshow = true;
        let seclectIndex = this.dialog.confirmData.findIndex(item => {
          return item.value === this.interval;
        });
        this.selectConfirmActive = seclectIndex;
      }
    },
    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;
        console.log('action', action, data, this.date.dateList);
      }
      this.dateDialog.show = true;
    },
    onChooseDate(value) {
      this.date.currentCount = value;
    },
    formatter(type, val) {
      if (type === 'hour') {
        return val + '时';
      }
      if (type === 'minute') {
        return val + '分';
      }
      return val;
    },
    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;
    },
    onCancel() {
      this.resetDate();
    },
    // 判断新增或更新的 是否有时间交叉 todo
    checkPeriodExist() {
      let canSave = true;
      let list = null;
      if (this.date.action === 'add') {
        // 新增-跟所有判断
        list = this.date.dateList.map(item => {
          item.startTime = item.startTime.replace('-', ':');
          item.endTime = item.endTime.replace('-', ':');
          item.weekdays = '0';
          return item;
        });
      } else {
        // 更新-跟除自己以外判断
        list = this.date.dateList.filter(item => {
          return this.date.model !== item.model;
        });
      }
      console.log('list', list);
      let currentTimeObj = {
        startTime: this.date.defaultStartTime.replace('-', ':'),
        endTime: this.date.defaultEndTime.replace('-', ':'),
        weekdays: '0'
      };
      console.log('新增的时间对象', currentTimeObj);
      list.forEach(t => {
        if (checkPeriodExist(currentTimeObj, t)) {
          canSave = false;
        }
      });
      return canSave;
    },
    onDelete() {
      console.log('当前选中的time', this.date.defaultStartTime + this.date.defaultEndTime);
      console.log('当前第几个时间段', this.date.model);
      if (this.date.dateList.length === 1) {
        return DialogService.confirm({
          message: '佩戴监测至少要保留1个监测时间段'
        });
      }
      DialogService.confirm({
        message: '是否要删除当前的检测时段',
        showCancelButton: true
      })
        .then(() => {
          let selectIndex = this.date.dateList.findIndex(item => {
            console.log('item', item);
            return item.model === this.date.model;
          });
          console.log('selectIndex', selectIndex);
          this.date.dateList[selectIndex].reqTime = '';
          console.log('dateList', this.date.dateList);
          this.onSubmit('delete');
          //this.resetDate();
          this.dateDialog.show = false;
        })
        .catch(() => {});
    },
    onConfirm() {
      console.log('当前的时间列表', this.date.dateList);
      console.log('时间段是否有交叉', this.checkPeriodExist());
      let startConflict = this.date.defaultStartTime.replace(':', '');
      let endConflict = this.date.defaultEndTime.replace(':', '');
      if (Number(startConflict) >= Number(endConflict)) {
        return DialogService.confirm({
          title: '设置失败',
          message: '开始时间不能大于结束时间'
        });
      } else if (!this.checkPeriodExist()) {
        return DialogService.confirm({
          title: '设置失败',
          message: '检测时间有交叉，请重新选择'
        });
      }
      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') {
        console.log('this.date.dateList[this.date.model]', this.date.dateList);
        let selectIndex = this.date.dateList.findIndex(item => {
          console.log('item', item);
          return item.model === this.date.model;
        });
        this.date.dateList[selectIndex].startTime = this.date.defaultStartTime;
        this.date.dateList[selectIndex].endTime = this.date.defaultEndTime;
        this.date.dateList[selectIndex].reqTime =
          this.date.defaultStartTime.replace(':', '') + this.date.defaultEndTime.replace(':', '');
        this.resetDate();
      }
    },
    onCancelWear() {
      this.isWearDialogshow = false;
      this.interval = this.currentInterval;
      //this.warningDistanceTips = '';
    },
    onConfirmWear() {
      if (this.isCanSave) {
        this.isWearDialogshow = false;
        this.warningDistanceTips = '';
      }
    },
    // 提醒时间间隔弹窗-取消
    onCancelWarningInterval() {
      this.isWarningIntervalShow = false;
      this.warningInterval = this.currentWarningInterval;
      //this.warningDistanceTips = '';
    },
    // 提醒时间间隔弹窗-确认
    onConfirmWarningInterval() {
      if (this.isWarningIntervalCanSave || this.warningInterval === 0) {
        this.isWarningIntervalShow = false;
        this.warningIntervalTips = '';
      }
    },
    // 提醒次数弹窗-取消
    onCancelWarningTimes() {
      this.iswarningtimesShow = false;
      this.warningTimes = this.currentWarningtimes;
      //this.warningDistanceTips = '';
    },
    // 提醒次数弹窗-确认
    onConfirmWarningTimes() {
      if (this.isWarningTimesCanSave || this.warningTimes !== 0) {
        this.iswarningtimesShow = false;
        this.warningTimesTips = '';
      }
    }
  }
};
</script>

<style scoped lang="scss">
.location-monitor-container {
  height: 100vh;
  overflow: hidden;
  .nav-bar {
    height: 100px;
    padding: 0 20px;
  }
  .main {
    height: calc(100vh - 160px);
    background-color: $background;
    padding: 20px;
    .list {
      flex: 1;
      background-color: #fff;
      border-radius: 8px;
      .item {
        flex: 1;
        padding: 20px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #e5e5e5;
        .left {
          height: 60px;
          @include center();
          span {
            color: #282828;
            font-size: 32px;
          }
          .title {
            font-weight: 450;
            &.gray {
              color: gray;
            }
          }
        }
        .right {
          @include center();
          font-size: 32px;
          img {
            height: 35px;
            width: 35px;
          }
          span {
            font-size: 32px;
            margin-right: 10px;
            color: #aaaaaa;
          }
          .checkbox-group {
            @include center();
            .van-checkbox {
              padding: 5px;
            }
          }

          &.time {
            width: 480px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-direction: column;
            .time-item {
              height: 70px;
              width: 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              margin-bottom: 5px;
              .van-swipe-cell {
                display: flex;
                justify-content: flex-end;
                .van-swipe-cell__right {
                  .van-button--danger {
                    background-color: #ee0a24;
                    @include center();
                    span {
                      color: #fff;
                    }
                  }
                }
              }
            }
          }
        }
        &.left-gray {
          padding-left: 30px;
          color: gray;
        }
        &.time {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
        }
        &.alarmType {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          /* padding: 20px 0 20px 30px; */
          .right {
            margin-left: 40px;
            @include center();
          }
        }
        &.hasBottom {
          height: auto;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-direction: column;
          .top {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .right {
              margin-left: 40px;
              width: 60%;
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
            }
          }
          .bottom {
            p {
              font-size: 32px;
            }
          }
        }
      }
    }
  }
  .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;
        .btn-item {
          width: 200px;
          p {
            font-size: 32px;
            height: 80px;
            width: 100%;
            color: #000;
            @include center();
          }
          .confirm {
            color: $green;
          }
          .delete {
            color: red;
          }
          .cancel {
            color: #000;
          }
        }
      }
    }
  }
  .wear-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;
        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>
