<template>
    <div class="refundModel" style="position: relative; width: 900px; height: 500px;overflow: scroll;">
        <div style="display: flex;justify-content: flex-start;margin-bottom: 16px;">
            <Button type="fcdefault">确定</Button>
            <Button type="fcdefault" style="margin-left:8px">取消</Button>
        </div>
        <div>
            <div class="title">基本信息</div>
            <Form ref="baseMsg" :model="baseMsg" :label-width="100" style="width: 100%">
                    <Row>
                        <Col span="8">
                            <FormItem  label="原始订单编号：">
                                <Input v-model="baseMsg.originNum" @on-blur="searchOriginNum" @on-search="searchOriginNum">
                                    <Icon type="ios-search" slot="suffix" />
                                </Input>
                                <Modal v-model="modal1" mask title="提示">
                                    <div>原始订单编号有误，不属于系统订单，请重新输入！</div>
                                </Modal>
                                <Modal v-model="modal2" mask title="提示">
                                    <div>订单已作废，不能退款请重新输入！</div>
                                </Modal>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="退款类型：">
                                <Select v-model="baseMsg.refundType" @on-change="selectRefund">
                                    <Option v-for="item in refundTypeArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                                <Modal v-model="modal3" mask title="提示"
                                @on-ok="okAddRefund"
                                @on-cancel="cancelAddRefund"
                                >
                                    <div>该订单没有运费，是否继续新增退运费的仅退款单？</div>
                                </Modal>
                                <Modal v-model="modal5" mask title="提示"
                                @on-ok="okKeepAdd"
                                >
                                    <div>该订单已存在退运费的仅退款单，退款单编号是{{refundNum}}是否继续新增退运费的仅退款单</div>
                                </Modal>
                                <Modal v-model="modal4" mask title="提示">
                                    <div>订单已作废，不能退款请重新输入！</div>
                                </Modal>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="售后阶段：">
                                <Select v-model="baseMsg.AfterSalesStage">
                                    <Option v-for="item in AfterSalesStageArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="原始平台单号：">
                                <Input v-model="baseMsg.TID" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="平台退款单号：">
                                <Input v-model="baseMsg.platformRefundNum" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="店铺名称：">
                                <Select v-model="baseMsg.ORDERSHOPID">
                                    <Option v-for="item in shopNameArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="财务科目：">
                                <Select v-model="baseMsg.ORDERSHOPID">
                                    <Option v-for="item in shopNameArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>
            </Form>
        </div>
        <div>
            <div class="title">买家信息</div>
            <Form ref="buyerMsg" :model="buyerMsg" :label-width="100" style="width: 100%">
                    <Row>
                        <Col span="8">
                            <FormItem  label="买家昵称：">
                                <Input v-model="buyerMsg.USERNICK" >
                                </Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="收货人姓名：">
                                <Input v-model="buyerMsg.RECEIVNAME" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="收货人手机：">
                                <Input v-model="buyerMsg.RECEIVMOBILE" ></Input>
                            </FormItem>
                        </Col>
                    </Row>
            </Form>
        </div>
        <div>
            <div class="title">支付信息</div>
            <Form ref="payMsg" :model="payMsg" :label-width="100" style="width: 100%">
                    <Row>
                        <Col span="8">
                            <FormItem  label="收款人姓名：">
                                <Input v-model="payMsg.payName" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="收款人账号：">
                                <Input v-model="payMsg.payeeNum" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="支付方式：">
                                <Select v-model="payMsg.payType" @on-change="selectRefund">
                                    <Option v-for="item in refundTypeArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="支付账号：">
                                <Input v-model="payMsg.payNum" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="8" style="padding: 0 20px;">
                            <Button type="fcdefault" class="btn">伯俊天猫店支付宝11111</Button>
                            <Button type="fcdefault" class="btn">伯俊天猫店支付宝22222</Button>
                        </Col>
                    </Row>
            </Form>
        </div>
        <div>
            <div class="title">退款信息</div>
            <Form ref="refundMsg" :model="refundMsg" :label-width="100" style="width: 100%">
                    <Row>
                        <Col span="8">
                            <FormItem  label="退款原因：">
                                <Input v-model="refundMsg.reason" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="10">
                            <FormItem label="退款申请时间：">
                                <DatePicker type="date" placeholder="Select date" v-model="refundMsg.refundDate"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="24">
                            <FormItem label="退款说明：">
                                <Input v-model="refundMsg.refundExplain" ></Input>
                            </FormItem>
                        </Col>
                        <Col span="24">
                            <FormItem label="备注：">
                                <Input v-model="refundMsg.remark" ></Input>
                            </FormItem>
                        </Col>
                    </Row>
            </Form>
        </div>
        <Tabs type="card" class="refundDetailed">
            <TabPane label="仅退款单明细">
                <Form ref="baseMsg" :model="baseMsg" :label-width="100" style="width: 100%">
                    <Row>
                        <Col span="8">
                            <FormItem  label="条码">
                                <Input v-model="SKU" @on-blur="searchSKU" @on-search="searchSKU">
                                    <Icon type="ios-search" slot="suffix" />
                                </Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem  label="数量">
                                <InputNumber :max="10" :min="1" v-model="SKUNUM"></InputNumber>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Table :columns="columns1" :data="data1"></Table>
                <div class="pageContent" style="display:flex;justify-content: flex-end;">
                    <Page
                      size="small"
                      :current="currentPage"
                      show-elevator
                      :total="total"
                      show-total
                      show-sizer
                      @on-change="changePage"
                      @on-page-size-change="changeSize"
                    />
                  </div>
            </TabPane>
        </Tabs>
    </div>
</template>
<script>
    // import R3 from "@syman/burgeon-r3";
    const R3 = window.R3;
    const { network, urlSearchParams, store } = R3;
    export default{
        data() {
            return {
                // isOrigin:true, //判断是否搜索到原始编号
                invalidOrigin:'', //状态：系统作废
                SHIPAMOUNT:0,//运费为0
                refundNum:'',//modal5弹窗，仅退款
                modal1:false,
                modal2:false, //订单作废
                modal3:false,
                modal4:false,
                modal5:false,
                refundTypeArr:[
                    {
                        label: '退运费',
                        value: 'refundOfFreight'
                    },
                    {
                        label: '退差价',
                        value: 'refundDifference'
                    },
                    
                    {
                        label: '退商品',
                        value: 'refundGoods'
                    }
                ],
                AfterSalesStageArr:[
                    {
                        label: '仓库发货前退款',
                        value: 'beforeDelivery'
                    },
                    
                    {
                        label: '仓库发货后退款',
                        value: 'afterDelivery'
                    }
                ],
                shopNameArr:[],
                baseMsg:{
                    originNum:'', //原始订单编号
                    refundType:'refundDifference',//退款类型
                    AfterSalesStage:'',
                    TID:'',//原始平台单号
                    platformRefundNum:'',//平台退款单号
                    ORDERSHOPID:'',//店铺名称
                },
                buyerMsg:{
                    USERNICK:'', //买家昵称
                    RECEIVNAME:'', //收款人姓名
                    RECEIVMOBILE:'' //收款人手机号
                },
                payMsg:{
                    payName:'', //收款人姓名
                    payeeNum:'', //收款人账号
                    payType:'', //支付方式
                    payNum:'' //支付账号
                },
                refundMsg:{
                    reason:'',//退款原因
                    refundDate:'',//退款申请时间
                    refundExplain:'', //退款说明
                    remark:'' //备注
                },
                SKU:'',
                SKUNUM:0,//仅退款单明细
                columns1: [
                    {
                        title: '序号',
                        key: 'ID'
                    },
                    {
                        title: '商品名称',
                        key: 'PRODUCTNAME'
                    },
                    {
                        title: '条码',
                        key: 'SKU'
                    },
                    {
                        title: '国标码',
                        key: 'GBCODE'
                    },
                    {
                        title: '图片',
                        key: 'PICTUREURL'
                    },
                    {
                        title: '规格',
                        key: 'NORMSNAME'
                    },
                    {
                        title: '原单单件实际成交价',
                        key: 'TRUEPRICE'
                    },
                    {
                        title: '商品购买数量',
                        key: 'NUM'
                    },
                    {
                        title: '应退金额',
                        key: 'REFUNDTRUEPRICE'
                    },
                    {
                        title: '备注',
                        key: 'desc'
                    },
                ],
                data1:[],
                // page
                total: 0, // 总条数
                currentPage: 1, // 页码
                pageSize: 10, // 每页的条数
            }
        },
        mounted() {
        },
        methods: {
            // 页码改变时触发
            changePage(val) {
            this.currentPage = val;
            this.okKeepAdd();
            },
            // 页数改变时触发
            changeSize(val) {
            this.pageSize = val;
            this.currentPage = 1;
            this.okKeepAdd();
            },
            searchSKU(){
                console.log("搜索SKU")
            },
            searchOriginNum(){
                console.log("搜索原始编号")
                // var virtual={
                    if(!this.baseMsg.originNum){
                        this.$Message.warning('请输入原始订单编号');
                    }else{
                       var virtual={
                        table: "T_V_OMSONLINEORDER",
                        isdroplistsearch: true,
                        range: 1000,
                        startindex: 0,
                        fixedcolumns: {
                            omsid: this.baseMsg.originNum,
                        },
                       }
                       network.post("/p/cs/list/query", virtual).then((res) => {
                            console.log(res.data)
                            if(res.data.rows.length==0){// 不是系统订单编号
                                this.modal1=true
                                this.baseMsg.originNum=''
                            }else{
                                this.invalidOrigin=res.data.rows[0].ORDERSTATUS.val
                                if(this.invalidOrigin=='系统作废'){// 系统作废编号
                                    this.modal2=true
                                    this.baseMsg.originNum=''
                                }else{
                                    if(res.data.rows[0].ISMERGE.val==0){//非合单
                                        this.baseMsg.TID=res.data.rows[0].TID.val
                                    }else{//合单
                                        this.baseMsg.TID=res.data.rows[0].SOURCECODE.val
                                    }
                                    this.baseMsg.ORDERSHOPID=res.data.rows[0].ORDERSHOPID.val
                                    this.buyerMsg.USERNICK=res.data.rows[0].USERNICK.val
                                    this.buyerMsg.RECEIVNAME=res.data.rows[0].RECEIVNAME.val
                                    this.buyerMsg.RECEIVMOBILE=res.data.rows[0].RECEIVMOBILE.val
                                    this.SHIPAMOUNT=res.data.rows[0].SHIPAMOUNT.val//运费
                                }
                            }
                        })
                    }
                
            },
            // 选择退款类型
            selectRefund(value){
                console.log(this.baseMsg.refundType,value);
                // 选择退运费
                if(this.baseMsg.refundType=='refundOfFreight'){
                    // debugger
                    if(this.SHIPAMOUNT==0){
                        // 运费为0
                        this.modal3=true
                    }else{// 运费不为0
                        // 调接口
                        var virtual={
                        table: "T_V_OMSINCIDENTALSRECORD",
                        isdroplistsearch: true,
                        range: 1000,
                        startindex: 0,
                        fixedcolumns: {
                            ONLINEORDERID:this.baseMsg.originNum,
                            REFUNDTYPE:3,
                            VIRSTATUS:3
                        },
                       }
                       network.post("/p/cs/list/query", virtual).then((res) => {
                        console.log(res.data)
                        if(res.data.rows.length!=0){//有【退运费】类型的且非【取消】状态的仅退款单
                            this.refundNum=res.data.rows.map((obj)=>{return obj.ID.val+","}).join(",");

                            this.modal5=true
                        }else{
                            // 直接带出子表明细

                        }
                        
                       })
                       
                        // this.modal4=true
                    }
                }
            },
            okAddRefund(){
                console.log("继续新增退运费的仅退款单")
            },
            cancelAddRefund(){
                this.baseMsg.TID='',
                this.baseMsg.originNum=''
                this.baseMsg.refundType='refundDifference'
            },
            okKeepAdd(){
                let virtual = {
                    table: "T_OMSONLINEORDERPRODUCT",
                    objId: this.baseMsg.originNum,
                    isdroplistsearch: false,
                    range: this.pageSize,
                    startindex: this.currentPage,
                    fkdrplist: {
                    searchcols: "OMSONLINEORDERID",
                    },
                    fixedcolumns:{OMSONLINEORDERID:['='+this.baseMsg.originNum]}
                };
                network.post("/p/cs/list/query", virtual).then((res) => {
                    console.log(res.data)
                    this.total = res.data.total;
                    let data = [];
                    for (let i = 0; i < res.data.rows.length; i++) {
                    for (let j = 0; j < Object.keys(res.data.rows[i]).length; j++) {
                        let keyName = Object.keys(res.data.rows[i])[j];
                        res.data.rows[i][keyName] = res.data.rows[i][keyName].val;
                    }
                    data.push(res.data.rows[i]);
                    }
                    debugger
                    data.forEach(item=>{
                        item.REFUNDTRUEPRICE=this.SHIPAMOUNT
                    })
                    this.data1 = data;
                })
            },
        },
    }
</script>
<style lang="less" scoped>
    .refundDetailed /deep/ .ark-tabs-nav{
        line-height: 24px;
    }
    .refundModel /deep/ .ark-col{
        padding: 0 10px;
    }
    .title{
        font-size: 14px;
        line-height: 18px;
        height: 22px;
        border-bottom: 1px solid #000000;
    }
    .btn{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        width: 45%;
        padding: 7px 0;
    }
</style>