<script setup lang="ts">
import { searchLecturer } from '../../api'
import type { Lecturer } from '../../types'
import { uniqBy } from 'lodash-es'
interface Props {
  modelValue: Lecturer[]
}

const props = withDefaults(defineProps<Props>(), { modelValue: () => [] })
const emit = defineEmits<{
  (e: 'update:modelValue', modelValue: Lecturer[]): void
}>()

const listOptions = computed(() => {
  return {
    columns: [
      { label: '头像', slots: 'table-avatar', align: 'center' },
      { label: '姓名', prop: 'name', align: 'center' },
      { label: '简介', slots: 'table-summarize', align: 'center' },
      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
    ],
    data: props.modelValue
  }
})

// 弹窗
const dialogVisible = ref(false)
// 选中的值
const selectList = ref<Lecturer[]>([])

// 远程搜索
const loading = ref(false)
const options = ref<Lecturer[]>([])
const remoteMethod = (query: string) => {
  if (!query) return
  loading.value = true
  searchLecturer({ name: query, 'per-page': '100' }).then((res: any) => {
    loading.value = false
    options.value = res.data.list
  })
}

watch(
  dialogVisible,
  () => {
    // 清空已选数据
    selectList.value = []
  },
  { immediate: true }
)

// 删除
const handelRemove = (id: string) => {
  emit(
    'update:modelValue',
    props.modelValue.filter((item: any) => item.id !== id)
  )
}

// 确认
const handlePrimary = () => {
  const list = [...selectList.value, ...props.modelValue]
  // 去重
  emit('update:modelValue', uniqBy(list, 'id'))
  dialogVisible.value = false
}
</script>

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true" v-permission="'v1-course-search-lecturer'"
      >添加讲师</el-button
    >
    <AppList v-bind="listOptions" ref="appList">
      <template #table-avatar="{ row }">
        <img :src="row.avatar" style="width: 50px; height: 50px; display: block; margin: 0 auto" />
      </template>
      <template #table-summarize="{ row }">
        <div v-html="row.summarize"></div>
      </template>
      <template #table-operate="{ row }">
        <el-button type="primary" plain @click="handelRemove(row.id)">删除</el-button>
      </template>
    </AppList>
    <el-dialog v-model="dialogVisible" width="400px" title="添加讲师" append-to-body>
      <el-form label-suffix="：" label-position="left">
        <el-form-item label="讲师姓名">
          <el-select
            v-model="selectList"
            multiple
            filterable
            remote
            placeholder="请输入讲师姓名"
            value-key="id"
            :reserve-keyword="false"
            :remote-method="remoteMethod"
            :loading="loading"
            style="width: 100%"
          >
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handlePrimary">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
