<template>
  <el-form :model="formDataForm" label-width="120px" ref="form" v-loading="loading" class="pr-4">
    <el-form-item label="短剧名称" style="height:50px;" prop="name" :rules="[{ required: true, message: '短剧名称必须填写' }]">
      <el-input disabled v-model="formDataForm.name" name="name" clearable />
    </el-form-item>
    <el-form-item label="集数" style="height:50px;" prop="total_episode_num"
      :rules="[{ required: true, message: '集数必须填写' }]">
      <el-input disabled v-model="formDataForm.total_episode_num" name="author" clearable />
    </el-form-item>
    <el-form-item label="上传" prop="videos" :rules="[{ required: true, message: '请上传文件', trigger: 'change' }]">
      <div class="items-center w-full withdraw-popup-warn">
        <div class="text-red-400">支持MP4格式</div> 
        <div class="text-red-400">1.上传文件统一命名格式要求,例：1.mp4; 11.mp4; 333.mp4</div>
        <div class="text-red-400">2.上传视频时，如果新视频和已上传的视频文件同名，原有视频将被新视频覆盖，所以务必提前为视频文件合理命名</div>
      </div>
      <div class="w-full">
        <video-uploader :fileList="videofileList" :public_video_url='formDataForm.cover_image' @fileRemove="fileRemove"
          @success="fileSuccess"></video-uploader>
      </div>
    </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 { FormInstance } from 'element-plus';
import { InfoFilled } from '@element-plus/icons-vue';
import { videoStockEpisodeAdd } from '@/api/video/index'
const props = defineProps({
  primary: String | Number,
});
const form = ref<FormInstance>();
const loading = ref(false);
const formDataForm = ref({ videos: [] })
const videofileList = ref([])
const emit = defineEmits(['close']);
const fileRemove = (e: object) => {
  formDataForm.value.videos = formDataForm.value.videos.filter(item => item.name != e.name)
  console.log(formDataForm.value, e, 'fileRemove');
}
const fileSuccess = (e: object) => {
  formDataForm.value.videos.push({ name: e.fname, duration: parseInt(e.duration), url: e.url, key: e.key, })
  console.log(formDataForm.value, 'fileSuccess');
}

const submitForm = (formEl: FormInstance | undefined) => {
  loading.value = true;
  console.log(formDataForm.value, formEl, 'formEl');
  if (!formEl) return;
  formEl
    .validate(valid => {
      if (valid) {
        let params = {
          video_id: formDataForm.value.video_id,
          videos: formDataForm.value.videos
        }
        videoStockEpisodeAdd(params).then(res => {
          console.log(res);
          loading.value = false;
          videofileList.value = []
          emit('close')
        }).catch(e => {
          loading.value = false;
        })
        console.log(formDataForm.value, 'params', params);
      } else {
        loading.value = false;
      }
    })
    .then(() => { });
}
if (props.primary) {
  console.log(props.primary, 'props.primary');
  formDataForm.value.video_id = props.primary.id
  formDataForm.value.name = props.primary.name
  formDataForm.value.total_episode_num = props.primary.total_episode_num
  formDataForm.value.cover_image = props.primary.cover_image
}
onMounted(async () => {
});
</script>
<style lang="scss" scoped>
.withdraw-popup-warn {
  padding: 10px;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.8;
  padding-left: 30px;
  background-color: #ffecf4;
}
</style>
