<template>
  <div class="person-card-list">
    <div class="query">
      <el-form :inline="true" :model="queryForm" class="query-form">
        <el-form-item label="驻勤点名称">
          <el-input style="width: 240px" v-model="queryForm.stationName" placeholder="请输入驻勤点名称"></el-input>
        </el-form-item>
        <el-form-item label="点名时间">
          <el-input style="width: 120px" v-model="queryForm.rollTime"></el-input>
        </el-form-item>
        <el-form-item label="点名发起人">
          <el-input style="width: 200px" v-model="queryForm.rollInitiator"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rollCall">督导点名</el-button>
          <el-button type="primary" plain @click="back">返回</el-button>
        </el-form-item>
        <el-form-item label="点名结果">
          <el-checkbox-group v-model="queryForm.rollResult">
            <el-checkbox label="点名成功" name="rollResult"></el-checkbox>
            <el-checkbox label="点名失败" name="rollResult"></el-checkbox>
            <el-checkbox label="督导点名成功" name="rollResult"></el-checkbox>
            <el-checkbox label="督导点名失败" name="rollResult"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="list-container">
      <div v-for="(item, index) in 100" class="card" :class="[item === 3 || item === 4 ? 'card-mask' : '']" :key="index">
        这是第{{ item }}个卡片
        <el-checkbox class="card-checkbox" v-model="item.active"></el-checkbox>
      </div>
    </div>
    <el-dialog custom-class="dialog-roll-call" title="督导点名" :visible.sync="dialogVisible" width="23.333333%">
      <div
        class="btn-dispatch btn-dispatch-audio"
        :class="[callType === 'audio' ? 'btn-dispatch-active' : '']"
        @click="dispatch('audio')"
      >
        音频调度
      </div>
      <div
        class="btn-dispatch btn-dispatch-video"
        :class="[callType === 'video' ? 'btn-dispatch-active' : '']"
        @click="dispatch('video')"
      >
        视频调度
      </div>
    </el-dialog>
    <!-- 音视频 -->
    <call-layer
      ref="callLayer"
      :member-list="memberList"
      :type="callType"
      :yardman-type="yardmanType"
      :audio="stream.audio"
      :video="stream.video"
    ></call-layer>
  </div>
</template>

<script>
import CallLayer from "@/components/timApp/trtc/calling-index.vue";
export default {
  name: "personCardList",
  components: {
    CallLayer,
  },
  props: {
    data: Object,
  },
  data() {
    return {
      queryForm: {
        stationName: "",
        rollTime: "",
        rollInitiator: "",
        rollResult: "",
      },
      dialogVisible: false,
      callType: "",
      //调度类型：1视频调度 2 视频上拉：除了视频上拉传2，其他音频调度与视频调度都传1
      yardmanType: "1",
      memberList: [],
      stream: {
        audio: true,
        video: true,
      },
    };
  },
  methods: {
    rollCall() {
      this.dialogVisible = true;
    },
    back() {
      this.$emit("back");
    },
    dispatch(type) {
      this.callType = type;
      if (this.callType === "audio") {
        this.stream.video = false;
        this.stream.audio = true;
        // this.yardmanType = "1";
      } else {
        this.stream.video = true;
        this.stream.audio = true;
      }
      // TODO  set memberList;
      // TODO  this.$bus.$emit("video-call");
    },
  },
};
</script>

<style scoped lang="scss">
.person-card-list {
  width: 100%;
  height: 100%;
  .query {
    width: 100%;
    height: 174px;
    background: #f5faff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .list-container {
    width: 100%;
    height: calc(100% - 134px - 28px);
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .card {
      width: 297px;
      height: 200px;
      background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
      box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.04);
      border-radius: 0;
      opacity: 1;
      border: 2px solid;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
      margin-bottom: 48px;
      position: relative;
      &-checkbox {
        position: absolute;
        top: 14px;
        right: 14px;
      }
    }
  }
}
::v-deep .dialog-roll-call {
  .el-dialog__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
    .btn-dispatch {
      width: 176px;
      height: 192px;
      background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
      box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.04);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #bdcfde;
      cursor: pointer;
      &:hover {
        box-shadow: 0px 8px 10px 0px rgba(14, 112, 255, 0.16);
        border: 2px solid #0e70ff;
        color: #0e70ff;
      }
    }
  }
}
</style>
