<script setup>
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRadio,
  ElRadioGroup,
} from "element-plus";
defineOptions({
  resType: 20,
});
const props = defineProps({
  dialogVideoForm: {
    type: Object,
    default: () => ({
      name: "",
      filePath: "",
      isDrag: true,
      completeSetup: 0,
      setupTage: 0,
    }),
  },
  isPreview: {
    type: Boolean,
    default: false,
  },
});

import { ref, watch } from "vue";
// Create a reactive copy of the prop for local modifications
const localDialogVideoForm = ref({ ...props.dialogVideoForm });

// Watch for changes in the prop and update the local copy
watch(
  () => props.dialogVideoForm,
  (newVal) => {
    Object.assign(localDialogVideoForm.value, newVal);
  },
  { deep: true }
);

// Emit updates to parent component
const emit = defineEmits(["update:dialogVideoForm"]);

// Update form values and emit changes
const updateFormValue = (field, value) => {
  localDialogVideoForm.value[field] = value;
  emit("update:dialogVideoForm", { ...localDialogVideoForm.value });
};
</script>

<template>
  <el-form>
    <el-form-item label="视频名称" v-if="!isPreview">
      <el-input
        v-model="localDialogVideoForm.name"
        @update:modelValue="(val) => updateFormValue('name', val)"
      ></el-input>
    </el-form-item>
    <!-- Added video type prop -->
    <audio
      controls
      style="width: 100%; max-height: 400px"
      class="mb10"
      :key="localDialogVideoForm.filePath"
      :src="'http://home.hzer.xyz:9960/upload/' + localDialogVideoForm.filePath"
    >
      您的浏览器不支持video
    </audio>
    <el-form-item label="是否允许拖拽" v-if="!isPreview">
      <el-radio-group
        :model-value="localDialogVideoForm.isDrag"
        @update:modelValue="(val) => updateFormValue('isDrag', val)"
        size="small"
      >
        <el-radio :label="true" border>是</el-radio>
        <el-radio :label="false" border>否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="完成规则设置" v-if="!isPreview">
      <el-radio-group
        :model-value="localDialogVideoForm.completeSetup"
        @update:modelValue="(val) => updateFormValue('completeSetup', val)"
      >
        <el-radio :label="0">默认(系统自动控制)</el-radio>
        <el-radio :label="1">
          按进度
          <el-input-number
            :disabled="localDialogVideoForm.completeSetup === 0"
            :model-value="localDialogVideoForm.setupTage"
            @update:modelValue="(val) => updateFormValue('setupTage', val)"
            size="mini"
            :min="0"
            :max="100"
            label="描述文字"
            controls-position="right"
          ></el-input-number>
          %
        </el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss"></style>
