<template>
    <div>
        <div style="width: 80%; margin-top: 30px;">
            <el-form ref="queryParams" :model="queryParams" label-width="130px">
                <el-form-item label="数据类型">
                    <el-select style="width: 60%;" v-model="queryParams.dataType" placeholder="请选择">
                        <el-option
                            v-for="item in dataTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="下载方式">
                    <el-radio-group v-model="queryParams.requestTypeText" @change="changeRequestType">
                        <el-radio label="按天"></el-radio>
                        <el-radio label="按月"></el-radio>
                        <el-radio label="按时间段"></el-radio>
                        <el-radio label="按产品标识"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="请求范围">
                    <el-col :span="4">
                        <el-date-picker
                            style="width: 100%;"
                            v-model="queryParams.date"
                            type="date"
                            :disabled="dateVisible"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="4">
                        <el-date-picker
                            style="width: 100%; margin-left: 10px;"
                            v-model="queryParams.month"
                            type="month"
                            :disabled="monthVisible"
                            value-format="yyyy-MM"
                            :picker-options="pickerOptions"
                            placeholder="选择月份">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="按时间段下载">
                    <el-col :span="4">
                        <el-date-picker
                            style="width: 100%;"
                            v-model="queryParams.startDate"
                            type="date"
                            :disabled="dateRangeVisible"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            placeholder="选择开始日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="4">
                        <el-date-picker
                            style="width: 100%;margin-left: 10px;"
                            v-model="queryParams.endDate"
                            type="date"
                            :disabled="dateRangeVisible"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            placeholder="选择结束日期">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="最小销售标识">
                    <el-input v-model="queryParams.ZXXSDYCPBS" clearable="true" placeholder="最小销售标识"></el-input>
                </el-form-item>
                <el-form-item label="产品通用名称">
                    <el-input v-model="queryParams.CPMCTYMC" :disabled="inputEnabled" clearable="true"
                              placeholder="产品通用名称"></el-input>
                </el-form-item>
                <el-form-item label="规格型号">
                    <el-input v-model="queryParams.GGXH" :disabled="inputEnabled" clearable="true"
                              placeholder="规格型号"></el-input>
                </el-form-item>
                <el-form-item label="注册备案人名称">
                    <el-input v-model="queryParams.YLQXZCRBARMC" :disabled="inputEnabled" clearable="true"
                              placeholder="注册备案人名称"></el-input>
                </el-form-item>
                <el-form-item label="注册备案号">
                    <el-input v-model="queryParams.ZCZBHHZBAPZBH" :disabled="inputEnabled" clearable="true"
                              placeholder="注册备案号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button-group>
                        <el-button
                            type="primary"
                            style="width: 220px"
                            @click="downloadData"
                        >
                            全量下载
                        </el-button>
                    </el-button-group>


                    <el-button-group>
                        <el-button
                            type="primary"
                            style="width: 220px"
                            @click="downloadData(2)"
                        >
                            数据更新
                        </el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import {downloadData} from "../../api/UDIDownload/udiDataDownload";
import {downloadSingle} from "@/api/UDIDownload/udiSingle";

export default {
    name: "udiDataDownload",
    data() {
        return {
            dateRange: [],
            dataTypeOptions: [
                {
                    label: "最新发布",
                    value: 1
                },
                {
                    label: "数据变更",
                    value: 2
                },
                {
                    label: "全部数据",
                    value: 3
                }
            ],
            monthVisible: true,
            dateVisible: false,
            dateRangeVisible: true,
            inputEnabled: false,
            queryParams: {
                dataType: 3,        //数据类型，1 新发布，2 数据变更
                requestTypeText: '按天',     //请求范围，1 按天请求，2 按月请求
                requestType: 1,     //请求范围，1 按天请求，2 按月请求
                rangeValue: null,   //请求范围值 当按照天请求数据时，格式： yyyy-MM-dd 当按照月请求数据时，格式： yyyy-MM
                ZXXSDYCPBS: null,   //最小销售单元产品标识；精准查询
                CPMCTYMC: null,     //产品名称/通用名称；模糊查询
                GGXH: null,         //规格型号；模糊查询
                YLQXZCRBARMC: null, //注册/备案人名称；精准查询
                ZCZBHHZBAPZBH: null, //注册/备案证号；精准查询
                date: null,
                month: null,
                startDate: null,
                endDate: null,
                dlType: null,
            },
            rules: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6
                }
            },
        }
    },
    created() {

    },
    methods: {
        downloadData(dlType) {
            if (this.queryParams.requestTypeText === "按产品标识") {
                //下载单个产品信息
                downloadSingle(this.queryParams.ZXXSDYCPBS).then((res) => {
                    if (res.code === 20000) {
                        this.$message.success("开始下载产品信息！");
                    } else {
                        this.$message.error("下载失败！");
                    }
                }).catch((error) => {
                    this.$message.error("下载失败");
                });
            } else {
                //按时间段
                //转换请求时间
                this.getRangeValue();
                if (this.queryParams.requestType === 3 && this.queryParams.startDate != null && this.queryParams.endDate != null) {
                    if (this.queryParams.endDate < this.queryParams.startDate) {
                        this.$message.warning("结束时间不得小于开始时间！")
                        return;
                    }
                }
                if (dlType == 2) {
                    this.queryParams.dlType = 2;
                } else {
                    this.queryParams.dlType = null;
                }
                downloadData(this.queryParams).then((res) => {
                    if (res.code === 20000) {
                        this.$message.success("后台已经开始下载！")
                    }
                }).catch((error) => {
                    this.$message.error(error.message);
                });
            }
        },
        getRangeValue() {
            if (this.queryParams.date != null) {
                this.queryParams.rangeValue = this.queryParams.date;
            } else if (this.queryParams.month != null) {
                this.queryParams.rangeValue = this.queryParams.month;
            } else if (this.queryParams.startDate != null && this.queryParams.endDate != null) {
                this.queryParams.rangeValue = this.queryParams.startDate + '--' + this.queryParams.endDate;
            }
        },
        changeRequestType(type) {
            if (type === "按天") {
                //切换禁用状态
                this.dateVisible = false;
                this.monthVisible = true;
                this.dateRangeVisible = true;
                this.inputEnabled = false;
                //清除值
                this.queryParams.month = null;
                this.queryParams.startDate = null;
                this.queryParams.endDate = null;
                this.queryParams.requestType = 1;
            } else if (type === "按月") {
                //切换禁用状态
                this.monthVisible = false;
                this.dateVisible = true;
                this.dateRangeVisible = true;
                this.inputEnabled = false;
                //清除值
                this.queryParams.date = null;
                this.queryParams.startDate = null;
                this.queryParams.endDate = null;

                this.queryParams.requestType = 2;
            } else if (type === "按时间段") {
                //切换禁用状态
                this.dateRangeVisible = false;
                this.dateVisible = true;
                this.monthVisible = true;
                this.inputEnabled = false;
                //清除值
                this.queryParams.date = null;
                this.queryParams.month = null;

                this.queryParams.requestType = 3;
            } else if (type = "按产品标识") {
                //切换禁用状态
                this.dateVisible = true;
                this.monthVisible = true;
                this.dateRangeVisible = true;
                this.inputEnabled = true;
            }
        }
    }
}
</script>

<style scoped>

.el-input {
    width: 60%;
}

</style>
