<script setup lang="ts">
import { searchLive } from '../../api'
import type { Live } from '../../types'
import { uniqBy } from 'lodash-es'
import dayjs from 'dayjs'

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

const listOptions = computed(() => {
  return {
    columns: [
      { label: '会议code', prop: 'meeting_code', align: 'center' },
      { label: '主题', prop: 'subject', align: 'center' },
      {
        label: '开始时间',
        prop: 'start_time',
        align: 'center',
        computed({ row }: { row: Live }) {
          return row.start_time ? dayjs(row.start_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '-'
        }
      },
      {
        label: '结束时间',
        prop: 'end_time',
        align: 'center',
        computed({ row }: { row: Live }) {
          return row.start_time ? dayjs(row.end_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '-'
        }
      },
      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
    ],
    data: props.modelValue
  }
})

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

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

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

// 删除
const handleRemove = (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-live'"
      >添加周期性直播</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="handleRemove(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="会议主题或者会议code"
            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.subject" :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>
