<template>
  <el-form :model="formDataForm" label-width="120px" ref="form" v-loading="loading" class="pr-4">
    <el-form-item label="推广名称" prop="name" :rules="[{ required: false, message: '推广名称必须填写' }]">
      <el-input disabled v-model="props.primary.name" clearable />
    </el-form-item>
    <el-form-item label="入口章节" prop="series_sequence"
      :rules="[{ required: true, message: '入口章节必须填写', trigger: 'change' }]">
      <el-select v-model="formDataForm.series_sequence" filterable clearable placeholder="选择入口章节">
        <el-option v-for="(item, index) in sequenceOptions" :key="index" :label="item.series_name"
          :value="item.series_sequence" />
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="name" :rules="[{ required: false, message: '备注必须填写' }]">
      <el-input v-model="formDataForm.remark" clearable />
    </el-form-item>
    <div class="flex justify-end">
      <el-button type="primary" @click="submitForm(form)">{{
        $t('system.confirm')
      }}</el-button>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import Cache from '@/support/cache';
import { FormInstance } from 'element-plus';
import { videoStockEpisodeList } from '@/api/video/index'
import { tuiguangPromotionUpdateSeriesSequence } from '@/api/promotion/index'
const props = defineProps({
  primary: String | Number,
});
const emit = defineEmits(['close']);
const loading = ref(false)
const form = ref()
const sequenceOptions = ref([])
const formDataForm = ref({})
if (props.primary) {
  formDataForm.value.id = props.primary.id
  formDataForm.value.series_sequence = props.primary.series_sequence
  console.log(props.primary, 'props.primaryprops.primary');
}

const submitForm = (formEl: FormInstance | undefined) => {
  loading.value = true;
  if (!formEl) return;
  formEl
    .validate(valid => {
      if (valid) {
        tuiguangPromotionUpdateSeriesSequence(formDataForm.value).then(res => {
          console.log(res, 'tuiguangPromotionAddtuiguangPromotionAdd');
          ElMessage.success(res.message)
          emit('close')
          loading.value = false;
        })
      } else {
        loading.value = false;
      }
    })
    .then(() => { });
}
const initSequence = (params?: object) => {
  videoStockEpisodeList({ video_id: props.primary.video_id, limit: 300, ...params }).then(res => {
    sequenceOptions.value = res.data
  })
}

onMounted(() => {
  initSequence()
});
</script>
