<script setup>
import { ElMessage } from 'element-plus'
import LiveProductSelect from '@/components/LiveProductSelect.vue'
import { createTest, updateTest, getTalkList } from '../api'
import { useMapStore } from '@/stores/map'

const props = defineProps(['data'])

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

const liveDuration = useMapStore().getMapValuesByKey('live_duration')
const liveUploadWay = useMapStore().getMapValuesByKey('live_upload_way')

const isUpdate = computed(() => !!props.data?.id)
const title = computed(() => (isUpdate.value ? '编辑直播' : '添加直播'))

const formRef = ref()
const form = reactive({
  live_commodity_id: '',
  live_speech_id: '',
  duration: liveDuration[0]?.value || '10',
  upload_way: liveUploadWay[0]?.value || '2',
})

const rules = ref({
  live_commodity_id: [{ required: true, message: '请选择' }],
  live_speech_id: [{ required: true, message: '请选择' }],
  duration: [{ required: true, message: '请选择' }],
  upload_way: [{ required: true, message: '请选择' }],
})

const options = ref([])
watch(
  () => form.live_commodity_id,
  () => {
    form.live_speech_id = ''
    getTalkList({ live_commodity_id: form.live_commodity_id }).then((res) => {
      options.value = res.data.list
    })
  }
)
// 提交
async function handleSubmit() {
  await formRef.value?.validate()
  isUpdate.value ? handleUpdate() : handleAdd()
}

// 新建
async function handleAdd() {
  await createTest(form)
  ElMessage({ message: '创建成功', type: 'success' })
  emit('update')
  emit('update:modelValue', false)
}
// 编辑
async function handleUpdate() {
  await updateTest(form)
  ElMessage({ message: '修改成功', type: 'success' })
  emit('update')
  emit('update:modelValue', false)
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" @closed="$emit('update:modelValue', false)">
    <el-row justify="center">
      <el-col :sm="24" :md="16">
        <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
          <el-form-item label="选择直播主题" prop="live_commodity_id">
            <LiveProductSelect v-model="form.live_commodity_id"></LiveProductSelect>
          </el-form-item>
          <el-form-item label="选择直播话术" prop="live_speech_id">
            <el-select v-model="form.live_speech_id" style="width: 100%" placeholder="请选择" filterable>
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择直播时长" prop="duration">
            <el-radio-group v-model="form.duration">
              <el-radio v-for="item in liveDuration" v-bind="item" :key="item.value"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="直播视频上传方式" prop="upload_way">
            <el-radio-group v-model="form.upload_way">
              <el-radio v-for="item in liveUploadWay" v-bind="item" :key="item.value"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <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">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
