<template>
  <web-view ref="faceView" id="faceView" class="faceView" src="http://192.168.123.165:9300/statics/face/index.html" bindmessage="receiveMessage" :webview-styles="webviewStyles" @message="onMessage"></web-view>
  <u-modal
    :show="modal.show"
    title="配置服务器"
    :cancelText="'退出应用'"
    :zoom="false"
    :showConfirmButton="true"
    :showCancelButton="true"
    :closeOnClickOverlay="true"
    @confirm="modalConfirm"
    @cancel="modalCancel"
    @close="modal.show = false"
  >
    <view class="slot-content">
      <view>
        <view class="mb10 required">服务器地址</view>
        <view class="mb20">
          <u-input v-model="form.linkUrl" placeholder="服务器地址（必填）" border="bottom" style="padding: 6px 0px" />
        </view>
      </view>
      <view>
        <view class="mb10">服务器端口</view>
        <view class="mb20">
          <u-input v-model="form.port" placeholder="服务器端口（非必填）" border="bottom" style="padding: 6px 0px" />
        </view>
      </view>
      <view v-if="meetingRoomList.length > 0">
        <view class="mb10 required">绑定会议室</view>
        <view>
          <u-input
            v-model="form.meetingName"
            placeholder="会议室（必选）"
            suffixIcon="arrow-right"
            suffixIconStyle="color: #909399"
            border="none"
            disabledColor="transparent"
            disabled
            @click="handlePicker('绑定会议室')"
          />
        </view>
      </view>
    </view>
  </u-modal>

  <u-picker
    :show="picker.show"
    :columns="picker.list"
    :title="'请选择' + picker.title"
    keyName="name"
    visibleItemCount="6"
    :defaultIndex="[picker.defaultIndex]"
    :closeOnClickOverlay="true"
    @close="picker.show = false"
    @cancel="picker.show = false"
    @confirm="pickerConfirm"
  ></u-picker>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject, nextTick, watch } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { meetingApi, faceApi, signOnOut } from "./api.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------公共变量-----------------------------------*/
const state = reactive({
  webviewStyles: {
    width: "100%",
    height: "100%",
  },
  meetingRoomList: [],
  meetingTimeList: [],
  meetingReservaList: {
    dataAll: {},
    thisVenueData: [],
    thisVenueTime: {},
    nextSceneData: [],
    nextSceneTime: {},
    timeList: [],
  },
  modal: {
    show: false,
  },
  picker: {
    show: false,
    title: "",
    list: [[]],
    defaultIndex: 0,
  },
  form: {
    linkUrl: "",
    port: "",
    meetingId: undefined,
    meetingName: undefined,
  },
});
const { webviewStyles, meetingRoomList, modal, picker, form } = toRefs(state);

// 初始化
function init() {
  var storage = uni.getStorageSync("storage_face");
  if (storage) {
    state.form.linkUrl = storage.linkUrl.indexOf(":") != -1 ? storage.linkUrl.split(":")[0] : storage.linkUrl;
    state.form.port = storage.port ? storage.port : "";
    state.form.meetingId = storage.meetingId || undefined;
    state.form.meetingName = storage.meetingName || undefined;
    meetingInit();
  }
}

/**
 * @会议信息初始化
 * @method domain 服务器地址
 */
function meetingInit() {
  getMeetingRoomList();
  getMeetingRoomReservationList();
}

/**
 * @会议室下拉列表
 */
function getMeetingRoomList() {
  var domain = "";
  if (state.form.linkUrl) {
    domain = state.form.linkUrl;
    if (state.form.port) {
      domain += ":" + state.form.port;
    }
  }

  meetingApi()
    .GetMeetingRoomList({
      domain: domain,
    })
    .then((requset) => {
      requset.data.forEach((e) => {
        state.meetingRoomList.push({
          value: e.roomId,
          name: e.roomName,
        });
      });
    });
}

/**
 * @会议室详情列表
 */
function getMeetingRoomReservationList() {
  var domain = "";
  if (state.form.linkUrl) {
    domain = state.form.linkUrl;
    if (state.form.port) {
      domain += ":" + state.form.port;
    }
  }

  if (!state.form.meetingId) {
    return;
  }

  meetingApi()
    .GetMeetingRoomReservationList({
      domain: domain,
      meetingRoomId: state.form.meetingId,
      date: proxy.$dayjs().format("YYYY-MM-DD") + " 00:00:00",
    })
    .then((requset) => {
      for (let i = 0; i <= 23.5; i += 0.5) {
        var time = "";
        if (i % 1 === 0.5) {
          if (i < 10) {
            time = "0" + (i - 0.5) + ":30";
          } else {
            time = i - 0.5 + ":30";
          }
        } else {
          if (i < 10) {
            time = "0" + i + ":00";
          } else {
            time = i + ":00";
          }
        }

        state.meetingTimeList.push({
          startTime: time,
          endTime: time,
          isEnd: 0,
          isHave: 0,
          isReservation: 0,
        });
      }

      if (requset.data.length > 0) {
        state.meetingReservaList.dataAll = requset.data[0];
        state.meetingReservaList.dataAll.dmMeetingList.forEach((e, index) => {
          //判断开始时间和结束时间是否包含当前时间
          if (proxy.$dayjs().isBetween(e.startDate, e.endDate, null, "[]")) {
            state.meetingReservaList.thisVenueData.push(e);
            state.meetingReservaList.thisVenueTime = proxy.$time.timeRestructuring(state.meetingReservaList.dataAll.meetingRoomUsage[index]);
          }
          //判断当前时间是否相同或在其之前
          if (proxy.$dayjs().isSameOrBefore(e.startDate) && state.meetingReservaList.nextSceneData.length < 1) {
            state.meetingReservaList.nextSceneData.push(e);
            state.meetingReservaList.nextSceneTime = proxy.$time.timeRestructuring(state.meetingReservaList.dataAll.meetingRoomUsage[index]);
          }
        });

        state.meetingReservaList.timeList = showTimeSegments(state.meetingTimeList);

        setTimeout(() => {
          handleChildren({
            funcName: "初始化",
            data: JSON.stringify(state.meetingReservaList),
          });
        }, 0);
      } else {
        setTimeout(() => {
          handleChildren({
            funcName: "初始化",
            data: JSON.stringify(state.meetingReservaList),
          });
        }, 0);
      }
    });
}

// 显示时间段的函数
function showTimeSegments(times) {
  const timesXleList = JSON.parse(JSON.stringify(times));

  for (var i = 0; i < timesXleList.length; i++) {
    state.meetingReservaList.dataAll.meetingRoomUsage.forEach((item) => {
      const timeValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timesXleList[i].startTime}`);
      const timeList = proxy.$time.timeRestructuring(item);
      const startValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timeList.startTime}`);
      const endValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timeList.endTime}`);

      if (timeValue.getTime() >= startValue.getTime() && timeValue.getTime() < endValue.getTime()) {
        timesXleList.splice(i--, 1);
      }
    });
  }

  state.meetingReservaList.dataAll.meetingRoomUsage.forEach((item) => {
    const timeList = proxy.$time.timeRestructuring(item);
    const startValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timeList.startTime}`);
    const endValue = new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${timeList.endTime}`);

    if (proxy.$dayjs().isBetween(startValue, endValue, null, "[]")) {
      timesXleList.push({
        ...timeList,
        isEnd: 0,
        isHave: 1,
        isReservation: 0,
      });
    } else {
      if (proxy.$dayjs().isSameOrAfter(startValue)) {
        timesXleList.push({
          ...timeList,
          isEnd: 1,
          isHave: 0,
          isReservation: 0,
        });
      }
      if (proxy.$dayjs().isSameOrBefore(startValue)) {
        timesXleList.push({
          ...timeList,
          isEnd: 0,
          isHave: 0,
          isReservation: 1,
        });
      }
    }
  });

  var newTimesXleList = proxy.$common
    .uniq(timesXleList, "startTime")
    .sort((a, b) => new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${a.startTime}`) - new Date(`${proxy.$dayjs().format("YYYY-MM-DD")}T${b.startTime}`));
  return newTimesXleList;
}

/**
 * @人脸验证
 */
function faceVerify(imageBase) {
  faceApi()
    .faceVef({ imageBase })
    .then((res) => {
      state.faceImgState = false;
      if (res.data.code === 200 || res.data.code === 201) {
        proxy.$modal.msg(res.data.msg);

        meetingApi()
          .Attendee({
            meetingId: state.thisVenueData[0].meetingId,
            userId: res.data.userId,
            name: res.data.faceName,
          })
          .then((res1) => {
            if (res1.data.status == "1") {
              proxy.$modal.msg(res1.data.msg);
              state.msg = `[${res.data.faceName}] ${res1.data.msg}`;

              signOnOut({
                meetingId: state.thisVenueData[0].meetingId,
                userId: res.data.userId, //参会人Id
                mothodType: 0, //签到签退类别(0.签到 1.签退)
                signType: 1, //签到签退方式(0.人工 1.人脸)
              }).then((res) => {});
            } else {
              proxy.$modal.msg(res1.data.msg);
            }
          });
      } else {
        proxy.$modal.msg(res.data.msg);
      }
    })
    .catch((err) => {
      state.faceImgState = false;
    });
}

/**
 * @弹窗确定按钮事件
 */
function modalConfirm() {
  if (!state.form.linkUrl) {
    proxy.$modal.msg("请输入链接地址");
    return;
  }

  if (!/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}(?:\.[a-zA-Z0-9]{2,})+$/.test(state.form.linkUrl)) {
    proxy.$modal.msg("请输入正确的链接地址");
    return;
  }

  if (!state.form.meetingName) {
    proxy.$modal.msg("请选择绑定会议室");
    return;
  }

  uni.setStorageSync("storage_face", state.form);
  getMeetingRoomReservationList();
  state.modal.show = false;
}

/**
 * @action弹出框点击事件
 */
function handlePicker(value, index, ind) {
  if (value == "绑定会议室") {
    state.picker.title = "绑定会议室";
    state.picker.list = [state.meetingRoomList];
    state.picker.defaultIndex = 0;
  }

  state.picker.show = true;
}

/**
 * @action弹出框选择事件
 */
function pickerConfirm(e) {
  if (state.picker.title == "绑定会议室") {
    state.form.meetingId = e.value[0].value;
    state.form.meetingName = e.value[0].name;
  }

  state.picker.show = false;
}

/**
 * @弹窗退出按钮事件
 */
function modalCancel() {
  state.modal.show = false;
}

/**
 * @解析父页面传回的数据
 */
function analysisData(event) {
  if ("funcName" in event) {
    console.log(event.funcName);
    if (event.funcName == "打开配置") {
      state.modal.show = true;
    } else if (event.funcName == "人脸识别") {
      faceVerify(event.data.imageBase);
    }
  }
}

/**
 * @向子页面发送数据
 */
function handleChildren(data) {
  // #ifdef APP-PLUS
  var currentWebview = pages[pages.length - 1].$getAppWebview();
  var wv = currentWebview.children()[0];
  wv.evalJS(`receiveData(${JSON.stringify(data)})`);
  // #endif

  // #ifdef H5
  var iframe = document.getElementById("faceView");
  iframe.contentWindow.postMessage(data, "*");
  // #endif
}

/**
 * @接收子页面传过来的值
 */
function onMessage(e) {
  analysisData(e.detail.data[0]);
}
// #ifdef H5
window.onmessage = function (event) {
  analysisData(event.data);
};
// #endif

onLoad((options) => {
  init();
});

watch(
  () => [state.form.linkUrl, state.form.port],
  (val) => {
    state.meetingRoomList = [];

    if (!state.form.linkUrl) {
      return;
    }

    if (!/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}(?:\.[a-zA-Z0-9]{2,})+$/.test(state.form.linkUrl)) {
      return;
    }

    getMeetingRoomList();
  }
);
</script>
<style>
.faceView {
  width: 100% !important;
  height: 100% !important;
}

iframe {
  width: 100% !important;
  height: 100% !important;
  border-width: 0;
}
</style>
<style lang="scss" scoped>
:deep() {
  .u-modal {
    width: 30rem !important;

    &__title {
      font-size: 18px !important;
    }
    .slot-content {
      font-size: 16px;
      width: 100%;
    }
  }
}
</style>
