<template>
  <div class="clock" :style="{ background: listData.length == 0 ? '#fff ' : '#f2f4f5' }">
    <van-nav-bar title="设置闹钟" left-arrow :border="true" @click-left="onNavBack">
      <van-icon name="plus" slot="right" id="plus-icon" @click="onAddClick" />
    </van-nav-bar>
    <div class="clock-list-container" v-show="isShowPage">
      <van-cell v-for="(item, index) in listData" :key="`prohibit_${index}`" class="clock">
        <van-swipe-cell>
          <div class="area">
            <div :class="[{ active: item.Active }, 'left']" @click="onListClick(item.Id)">
              <div class="title">{{ item.StartTime }}</div>
              <div class="date">
                <span v-for="(data, index) in formatWeekdays(item.Weekdays)" :key="`date_${index}`">{{ data }}</span>
              </div>
            </div>
            <van-switch :value="item.Active == 1" @input="onInput($event, item.Id)" :active-color="$green" />
          </div>
          <template slot="right">
            <van-button square type="danger" text="删除" @click="onClose(item.Id)" />
          </template>
        </van-swipe-cell>
      </van-cell>
      <div class="noData_img" v-show="listData.length == 0">您还没有给定位卡设置闹钟，快去添加吧~</div>
    </div>
  </div>
</template>

<script>
import DialogService from '../../services/dialog-service';
import { DeviceCommandModel } from '../../config/models';
import ToastService from '../../services/toast-service';
import APICommand from '@/api/command';
export default {
  data() {
    return {
      listData: [],
      serialNo: '',
      isShowPage: false
    };
  },
  methods: {
    // 返回
    onNavBack() {
      this.$router.push({ name: 'Myself' });
    },
    onAddClick() {
      this.$router.push({
        name: 'setupClockPeriod',
        query: { code: this.$route.query.code }
      });
    },
    onInput(checked, id) {
      this.listData.map(val => {
        console.log(val.Active);
        if (val.Id == id) {
          val.Active = checked ? 1 : 0;
        }
        return val;
      });
      let cmdCode = DeviceCommandModel.clock;
      let cmdValue = {
        Items: this.listData
      };
      this.sendCommand(cmdCode, JSON.stringify(cmdValue));
      // console.log(222);
    },
    onListClick(id) {
      this.$router.push({
        name: 'setupClockPeriod',
        query: { code: this.$route.query.code, id }
      });
    },

    //滑动单元格
    onClose(id) {
      this.listData.some((val, i) => {
        if (val.Id == id) {
          this.listData.splice(i, 1);
          return true;
        }
      });
      let cmdCode = DeviceCommandModel.clock;
      let cmdValue = {
        Items: this.listData
      };
      this.sendCommand(cmdCode, JSON.stringify(cmdValue));
    },

    //获取信息
    getCommandList() {
      ToastService.loading();
      /* let url = `/api/Command/CommandList`;
        let jsonData = { deviceId: this.$store.getters.deviceId };
        this.$axios
          .post(url, jsonData) */
      APICommand.commandList({
        deviceId: this.$store.getters.deviceId
      })
        .then(res => {
          if (res.data.stateCode) {
            ToastService.clear();
            let item = res.data;
            let cmdValue = item.items.filter(val => val.cmdCode == DeviceCommandModel.clock);
            if (cmdValue.length) {
              let parseValue = JSON.parse(cmdValue[0].cmdValue);
              this.listData = parseValue.Items;
            }
          } else {
            DialogService.confirm({ title: res.data.message });
          }
          this.isShowPage = true;
        })
        .catch(() => {
          ToastService.clear();
          this.isShowPage = true;
        })
        .finally(() => {
          ToastService.clear();
        });
    },
    //处理方面的
    formatWeekdays(str) {
      let arr = Array.from(str);
      let newArr = [];
      arr.forEach(val => {
        switch (Number(val)) {
          case 1:
            newArr.push('周一 ');
            break;
          case 2:
            newArr.push('周二 ');
            break;
          case 3:
            newArr.push('周三 ');
            break;
          case 4:
            newArr.push('周四 ');
            break;
          case 5:
            newArr.push('周五 ');
            break;
          case 6:
            newArr.push('周六 ');
            break;
          case 7:
            newArr.push('周日 ');
            break;
          default:
            newArr = [];
        }
      });
      return newArr;
    },
    //提交
    sendCommand(cmdCode, cmdValue) {
      ToastService.loading();
      /*  let url = `/api/Command/SendCommand`;
        let jsonData = {
          deviceId: this.$store.getters.deviceId,
          userId: this.$store.getters.userId,
          serialNo: this.$store.getters.serialNo,
          cmdCode,
          cmdValue
        }; */
      ToastService.loading();
      /* this.$axios
          .post(url, jsonData) */
      APICommand.sendCommand({
        deviceId: this.$store.getters.deviceId,
        userId: this.$store.getters.userId,
        serialNo: this.$store.getters.serialNo,
        cmdCode,
        cmdValue
      })
        .then(res => {
          ToastService.clear();
          let item = res.data;
          if (item.stateCode == 1) {
            ToastService.success({ message: '操作成功' });
          } else {
            DialogService.confirm({ title: '操作失败，请重新设置' });
          }
        })
        .catch(() => {
          ToastService.clear();
        });
    }
  },
  created() {
    this.getCommandList();
  }
};
</script>

<style lang="scss" scoped>
.clock {
  .clock-list-container {
    height: calc(100vh - 160px);
    overflow: scroll;
    .area {
      padding: 0 30px;
      height: 100%;
      margin-bottom: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 32px;
      }
    }
  }
}

.noData_img {
  margin: 200px auto 0;
  width: 640px;
  height: 238px;
  /* background: url(../../assets/myself/uyqk-noData.png) center no-repeat; */
  background-size: 336px 238px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 28px;
}
</style>
