import { defineComponent } from 'vue'
import styles from './join-chat.module.less'
import { Button, Cell, Field, Image, Toast } from 'vant'
import request from '@/helpers/request'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../images/${fileName}`
  const modules = import.meta.globEager('../images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'joinChat',
  props: {
    item: {
      type: Object,
      default: {}
    },
    onClose: {
      type: Function,
      default: (id: number) => {}
    }
  },
  data() {
    return {
      desc: ''
    }
  },
  methods: {
    async onJoinChat() {
      try {
        await request.post('/api-student/imGroupMemberAudit/apply', {
          data: {
            groupId: this.item.id,
            auditStatus: 'AUDITING',
            roleType: 'STUDENT',
            desc: this.desc
          }
        })
        Toast('申请成功')
        this.desc = ''
        this.onClose && this.onClose(this.item.id)
      } catch {}
    }
  },
  render() {
    return (
      <>
        <div class={[styles.filterTitle, 'van-hairline--bottom']}>申请入群</div>
        <div class={styles.joinContainer}>
          <Cell
            center
            class={styles.fansGroup}
            border={false}
            v-slots={{
              icon: () => (
                <Image
                  src={this.item.img || getAssetsHomeFile('icon_fans.png')}
                  fit="cover"
                  class={styles.fansImage}
                />
              ),
              title: () => (
                <div class={styles.fansTitle}>
                  <div class={styles.title}>{this.item.name}</div>
                  <p class={['van-ellipsis', styles.introduce]}>
                    {this.item.introduce}
                  </p>
                </div>
              )
            }}
          />
          <Field
            type="textarea"
            class={styles.joinText}
            rows={2}
            maxlength={200}
            v-model={this.desc}
            placeholder="请填写您的入群申请，会更快的被通过喔～"
          />
        </div>
        <div class="btnGroup">
          <Button
            type="primary"
            block
            round
            style={{ width: '70%', margin: '0 auto' }}
            onClick={this.onJoinChat}
          >
            确认
          </Button>
        </div>
      </>
    )
  }
})
