<template>
    <vxe-modal v-model="value" id="syncOrder" width="500" v-loading="load" @hide="hide" height="300" show-footer
        title="同步订单(店铺)">
        <el-form v-if="!isResult" ref="form" :model="form" label-width="100px">
            <el-form-item label="店铺" prop="shopId">
                <el-select v-model="form.shopId" placeholder="请选择店铺">
                    <el-option v-for="(item, index) in shopList" :label="item.shopName"
                        :value="item.shopId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="起始时间" prop="modifiedBegin">
                <el-date-picker v-model="form.modifiedBegin" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择修改时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="modifiedEnd">
                <el-date-picker v-model="form.modifiedEnd" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择修改时间"></el-date-picker>
            </el-form-item>
        </el-form>
        <el-form v-else label-width="100px">
            <el-form-item label="成功拉取(条):">
                {{ result.successNumber }}
            </el-form-item>
            <el-form-item label="失败重复(条):">
                {{ result.failNumber }}
            </el-form-item>
            <el-form-item label="所属店铺:">
                {{ result.shopName }}
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="btn">
                <el-button plain size="small" @click="value = false">取消</el-button>
                <el-button type="primary" size="small" @click="btn">确定</el-button>
            </div>
        </template>
    </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { IResponeData, waterShop, syncOrder } from "@/api/omsOrder";
@Component({ components: {} })
export default class SyncDistributor extends Vue {
    value = false;
    load = false;
    isResult = false;
    result = {
        successNumber: 0,
        failNumber: 0,
        shopName: ''
    };
    shopList: { shopId: number, shopName: string }[] = [];
    form = {
        shopId: 0,
        shopName: '',
        modifiedBegin: '',
        modifiedEnd: ''
    }
    hide() {

    }
    async loadShop() {
        this.load = true;
        const res = await waterShop() as unknown as IResponeData<any>;
        this.load = false;
        if (res.code != 200) {
            return;
        }
        this.shopList = res.rows
        console.info(this.shopList)
    }
    setShow(v: boolean) {
        this.loadShop();
        this.value = v;
        this.isResult = false;
        this.result = {
            successNumber: 0,
            failNumber: 0,
            shopName: ''
        };
    }
    setValue(v: any) {
    }
    getValue() {

    }

    btn() {
        if (this.form.shopId == 0) {
            this.$message.error('请选择店铺');
            return;
        }
        if (this.form.modifiedBegin == '') {
            this.$message.error('请选择起始时间');
            return;
        }
        if (this.form.modifiedEnd == '') {
            this.$message.error('请选择结束时间');
            return;
        }
        this.form.shopName = this.shopList.find(item => item.shopId == this.form.shopId)?.shopName || '';

        //判断两个时间之间不能大于8天，并且开始时间不能大于结束时间
        const begin = new Date(this.form.modifiedBegin);
        const end = new Date(this.form.modifiedEnd);
        const diff = end.getTime() - begin.getTime();
        if (diff > 7 * 24 * 60 * 60 * 1000) {
            this.$message.error('时间范围不能大于7天');
            return;
        }
        if (begin.getTime() > end.getTime()) {
            this.$message.error('开始时间不能大于结束时间');
            return;
        }
        this.$confirm('确认同步订单吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            syncOrder(this.form).then(res => {
                this.$message.success('同步成功');
                this.isResult = true;
                this.result.successNumber = res.data.successNumber;
                this.result.failNumber = res.data.failNumber;
                this.result.shopName = this.form.shopName;

            }).catch((err) => {
                this.isResult = false;
                this.result = {
                    successNumber: 0,
                    failNumber: 0,
                    shopName: ''
                }
                console.error(err);
            }).finally(() => {
                this.load = false;
            })
        })
    }

}
</script>

<style lang="scss" scoped></style>