<template>
  <!-- 单呼群呼弹框 -->
  <el-dialog
    v-model="props.dialogShow"
    title="融云通讯录"
    :close-on-click-modal="false"
    class="contactBoxRY"
    center
    :before-close="closeDalog"
  >
    <div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="changeTabs">
        <el-tab-pane label="联系人" name="first"></el-tab-pane>
        <el-tab-pane label="群呼" name="second"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 搜索 -->
    <div
      v-if="activeName == 'first'"
      v-loading="tableInfo.loading"
      element-loading-background="rgba(3, 26, 47, 0.3)"
    >
      <el-form :model="parmsTable" inline>
        <el-form-item>
          <el-input
            v-model="parmsTable.account"
            placeholder="联系人/电话"
            @keyup.enter="onSubmit"
          />
        </el-form-item>
        <el-form-item v-show="false">
          <el-input v-model="parmsTable.account" placeholder="联系人/电话" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            color="#158CFD"
            icon="search"
            @click="onSubmit"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <div class="tableRY">
        <el-table :data="tableData" style="width: 100%" :border="true" stripe>
          <el-table-column label="联系人" prop="name" align="center"> </el-table-column>
          <el-table-column label="电话" prop="phone" align="center">
            <template #default="scope">
              <span>{{ geTel(scope.row.phone) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="在线状态" prop="userTokenList" align="center">
            <template #default="scope">
              <span v-for="item in scope.row.userTokenList" :key="item">
                <span :class="item.isOnlion == 1 ? 'online' : 'offline'">
                  <span>{{ item.registerPlatform }}</span>
                  <span>{{ item.isOnlion == 1 ? "在线 " : "离线 " }}</span>
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <span v-for="item in scope.row.userTokenList" :key="item">
                <img
                  v-show="item.registerPlatform == 'web'"
                  title="web端"
                  src="/src/assets/images/rongYunImg/ryIcon_web.png"
                  @click="rongYunCall(item)"
                  style="cursor: pointer; margin-right: 15px"
                />
                <img
                  v-show="item.registerPlatform == 'app'"
                  title="app端"
                  src="/src/assets/images/rongYunImg/ryIcon_app.png"
                  alt=""
                  @click="rongYunCall(item)"
                  style="cursor: pointer; margin-right: 15px"
                />
              </span>
              <img
                title="同时呼叫"
                src="/src/assets/images/rongYunImg/ryIcon_webandapp.png"
                alt=""
                @click="beforegroupCall(scope.row.userTokenList)"
                style="cursor: pointer"
              />
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationBox">
          <el-pagination
            v-model:current-page="tableInfo.current"
            v-model:page-size="tableInfo.size"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <div class="grouoDiv" v-if="activeName == 'second'">
      <div v-for="item in groupList" :key="item" :title="item.groupName" :name="item.id">
        <div class="TabLine">
          <div class="Line">{{ item.groupName }}</div>
          <el-checkbox-group v-model="item.checked">
            <el-checkbox :value="item.checked" @change="allCheckbox(item)"
              >全选</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="checkboxClass">
          <el-checkbox-group v-model="rowidarr">
            <el-checkbox
              v-for="row in item.userList"
              :label="row.id"
              :value="row.checked"
              :key="row.id"
              @change="radiocheck(row)"
            >
              <span style="color: #dedede"> {{ row.name }}</span>
              <span style="color: #dedede"> ( </span>
              <span
                v-for="p in row.userTokenList"
                :key="p"
                :class="p.isOnlion == 1 ? 'online' : 'offline'"
              >
                <span>{{ p.registerPlatform }} </span>
                <span>{{ p.isOnlion == 1 ? "在线 " : "离线 " }}</span>
              </span>
              <span style="color: #dedede"> ) </span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <el-button
        type="primary"
        size="small"
        icon="PhoneFilled"
        style="position: absolute; bottom: 20px; right: 55px; z-index: 1"
        @click="groupCall()"
        >呼叫
      </el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import {
  getUserStatus,
  rongyunGroupSave,
  queryPage,
  rongyunQueryList,
} from "@/views/RongyunCommunication/rongyunjs/rongyunApi.js";
import useUserStore from "@/store/modules/user";
import { ElMessageBox } from "element-plus";
const appStore = useUserStore();
import bus from "@/utils/util";
import { set } from "ol/transform";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["dialogHide"]);
const props = defineProps({
  dialogShow: Boolean,
});
watch(
  () => props.dialogShow,
  (newVal, oldVal) => {
    if (newVal) {
      console.log(" useUserStore();", useUserStore());
      getUserList();
      activeName.value = "first";
    }
  }
);

const activeName = ref("first");
const tableData = ref([]);
const parmsTable = reactive({
  account: "",
});
// tab切换
const handleClick = (e) => {};
const tableInfo = reactive({
  loading: false,
  data: [],
  total: 0,
  size: 10,
  current: 1,
});
const geTel = (tel) => {
  var reg = /^(\d{3})\d{4}(\d{4})$/;
  return tel.replace(reg, "$1****$2");
};
const currenIndex = ref(0);
// 查询联系人
const getUserList = () => {
  tableData.value = [];
  let params = {
    name: parmsTable.account,
    pageNum: tableInfo.current,
    pageSize: tableInfo.size,
  };
  tableInfo.loading = true;
  queryPage(params).then((res) => {
    console.log(res, "res");
    let data = res.data;
    tableInfo.loading = false;

    if (res.code == 200) {
      if (currenIndex.value == 0) {
        data.forEach((v) => {
          if (v.isme != 1) {
            tableData.value.push(v);
          }
          v.userTokenList.forEach((p) => {
            p.name = v.name;
          });
        });
        tableInfo.total = res.total;
      } else {
        data.forEach((v) => {
          if (v.isme != 1) {
            tableData.value.push({
              phone: v.phone,
              name: `${v.name} -- ${v.postName} -- ${v.deptName}`,
            });
          }
        });
      }
      console.log(tableData, "allData.tableData.");
    }
  });
};
function handleSizeChange(val) {
  tableInfo.size = val;
  console.log(`每页 ${val} 条`);
  getUserList();
}
function handleCurrentChange(val) {
  tableInfo.current = val;
  getUserList();
  console.log(`当前页: ${val}`);
}
const closeDalog = () => {
  emit("dialogHide", false);
};
// 搜索
const onSubmit = () => {
  tableInfo.current = 1;
  getUserList();
};
// 群呼
const groupList = ref([]);
const selectGroup = ref([]); //从勾选的人员中 筛选出在线的人员账号
const rowidarr = ref([]); //回显的checkbox的id数组集
const userIDArr = ref([]);

// 查询分组
const getGroupList = async () => {
  selectGroup.value = [];
  groupList.value = [];

  let res = await rongyunQueryList();
  if (res.code == 200) {
    if (res.data) {
      res.data.forEach((e) => {
        e.checked = false;
      });
    }
    groupList.value = res.data;

    console.log("groupListgroupList", groupList.value);
  }
};
const radiocheck = (item) => {
  console.log("点击单选", item, selectGroup.value);
  let at = selectGroup.value;
  let arr = [];
  if (!item.checked) {
    // 往里新增人员
    console.log("选中");
    // 过滤掉不在线的web而app不管在不在线都留下
    rowidarr.value.push(item.id);
    item.userTokenList.map((e) => {
      e.name = item.name;
      if (e.isOnlion == 1 && e.registerPlatform == "web") {
        arr.push(e);
      } else if (e.registerPlatform == "app") {
        arr.push(e);
      }
    });
    item.checked = true;
  } else {
    // 匹配删除人员
    item.checked = false;
    rowidarr.value = rowidarr.value.filter((p) => {
      return item.id != p;
    });
    console.log("arr222", at);

    // 通过筛选反选的数据 从之前勾选的数据进行匹配删除
    item.userTokenList.map((p) => {
      at.map((x, index) => {
        if (x.id == p.id) {
          at.splice(index, 1);
        }
      });
    });
    console.log("arr22222222", at);
  }
  selectGroup.value = [...new Set(at), ...new Set(arr)];

  console.log("selectGroup", selectGroup.value, rowidarr.value);
};

const allCheckbox = (item) => {
  console.log("点击了全选", item);

  let at = selectGroup.value;
  let arr = [];
  if (!item.checked) {
    //全选 往里新增人员
    if (item.userList) {
      console.log("选中");
      item.userList.map((p) => {
        console.log("选中", p);
        rowidarr.value.push(p.id);
        p.userTokenList.map((e) => {
          e.name = p.name;
          if (e.isOnlion == 1 && e.registerPlatform == "web") {
            arr.push(e);
          } else if (e.registerPlatform == "app") {
            arr.push(e);
          }
        });
      });
    }
    item.checked = true;
  } else {
    //全不选 匹配删除人员
    item.checked = false;
    var arr2 = item.userList;
    arr2.map((item) => {
      rowidarr.value = rowidarr.value.filter((p) => {
        console.log(item, p);
        return item.id != p;
      });
    });
    console.log("arr222", at, arr2);

    // 通过筛选反选的数据 从之前勾选的数据进行匹配删除
    arr2.map((item) => {
      item.userTokenList.map((p) => {
        at.map((x, index) => {
          if (x.id == p.id) {
            at.splice(index, 1);
          }
        });
      });
    });

    console.log("arr22222222", arr2, at);
  }
  selectGroup.value = [...new Set(at), ...new Set(arr)];
  console.log("selectGroup", selectGroup.value, rowidarr.value);

  console.log(
    "全选赋值整个list的checkbox的checked状态,避免单选的状态判断错误",
    groupList.value,
    rowidarr.value
  );
  groupList.value.map((item) => {
    item.userList.map((p) => {
      if (rowidarr.value.includes(p.id)) {
        p.checked = true;
      }
    });
  });
};
const changeTabs = (item, event) => {
  // console.log('item', item, event, activeName.value);
  activeName.value = item.props.name;
  parmsTable.account = "";
  tableInfo.current = 1;
  tableInfo.total = 0;
  if (activeName.value == "first") {
    tableInfo.size = 10;
    getUserList();
    rowidarr.value = [];
    selectGroup.value = [];
  } else {
    tableInfo.size = 10;
    getGroupList();
  }
};
// 单呼
const rongYunCall = async (item) => {
  console.log("rongYunCall", item);
  let params = {
    registerThridUserId: appStore.userInfo.phonenumber + "_web",
  };
  let res1 = await getUserStatus(params);
  let flag1 = null;
  console.log(res1, "111");
  if (res1.code == 200) {
    flag1 = JSON.parse(res1.data);
  }
  if (flag1 != 1) {
    ElMessageBox.confirm(
      `${appStore.userInfo.userName || "当前"}用户视频会商不在线，是否重新连接?, "提示"`,
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    )
      .then(() => {
        console.log("????");
        bus.emit("rystatus");
        setTimeout(() => {
          getCallStatus(item);
        }, 1100);
      })
      .catch(() => {});
  } else {
    setTimeout(() => {
      getCallStatus(item);
    }, 1100);
  }
};
const getCallStatus = async (item) => {
  console.log("itemitem1111", item);
  item.phone = item.registerThridUserId;

  let params = {
    registerThridUserId: item.phone,
  };
  let res = await getUserStatus(params);
  let flag = null;
  if (res.code == 200) {
    flag = JSON.parse(res.data);
  }
  if (flag != 1) {
    return proxy.$modal.msgWarning(`${item.name}用户视频会商不在线!`);
  } else {
    // 打开内层呼叫弹框
    bus.emit("OffRongYun", { ...item, type: 1 });
  }
};

// 单呼页面 调群呼前处理数据
const beforegroupCall = (item) => {
  console.log("同时拨打两个电话", item);
  selectGroup.value = [];
  item.forEach((e) => {
    // if (e.isOnlion == 1) {
    //   selectGroup.value.push(e);
    // }

    if (e.isOnlion == 1 && e.registerPlatform == "web") {
      selectGroup.value.push(e);
    } else if (e.registerPlatform == "app") {
      selectGroup.value.push(e);
    }
  });
  nextTick(() => {
    takeout();
  });
};

// 群呼
const groupCall = () => {
  userIDArr.value = [];
  if (selectGroup.value.length == 0) {
    proxy.$message({
      type: "warrning",
      message: "请选择需要呼叫的人员！！！",
    });
    return;
  }

  takeout();
};
// 将群呼选择的人员方法抽离出来
const takeout = () => {
  console.log(
    "进入takeout方法进行人员数量的判断",
    "获取通过勾选的多个人员账号生成临时的群呼id",
    selectGroup.value
  );

  // 过滤数据 如果有自己就不加 没有自己就加进去
  const aarr = [
    ...selectGroup.value,
    {
      registerThridUserId: appStore.userInfo.phonenumber + "_web",
      name: appStore.userInfo.userName,
    },
  ];

  const map = new Map();
  selectGroup.value = aarr.filter(
    (v) => !map.has(v.registerThridUserId) && map.set(v.registerThridUserId, 1)
  );

  selectGroup.value.forEach((p) => {
    if (!userIDArr.value.includes(p.registerThridUserId)) {
      userIDArr.value.push(p.registerThridUserId);
    }
  });

  console.log(
    "selectGroupxxxxxx",
    selectGroup.value,
    userIDArr.value,
    selectGroup.value.length
  );

  if (selectGroup.value.length == 1) {
    console.log("单");
    rongYunCall(selectGroup.value[0], selectGroup.value[0].userName);
  } else if (selectGroup.value.length >= 2) {
    console.log("群");
    if (selectGroup.value.length <= 8) {
      saveGroup();
    } else {
      proxy.$message({
        type: "warrning",
        message: `当前勾选${selectGroup.value.length}人,群呼功能最多只能拨打8个人员(包含自己)`,
      });
    }
  }
};

// 通过勾选的多个人员账号生成临时群呼id
const saveGroup = async () => {
  console.log("通过勾选的多个人员账号生成临时群呼id");

  let params = {
    ids: userIDArr.value.join(","),
  };
  let res = await rongyunGroupSave(params);
  if (res.code == 200) {
    let obj = {
      ...res.data,
      type: 2,
      userList: selectGroup.value,
    };
    console.log("群呼的", obj);
    bus.emit("OffRongYun", obj);
  }
};

onMounted(() => {});
</script>
<style lang="scss"></style>