<template>
    <div class="edit-view">
        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
                 style="max-width: 500px;">
            <el-form-item prop="orderId" label="订单ID">
                <el-input-number type="number" v-model="formData.orderId"></el-input-number>
            </el-form-item>
            <el-form-item prop="target" label="投诉目标">
                <el-select v-model="formData.target" clearable filterable placeholder="请选择">
                    <el-option disabled
                               v-for="item in targetOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="type" label="投诉类型">
                <el-input v-model="formData.type" readonly></el-input>
            </el-form-item>
            <el-form-item prop="img" label="图片">
                <!--<multi-upload v-model="formData.img"></multi-upload>-->
                <!-- <el-image style="width: 30px; height: 30px"
                           :src="picList(formData.img)[0]" fit="cover"
                           :preview-src-list="picList(row.img)?picList(row.img):[]"></el-image>-->

                <el-image v-for="item in picList(formData.img)" style="width: 80px; height: 80px; padding-right: 10px"
                          :key="item" :src="item" fit="cover" :preview-src-list="[item]"
                ></el-image>
            </el-form-item>
            <el-form-item prop="content" label="内容">
                <el-input type="textarea" v-model="formData.content" readonly></el-input>
            </el-form-item>
            <el-form-item prop="resolve" label="是否解决">
                <el-switch v-model="formData.resolve"></el-switch>
            </el-form-item>
            <el-form-item prop="time" label="投诉时间">
                <!--     <el-date-picker
                             v-model="formData.time"
                             type="datetime"
                             value-format="yyyy-MM-dd HH:mm:ss"
                             placeholder="选择日期时间">
                     </el-date-picker>-->
                <el-input v-model="formData.time" readonly></el-input>
            </el-form-item>
            <el-form-item prop="solution" label="解决方式">
                <el-select v-model="formData.solution" clearable filterable placeholder="请选择">
                    <el-option
                            v-for="item in solutionOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-button class="left" type="warning" v-if="formData.solution==='ISSUE_COUPONS'" size="mini"
                           @click="showCoupon">发放优惠券
                </el-button>
                <el-button class="left" type="warning" v-if="formData.solution==='REFUND'" size="mini"
                           @click="dislogForm=true">退款
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSave" :loading="saving"
                           type="primary">保存
                </el-button>
                <el-button @click="onDelete" :loading="saving"
                           type="danger" v-if="formData.id">删除
                </el-button>

                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>

        <el-dialog
                title="优惠券列表"
                center
                :visible.sync="dislogTableCoupon"
        >
            <el-table :data="coupons" ref="table">
                <el-table-column align="center" type="selection"
                                 width="50">
                </el-table-column>
                <el-table-column prop="name" label="优惠券名称"></el-table-column>
                <el-table-column prop="amount" label="金额"></el-table-column>
                <el-table-column prop="fullAmount" label="限制"></el-table-column>
                <el-table-column prop="endDate" label="结束时间"></el-table-column>
            </el-table>
            <div class="pagination-wrapper">
                <el-button @click="operation1">确定</el-button>
            </div>
        </el-dialog>


        <el-dialog
                title="退款"
                center
                :visible.sync="dislogForm"
                width="400px"
        >
            <el-form>
                <el-form-item label="商家责任">
                    <el-input-number type="number" v-model="merchantLiability"
                                     :min='0' :step="0.01" :max="1"></el-input-number>
                </el-form-item>
                <el-form-item label="骑手责任">
                    <el-input-number type="number" v-model="riderLiability"
                                     :min='0' :step="0.01" :max="1"></el-input-number>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="remark" type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onRefundApply">确定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>
</template>
<script>
    export default {
        name: 'ComplaintEdit',
        created() {
            if (this.$route.query.id) {
                this.$http
                    .get('complaint/get/' + this.$route.query.id)
                    .then(res => {
                        this.formData = res;
                    })
                    .catch(e => {
                        console.log(e);
                        this.$message.error(e.error);
                    });
            }
        },
        data() {
            return {
                saving: false,
                formData: {},
                rules: {},
                targetOptions: [{"label": "商家", "value": "MERCHANT"}, {"label": "骑手", "value": "RIDER"}],
                solutionOptions: [{"label": "线下沟通", "value": "OFFLINE"}, {
                    "label": "退款",
                    "value": "REFUND"
                }, {"label": "发放优惠券", "value": "ISSUE_COUPONS"}],
                dislogTableCoupon: false,
                dislogForm: false,
                coupons: [],
                merchantLiability: '',
                riderLiability: '',
                remark: '',

            }
        },
        methods: {
            picList(row) {
                if (row) {
                    return row.split(",");
                } else {
                    return "";
                }
            },
            onSave() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.submit();
                    } else {
                        return false;
                    }
                });
            },
            submit() {
                let data = {...this.formData};

                this.saving = true;
                data.img = data.img.join(',');
                this.$http
                    .post('/complaint/save', data, {body: 'json'})
                    .then(res => {
                        this.saving = false;
                        this.$message.success('成功');
                        this.$router.go(-1);
                    })
                    .catch(e => {
                        console.log(e);
                        this.saving = false;
                        this.$message.error(e.error);
                    });
            },
            onDelete() {
                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
                    return this.$http.post(`/complaint/del/${this.formData.id}`)
                }).then(() => {
                    this.$message.success('删除成功');
                    this.$router.go(-1);
                }).catch(e => {
                    if (e !== 'cancel') {
                        console.log(e);
                        this.$message.error(e.error);
                    }
                })
            },
            operation1() {
                /*this.$notify({
                    title: '发放',
                    message: this.selection
                });*/
                this.$http
                    .post("/complaint/issue", {
                            id: this.id,
                            userId: this.formData.id,
                            couponId: this.selection.toString(),

                        },
                    )
                    .then(res => {
                        this.$message.success("发放成功");
                        //this.showSetLogistics = false;
                        this.$router.go(0);
                    })
                    .catch(e => {
                        console.log(e);
                        this.$message.error(e.error || '发放失败');
                    });
            },
            showCoupon() {
                this.dislogTableCoupon = true;
                this.$http
                    .get('/coupon/platform')
                    .then(res => {
                        this.coupons = res.content;
                        //console.log(this.coupons)
                    })
                    .catch(e => {
                        console.log(e);
                    });
            },
            onRefundApply() {
                if (this.merchantLiability + this.riderLiability > 1) {
                }
                this.$http
                    .get('/complaint/refund', {
                        id: this.formData.id,
                        merchantLiability: this.merchantLiability,
                        riderLiability: this.riderLiability,
                        remark: this.remark

                    })
                    .then(res => {
                        this.formData.resolve = true;
                        this.$message.success("退款成功");
                        this.$router.go(0);
                    })
                    .catch(e => {
                        console.log(e);
                        this.$message.error(e.error || '退款失败');
                    });

            }
        }
    }
</script>
<style lang="less" scoped>
    .left {
        margin: 0 0 0 10px;
    }
</style>
