<template>
    <!-- 导出PPT对话框 -->
    <el-dialog :title="exportTitle" v-model="exportOpen" width="1270px" class="my_dialog" align-center
        :destroy-on-close="true" :close-on-click-modal="false">
        <div class="my_dialog_itemHeader">已选内容</div>
        <div class="chosedMediaNamsConter">
            <el-tag v-for="tag in chosedMediaList" :key="tag.id" class="exportPPTTag" @close="handleCloseTag(tag)"
                closable>
                {{ tag.mediaName }}
            </el-tag>
        </div>
        <div class="my_dialog_itemHeader">
            <el-row :gutter="10">
                <el-col :span="12">选择需要写入方案的媒体字段</el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-checkbox class="checkAllChose" v-model="pptFieldCheckAll"
                        :indeterminate="pptFieldIsIndeterminate" @change="handleCheckAllPPTFieldChange">
                        全选
                    </el-checkbox>
                </el-col>
            </el-row>
        </div>

        <el-checkbox-group class="checkAllChose" style="margin-top: 30px;" v-model="checkedPPTFields"
            @change="handleCheckedPPTFieldChange">
            <el-checkbox v-for="itemPPTField in pptFields" :key="itemPPTField.propertyPath"
                :label="itemPPTField.displayName" :value="itemPPTField.propertyPath">
                {{ itemPPTField.displayName }}
            </el-checkbox>
        </el-checkbox-group>
        <template #footer>
            <div class="dialog-footer">
                <el-button class="my-cancel-btn" @click="exportOpen = false">取 消</el-button>
                <el-button class="my-confirm-btn" type="primary" @click="handleSubmitExportPPT">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { mediaPPTField, exportMediaPPT } from "@/api/mediaLibrary"

const exportTitle = ref('导出PPT')
const exportOpen = ref(false)
// 已选媒体
const chosedMediaList = ref([])
// 导出提交信息
const exportForm = ref({
    mediaIds: undefined,
    templateId: undefined,
    exportFields: undefined
})
// ppt字段是否全选
const pptFieldCheckAll = ref(false)
const pptFieldIsIndeterminate = ref(true)
// ppt字段
const pptFields = ref([])
// 已选择的ppt字段
const checkedPPTFields = ref([])

// 移除已选媒体
const handleCloseTag = (tag) => {
    const rowIndex = chosedMediaList.value.findIndex(item => item.id == tag.id)
    chosedMediaList.value.splice(rowIndex, 1) 
    // 重新计算导出媒体id
    exportForm.value.mediaIds = chosedMediaList.value.map(item => item.id);
}

// PPT字段全选操作
const handleCheckAllPPTFieldChange = (val) => {
    checkedPPTFields.value = []
    if (val) {
        pptFields.value.forEach(element => {
            checkedPPTFields.value.push(element.propertyPath)
        });
    }
    pptFieldIsIndeterminate.value = false
}
// 单个选择PPT字段
const handleCheckedPPTFieldChange = (value) => {
    const checkedCount = value.length
    pptFieldCheckAll.value = checkedCount === pptFields.value.length
    pptFieldIsIndeterminate.value = checkedCount > 0 && checkedCount < pptFields.value.length
}

// 导出ppt实现代码
const handleSubmitExportPPT = () => {
    exportForm.value.exportFields = checkedPPTFields 
    exportMediaPPT(exportForm.value).then(res => {
        const downLoadName = '媒体信息_' + getCurrentTime() + '.pptx'
        // 通过a标签打开新页面下载文件
        const a = document.createElement('a')
        a.href = URL.createObjectURL(res)
        // a标签里有download属性可以自定义文件名
        a.setAttribute('download', downLoadName)
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        exportOpen.value = false
    })
}

const getCurrentTime = () => {
    //获取当前时间并打印 
    var getTime = new Date().getTime(); //获取到当前时间戳
    var time = new Date(getTime); //创建一个日期对象
    var year = time.getFullYear(); // 年
    var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
    var date = time.getDate().toString().padStart(2, '0'); // 日
    var hour = time.getHours().toString().padStart(2, '0'); // 时
    var minute = time.getMinutes().toString().padStart(2, '0'); // 分
    var second = time.getSeconds().toString().padStart(2, '0'); // 秒 
    var gettime = year + month + date + hour + minute + second
    return gettime
}

// 获取ppt信息字段
const getMediaExcelPPTField = () => {
    mediaPPTField().then(res => {
        pptFields.value = res.data
    })
}
// 初始化
const initExportPPT = (_tempId, _mediaIds, multipleChoseArr) => {
    exportForm.value.templateId = _tempId
    exportForm.value.mediaIds = _mediaIds
    chosedMediaList.value = JSON.parse(JSON.stringify(multipleChoseArr))
    getMediaExcelPPTField()
    exportOpen.value = true
}

// 暴露方法\属性给父组件
defineExpose({
    initExportPPT
});
</script>