<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">
            <span>{{ sampleinteval }}分钟</span>
            <img :src="rightIcon" alt="" />
          </div>
        </div>

        <!--  <div class="item alarmType left-gray" v-show="checked">
                    <div class="left">
                        <span class="title gray">告警方式:</span>
                    </div>
                    <div class="right">
                        <img :src="rightIcon" alt="">
                        <van-checkbox-group v-model="alarmType" direction="horizontal" >
                            <van-checkbox name="a" shape="square">震动</van-checkbox>
                            <van-checkbox name="b" shape="square">亮屏</van-checkbox>
                            <van-checkbox name="c" shape="square">公众号推送</van-checkbox>
                        </van-checkbox-group>
                    </div>
                </div> -->
      </div>
    </div>

    <!-- 弹窗 -->
    <van-dialog v-model="dialog.isDialogshow" cancelButtonText="返回" 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>
  </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: 15, //检测周期-定位检测
      alarmType: ['a', 'b'], //告警方式
      dialog: {
        isDialogshow: false,
        title: '检测周期',
        confirmData: [
          {
            text: '3分钟',
            model: 0,
            checked: false,
            value: 3
          },
          {
            text: '5分钟',
            model: 1,
            checked: false,
            value: 5
          },
          {
            text: '10分钟',
            model: 2,
            checked: false,
            value: 10
          },
          {
            text: '15分钟',
            model: 3,
            checked: false,
            value: 15
          },
          /* {
                text: "20分钟",
                model: 2,
                checked: false,
                value: 20
                }, */
          {
            text: '30分钟',
            model: 4,
            checked: false,
            value: 30
          },
          /* {
                text: "40分钟",
                model: 4,
                checked: false,
                value: 40
                },
                {
                text: "50分钟",
                model: 5,
                checked: false,
                value: 50
                }, */
          {
            text: '60分钟',
            model: 5,
            checked: false,
            value: 60
          }
        ]
      },
      selectConfirmActive: 0
    };
  },
  computed: {
    imei() {
      return this.$store.getters.serialNo;
    }
  },
  created() {
    this.getLocationConfig();
  },
  methods: {
    //   返回
    onNavBack() {
      this.$router.push({
        name: 'watchSetting'
      });
    },
    // 保存
    onSubmit() {
      ToastService.loading({ message: '设置中' });
      let reqBody = {
        imei: this.imei,
        enabled: this.checked === true ? 1 : 0, //启用 0禁用 1启用
        sampleinteval: Number(this.sampleinteval) //上报周期 分钟为单位，取值范围是2 ~120
      };
      APIHealthy.setLocationConfig(reqBody)
        .then(res => {
          console.log('设置', res);
          if (res.data.stateCode === 1) {
            ToastService.success({ message: '设置成功' });
            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) {
      console.log('选择了', data.value);
      const uploadinteval = this.$store.getters.uploadinteval;
      this.selectConfirmActive = data.model;
      this.dialog.isDialogshow = false;
      this.sampleinteval = data.value;
      console.log(this.sampleinteval, uploadinteval);
    },
    // 点击菜单列表
    onClick() {
      this.dialog.isDialogshow = true;
      // 先注释，保不准这个功能又用回呢
      //const uploadinteval = this.$store.getters.uploadinteval;
      /* let result = this.getResult(uploadinteval, this.sampleinteval); */
      let seclectIndex = this.dialog.confirmData.findIndex(item => {
        return item.value === this.sampleinteval;
      });
      /* if(result === 5) {
            this.selectConfirmActive = 3;
        } else {
            this.selectConfirmActive = seclectIndex;
        } */
      this.selectConfirmActive = seclectIndex;
      console.log('seclectIndex', seclectIndex);
    },
    // 计算两个数相除，并获取到小数点两位，再截取两位
    getResult(number1, number2) {
      const result = parseInt(number1) / parseInt(number2);
      console.log('result', result.toString().indexOf('.'));
      return result.toString().indexOf('.') != -1 ? parseInt(result).toFixed(2).slice(0, 1) : result;
    },
    // 获取设备定位配置
    getLocationConfig() {
      ToastService.loading({ message: '数据加载中' });
      APIHealthy.getLocationConfig({ imei: this.imei })
        .then(res => {
          console.log('res', res);
          ToastService.success({ message: '数据加载完成' });
          let data = res.data.data;
          if (data) {
            console.log('定位data', data);
            this.checked = data.enabled === 1;
            this.sampleinteval = data.sampleinteval;
          }
        })
        .catch(e => {
          console.log('e', e);
          DialogService.confirm({
            message: `${e.message}`
          });
        })
        .finally(() => {
          setTimeout(() => {
            ToastService.clear();
          }, 1500);
        });
    }
  }
};
</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;
    .list {
      height: auto;
      background-color: #fff;
      border-radius: 8px;
      .item {
        height: auto;
        padding: 20px 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 {
          /* 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;
          }
        }
      }
    }
  }
  .title {
    font-size: 32px;
  }
  .dialog-container {
    padding: 20px 60px;
    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%;
                  }
                }
              }
            }
          }
        }
      }
    }
    .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: 5px 0;
      color: #999;
    }
  }
}
</style>
