<!-- 桃夭 -->
<template>
  <div id="taoyao">
    <!-- 信令 -->
    <el-dialog center width="30%" title="终端设置" :show-close="false" v-model="signalVisible">
      <el-form ref="SignalSetting">
        <el-form-item label="终端标识">
          <el-input v-model="config.clientId" placeholder="终端标识" />
        </el-form-item>
        <el-form-item label="终端名称">
          <el-input v-model="config.name" placeholder="终端名称" />
        </el-form-item>
        <el-form-item label="信令地址">
          <el-input v-model="config.host" placeholder="信令地址" />
        </el-form-item>
        <el-form-item label="信令端口">
          <el-input v-model="config.port" placeholder="信令端口" />
        </el-form-item>
        <el-form-item label="信令帐号">
          <el-input v-model="config.username" placeholder="信令帐号" />
        </el-form-item>
        <el-form-item label="信令密码">
          <el-input v-model="config.password" placeholder="信令密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="connectSignal">连接信令</el-button>
      </template>
    </el-dialog>
    <!-- 房间 -->
    <el-dialog center width="30%" title="房间设置" :show-close="false" v-model="roomVisible" @open="loadList">
      <el-form ref="RoomSetting">
        <el-tabs v-model="roomActive">
          <el-tab-pane label="监控终端" name="call">
            <el-form-item label="终端标识">
              <el-select v-model="room.callClientId" placeholder="终端标识">
                <el-option v-for="value in clients" :key="value.clientId" :label="value.name || value.clientId" :value="value.clientId" />
              </el-select>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="创建房间" name="create">
            <el-form-item label="媒体服务">
              <el-select v-model="room.mediaClientId" placeholder="媒体服务标识">
                <el-option v-for="value in medias" :key="value.clientId" :label="value.name || value.clientId" :value="value.clientId" />
              </el-select>
            </el-form-item>
            <el-form-item label="房间名称">
              <el-input v-model="room.name" placeholder="房间名称" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="选择房间" name="enter">
            <el-form-item label="房间标识">
              <el-select v-model="room.roomId" placeholder="房间标识">
                <el-option v-for="value in rooms" :key="value.roomId" :label="value.name || value.roomId" :value="value.roomId" />
              </el-select>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="邀请终端" name="invite">
            <el-form-item label="终端标识">
              <el-select v-model="room.inviteClientId" placeholder="终端标识">
                <el-option v-for="value in clients" :key="value.clientId" :label="value.name || value.clientId" :value="value.clientId" />
              </el-select>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        <el-form-item label="房间密码" v-if="roomActive !== 'call'">
          <el-input v-model="room.password" placeholder="房间密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="sessionCall" v-if="roomActive === 'call'"  >监控</el-button>
        <el-button type="primary" @click="roomCreate"  v-if="roomActive === 'create'">创建</el-button>
        <el-button type="primary" @click="roomEnter"   v-if="roomActive === 'enter'" >进入</el-button>
        <el-button type="primary" @click="roomInvite"  v-if="roomActive === 'invite'">邀请</el-button>
      </template>
    </el-dialog>

    <!-- 菜单 -->
    <div class="menus">
      <el-button @click="signalVisible = true"                       :disabled="taoyao && taoyao.connect"                      type="primary">连接信令</el-button>
      <el-button @click="roomActive = 'call';   roomVisible = true;" :disabled="!taoyao || !taoyao.connect"                                  >监控终端</el-button>
      <el-button @click="roomActive = 'create'; roomVisible = true;" :disabled="!taoyao || !taoyao.connect"                    type="primary">创建房间</el-button>
      <el-button @click="roomActive = 'enter';  roomVisible = true;" :disabled="!taoyao || !taoyao.connect"                    type="primary">选择房间</el-button>
      <el-button @click="roomActive = 'invite'; roomVisible = true;" :disabled="!taoyao || !taoyao.connect || !taoyao.roomId"                >邀请终端</el-button>
      <el-button @click="roomLeave"                                  :disabled="!taoyao || !taoyao.connect || !taoyao.roomId"                >离开房间</el-button>
      <el-button @click="roomClose"                                  :disabled="!taoyao || !taoyao.connect || !taoyao.roomId"  type="danger" >关闭房间</el-button>
    </div>

    <!-- 终端 -->
    <div class="clients">
      <!-- 本地终端 -->
      <LocalClient v-if="taoyao && taoyao.roomId" ref="local-client" :client="taoyao" :taoyao="taoyao"></LocalClient>
      <!-- 远程终端 -->
      <RemoteClient v-for="kv in remoteClients"   :key="'remote-client-' + kv[0]"  :ref="'remote-client-' + kv[0]"  :client="kv[1]" :taoyao="taoyao"></RemoteClient>
      <!-- 远程会话 -->
      <SessionClient v-for="kv in sessionClients" :key="'session-client-' + kv[0]" :ref="'session-client-' + kv[0]" :client="kv[1]" :taoyao="taoyao"></SessionClient>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Taoyao }    from './components/Taoyao.js';
import LocalClient   from './components/LocalClient.vue';
import RemoteClient  from './components/RemoteClient.vue';
import SessionClient from './components/SessionClient.vue';

export default {
  name: "Taoyao",
  data() {
    return {
      room: {},
      rooms: null,
      medias: null,
      clients: null,
      config: {
        clientId: "taoyao",
        name: "taoyao",
        host: "localhost",
        port: 8888,
        username: "taoyao",
        password: "taoyao",
      },
      taoyao: null,
      roomActive: "call",
      roomVisible: false,
      signalVisible: false,
      remoteClients: new Map(),
      sessionClients: new Map(),
    };
  },
  mounted() {
    console.info(`
      中庭地白树栖鸦，冷露无声湿桂花。
      今夜月明人尽望，不知秋思落谁家。
      
      :: https://gitee.com/acgist/taoyao
    `);
  },
  methods: {
    async connectSignal() {
      const me = this;
      me.taoyao = new Taoyao({ ...this.config });
      await me.taoyao.connectSignal(me.callback);
      me.signalVisible = false;
      me.remoteClients = me.taoyao.remoteClients;
      me.sessionClients = me.taoyao.sessionClients;
      // 全局绑定
      window.taoyao = me.taoyao;
    },
    async loadList() {
      this.rooms = await this.taoyao.roomList();
      this.medias = await this.taoyao.mediaList();
      this.clients = await this.taoyao.clientList();
    },
    async roomLeave() {
      this.taoyao.roomLeave();
    },
    async roomClose() {
      this.taoyao.roomClose();
    },
    async sessionCall() {
      this.taoyao.sessionCall(this.room.callClientId);
      this.roomVisible = false;
    },
    async roomCreate() {
      const room = await this.taoyao.roomCreate(this.room);
      this.room.roomId = room.roomId;
      await this.roomEnter();
    },
    async roomEnter() {
      await this.taoyao.roomEnter(this.room.roomId, this.room.password);
      await this.taoyao.mediaProduce();
      this.roomVisible = false;
    },
    async roomInvite() {
      this.taoyao.roomInvite(this.room.inviteClientId);
      this.roomVisible = false;
    },
    /**
     * 信令回调
     *
     * @param {*} message 消息
     * @param {*} error 异常
     *
     * @return 是否继续执行
     */
    async callback(message, error) {
      const me = this;
      switch (message.header.signal) {
        case "client::config":
          me.roomVisible = true;
          break;
        case "platform::error":
          if (error) {
            console.error("发生异常：", message, error);
          } else {
            console.warn("发生错误：", message);
          }
          ElMessage({
            type: "error",
            message: message.message,
          });
          return true;
      }
      return false;
    },
  },
  components: {
    LocalClient,
    RemoteClient,
    SessionClient,
  },
};
</script>

<style>
.menus{width:100%;top:1rem;left:0;text-align:center;position:fixed;z-index:1;}
.clients{width:100%;height:100%;top:0;left:0;position:fixed;}
.client{float:left;width:50vw;height:50vh;box-shadow:0 0 1px 0px rgba(0,0,0,0.4);}
.client audio{display:none;}
.client video{width:100%;height:100%;}
.client .mic{background:linear-gradient(to top, var(--el-color-primary) 100%, transparent 0%);}
.client .title{position:absolute;top:0;left:0;text-align:center;width:100%;}
.client .buttons{width:100%;bottom:0;left:0;text-align:center;position:absolute;padding:0.8rem 0;background:rgba(0,0,0,0.4);}
.client .buttons .el-button{margin:0 6px;}
</style>
