<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="1000px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-button type="primary" plain icon="el-icon-plus" size="mini" style="margin-bottom: 20px;" @click="addClockalarm">新增闹钟</el-button>
    <el-form ref="form" :model="form" :rules="rules" size="small" :hide-required-asterisk="true" label-width="0px">
        <el-table :data="form.alarmclock">
            <el-table-column type="index" align="center" width="50"/>
            <el-table-column label="时间" align="center" min-width="110px">
                <template slot-scope="scope">
                    <div class="inputbox">
                        <el-form-item label="时:" :prop="'alarmclock.' + scope.$index + '.hour'" :rules="rules.hour" class="input" label-width="20px">
                            <el-select v-model="scope.row.hour" placeholder="时">
                                <el-option :label="item" :value="item" v-for="(item,i) in hourOptions" :key="i" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分:" :prop="'alarmclock.' + scope.$index + '.minute'" class="input" :rules="rules.minute" label-width="20px">
                            <el-select v-model="scope.row.minute" placeholder="分">
                                <el-option :label="item" :value="item" v-for="(item,i) in minuteOptions" :key="i" />
                            </el-select>
                        </el-form-item>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="重复频率" align="center" width="110px">
                <template slot-scope="scope">
                    <el-form-item :prop="'alarmclock.' + scope.$index + '.repeat'">
                        <el-radio-group v-model="scope.row.repeat">
                            <el-radio :label="true">重复</el-radio>
                            <el-radio :label="false">一次性</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="提醒频率" align="center" min-width="130px">
                <template slot-scope="scope">
                    <el-form-item :prop="'alarmclock.' + scope.$index + '.week'" :rules="rules.week">
                        <el-select v-model="scope.row.week" multiple placeholder="请选择" style="width: 100%;">
                            <el-option label="星期一" value="monday" />
                            <el-option label="星期二" value="tuesday" />
                            <el-option label="星期三" value="wednesday" />
                            <el-option label="星期四" value="thursday" />
                            <el-option label="星期五" value="friday" />
                            <el-option label="星期六" value="saturday" />
                            <el-option label="星期日" value="sunday" />
                        </el-select>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="内容" align="center">
                <template slot-scope="scope">
                    <el-form-item :prop="'alarmclock.' + scope.$index + '.title'" :rules="rules.title">
                        <el-input type="textarea" autosize placeholder="请输入内容" v-model="scope.row.title"></el-input>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="80px">
                <template slot-scope="scope">
                    <el-button 
                        size="mini" 
                        type="text" 
                        icon="el-icon-delete" 
                        v-if="form.alarmclock.length > 1"
                        @click="handleDelete(scope.row,scope.$index)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="btnLoading">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { setClockalarm } from "@/api/watch/deviceInfoSet.js";

export default {
  data() {
    return {
      btnLoading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,  
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        hour: [
            { required: true, message: "时不能为空", trigger: ["blur", "change"] }
        ],
        minute: [
            { required: true, message: "分不能为空", trigger: ["blur", "change"] }
        ],
      },
      // 弹窗事件类型
      type: "",
      hourOptions: ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"],
      minuteOptions: ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23",
        "24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59"
      ],
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
          deviceid: undefined, // 设备id
          deviceNumber: undefined, // 设备编号
          alarmclock: [{
            repeat: true,
            week: ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"],
            hour: undefined,
            minute: undefined,
            title: ""
          }]
        };
      this.resetForm("form");
      this.btnLoading = false
    },
    /** 修改按钮操作 */
    handleSet(deviceid,deviceNumber,item) {
      this.reset();
      this.form.deviceid = deviceid
      this.form.deviceNumber = deviceNumber;
      this.open = true;
      this.title = item.label;
      this.type = item.eventName
    },
    // 新增闹钟
    addClockalarm() {
        if(this.form.alarmclock && this.form.alarmclock.length == 5) {
            this.msgError("最多设置5个号码!")
            return
        }
        const obj = {
            repeat: true,
            week: ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"],
            // monday: true,
            // tuesday: true,
            // wednesday: true,
            // thursday: true,
            // friday: true,
            // saturday: true,
            // sunday: true,
            hour: undefined,
            minute: undefined,
            title: ""
        }
        this.form.alarmclock.push(obj)
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
          if (valid) {
            if(this.form.deviceNumber != undefined) {
                const alarmclock = this.form.alarmclock.map(item=>({
                    repeat: item.repeat,
                    monday: item.week.includes("monday"),
                    tuesday: item.week.includes("tuesday"),
                    wednesday: item.week.includes("wednesday"),
                    thursday: item.week.includes("thursday"),
                    friday: item.week.includes("friday"),
                    saturday: item.week.includes("saturday"),
                    sunday: item.week.includes("sunday"),
                    hour: item.hour,
                    minute: item.minute,
                    title: item.title,
                }))
                const param = {
                    deviceid: this.form.deviceNumber,
                    alarmclock
                }
                this.btnLoading = true
                setClockalarm(param).then(res=>{
                    this.btnLoading = false
                    if(res.code == 200) {
                        this.msgSuccess("操作成功");
                        this.open = false
                    } else {
                        this.msgError(res.msg);
                    }
                }).catch(err => { 
                    this.btnLoading = false
                })
            }
          }
      });
    },
    // 删除
    handleDelete(row,index) {
        this.form.alarmclock.splice(index,1)
    }
  }
};
</script>

<style lang="scss" scoped>
.input {
    width: 90px;
    margin-left: 10px;
    ::v-deep .el-input__inner {
        // padding-left: 5px;
    }
}
.inputbox {
    display: flex;
    align-items: center;
}
</style>