/**
@author:fugy
@date:2018.11.27
@info:设定通知人员
**/
<template>
  <el-dialog title="设定通知人员" :visible.sync="dialogVisible" width="50%" center>
    <div class="box" v-if="userData.length">
      <ul class="ul-box">
        <li class="tit">
          <p>人员姓名及通知方式</p>
        </li>
        <li v-for="(item, index) in userData" :key="index">
            <p>
                <span class="name">{{item.name}}</span>
                <span class="name">{{item.phone}}</span>
                <span class="name">{{item.email}}</span>
            </p>         
          <span>
            <v-check-box :sendMessage='item.sendMessage' :sendEmail='item.sendEmail' :sendWechat='item.sendWechat' :define="index" @change="checkBoxChange"></v-check-box>
          </span>
        </li>
      </ul>      
    </div>
    <div v-else style="text-align:center;">暂无人员</div>
    <p>
        <el-button type="text" icon="el-icon-setting" @click="manageUser">管理通知人员</el-button>
      </p>
    <span slot="footer" class="dialog-footer">
        <el-button size="middle" type="primary" @click="save">保 存</el-button>
        <el-button size="middle" @click="dialogVisible = false">取 消</el-button>      
    </span>    
  </el-dialog>
</template>
<script>
import api from "./api";
import vCheckBox from "@/components/alarm/common/CheckBox";
import utils from "./utils";
export default {
  name: "set-notice-user",
  data() {
    return {
      dialogVisible: false,
      userData: []
    }
  },
  props: ["setDialogVisible", "setUserData", "alarmIdArr", "params"],
  components: {
    vCheckBox,
    // vCheckBox1
  },
  methods: {
    async getUserData() {
        this.userData = []
      let params = {
          criteria: {
              projectId: this.params.projectId
          }          
      }
      let res = await api.getUserList(params);
      if (res.result && res.count) {
          this.handleData(res.content)      
      }
    },
    handleData(res) {
      res.forEach(item => {
          this.setUserData.forEach(ele => {
              if(item.id == ele.id) {
                  item.sendMessage = ele.sendMessage;
                  item.sendEmail = ele.sendEmail;
                  item.sendWechat = ele.sendWechat;
              }
          })
      });
      this.userData = res;
    },
    // 管理通知人员
    manageUser() {
        this.dialogVisible = false;
        this.$emit("to-manage");
    },
    checkBoxChange(obj, index) {
        this.userData[index].sendMessage = obj.sendMessage;
        this.userData[index].sendEmail = obj.sendEmail;
        this.userData[index].sendWechat = obj.sendWechat;
    },
    async save() {
        let notifyUserList = await utils.setNoticeUserData(this.userData);
        let alarmConfigResultIdList = this.alarmIdArr;;
        let params = {
            projectId: this.params.projectId,
            alarmConfigResultIdList: alarmConfigResultIdList,
            notifyUserList: notifyUserList
        };
        let res = await api.setNoticeUser(params);
        if(res.result == "success") {
            this.$emit("refresh")          
            this.$message({
                type: 'success',
                message: '保存成功'
            });
            this.dialogVisible = false;
        }
    },
    refresh() {
        this.$emit("refresh")        
    }   
  },
  watch: {
    setDialogVisible() {
      this.dialogVisible = true;
      this.getUserData();
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  font-size: 16px;
  .ul-box {
    border: 1px solid #ebeef5;
    border-bottom: none;
    li {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ebeef5;
      p {
          display: flex;
          .name {
              width: 150px;
          }
      }
    }
    .tit {
      justify-content: center;
    }
  }
}
</style>

