<template>
    <!-- 导出对话框 -->
    <el-dialog :title="exportTitle" v-model="exportOpen" width="800px" class="my_dialog" align-center
        :destroy-on-close="true" :close-on-click-modal="false">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="媒体基础信息" name="first">
                <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="baseFieldCheckAll"
                                :indeterminate="baseFieldIsIndeterminate" @change="handleCheckAllBaseFieldChange">
                                全选
                            </el-checkbox>
                        </el-col>
                    </el-row>
                </div>

                <el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedBaseFields"
                    @change="handleCheckedBaseFieldChange">
                    <el-checkbox v-for="itemBaseField in baseFields" :key="itemBaseField.propertyPath"
                        :label="itemBaseField.displayName" :value="itemBaseField.propertyPath">
                        {{ itemBaseField.displayName }}
                    </el-checkbox>
                </el-checkbox-group>

                <div class="my_dialog_itemHeader">附件选项</div>
                <el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedHasFiles"
                    @change="handleCheckedHasFileChange">
                    <el-checkbox v-for="(item, index) in hasFilesList" :key="index" :label="item.label"
                        :value="item.value">
                        {{ item.label }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-tab-pane>
            <el-tab-pane label="媒体报价信息" name="second">
                <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="priceFieldCheckAll"
                                :indeterminate="priceFieldIsIndeterminate" @change="handleCheckAllPriceFieldChange">
                                全选
                            </el-checkbox>
                        </el-col>
                    </el-row>
                </div>

                <el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedPriceFields"
                    @change="handleCheckedPriceFieldChange">
                    <el-checkbox v-for="itemPriceField in priceFields" :key="itemPriceField.propertyPath"
                        :label="itemPriceField.displayName" :value="itemPriceField.propertyPath">
                        {{ itemPriceField.displayName }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-tab-pane>
        </el-tabs>

        <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="handleSubmitExport">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { onMounted, ref } from 'vue';

import { mediaExcelBaseField, mediaExcelPriceField, exportMediaExcel } from "@/api/mediaLibrary"

const exportTitle = ref('导出')
const exportOpen = ref(false)
const activeName = ref('first')

// 导出提交信息
const exportForm = ref({
    ids: undefined,
    exportBaseFields: undefined,
    exportPriceFields: false,
    hasFiles: false
})

// 基础字段是否全选
const baseFieldCheckAll = ref(false)
const baseFieldIsIndeterminate = ref(true)
// 基础字段
const baseFields = ref([])
// 已选择的基础字段
const checkedBaseFields = ref([])

// 报价字段是否全选  
const priceFieldCheckAll = ref(false)
const priceFieldIsIndeterminate = ref(true)
// 报价字段
const priceFields = ref([])
// 已选择的报价字段
const checkedPriceFields = ref([])

// 是否包含附件，选中的值
const checkedHasFiles = ref([])
const hasFilesList = [
    { label: '包含附件', value: true },
]

// 基础字段全选操作
const handleCheckAllBaseFieldChange = (val) => {
    checkedBaseFields.value = []
    if (val) {
        baseFields.value.forEach(element => {
            checkedBaseFields.value.push(element.propertyPath)
        });
    }
    baseFieldIsIndeterminate.value = false
}
// 单个选择基础字段
const handleCheckedBaseFieldChange = (value) => {
    const checkedCount = value.length
    baseFieldCheckAll.value = checkedCount === baseFields.value.length
    baseFieldIsIndeterminate.value = checkedCount > 0 && checkedCount < baseFields.value.length
}
// 报价字段全选操作
const handleCheckAllPriceFieldChange = (val) => {
    checkedPriceFields.value = []
    if (val) {
        priceFields.value.forEach(element => {
            checkedPriceFields.value.push(element.propertyPath)
        });
    }
    priceFieldIsIndeterminate.value = false
}
// 单个选择报价字段
const handleCheckedPriceFieldChange = (value) => {
    const checkedCount = value.length
    priceFieldCheckAll.value = checkedCount === priceFields.value.length
    priceFieldIsIndeterminate.value = checkedCount > 0 && checkedCount < priceFields.value.length
}

// 选择是否包含附件
const handleCheckedHasFileChange = (value) => {
    if (value.length > 0) exportForm.value.hasFiles = value[0]
    else exportForm.value.hasFiles = false
}

// 切换选项卡
const handleClick = (tab, event) => {
    activeName.value = tab
}
// 执行导出
const handleSubmitExport = () => {
    exportForm.value.exportBaseFields = checkedBaseFields
    exportForm.value.exportPriceFields = checkedPriceFields
    exportMediaExcel(exportForm.value).then(res => {
        const downLoadName = '媒体信息_' + getCurrentTime() + '.xlsx'
        // 通过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
}

// 获取基础信息字段
const getMediaExcelBaseField = () => {
    mediaExcelBaseField().then(res => {
        baseFields.value = res.data
    })
}
// 获取报价信息字段
const getMediaExcelPriceField = () => {
    mediaExcelPriceField().then(res => {
        priceFields.value = res.data
    })
}
// 初始化
const initExportExcel = (_mediaIds) => {
    exportForm.value.ids = _mediaIds
    exportOpen.value = true
    getMediaExcelBaseField()
    getMediaExcelPriceField()
}

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