<template lang="pug">
div(
    :class="{user_item: true, user_item_active, [`user_item_${props.index}`]: true}"
    @mouseenter="mouseEnterItem(props.index)"
    @mouseleave="mouseLeaveItem"
    )
     
    .user_item_info
        tableColAvatar(:style='{width: "36px", height: "36px"}' :name="''"  :record="props.userInfo")
        div.user_item_info_name
            .name {{ getName(props.userInfo) }}
            .type(v-if="getUserType") {{ getUserType }}

    div(
      v-if="props.meetingType === 'noMeet' && userInfo.member_state === CONFERENCE_MEMBER_STATE_CALLING"
      style="color: rgba(12, 162, 255, 1);"
      ) {{ $t('conference.control.calling') }}

    div        
    .user_item_opration(v-if="props.meetingType === 'meeting'")
        div.user_mask()
        div.icon_box
          WebPucSvgIcon(
            v-show="userInfo.microphone_status !== MICROPHONE_STATUS_NO"
            :name="isMicEnable ? 'microphone' : 'microphone_mute'")
          WebPucSvgIcon(
            v-show="userInfo.camera_status !== CAMERA_STATUS_NO"
            :name="userInfo.camera_status === CAMERA_STATUS_OPEN ? 'camera' : 'camera_mute'")
            
        a-dropdown(
            v-if="globalStore.IS_CURRENT_MEETING_OWNER"
            @select="(val) => reliveSelect(val)"
            :popup-max-height="false"
            v-model:popup-visible="reliveVisible"
            position='br'
            trigger="hover"
            )
            a-button {{ $t('meeting.modal.release_text') }}
                icon-down
            template(#content)
                a-doption(
                    v-for="item in getReliveList"
                    :value="item.value"
                    :key="item.value") {{ item.label }}
                    
        a-dropdown(
            @select="(val) => controlSelect(val)"
            :popup-max-height="false"
            v-model:popup-visible="controlVisible"
            trigger="hover"
            position='br')
            a-button {{ $t('meeting.modal.control_text') }}
                icon-down
            template(#content)
                a-doption(
                    v-for="item in getControlList"
                    :value="item.value"
                    :disabled="item.disabled"
                    :key="item.value") {{ item.label }}

    .user_item_opration(v-if="props.meetingType === 'noMeet'")
        div.user_mask()
        a-dropdown(
            @select="(val) => controlSelect(val)"
            :popup-max-height="false"
            v-model:popup-visible="reliveVisible"
            position='br'
            trigger="hover"
            )
            a-button {{ $t('report.tab.call') }}
                icon-down
            template(#content)
                a-doption(
                    v-for="item in getNoMeetOperate"
                    :value="item.value"
                    :key="item.value") {{ item.label }}
</template>

<script lang="ts" setup>
  import tableColAvatar from '@/views/webPuc/org/components/tableColAvatarByNumType.vue';
  import { computed, ref, watch } from 'vue';
  import { formatShowNameFin } from '@/views/consultation/utils/format-show-name';
  import { $t } from '@/locale';
  import { useGlobalStore } from '@/store';
  import {
    MICROPHONE_STATUS_NO,
    MICROPHONE_STATUS_OPEN,
    MICROPHONE_STATUS_CLOSE,
    MUTE_STATUS_Y,
    MUTE_STATUS_N,
    CAMERA_STATUS_NO,
    CAMERA_STATUS_OPEN,
    CAMERA_STATUS_CLOSE,
    CONFERENCE_MEMBER_STATE_CALLING,
    PROHIBITION_STATUS_N,
  } from '@/views/consultation/sdk/conferenceControl';

  const globalStore = useGlobalStore();

  const props = defineProps({
    meetingType: {
      type: String,
      default: 'meeting',
    },
    userInfo: {
      type: Object,
      default: () => ({}),
    },
    index: {
      type: Number,
      default: 0,
    },
    currentIndex: {
      type: Number,
      default: -1,
    },
    isShowType: {
      // 是否显示人员类型
      type: Boolean,
      default: true,
    },
    // eslint-disable-next-line vue/prop-name-casing
    dispatcher_account: {
      type: String,
      default: '',
    },
  });

  const reliveVisible = ref(false);
  const controlVisible = ref(false);

  const isMicEnable = computed(() => {
    return (
      props.userInfo.prohibition_status === PROHIBITION_STATUS_N &&
      props.userInfo.mute_status === MUTE_STATUS_N
    );
  });

  const emit = defineEmits([
    'changeCurrentIndex',
    'controlSelect',
    'reliveSelect',
  ]);

  // 获取资源名称\
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const getName = (record: Record<string, any>) => {
    const rolemap = {
      0: 'conference.role.common', // 参会者
      1: 'conference.role.host', // 主持人（仅用户或硬件终端）
      2: 'conference.role.creator', // 组织者（仅创建人）
    };

    let type = '';

    if (props.meetingType === 'meeting') {
      type = $t(rolemap[record.role]);
    }

    return formatShowNameFin(record.nick || record.alias, type);
  };

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const getUserType = computed(() => {
    let personType: any = '';
    if (props.userInfo.basedata_id === sessionStorage.getItem('basedata_id')) {
      personType = $t('meeting.modal.personType');
    } else {
      personType = false;
    }
    return personType;
  });

  // 未入会成员-呼叫操作
  const getNoMeetOperate = computed(() => {
    return [
      {
        value: 'FullDuplexCall',
        label: $t('conference.fullDuplex_call'),
      },
      // {
      //   value: 'HalfDuplexCall',
      //   label: $t('conference.halfDuplex_call'),
      // },
      {
        value: 'AllCall',
        label: $t('conference.control.allCall'),
      },
    ];
  });

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // 已入会-解除操作
  const getReliveList = computed(() => {
    return [
      {
        value: 'ReleaseProhibition',
        label: $t('meeting.modal.release_voice_text'),
      }, // 解除禁言
      {
        value: 'CancelSpeech',
        label: $t('conference.cancel_speak'),
      }, // 取消发言
      {
        value: 'UnMute',
        label: $t('conference.control.unmute'),
      }, // 解除静音
      {
        value: 'OpenCamera',
        label: $t('conference.control.openCamera'),
      }, // 打开摄像头
      {
        value: 'AsMember',
        label: $t('conference.control.setAsMember'),
      }, // 设置为成员
      // {
      //   value: 'CancelImage',
      //   label: $t('conference.control.cancel.image'),
      // },// 取消指定
    ];
  });

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  // 已入会-管控操作
  const getControlList = computed(() => {
    const operations = [
      {
        value: 'Prohibition',
        label: $t('meeting.modal.control_voice_text'),
      }, // 禁言
      {
        value: 'Mute',
        label: $t('conference.control.muteMember'),
      }, // 静音
      {
        value: 'CloseCamera',
        label: $t('conference.control.closeCamera'),
      }, // 关闭摄像头
      {
        value: 'AsHost',
        label: $t('conference.control.setAsHost'),
      }, // 设置为主席
      {
        value: 'Speech',
        label: $t('conference.control.designatedSpeech'),
      }, // 指定发言
      {
        value: 'ReName',
        label: $t('conference.control.reName'),
      }, // 修改昵称
      {
        value: 'Remove',
        label: $t('meeting.modal.control_move_text'),
      }, // 移除会议
      // {
      //   value: 'AppointImage',
      //   label: $t('conference.control.appoint.image'),
      // },// 指定画面
    ];

    return globalStore.IS_CURRENT_MEETING_OWNER
      ? operations
      : operations.filter((v) => v.value === 'ReName');
  });

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const activeStatus = computed(() => {
    return true;
  });

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const mouseEnterItem = (index: number) => {
    if (reliveVisible.value || controlVisible.value) {
      return;
    }
    emit('changeCurrentIndex', index);
  };

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const mouseLeaveItem = () => {
    if (reliveVisible.value || controlVisible.value) {
      return;
    }
    emit('changeCurrentIndex', -1);
  };

  // 解除选择
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const reliveSelect = (val) => {
    emit('reliveSelect', {
      val,
      record: props.userInfo,
    });
  };

  // 控制选择
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const controlSelect = (val, index) => {
    emit('controlSelect', {
      val,
      record: props.userInfo,
    });
  };

  watch(
    () => props.currentIndex,
    () => {
      reliveVisible.value = false;
      controlVisible.value = false;
    }
  );
</script>

<style lang="less" scoped>
  .user_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #3c4046;

    &.user_item_active {
      background: #353b43;
    }

    .user_item_info {
      display: flex;
      align-items: center;

      .user_item_info_name {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 5px;
        line-height: 18px;

        .type {
          min-width: 200px;
          color: #80848b;
          font-size: 12px;
        }
      }

      .avatar {
        width: 36px;
        height: 36px;
      }
    }

    .user_item_opration {
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;

        &:nth-child(2) {
          margin: 0 15px;
        }
      }

      .no_meeting_btn {
        img {
          width: 14px;
          height: 14px;
          margin-right: 5px;
        }
      }
    }

    .user_mask {
      position: absolute;
      top: 50%;
      right: 10px;
      background: #353b43;
      transform: translateY(-50%);

      > button {
        margin-left: 10px;
      }
    }

    .icon_box {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-bottom: 5px;
    }
  }
</style>
