import { defineComponent } from "vue"
import { ElTabs, ElTabPane } from "element-plus"
import styles from './index.module.less'
import Message from './message'
import { state} from '/src/state'
import runtime from '../live-broadcast/runtime'
import SendMessage from './send-message';
import ItemList from './item-list'
import JoinModel from './model/join-model';
import LookModel from './model/look-model';
import MessageModel from './model/message-model';
import runtimeModel, * as RuntimeModelUtils from '/src/components/live-message/model/runtime'


type tabStatus = 'message' | 'join' | 'look'

export default defineComponent({
  name: 'LiveMessage',
  data() {
    return {
      modelIndex: 'message' as tabStatus,
    }
  },
  computed: {
    joinStatus() {
      console.log(this.modelIndex)
      let status = runtimeModel.joinTips
      if(runtimeModel.joinTips && this.modelIndex === 'join') {
        status = false
        runtimeModel.joinTips = false
      }
      return status
    }
  },
  mounted() {
    runtime.likeCount = state.user?.likeNum || 0
  },
  methods: {
    tabChange(val: any) {
      this.modelIndex = val.props.name
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <div class={styles.dataCount}>
          <div>
            <p class={styles.num}>{state.user?.likeNum}</p>
            <p class={styles.text}><SvgIcon name="message-look" color="#fff" class={styles.dataIcon} />当前观看</p>
          </div>
          <div>
            <p class={styles.num}>{runtime.likeCount}</p>
            <p class={styles.text}><SvgIcon name="message-giveUp" color="#fff" class={styles.dataIcon} />累计点赞</p>
          </div>
        </div>

        <ElTabs modelValue={this.modelIndex} onTab-click={this.tabChange} class={styles.tabContainer} >
          <ElTabPane
            // @ts-ignore
            vSlots={{
              label: () => <span style={{ display: 'flex', alignItems: 'center' }}><SvgIcon name="message-message" color={this.modelIndex === 'message' ? '#00FFF0' : '#fff'} class={styles.tabIcon} />聊天</span>
            }} name="message"></ElTabPane>
          <ElTabPane
            // @ts-ignore
            vSlots={{
              label: () => <span style={{ display: 'flex', alignItems: 'center', position: 'relative' }}><SvgIcon name="message-evenEtc" color={this.modelIndex === 'join' ? '#00FFF0' : '#fff'} class={styles.tabIcon} />连麦 {this.joinStatus ? <i class={styles.point} ></i> : null}</span>
            }} name="join"></ElTabPane>
          <ElTabPane
            // @ts-ignore
            vSlots={{
              label: () => <span style={{ display: 'flex', alignItems: 'center' }}><SvgIcon name="message-look" color={this.modelIndex === 'look' ? '#00FFF0' : '#fff'} class={styles.tabIcon} />观看</span>
            }} name="look"></ElTabPane>
        </ElTabs>
        <div class={styles.tabContent}>
          <Message />
          <div class={styles.tabList} id="tabList">
            <MessageModel v-show={this.modelIndex === 'message'} />
            <JoinModel v-show={this.modelIndex === 'join'} />
            <LookModel v-show={this.modelIndex === 'look'} />
          </div>
          <SendMessage />
        </div>
      </div>
    )
  }
})
