<template>
    <vxe-modal v-model="value" id="syncOrder" width="500" v-loading="load" @hide="hide" height="300" show-footer
        title="同步订单(分销商)">
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="分销商" prop="shopId">
                <el-select v-model="form.channelCompanyId" placeholder="请选择分销商" @change="handleChangeItem">
                    <el-option v-for="(item, index) in shopList" :label="item.companyName"
                        :value="item.channelCompanyId"></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>
        <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, getDistributorOrder, syncDistributorOrder } from "@/api/omsOrder";
@Component({ components: {} })
export default class AddConfig extends Vue {
    value = false;
    load = false;
    shopList: { channelCompanyId: number, companyName: string }[] = [];
    form = {
        distributorName: '',
        channelCompanyId: null as number | null,
        modifiedBegin: '',
        modifiedEnd: ''
    }
    hide() {

    }
    handleChangeItem(item) {
        //按channelCompanyId查询分销商名称
        this.form.distributorName = this.shopList.find(i => i.channelCompanyId == item)?.companyName || '';
    }
    async loadShop() {
        this.load = true;
        const res = await getDistributorOrder({ pageNum: 1, pageSize: 1000 }) 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;
    }
    setValue(v: any) {
    }
    getValue() {

    }

    btn() {
        if (this.form.channelCompanyId === null) {
            this.$message.error('请选择分销商');
            return;
        }
        if (this.form.modifiedBegin == '') {
            this.$message.error('请选择起始时间');
            return;
        }
        if (this.form.modifiedEnd == '') {
            this.$message.error('请选择结束时间');
            return;
        }
        //判断两个时间之间不能大于8天，并且开始时间不能大于结束时间
        const begin = new Date(this.form.modifiedBegin);
        const end = new Date(this.form.modifiedEnd);
        const diff = end.getTime() - begin.getTime();
        if (diff > 1 * 24 * 60 * 60 * 1000) {
            this.$message.error('时间范围不能大于1天');
            return;
        }
        if (begin.getTime() > end.getTime()) {
            this.$message.error('开始时间不能大于结束时间');
            return;
        }
        this.$confirm('确认同步订单吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let formData = (this as any).$lodash.cloneDeep(this.form);
            formData.channelCompanyId = Number(formData.channelCompanyId);
            syncDistributorOrder(formData).then(res => {
                this.$message.success('同步成功');
            }).catch((err) => {
                console.error(err);
            }).finally(() => {
                this.load = false;
                this.form = {
                    distributorName: '',
                    channelCompanyId: null as number | null,
                    modifiedBegin: '',
                    modifiedEnd: ''
                }
            })
        })
    }

}
</script>

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