<template>
    <div
        id="InvoiceDKGXOverview"
        v-loading="loading"
        element-loading-text="拼命加载中......请稍等"
    >
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="16">
                    <div style="float: left; width: 100%; margin-top: 10px">
                        <span class="title"> 当前税款所属期： </span>
                        <span class="title font-color-red">
                            {{ periodYear }}年{{ periodMonth }}月
                        </span>
                        <span>
                            （当期可勾选、确认截止日期为：
                            {{ fmtOperationDateEnd }}）
                        </span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div style="float: right">
                        <el-input v-model="periodYear" disabled>
                            <template slot="prepend">年度：</template>
                        </el-input>
                    </div>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <div style="margin: 50px 0">
                <el-slider
                    v-model="selectMonth"
                    :marks="monthMarks"
                    :min="0"
                    :max="13"
                    :step="1"
                    show-stops
                    @change="handleSelectMonthChanged"
                >
                </el-slider>
            </div>
            <el-container>
                <div style="float: left">
                    <el-button type="text" class="month-max">
                        {{ selectMonth }}月
                    </el-button>
                </div>
                <div
                    style="
                        float: left;
                        width: 100%;
                        height: 100%;
                        margin-left: 20px;
                    "
                >
                    <div>
                        <span class="title">申报状态：</span>
                        <span class="title font-color-red">未申报</span>
                    </div>
                    <br />
                    <div>
                        <el-button type="primary">注销勾选</el-button>
                        <el-button type="primary">回退税款所属期</el-button>
                        <el-button type="primary">撤销注销勾选</el-button>
                    </div>
                </div>
            </el-container>
            <br />
            <div>
                <p>抵扣发票 0 份，税额合计：0 元</p>
            </div>
            <p>
                您有 0
                张当期已确认抵扣的发票被判断为非正常发票，请进行相关处理！
            </p>
            <p>
                您有 0
                张往期已抵扣的发票被判定为非正常发票，请在当期进行进项随额转出处理！
            </p>
            <!-- <el-divider></el-divider> -->
            <p>
                您有 0
                张当期已确认抵扣的出口转内销发票被判定为非正常发票，请进行相关处理！
            </p>
            <p>
                您有 0
                张往期已抵扣的出口转内销发票被判定为非正常发票，请在当期进行进项税额转出处理！
            </p>
        </el-card>
    </div>
</template>

<script>
import DateHelper from "@/utils/date";
import { getDeductionSyncInputData } from "@/api/invoice-deduction";

export default {
    name: "InvoiceDKGXOverview",
    data() {
        return {
            loading: false,
            periodYear: "-", // 当前税款所属期年份
            periodMonth: "-", // 当前税款所属期月份
            operationDateEnd: "-", // 勾选的发票的截止时间
            selectMonth: DateHelper.LocalCurrentMonth(), // 统计信息所属月份，默认当前月份
            monthMarks: {
                1: "1月",
                2: "2月",
                3: "3月",
                4: "4月",
                5: "5月",
                6: "6月",
                7: "7月",
                8: "8月",
                9: "9月",
                10: "10月",
                11: "11月",
                12: "12月",
            },
        };
    },
    computed: {
        fmtOperationDateEnd: function () {
            return DateHelper.Format(
                new Date(this.operationDateEnd),
                "yyyy年MM月dd日"
            );
        },
    },
    created() {
        let _this = this;
        _this.loading = true;
        getDeductionSyncInputData()
            .then((val) => {
                _this.periodYear = val.data.periodYear;
                _this.periodMonth = val.data.periodMonth;
                _this.selectMonth = val.data.periodMonth;
                _this.operationDateEnd = val.data.operationDateEnd;
                _this.loading = false;
            })
            .catch((err) => {
                _this.$message.error(err);
                _this.loading = false;
            });
    },
    methods: {
        // 所属期改变
        handleSelectMonthChanged(selectMonth) {
            console.log("所属期改变，选择月份：");
            console.log(selectMonth);
        },
    },
};
</script>

<style scoped>
.month-max {
    font-size: 3em;
}
.title {
    font-weight: bold;
    font-size: 1.2em;
}
.font-color-red {
    color: red;
}

.el-slider {
    font-size: 1.2em;
}
</style>