<template>
    <!-- 批量导出月结明细弹框 -->
    <div>
        <el-dialog
            title="明细导出"
            append-to-body
            :visible.sync="exportDialogVisible"
            :before-close="handleCloseDialog"
            width="30%"
        >
            <el-form :model="exportParams" label-width="120px">
                <el-form-item label="导出月份">
                    <el-date-picker
                        v-model="exportParams.dateMonth"
                        type="month"
                        placeholder="请选择导出月份"
                        value-format="yyyy-MM"
                    />
                    <!-- 根据后台参数要求，是传递月份数字，还是 XXXX - XX 日期格式 -->
                    <!-- value-format 可设置 M 或  yyyy-M-->
                </el-form-item>
                <el-form-item label="费用承担方">
                    <el-checkbox-group v-model="exportParams.costBear">
                        <el-checkbox label="01" name="01" />
                        <el-checkbox label="03" name="03" />
                    </el-checkbox-group>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="handleSubmit"
                    >确 定</el-button
                >
                <el-button size="mini" @click="handleCloseDialog"
                    >取 消</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        // 弹框显隐
        exportDialogVisible: {
            type: Boolean,
            default: () => false,
        },
    },
    data() {
        return {
            exportParams: {
                dateMonth: '',
                costBear: ['01', '03'],
            },
        }
    },
    methods: {
        /** 关闭 */
        handleCloseDialog() {
            this.$emit('handleCloseDialog')
        },
        /** 确定 */
        handleSubmit() {
            this.$emit('handleSubmit', this.exportParams)
        },
    },
    watch: {
        exportDialogVisible: {
            handler(newVla) {
                if (!newVla) {
                    this.exportParams.dateMonth = ''
                }
            },
        },
    },
}
</script>
