<script lang="ts" setup>
import { createCharacter, getLiveList } from '../../api'
import type { FormInstance, FormRules } from 'element-plus'

const emit = defineEmits<Emits>()
const ruleFormRef = ref<FormInstance>()
interface IliveList {
  id: string
  meeting_id: string
  meeting_code: string
  subject: string
  start_time: string
  end_time: string
  meeting_type: number
  status: string
}
let liveList = ref<IliveList[]>([])

// 封面状态
let form = reactive({
  name: '',
  resource_id: ''
})
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入章节名称', trigger: 'change' }]
})
const props = defineProps({
  isShowLiveDialog: {
    type: Boolean,
    required: true
  },
  course_id: {
    type: String,
    required: true
  },
  chapterName: {
    type: String,
    required: true
  },
  chapterID: {
    type: String,
    required: true
  },
  btnInfo: {
    type: Object,
    required: true
  }
})
interface Emits {
  (e: 'update:isShowLiveDialog', isShowLiveDialog: boolean): void
  (e: 'create'): void
}

// 取消
const handleCancel = () => {
  emit('update:isShowLiveDialog', false)
}
// 确定
const handleConfirm = () => {
  const params: any = Object.assign(
    {
      course_id: props.course_id,
      resource_type: props.btnInfo.resource_type,
      parent_id: props.chapterID
    },
    form
  )
  createCharacter(params).then(() => {
    emit('update:isShowLiveDialog', false)
    emit('create')
  })
}
const loading = ref(false)
// 直播选中的值
// 所有被搜索出来的值
const allLecturers: any = ref([])
const handleLiveList = (query: string) => {
  if (query) {
    loading.value = true
    getLiveList({ name: query, 'per-page': '100' }).then((res: any) => {
      loading.value = false
      liveList.value = res.data.list
      liveList.value.forEach((item: any) => {
        const findItem = allLecturers.value.find((cItem: any) => cItem.id === item.id)
        if (!findItem) {
          allLecturers.value.push(item)
        }
      })
    })
  } else {
    liveList.value = []
  }
}

watch(
  () => form.resource_id,
  () => {
    if (form.resource_id !== '') {
      form.name = allLecturers.value?.filter((item: any) => item.id === form.resource_id)[0]?.subject
    }
  }
)
</script>
<template>
  <el-dialog :model-value="isShowLiveDialog" draggable :before-close="handleCancel" width="30%" title="添加直播">
    <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="120px" label-suffix="：">
      <el-form-item props="form.resource_id" label="直播名称">
        <el-select
          v-model="form.resource_id"
          clearable
          filterable
          remote
          placeholder="请输入直播名称或者直播id"
          :remote-method="handleLiveList"
          :loading="loading"
          style="width: 100%"
        >
          <el-option v-for="item in liveList" :key="item.id" :label="item.subject" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="章节名称" props="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
