<template>
  <!-- 设备定时开关列表 -->
  <div class="pageClock 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">
              <div class="bd2"></div>
              <div class="TextGroup1 flex-col">
                <span class="word2">{{ $t('device.addAlarmClock') }}</span>
              </div>
            </div>
          </div>
        </div>
        <img class="img2" referrerpolicy="no-referrer"
          src="../../assets/line.png" />
      </div>
      <div v-for="(item, index) in list" :key="index">
        <div class="section6 l-flex-between kBordBott">
          <div class="TextGroup2 flex-col">
            <div class="bd3 flex-col justify-between">
              <span class="word3">{{ item.hour.slice(0, 5) }}</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>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { getAlaramClockList, deleteAlaramClock } from '@/service/device'
import { showFailToast, showSuccessToast } from 'vant';
import { getLoginUser, styleUrl } 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 () => {
      // 加载样式
      styleUrl('alarmClock');
      getAlaramClockListFun();
    });

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

    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.indexOf('1') > -1 && e.indexOf('2') > -1 && e.indexOf('3') > -1 && e.indexOf('4') > -1 && e.indexOf('5') > -1 && e.indexOf('6') > -1 && e.indexOf('7') > -1) {
        return t('device.everyDay')
      }
      if (e.indexOf('1') > -1 && e.indexOf('2') > -1 && e.indexOf('3') > -1 && e.indexOf('4') > -1 && e.indexOf('5') > -1 && e.indexOf('6') == -1 && e.indexOf('7') == -1) {
        return t('device.weekday2')
      }
      // if (e === '1,2,3,4,5,') { return t('device.weekday2') }
      // if (e === '6,7,') { return t('device.weekend2') }
      if (e.indexOf('1') == -1 && e.indexOf('2') == -1 && e.indexOf('3') == -1 && e.indexOf('4') == -1 && e.indexOf('5') == -1 && e.indexOf('6') > -1 && e.indexOf('7') > -1) {
        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) {
        showSuccessToast(t('device.deletionSucceeded'));
        getAlaramClockListFun();
      } else { showFailToast(data.message); }
    }

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


    return { list, addAlarmClock, showTypeText, showWeek, deleteAlarm, setAlarm };
  },
  components: { sHeader },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
</style>