<template>
    <div class="audio-preview">
        <van-dialog :show="show" title="音频预览" :show-cancel-button="readonly || !!resource?.ref_name" :show-confirm-button="!readonly || canSetShifan" cancel-button-text="关闭" @cancel="cancel" @confirm="confirm">
            <van-field :readonly="readonly" required  maxlength="10" v-model="state.name" label="音频名称"></van-field>
            <van-cell title="设为示范曲" label="示范曲用于AI打分，每个课程仅一个示范">
                <template #right-icon>
                    <van-checkbox :disabled="readonly && !canSetShifan" v-model="state.shifan" />
                </template>
            </van-cell>
            <van-field v-if="!readonly || state.desc" :readonly="readonly" v-model="state.desc" maxlength="30" show-word-limit type="textarea" rows="3" label="音频描述"></van-field>
            <div class="audio-area" v-if="resource?.resource_url">
              <suspense>
                <hty-audio ref="audio" :src="resource?.resource_url" :downloadable="downloadable"/>
              </suspense>
            </div>
        </van-dialog>
    </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, reactive, watch, ref, computed } from 'vue';
import { Dialog, Field, Cell, Checkbox, showFailToast } from 'vant';
import HtyVideo from './hty-video.vue';
import HtyAudio from "~/components/hty-audio.vue";

export default defineComponent({
    name: 'audio-preview',
    props: ["resource", "readonly", "canSetShifan", "downloadable"],
    emits: ["change", "cancel"],
    components: {
        [Dialog.name]: Dialog,
        [Field.name]: Field,
        [HtyVideo.name]: HtyVideo,
        [Cell.name]: Cell,
        [Checkbox.name]: Checkbox,
        [HtyAudio.name]: HtyAudio
    },
    setup(props) {
        const instance = getCurrentInstance();
        const audio = ref();
        const state = reactive({
            name: props.resource?.ref_name || '',
            shifan: props.resource?.is_shifan || false,
            desc: props.resource?.ref_desc || ''
        })

        const confirm = () => {
            let { name, shifan, desc } = state;

            if (!name) {
                showFailToast("请输入音频名称!");
                return;
            }
            let { ref_name, ref_desc, is_shifan, ...rest} = props.resource;
            instance?.emit("change", {ref_name: name, ref_desc: desc, ...rest, is_shifan: shifan});
        }


        const show = computed(() => !!props.resource);

        watch(() => show.value, () => {
            if (props.resource) {
                state.shifan = props.resource?.is_shifan || false,
                state.name = props.resource?.ref_name || ''
                state.desc  = props.resource?.ref_desc || ''
            } else {
                state.shifan = false;
                state.name = '';
                state.desc = ''
            }
        })

        const cancel = () => {
            instance?.emit('cancel');
            audio.value?.stop();
        }

        return { confirm, state, show, cancel, audio };
    }
})

</script>

<style lang="less" scoped>

.audio-preview {

    :deep(.van-popup.van-dialog) {
        max-height: calc(90% - var(--van-dialog-header-padding-top));
        overflow-y: auto;
    }


    .audio-area {
        padding: 0.12rem 0.32rem;
        height: auto;
    }
}



</style>
