<template>
  <div class="contactBox">
    <div class="tabList">
      <div class="tab"
           v-for="item in tabList"
           :key="item.index"
           ::key="item.index"
           :class="item.index == currenIndex ? 'active' : ''"
           @click="changeTab(item)">
        {{ item.lable }}
      </div>
    </div>
    <div class="ryBox">
      <div class="personelDiv"
           v-if="currenIndex == 0">
        <div class="searchDiv"
             style="margin: 20px 10px 10px 20px">
          <el-input v-model="searchValue"
                    style="width: 250px; margin-right: 10px"
                    placeholder="联系人/电话"></el-input>
          <el-button type="primary"
                     size="small"
                     icon="search"
                     @click="handleClick('search')">搜索
          </el-button>
        </div>
        <el-table :data="tableData"
                  style="width: 100%"
                  :border="true">
          <!--  :show-overflow-tooltip="true" -->
          <el-table-column label="联系人"
                           prop="userName"
                           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="deptName"
                           align="center">
          </el-table-column>
          <el-table-column label="职位"
                           prop="postName"
                           align="center">
          </el-table-column>
          <el-table-column label="在线状态"
                           prop="online"
                           align="center">
            <template #default="scope">
              <span class="online"
                    v-if="scope.row.online == 1">在线</span>
              <span class="offline"
                    v-else>离线</span>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align="center">
            <template #default="scope">
              <img style="cursor: pointer;"
                   src="@/assets/images/ryIcon_active.png"
                   alt=""
                   @click="rongYunCall(scope.row)" />
              <!-- <el-tag title="点击视频通话" @click="rongYunCall(scope.row)">
                <i class="el-icon-video-camera"></i>
               
              </el-tag> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="page-pagination">
          <el-pagination background
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="tableInfo.total"
                         :pager-count="5"
                         :page-sizes="[10, 20, 30, 40]"
                         :page-size="tableInfo.size"
                         :current-page="tableInfo.current"
                         @current-change="handleCurrentChange"
                         @size-change="handleSizeChange" />
        </div>
      </div>
      <div class="grouoDiv"
           v-else>
        <!-- <div v-for="item in groupList" :key="item.classId">
          {{ item.className }}
        </div> -->
        <!-- <el-collapse v-model="activeNames">
          <el-collapse-item
            v-for="item in groupList"
            :key="item.classId"
            :title="item.className"
            :name="item.classId"
          > -->
        <!-- {{ groupList }} -->
        <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>
        <!-- </el-collapse-item>
        </el-collapse> -->

        <el-button type="primary"
                   size="small"
                   icon="search"
                   style="position: absolute; bottom: 20px; right: 55px"
                   @click="handleClick('callGroup')">呼叫
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  rongyunUser,
  rongyunGroupList,
  rongyunQueryList,
  rongyunGroupSave,
  getUserStatus,
} from "@/api/rongyun/rongyunApi.js";
import useAppStore from "@/store/modules/user";
import { ElMessageBox } from "element-plus";
import bus from "@/utils";
const appStore = useAppStore();
const { proxy } = getCurrentInstance();
const allData = reactive({
  checkboxGroup1: ["1"],
  selectGroup: [],
  userIDArr: [appStore.userInfo.phonenumber],
  tableData: [],
  tableInfo: {
    loading: false,
    data: [],
    total: "",
    size: 10,
    current: 1,
  },
  show: false,
  searchValue: "",
  tabList: [
    {
      lable: "联系人",
      index: 0,
    },
    {
      lable: "群呼",
      index: 1,
    },
  ],
  currenIndex: 0,
  personlList: [],
  personlGroupList: [],
  columns: [],
  groupList: [],
  columnsGroup: [
    {
      title: "群组名称",
      width: "130",
      key: "groupName",
      align: "center",
    },
    {
      title: "群组联系人",
      key: "userlist",
      align: "center",
    },
    {
      title: "操作",
      key: "action",
      align: "center",
      width: "130",
    },
  ],
  actionColumn: [
    {
      size: "small",
      btnType: "primary",
      type: "edit",
      default: "修改",
      img: "editor",
    },
    {
      size: "small",
      btnType: "primary",
      type: "delete",
      default: "删除",
      img: "delete",
    },
    {
      size: "small",
      btnType: "primary",
      type: "callGroup",
      default: "拨号",
      img: "call",
    },
  ],
  showAddGroup: false,
  title: null,
  formValue: {
    groupName: "",
    // groupId: "",
    ids: [],
  },
  formRules: {
    groupName: {
      required: true,
      trigger: ["blur"],
      message: "分组名称不能为空",
    },
    // groupId: {
    //   required: true,
    //   trigger: ["blur"],
    //   message: "分组ID不能为空",
    // },
    ids: {
      required: true,
      trigger: ["blur"],
      message: "分组联系人不能为空",
      type: "array",
    },
  },
  group1: [],
  userId: "", //当前登录账户
  page: {
    pageSize: 10,
    currentPage: 1,
    total: 0,
  },
});
const {
  checkboxGroup1,
  selectGroup,
  userIDArr,
  tableData,
  tableInfo,
  show,
  searchValue,
  tabList,
  currenIndex,
  personlList,
  personlGroupList,
  columns,
  groupList,
  columnsGroup,
  actionColumn,
  showAddGroup,
  title,
  formValue,
  formRules,
  group1,
  userId, //当前登录账户
  page,
} = toRefs(allData);

onMounted(() => {
  init();
});

const geTel = (tel) => {
  var reg = /^(\d{3})\d{4}(\d{4})$/;
  return tel.replace(reg, "$1****$2");
};
const saveGroup = async () => {
  let params = {
    ids: allData.userIDArr.join(),
  };
  let res = await rongyunGroupSave(params);

  console.log(res);
  if (res.code == 200) {
    let obj = {
      ...res.data,
      type: 2,
      userList: allData.selectGroup.concat([
        {
          phone: appStore.userInfo.phonenumber,
          userName: appStore.userInfo.userName,
        },
      ]),
    };
    console.log("群呼的", obj);
    bus.emit("OffRongYun", obj);
  }
};
function handleChecked (val) {
  console.log(val, allData.selectGroup, "selectGroup");
}
const rongYunCall = async (item) => {
  console.log(item);
  let formData1 = new FormData();
  // formData1.append("userId", appStore.userInfo.phonenumber);
  formData1.append("userId", item.phone);
  let res1 = await getUserStatus(formData1);
  let flag1 = null;
  console.log(res1, "111");
  if (res1.code == 200) {
    let data = JSON.parse(res1.msg);
    flag1 = data.status;
  }
  if (flag1 != 1) {
    ElMessageBox.confirm(
      `${item.userName}用户视频会商不在线，是否重新连接?`,
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    )
      .then(() => {
        bus.emit("rystatus");
        setTimeout(() => {
          getCallStatus(item);
        }, 1100);
      })
      .catch(() => { });
  } else {
    setTimeout(() => {
      getCallStatus(item);
    }, 1100);
  }
};

const getCallStatus = async (item) => {
  let formData = new FormData();
  formData.append("userId", item.phone);
  formData.append("userName", item.userName);
  let res = await getUserStatus(formData);
  let flag = null;
  if (res.code == 200) {
    let data = JSON.parse(res.msg);
    flag = data.status;
  }
  if (flag != 1) {
    return proxy.$modal.msgWarning(`${item.userName}用户视频会商不在线!`);
  } else {
    bus.emit("OffRongYun", { ...item, type: 1 });
  }
};

function handleSizeChange (val) {
  allData.tableInfo.size = val;
  console.log(`每页 ${val} 条`);
  getUserList();
}
function handleCurrentChange (val) {
  allData.tableInfo.current = val;
  allData.getUserList();
  console.log(`当前页: ${val}`);
}
function init () {
  //
  allData.show = true;
  getUserList();
  // getUserInfo();
}
function changeTab (item) {
  allData.currenIndex = item.index;
  allData.searchValue = "";
  allData.tableInfo.current = 1;
  allData.tableInfo.total = 0;
  if (allData.currenIndex == 1) {
    allData.tableInfo.size = 100;
    getGroupList();
  } else {
    allData.tableInfo.size = 10;
    getUserList();
  }
}
// 查询联系人
const getUserList = () => {
  allData.tableData = [];
  let formData = new FormData();
  formData.append("account", allData.searchValue);
  formData.append("current", allData.tableInfo.current);
  formData.append("size", allData.tableInfo.size);
  rongyunUser(formData).then((res) => {
    console.log(res, "res");
    if (res.code == 200) {
      if (allData.currenIndex == 0) {
        res.data.forEach((v) => {
          if (v.isme != 1) {
            allData.tableData.push(v);
          }
        });
        allData.tableInfo.total = res.total;
      } else {
        res.data.forEach((v) => {
          if (v.isme != 1) {
            allData.tableData.push({
              phone: v.phone,
              userName: `${v.userName} -- ${v.postName} -- ${v.deptName}`,
            });
          }
        });
      }
      console.log(allData.tableData, "allData.tableData.");
    }
  });

  const token = sessionStorage.getItem("token");
};
// 查询分组
const getGroupList = async () => {
  let formData = new FormData();
  formData.append("account", "");
  let res = await rongyunQueryList(formData);
  if (res.code == 200) {
    allData.groupList = res.data;
  }
};
// 操作
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":
      // if (row.online == '0') {
      //   $message.info('拨叫用户不在线,无法连接！！！')
      //   return
      // }
      // if (row.isme == '1') {
      //   $message.info('无法拨叫当前用户！！！')
      //   return
      // }

      console.log('obj', obj, row);
      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":
      allData.userIDArr = [appStore.userInfo.phonenumber]
      allData.selectGroup.forEach((i) => {
        allData.userIDArr.push(i.phone);
      });
      if (allData.userIDArr.length <= 2) {
        proxy.$modal.msgWarning("请至少添加2名人员！！！");
        return;
      }

      saveGroup();
      break;
  }
}
async function saveName (id) {
  if (allData.title != null) {
    let ids = [];
    allData.formValue.ids.forEach((v) => {
      if (v == allData.userId) {
        ids.push(v);
      }
    });
    if (ids.length == 0) {
      allData.formValue.ids = [allData.userId].concat(allData.formValue.ids);
    }
  }
  let res, pramas;
  if (allData.title == "新增") {
    pramas = {
      groupName: allData.formValue.groupName,
      // groupId: allData.formValue.groupId,
      ids: allData.formValue.ids.join(","),
    };
    res = await rongyunGroupSave(pramas);
    if (res?.code == 200) {
      allData.showAddGroup = false;
      getGroupList();
      allData.formValue.groupName = "";
      allData.formValue.id = [];
    }
  } else if (allData.title == "修改") {
    pramas = {
      id: allData.formValue.id,
      groupName: allData.formValue.groupName,
      ids: allData.formValue.ids.join(","),
    };
    res = await rongyunGroupUpdate(pramas);
    if (res?.code == 200) {
      allData.showAddGroup = false;
      getGroupList();
      allData.formValue.groupName = "";
      allData.formValue.id = [];
    }
  } else {
    let formData = new FormData();
    formData.append("ids", id);
    res = await rongyunGroupRemove(formData);
    if (res?.code == 200) {
      getGroupList();
    }
  }
}
const handleCheckedKeysChange = (keys) => {
  allData.formValue.ids = keys;
  console.log(allData.formValue.ids);
};
const closeRyGroup = () => {
  allData.show = false;
  allData.currenIndex = 0;
};
//获取当前用户信息
const getUserInfo = async () => {
  let res = await userInfo();
  if (res?.code == 200) {
    allData.userId = res.data.phone;
    // allData.userId = "13000000001";
    // allData.userName = res.data.name;
    // allData.id = res.data.id;
  }
};
</script>
<style lang="scss" scoped>
//@import "@/assets/styles/cockpit.scss";

.contactBox {
  margin-top: -10px;
}

.tabList {
  display: flex;
  width: 100%;
  height: 40px;
  justify-content: center;
  align-items: center;
  // position: absolute;
  // top: 30px;
  // left: 0;

  .tab {
    width: 100px;
    color: #68b2d8;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    cursor: pointer;
    text-align: center;

    &:after {
      content: "/";
      margin-left: 20px;
      color: #0e3760;
    }

    &:last-child {
      &::after {
        content: "";
      }
    }

    &.active {
      color: #f76402;
    }
  }
}

.ryBox {
  width: 100%;
  height: 460px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  overflow-y: auto;
}

#addModal {
  background: rgba(0, 26, 81, 1);
}
::v-deep(.n-data-table) {
  .n-data-table-wrapper {
    border: 1px solid #325bc1;
    border-radius: 10px;

    .n-data-table-thead {
      .n-data-table-tr {
        th {
          background-color: rgb(30, 55, 109);
        }
      }
    }

    .n-data-table-tbody {
      .n-data-table-tr {
        td {
          background-color: #0f0e5f;
        }
      }

      .n-data-table-tr--striped {
        td {
          background-color: rgb(30, 55, 109);
        }
      }
    }
  }
}
:deep(.el-table__inner-wrapper)::after {
  width: 0 !important;
  height: 0 !important;
}
:deep(.el-table__inner-wrapper)::before,
:deep(.el-table__border-left-patch) {
  width: 0 !important;
}

:deep(.el-input__inner) {
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
}
:deep(.el-input__wrapper) {
  background: transparent !important;
}
:deep(.th),
.el-table tr {
  background-color: transparent !important;
  border: none !important;
}

:deep(.el-pagination.is-background .btn-prev:disabled) {
  background-color: transparent !important;
  color: #fff;
}

:deep(.el-pagination.is-background .btn-prev) {
  background-color: transparent !important;
  color: #fff;
}
:deep(.el-pagination.is-background .el-pager li) {
  color: #fff;
  background-color: transparent !important;
}

:deep(.el-pagination__total) {
  color: #fff;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
  color: #409eff;
}

:deep(.el-pagination__goto) {
  color: #fff;
}
:deep(.el-pagination__classifier) {
  color: #fff;
}

:deep(.el-pagination.is-background .btn-next:disabled) {
  background: transparent;
}

:deep(.el-table),
.el-table__header-wrapper {
  background-color: transparent;
  border: none !important;
  height: calc(100% - 90px);
  overflow: auto;
  th,
  tr,
  td {
    background-color: #001223 !important;
    border: none !important;
    color: #68b2d8 !important;
  }
}
.ryBox {
  :deep(.el-table::before) {
    background-color: transparent !important;
  }
  :deep(.el-table::after) {
    background-color: transparent !important;
  }
}

.online {
  color: green;
}
.offline {
  color: red;
}
:deep(.el-collapse-item__wrap),
:deep(.el-collapse-item__header) {
  background-color: #00050d !important;
  color: #ffffff;
}
.personelDiv {
  height: 100%;
  overflow: hidden;
}
.page-pagination {
  position: absolute;
  right: 10px;
}
.grouoDiv {
  padding: 20px;
}
</style>