<template>
  <div id="pop-up"
       class="seletepeople">
    <div class="leftangle"></div>
    <div class="rightangle"></div>

    <div class="weather-head">
      <div class="head-bg">选择人员</div>
      <el-icon class="weather-icon"
               size='18'
               color="#1096DB"
               @click="allData.type2=false">
        <Close />
      </el-icon>
    </div>
    <div class="custom-body">
      <div v-for="item in groupList"
           :key="item.classId"
           :title="item.className"
           :name="item.classId">
        <h3>{{ item.className }}</h3>
        <el-checkbox-group v-model="selectGroup"
                           @change="handleChecked">
          <el-checkbox v-for="row in item.datalist.filter((i) => i.isme != 1)"
                       :label="row"
                       :key="row.userId"
                       :disabled="row.online == 0"><span :style="{ color: row.online == 1 ? ' #68b2d8' : '#dedede' }">{{ row.userName }}
            </span>
          </el-checkbox>
        </el-checkbox-group>
      </div>

    </div>
    <div class="custom-button">
      <el-button type="primary"
                 class="cancel"
                 @click="allData.type2=false"
                 size="small">关闭
      </el-button>
      <el-button type="primary"
                 @click="handleClick('callGroup')"
                 size="small">确认
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { getImageUrl, removeAaary } from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();

import bus from "@/utils";

const weatherpop = ref(false);
const deptOptions = ref(undefined);

const groupList = ref([])
const selectGroup = ref([])
const userIDArr = ref([appStore.userInfo.phone])


const props = defineProps({
  titleText: {
    type: String,
  },
})

const allData = reactive({

});

const getGroupList = async () => {
  let formData = new FormData();
  formData.append("account", "");
  let res = await rongyunQueryList(formData);
  if (res.code == 200) {
    groupList.value = res.data;
  }
};

function handleChecked (val) {
  console.log(val, selectGroup.value, "selectGroup");
}

function handleClick (type, row) {
  console.log(row);
  console.log(type);
  switch (type) {
    case "search":
      allData.tableInfo.current = 1;
      allData.tableInfo.size = 10;
      allData.getUserList();
      break;
    case "call":
      let obj = {
        type: 1,
      };
      let pramas = {
        ...obj,
        ...row,
      };
      bus.emit("ryCall", pramas);
      break;
    case "addGroup":
      allData.formValue.groupName = "";
      allData.formValue.id = [];
      allData.title = "新增";
      allData.showAddGroup = true;
      defaultCheckedKeys.value = [];
      break;
    case "edit":
      defaultCheckedKeys.value = [];
      allData.title = "修改";
      allData.formValue.groupName = row.groupName;
      allData.formValue.ids = row.userName;
      allData.formValue.id = row.id;
      row.userlist.forEach((v) => {
        defaultCheckedKeys.value.push(v.phone);
      });
      allData.showAddGroup = true;
      break;
    case "delete":
      allData.title = null;
      ElMessageBox.info({
        title: "提示",
        content: `确定对选择项进行删除操作吗？`,
        positiveText: "确定",
        negativeText: "取消",
        onPositiveClick: () => {
          saveName([row.id]);
        },
        onNegativeClick: () => { },
      });
      break;
    case "sureName":
      formRef.value.validate((errors) => {
        if (!errors) {
          saveName();
        } else {
          proxy.$modal.msgWarning("验证失败");
        }
      });
      break;
    case "callGroup":
      selectGroup.value.forEach((i) => {
        userIDArr.value.push(i.phone);
      });
      if (userIDArr.value.length <= 2) {
        proxy.$modal.msgWarning("请至少添加2名人员！！！");
        return;
      }
      saveGroup();
      break;
  }
}

const saveGroup = async () => {
  let params = {
    ids: userIDArr.value.join(),
  };
  let res = await rongyunGroupSave(params);
  if (res.data.code == 200) {
    let obj = {
      ...res.data.data,
      type: 2,
      userList: selectGroup.value.concat([
        {
          phone: appStore.userInfo.phone,
          userName: appStore.userInfo.nick_name,
        },
      ]),
    };
    console.log("群呼的", obj);
    bus.emit("OffRongYun", obj);
  }
};

onMounted(() => {
  getGroupList();

});
</script>
<style lang="scss" scoped>
//@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
@import "@/assets/styles/map-detail.scss";

.detail-real-box {
  flex-direction: column;
}

::v-deep .el-textarea__inner {
  background-color: #042c52 !important;
  box-shadow: none;
}

::v-deep .el-button {
  color: #fefeff;
  background: #0f53db;
  border: none;
}

.dialog-footer {
  text-align: right;
  margin-top: 10px;
}

::v-deep .el-table {
  height: 200px;
}

::v-deep .el-tree__empty-block {
  min-height: 0;
}

::v-deep .el-tree {
  background: transparent;
}

::v-deep .el-tree-node__content:hover {
  background-color: #274470;
  color: #fff;
}

.custom-body {
  overflow-y: auto !important;
}

::v-deep .el-input__inner {
  color: #fff;
}

::v-deep .el-textarea__inner {
  color: #fff;
}
</style>