<template>
  <!-- 设备定时开关列表 -->
  <div class="page flex-col">
    <s-header :name="$t('device.timeSwitch')" :noback="false"></s-header>
    <div class="bd1 flex-col">
      <div class="section5 flex-col">
        <div class="layer1 flex-row">
          <div class="ImageText1 flex-col">
            <div class="layer1 flex-row justify-between" @click="addAlarmClock">
              <img class="bd2" src="../../assets/device/alarmClock_Add.png" />
              <div class="TextGroup1 flex-col">
                <span class="word2">{{$t('device.addAlarmClock')}}</span>
              </div>
            </div>
          </div>
        </div>
        <img
          class="img2"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
        />
      </div>
      <div v-for="(item, index) in list" :key="index" >
        <div class="section6 flex-row">
          <div class="TextGroup2 flex-col">
            <div class="bd3 flex-col justify-between">
              <span class="word3">{{item.hour}}</span> <span class="info2">{{showWeek(item.week)}}</span>
            </div>
          </div>
          <div class="TextGroup3 flex-col">
            <div class="main2 flex-col justify-between">
              <span class="word4">{{item.name}}</span>
              <span class="txt3">{{showTypeText(item.type)}}</span>
            </div>
          </div>
          <div class="ImageText2 flex-col">
            <div class="group3 flex-row justify-between" @click="deleteAlarm(item.id)">
              <div class="group4 flex-col"></div>
              <div class="TextGroup4 flex-col">
                <span class="info3">{{$t('device.delete')}}</span>
              </div>
            </div>
          </div>
          <div class="bd4 flex-col justify-between">
            <div class="outer1 flex-row justify-between" @click="setAlarm(item)">
              <div class="main3 flex-col"></div>
              <span class="word5">{{$t('device.modify')}}</span>
            </div>
            <span :class="{
              'word6' : item.status === '1',
              'word6 close' : item.status !== '1'
              }">{{item.status === '1' ? $t('device.opened') : $t('device.closed')}}</span>
          </div>
        </div>
        <div class="section7 flex-col"></div>
      </div>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import navBar from '@/components/NavBar';
import sHeader from "@/components/SimpleHeader";
import { getAlaramClockList, deleteAlaramClock } from '@/service/device'
import { Toast } from 'vant';
import { getLoginUser } from '@/common/js/utils';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();
    const user = getLoginUser();
    const router = useRouter();
    const route = useRoute();
    const list = ref([]);
    // 初始化页面获取列表
    onMounted(async () => {
        getAlaramClockListFun();
    });

     // 获取设备列表数据
    const getAlaramClockListFun = async () => {
      const { data } = await getAlaramClockList({adminId : user.id});
      if (data.code) {
        list.value = data.data;
      } else { Toast.fail(data.message); }
    }

    const addAlarmClock = () => {
      router.push({ path: 'alarmClockAdd', query: { deviceId: route.query.deviceId }})
    }

    const showTypeText = (e) => {
      if (e === '0') { return t('device.furnaceHeadOn'); }
      if (e === '1') { return t('device.furnaceHeadClosed'); }
      if (e === '2') { return t('device.startSleep'); }
      if (e === '3') { return t('device.endSleep'); }
      return '';
    }

    const showWeek = (e) => {
      if (e === '1,2,3,4,5,6,7,') { return t('device.everyDay') }
      if (e === '1,2,3,4,5,') { return t('device.weekday2') }
      if (e === '6,7,') { return t('device.weekend2') }
      let retVal = '';
      if (e.indexOf('1') > -1) { retVal = retVal + `${t('device.monday')},` }
      if (e.indexOf('2') > -1) { retVal = retVal + `${t('device.tuesday')},` }
      if (e.indexOf('3') > -1) { retVal = retVal + `${t('device.wednesday')},` }
      if (e.indexOf('4') > -1) { retVal = retVal + `${t('device.thursday')},` }
      if (e.indexOf('5') > -1) { retVal = retVal + `${t('device.friday')},` }
      if (e.indexOf('6') > -1) { retVal = retVal + `${t('device.saturday')},` }
      if (e.indexOf('7') > -1) { retVal = retVal + `${t('device.sunday')}` }
      return retVal;
    }

    const deleteAlarm = async (id) => {
      const { data } = await deleteAlaramClock({id : id});
      if (data.code) {
        Toast.fail(t('device.deletionSucceeded'));
        getAlaramClockListFun();
      } else { Toast.fail(data.message); }
    }

    const setAlarm = async (item) => {
      router.push({ path: 'alarmClockSet', query: { alarmId: item.id }});
    }

 
    return { list, addAlarmClock, showTypeText, showWeek, deleteAlarm, setAlarm };
  },
  components: { sHeader, navBar },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 375px;
  height: 667px;
  overflow: hidden;
  .bd1 {
    width: 375px;
    height: 439px;
    .section5 {
      background-color: rgba(255, 255, 255, 1);
      z-index: 91;
      height: 54px;
      margin-top: 1px;
      width: 375px;
      position: relative;
      .layer1 {
        width: 84px;
        height: 20px;
        margin: 17px 0 0 15px;
        .ImageText1 {
          height: 20px;
          width: 84px;
          .layer1 {
            width: 84px;
            height: 20px;
            margin: 0 auto;
            .bd2 {
              width: 20px;
              height: 20px;
            }
            .TextGroup1 {
              height: 20px;
              width: 56px;
              .word2 {
                width: 56px;
                height: 20px;
                overflow-wrap: break-word;
                color: rgba(64, 77, 116, 1);
                font-size: 14px;
                font-family: PingFangSC-Medium;
                text-align: left;
                white-space: nowrap;
                line-height: 20px;
                display: block;
              }
            }
          }
        }
      }
      .img2 {
        z-index: 93;
        position: absolute;
        left: 0;
        top: 53px;
        width: 375px;
        height: 2px;
      }
    }
    .section6 {
      width: 345px;
      height: 46px;
      margin: 6px 0 0 15px;
      .TextGroup2 {
        height: 46px;
        width: 55px;
        .bd3 {
          width: 130px;
          height: 46px;
          .word3 {
            width: 55px;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 22px;
            font-family: PingFangSC-Medium;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }
          .info2 {
            width: 100%;
            height: 18px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            // white-space: nowrap;
            line-height: 18px;
            display: block;
            margin: -2px 0 0 2px;
          }
        }
      }
      .TextGroup3 {
        height: 38px;
        width: 52px;
        margin: 8px 0 0 93px;
        .main2 {
          width: 52px;
          height: 38px;
          .word4 {
            width: 52px;
            height: 18px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 18px;
            display: block;
          }
          .txt3 {
            width: 52px;
            height: 18px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 18px;
            margin-top: 2px;
            display: block;
          }
        }
      }
      .ImageText2 {
        height: 17px;
        width: 40px;
        margin: 9px 0 0 32px;
        .group3 {
          width: 40px;
          height: 17px;
          .group4 {
            width: 13px;
            height: 14px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb70cca70325ff31d341004d9ce7ebf2d5f692bbe3bf755d9d44b36aa78c21c77) top center no-repeat;
            background-size: 100%;
            margin-top: 1px;
          }
          .TextGroup4 {
            height: 17px;
            width: 24px;
            .info3 {
              width: 24px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(223, 94, 76, 1);
              font-size: 12px;
              text-align: left;
              white-space: nowrap;
              line-height: 17px;
              display: block;
            }
          }
        }
      }
      .bd4 {
        width: 41px;
        height: 36px;
        margin: 10px 0 0 32px;
        .outer1 {
          width: 41px;
          height: 17px;
          .main3 {
            width: 13px;
            height: 13px;
            background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/3515b2720d194f61b88d42eb045d4a30_mergeImage.png) top center no-repeat;
            background-size: 100%;
            margin-top: 1px;
          }
          .word5 {
            width: 24px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(77, 106, 221, 1);
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
            display: block;
          }
        }
        .word6 {
          width: 39px;
          height: 18px;
          overflow-wrap: break-word;
          color: rgba(77, 193, 147, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 18px;
          display: block;
          margin: 1px 0 0 2px;
          &.close { color: rgba(197, 197, 205, 1); }
        }
      }
    }
    .section7 {
      width: 345px;
      height: 1px;
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng699372cef543e7a77f69ee4b13e1e8fd3969dbac13a75ca8bfd596af7891e8b5) -1px
        0px no-repeat;
      margin: 19px 0 0 15px;
    }
  }
}
</style>

