<template>
  <div class="device-schedule">
    <s-header :name="$t('device.timeSwitch')" :noback="false" />

    <!-- 主内容区 -->
    <div class="schedule-container">
      <!-- 添加按钮 -->
      <div class="add-button" @click="addAlarmClock">
        <van-icon name="plus" class="add-icon" />
        <span>{{ $t('device.addAlarmClock') }}</span>
      </div>

      <!-- 分隔线 -->
      <van-divider class="custom-divider" />

      <!-- 定时项列表 -->
      <div class="schedule-list">
        <div v-for="(item, index) in list" :key="index" class="schedule-item">
          <!-- 左侧时间信息 -->
          <div class="time-info">
            <div class="time-display">
              <van-icon name="clock" class="time-icon" />
              <span class="time">{{ item.hour.slice(0, 5) }}</span>
            </div>
            <span class="weekdays">{{ showWeek(item.week) }}</span>
          </div>

          <!-- 中部描述信息 -->
          <div class="schedule-detail">
            <span class="schedule-name">{{ item.name }}</span>
            <van-tag class="type-tag" color="#4d6add">
              {{ showTypeText(item.type) }}
            </van-tag>
          </div>

          <!-- 右侧操作区 -->
          <div class="action-group">
            <van-switch :model-value="item.status" :active-value="'1'" :inactive-value="'0'" size="20px"
              @change="updateStatus(item, value)" />
            <div class="action-buttons">
              <van-button icon="edit" size="small" class="edit-btn" @click="setAlarm(item)" />
              <van-button icon="delete" size="small" class="delete-btn" @click="deleteAlarm(item.id)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { getAlaramClockList, getAlaramClockByDevice, deleteAlaramClock, alaramClockUpdate } from '@/service/device'
import { showConfirmDialog, showFailToast, showSuccessToast } 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 deviceId = ref(null);
    const route = useRoute();
    const list = ref([]);
    // 初始化页面获取列表
    onMounted(async () => {
      deviceId.value = route.query.deviceId;
      getAlaramClockListFun();
    });

    // 获取设备列表数据
    const getAlaramClockListFun = async () => {
      if (deviceId.value) {
        const { data } = await getAlaramClockByDevice({ equipmentId: deviceId.value, adminId: user.id });
        if (data.code) {
          list.value = data.data;
        }
      } else {
        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.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.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) => {
      showConfirmDialog({
        title: t('device.operationConfirmation'),
        message: t('device.pleaseConfirmAgainWhetherToOperate'),
      }).then(async () => {
        const { data } = await deleteAlaramClock({ id: id });
        if (data.code) {
          showSuccessToast(t('device.deletionSucceeded'));
          setTimeout(() => {
            getAlaramClockListFun();
          }, 1000);
        } else { showFailToast(data.message); }
      })
    }

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

    // 修改状态
    const updateStatus = async (item) => {
      console.log(item);
      const params = {
        id: item.id,
        adminId: item.adminId,
        equipmentIds: item.equipmentIds,
        hour: item.hour,
        name: item.name,
        status: item.status === "1" ? "0" : "1",
        type: item.type,
        week: item.week,
      };
      console.log(params);
      showConfirmDialog({
        title: t('device.operationConfirmation'),
        message: t('device.pleaseConfirmAgainWhetherToOperate'),
      }).then(async () => {
        const { data } = await alaramClockUpdate(params);
        if (data.code) {
          showSuccessToast(t("device.modificationSucceeded"));
          setTimeout(() => {
            getAlaramClockListFun();
          }, 1000);
        } else {
          showFailToast(data.message);
        }
      })
    }


    return { list, addAlarmClock, showTypeText, showWeek, deleteAlarm, setAlarm, updateStatus };
  },
  components: { sHeader },
};
</script>
<style lang="less" scoped>
.device-schedule {
  --schedule-bg: #ffffff;
  --border-color: #ebedf0;
  --active-color: #4d6add;
  --text-primary: #323233;
  --text-secondary: #969799;

  background: #f7f8fa;
  min-height: 100vh;

  .schedule-container {
    padding: 16px;
  }

  .add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: var(--schedule-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    color: var(--active-color);
    font-size: 15px;

    .add-icon {
      margin-right: 8px;
      font-size: 18px;
    }
  }

  .custom-divider {
    margin: 10px 0;
    border-color: var(--border-color);
  }

  .schedule-list {
    background: var(--schedule-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .schedule-item {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid var(--border-color);

      &:last-child {
        border-bottom: none;
      }

      .time-info {
        flex: 0 0 25%;

        .time-display {
          display: flex;
          align-items: center;
          margin-bottom: 8px;

          .time-icon {
            color: var(--text-secondary);
            font-size: 16px;
            margin-right: 6px;
          }

          .time {
            font-size: 18px;
            font-weight: 500;
            color: var(--text-primary);
          }
        }

        .weekdays {
          font-size: 12px;
          color: var(--text-secondary);
        }
      }

      .schedule-detail {
        flex: 1;
        margin: 0 12px;

        .schedule-name {
          display: block;
          font-size: 14px;
          color: var(--text-primary);
          margin-bottom: 10px;
        }

        .type-tag {
          font-size: 12px;
        }
      }

      .action-group {
        flex: 0 0 80px;
        text-align: right;

        .action-buttons {
          margin-top: 12px;

          .van-button {
            margin-left: 8px;
            width: 28px;
            height: 28px;

            &::before {
              border-radius: 4px;
            }
          }

          .edit-btn {
            color: var(--active-color);
            border-color: var(--active-color);
          }

          .delete-btn {
            color: #ee0a24;
            border-color: #ee0a24;
          }
        }
      }
    }
  }
}
</style>