<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-button type="primary" plain icon="el-icon-plus" size="mini" style="margin-bottom: 20px;" @click="addPhonebook">新增通讯录</el-button>
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="0px">
        <!-- <el-form-item prop="forbid" label="陌生来电设置" label-width="100px">
            <el-select v-model="form.forbid " placeholder="" clearable>
                <el-option label="拦截陌生来电" :value="1"/>
                <el-option label="不拦截陌生来电" :value="2"/>
            </el-select>
        </el-form-item> -->
        <el-table :data="form.phoneList">
            <el-table-column type="index" align="center" width="55"/>
            <el-table-column label="姓名" align="center">
                <template slot-scope="scope">
                    <el-form-item :prop="'phoneList.' + scope.$index + '.name'" :rules="rules.name">
                        <el-input v-model="scope.row.name" maxlength="10" placeholder="请输入姓名" />
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="电话" align="center">
                <template slot-scope="scope">
                    <el-form-item :prop="'phoneList.' + scope.$index + '.number'" :rules="rules.number">
                        <el-input v-model="scope.row.number" maxlength="11" placeholder="请输入电话" />
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="是否紧急联系人" align="center" prop="sos" width="120">
                <template slot-scope="scope">
                    <el-form-item :prop="'phoneList.' + scope.$index + '.sos'" :rules="rules.sos">
                        <el-checkbox v-model="scope.row.sos"></el-checkbox>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
                <template slot-scope="scope">
                    <el-button 
                        size="mini" 
                        type="text" 
                        icon="el-icon-delete" 
                        v-if="form.phoneList.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 { validPhone } from "@/utils/validate.js";
import { phonebookSync } from "@/api/watch/deviceInfoSet.js";

export default {
  data() {
    const checkPhone = (rule, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error("请输入正确的电话"));
      } else {
        callback();
      }
    };
    return {
      btnLoading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
            { required: true, message: "姓名不能为空", trigger: ["blur", "change"] }
        ],
        number: [
            { required: true, message: "电话不能为空", trigger: ["blur", "change"] },
            { validator: checkPhone, trigger: ["blur", "change"] }
        ],
      },
      // 弹窗事件类型
      type: "",
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
          deviceid: undefined, // 设备id
          deviceNumber: undefined, // 设备编号
          phoneList: [
            {
                name:"",
                number:"",
                sos: true
            }
          ]
        };
      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
    },
    // 新增联系人
    addPhonebook() {
        if(this.form.phoneList && this.form.phoneList.length == 8) {
            this.msgError("最多设置8个号码!")
            return
        }
        const obj = {
            name:"",
            number:"",
            sos: false
        }
        this.form.phoneList.push(obj)
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
          if (valid) {
            // 要求至少有一个号码是SOS的
            if(this.form.phoneList.some(item => item.sos)) {
                const param = {
                    deviceid: this.form.deviceNumber,
                    phoneList: this.form.phoneList
                }
                this.btnLoading = true
                phonebookSync(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
                })
            } else {
                this.msgError("要求至少有一个号码是紧急联系人的!")
                return
            }
          }
      });
    },
    // 删除
    handleDelete(row,index) {
        this.form.phoneList.splice(index,1)
    }
  }
};
</script>

<style lang="scss" scoped>
.radio-group {
    ::v-deep .el-form-item__content{
        text-align: center;
    }
}
.form-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    margin: 15px 0;
    span {
        flex-shrink: 0;
        width: 80px;
    }
    .label {
        flex: 1;
        text-align: center;
    }
}
</style>