<script setup>
import { ElMessage } from 'element-plus'
import { createReport, getReport, getTestList } from '../api'
import AppUpload from '@/components/base/AppUpload.vue'

const props = defineProps(['data', 'action'])

const emit = defineEmits(['update', 'update:modelValue'])

const actonMap = { add: '添加', update: '编辑', view: '查看' }

const isUpdate = computed(() => props.action === 'update')
const title = computed(() => actonMap[props.action] + '直播总结')
const formRef = ref()
const form = reactive({
  live_practice_id: '',
  report_name: '',
  report_url: '',
  file: [],
})
watchEffect(() => {
  if (props.data) Object.assign(form, props.data)
})

const rules = ref({
  live_practice_id: [{ required: true, message: '请选择' }],
  report_url: [{ required: true, message: '请选择' }],
})

const options = ref([])
onMounted(() => {
  getTestList().then((res) => {
    options.value = res.data.list
  })
})

async function fetchInfo() {
  const res = await getReport({ id: props.data.id })
  Object.assign(form, res.data.detail, {
    file: [{ name: res.data.detail.report_name || '', url: res.data.detail.report_url || '' }],
  })
}
watchEffect(() => {
  if (props.action !== 'add') fetchInfo()
})

// 提交
async function handleSubmit() {
  await formRef.value?.validate()
  isUpdate.value ? handleUpdate() : handleAdd()
}

// 新建
async function handleAdd() {
  await createReport(form)
  ElMessage({ message: '创建成功', type: 'success' })
  emit('update')
  emit('update:modelValue', false)
}

// 编辑
async function handleUpdate() {
  await updateTalk(form)
  ElMessage({ message: '修改成功', type: 'success' })
  emit('update')
  emit('update:modelValue', false)
}

function handleSuccess(file) {
  form.report_name = file.name
  form.report_url = file.raw?.url
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" @closed="$emit('update:modelValue', false)" width="500px">
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-position="right"
      label-width="110px"
      :disabled="action === 'view'">
      <el-form-item label="关联直播" prop="live_practice_id">
        <el-select v-model="form.live_practice_id" style="width: 100%" placeholder="请选择" filterable>
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.live_commodity_title"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="总结报告文件" prop="report_url">
        <div style="width: 100%">
          <AppUpload v-model="form.file" accept=".doc,.docx,.ppt,.pptx" :limit="1" @success="handleSuccess">
            <el-button type="primary" plain round>本地上传</el-button>
            <template #tip>报告文件只能上传一个，支持格式包含：ppt docx，大小不超过50M</template>
          </AppUpload>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" round auto-insert-space @click="handleSubmit" v-if="action !== 'view'"
          >保存</el-button
        >
      </el-row>
    </template>
  </el-dialog>
</template>
