<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{backgroundColor: '#ffcb57'}"
                :border-bottom="false"
                title="申请退款"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <u-card :show-head="false" margin="30rpx 30rpx 15rpx 30rpx" :body-style="{padding: 0}">
                <view slot="body">
                    <u-cell-group :border="false">
                        <u-cell-item
                            required
                            title="选择原因"
                            :value="displayReason"
                            @click="chooseReason"
                        ></u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <u-card :show-head="false" margin="0 30rpx 15rpx 30rpx" :body-style="{padding: 0}">
                <view slot="body">
                    <u-cell-group :border="false">
                        <u-cell-item title="具体描述" :arrow="false">
                            <u-input
                                type="text"
                                v-model="desc"
                                height="48"
                                input-align="right"
                                placeholder="请输入具体的说明"
                                :clearable="false"
                            />
                        </u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <u-card title="上传凭证" margin="0 30rpx 15rpx 30rpx" :body-style="{padding: 0}">
                <view slot="body">
                    <u-upload
                        :action="action"
                        :header="uploadHeaders"
                        :max-count="3"
                        @on-uploaded="onUploaded"
                        name="file"
                        width="190"
                    ></u-upload>
                </view>
            </u-card>
            <view class="mc-btn">
                <u-button
                    :custom-style="{margin: '16rpx 32rpx',backgroundColor: '#ffcb57',color: '#472d21'}"
                    hover-class="defaultBtnhover"
                    @click="placeOrder"
                >提交</u-button>
            </view>
        </view>
        <u-picker
            mode="selector"
            v-model="showReason"
            :range="reasons"
            range-key="label"
            @confirm="changeReason"
            confirm-color="#ffcb57"
        ></u-picker>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../common/service';
export default {
    data() {
        return {
            action: 'https://www.jtfw8.com/WXXCX/api/UploadAttachments',
            uploadHeaders: {
                'content-type': 'form-data',
                appid: 'wx08df2ca62f3e1766',
                token: uni.getStorageSync('token'),
            },
            showReason: false,
            reasons: [
                {
                    value: '001',
                    label: '技术不专业',
                },
                {
                    value: '002',
                    label: '态度不友好',
                },
                {
                    value: '003',
                    label: '未按时完成任务',
                },
            ],
            reason: null,
            fileList: [],
            desc: '',
        };
    },
    onLoad() {
        console.log(this.currentOrder);
    },
    computed: {
        ...mapGetters({
            currentOrder: 'order/currentOrder',
        }),
        displayReason() {
            if (!this.reason) {
                return '请选择换师傅原因';
            }
            return `${this.reason.label}`;
        },
    },
    methods: {
        onUploaded(lists) {
            this.fileList = lists.map((item) => item.response.result);
        },
        changeReason(e) {
            this.reason = this.reasons[e[0]];
        },
        chooseReason() {
            this.showReason = true;
        },
        placeOrder() {
            const _t = this;
            const { reason } = this;
            if (!reason) {
                this.$refs.uToast.show({
                    title: '请完善信息后再提交！',
                });
                return;
            }
            const attachObj = {};
            for (let index = 0; index < this.fileList.length; index++) {
                const fileitem = this.fileList[index];
                attachObj[`FRefundPZ${index}`] = fileitem.fileid;
            }
            request
                .post('/api/Order/save', {
                    Model: {
                        FID: this.currentOrder.Id, //订单内码
                        FStatus: 'TKZ', //订单状态:待预约，传固定值：DYY
                        FRefundReason: this.reason.label, //退款原因
                        FRefundAmount: this.currentOrder.FSFAmount, //退款金额
                        FRefundDesc: this.desc, //退款
                        ...attachObj,
                    },
                })
                .then((res) => {
                    const { code, message, result } = res;
                    if (code === 0) {
                        const { IsSuccess } = result.Result.ResponseStatus;
                        if (IsSuccess) {
                            _t.$refs.uToast.show({
                                title: '提交成功！',
                                isTab: true,
                                url: '/pages/orders/index',
                            });
                        }
                    } else {
                        _t.$refs.uToast.show({
                            title: message,
                        });
                    }
                });
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .wmBd {
            display: flex;
            align-items: flex-start;
            .right {
                padding-left: 24rpx;
                .hdline {
                    margin-bottom: 24rpx;
                    .name {
                        margin-right: 12rpx;
                        font-size: 30rpx;
                        color: #262626;
                    }
                }
                .line {
                    margin-top: 12rpx;
                    .smtitle {
                        font-size: 24rpx;
                        color: #8c8c8c;
                    }
                    .smContent {
                        font-size: 24rpx;
                        color: #595959;
                    }
                }
            }
        }
        .wmFt {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                .amount {
                    font-size: 36rpx;
                    color: #ffcb57;
                }
            }
        }
    }
}
</style>
