<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="checkAll" :indeterminate="isIndeterminate"
                                @change="handleCheckAllChange">
                                全选
                            </el-checkbox>
                        </el-col>
                    </el-row>
                </div>

                <el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities"
                    @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
                        {{ city.label }}
                    </el-checkbox>
                </el-checkbox-group>

                <div class="my_dialog_itemHeader">附件选项</div>
                <el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities2"
                    @change="handleCheckedCitiesChange2">
                    <el-checkbox v-for="city in cities2" :key="city.value" :label="city.label" :value="city.value">
                        {{ city.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="checkAll" :indeterminate="isIndeterminate"
                                @change="handleCheckAllChange">
                                全选
                            </el-checkbox>
                        </el-col>
                    </el-row>
                </div>

                <el-checkbox-group class="checkAllChose" style="margin: 30px 0;" v-model="checkedCities"
                    @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in cities" :key="city.value" :label="city.label" :value="city.value">
                        {{ city.label }}
                    </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 name="Post">
import { onMounted, ref } from 'vue';

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

const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai'])
const cities = [
    { label: '字段名', value: 'Shanghai' },
    { label: '字段名', value: 'begnjing' },
    { label: '字段名', value: 'chongq' },
    { label: '字段名', value: 'sdag' },
    { label: '字段名', value: 'Shanghai1' },
    { label: '字段名', value: 'begnjing2' },
    { label: '字段名', value: 'chongq3' },
    { label: '字段名', value: 'sdag4' },
    { label: '字段名', value: 'Shanghai5' },
    { label: '字段名', value: 'begnjing6' },
    { label: '字段名', value: 'chongq7' },
    { label: '字段名', value: 'sdag8' },
    { label: '字段名', value: 'Shanghai9' },
    { label: '字段名', value: 'begnjing10' },
    { label: '字段名', value: 'chongq11' },
    { label: '字段名', value: 'sdag12' },
]


const checkedCities2 = ref([])
const cities2 = [
    { label: '包含附件', value: 'fujian' },
]

// 全选操作
const handleCheckAllChange = (val) => {
    checkedCities.value = []
    if (val) {
        cities.forEach(element => {
            checkedCities.value.push(element.value)
        });
    }
    isIndeterminate.value = false
}
// 单个选择字段
const handleCheckedCitiesChange = (value) => {
    console.log('单选操作', value)
    const checkedCount = value.length
    checkAll.value = checkedCount === cities.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
// 选择附件
const handleCheckedCitiesChange2 = (value) => {

}
// 切换选项卡
const handleClick = (tab, event) => {
    console.log(tab, event)
    activeName.value = tab
}
const handleSubmitExport = () => {

}

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