<template>
    <div class="edit-view">
        <el-form :model="formData" :rules="rules" ref="form" label-width="80px"
                 label-position="right" style="max-width: 500px;">
            <el-form-item prop="avatar" label="头像">
                <crop-upload v-model="formData.avatar"></crop-upload>
            </el-form-item>
            <el-form-item prop="username" label="用户名">
                <el-input v-model="formData.username"></el-input>
            </el-form-item>
            <el-form-item prop="nickname" label="昵称">
                <el-input v-model="formData.nickname"></el-input>
            </el-form-item>
            <!-- <el-form-item v-if="formData.id" label="密码">
                 <el-button type="primary" plain @click="resetPassword">重置
                 </el-button>
             </el-form-item>-->
            <!--    <el-form-item v-else prop="password" label="密码">
                    <el-input v-model="formData.password"></el-input>
                </el-form-item>-->
            <el-form-item prop="phone" label="手机">
                <el-input v-model="formData.phone"></el-input>
            </el-form-item>
            <!--            <el-form-item prop="authorities" label="角色">
                            <el-select v-model="formData.authorities" multiple
                                       placeholder="请选择" value-key="name">
                                <el-option v-for="item in authorities" :key="item.name"
                                           :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>-->
            <el-form-item>
                <!-- <el-button @click="onSave" :loading="$store.state.fetchingData"
                            type="primary">保存
                 </el-button>-->
                <!--             <el-button @click="del" :loading="$store.state.fetchingData"
                                      type="danger" v-if="formData.id">删除
                           </el-button>-->
                <el-button @click="moveRow"
                           type="danger" v-if="formData.id && !formData.blacklist">移入黑名单
                </el-button>
<!--                <el-button @click=""
                           type="danger" v-if="formData.id && formData.blacklist">移出黑名单
                </el-button>-->
                <el-button @click="showCoupon" :loading="$store.state.fetchingData"
                           type="primary" v-if="formData.id">发送优惠券
                </el-button>
                <el-button @click="showOrder" :loading="$store.state.fetchingData"
                           type="primary" 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-column label="操作" align="center" fixed="right">
                           <template slot-scope="{ row }">
                               <el-button @click="issue(row)">发放</el-button>
                           </template>
                       </el-table-column>-->
            </el-table>
            <div class="pagination-wrapper">
                <el-button @click="operation1">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog
                title="订单列表"
                center
                :visible.sync="dislogTableOrder"
        >
            <el-table :data="orders" ref="table">
                <el-table-column prop="merchant.showName" label="商家"></el-table-column>
                <el-table-column prop="riderId" label="骑手"></el-table-column>
                <el-table-column prop="realAmount" label="实付金额"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>
            <div class="pagination-wrapper">
<!--                <el-button @click="operation1">确定</el-button>-->
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        created() {
            if (this.$route.query.id) {
                this.$http
                    .get(`/user/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: {
                    avatar:
                        'https://zhumj.oss-cn-hangzhou.aliyuncs.com/image/user.jpg',
                    identity: 'USER',
                },
                rules: {
                    avatar: [
                        {
                            required: true,
                            regexp: /^[_.@A-Za-z0-9-]*$/,
                            message: '请上传头像',
                            trigger: 'blur',
                        },
                    ],
                    username: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                    ],
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                    ],
         /*           password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],*/
                    phone: [
                        {
                            regexp: /^1[3-9]\d{9}$/,
                            message: '请输入正确的手机号',
                            trigger: 'blur',
                        },
                    ],
                    /*                authorities: [
                                        { required: true, message: '请选择角色', trigger: 'blur' },
                                    ],*/
                },
                dislogTableCoupon: false,
                coupons: [],
                // authorities: [],
                dislogTableOrder: false,
                orders: [],

            };
        },
        computed: {
            selection() {
                return this.$refs.table.selection.map(i => i.id);
            }
        },
        methods: {
            onSave() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submit();
                    } else {
                        return false;
                    }
                });
            },
            submit() {
                this.$http
                    .post('/user/save', this.formData, {body: 'json'})
                    .then(res => {
                        this.$message.success('成功');
                        this.formData = res;
                        this.$router.replace({
                            query: {
                                id: res.id,
                            },
                        });
                    })
                    .catch(e => {
                        console.log(e);
                        this.$message.error(e.error);
                    });
            },
            del() {
                this.$confirm('确认删除吗？', '提示', {type: 'warning'})
                    .then(() => {
                        this.$http
                            .post({
                                url: '/userInfo/del',
                                data: {
                                    id: this.formData.id,
                                },
                            })
                            .then(res => {
                                if (res.success) {
                                    this.$message.success('成功');
                                    this.$router.go(-1);
                                } else {
                                    this.$message.warning('失败');
                                }
                            });
                    })
                    .catch(() => {
                    });
            },
            moveRow() {
                this.$prompt('请输入理由', '提示', {
                    inputType: 'textarea'
                })
                    .then(res => {
                        // console.log(res);
                        if (res.value) {
                            this.$alert('确定拉入黑名单？', '提示', {
                                showCancelButton: true
                            })
                                .then(() => {
                                    return this.$http.post('/blackList/move', {
                                        userId: this.formData.id,
                                        reason: res.value
                                    });
                                })
                                .then(res => {
                                    this.$message.success('拉入黑名单成功');
                                    this.$router.go(-1);
                                })
                                .catch(() => {
                                    this.$message.error(res.error || '拉入黑名单失败');
                                });
                        }
                    })
                    .catch(() => {
                    });
            },
            resetPassword() {
                this.$prompt('请输入新密码', '重置密码', {inputType: 'password'})
                    .then(res => {
                        // console.log(res);
                        if (res.value) {
                            this.$alert('确定重置密码？', '提示', {
                                showCancelButton: true
                            })
                                .then(() => {
                                    return this.$http.post('/user/setPasswordAdmin', {
                                        userId: this.formData.id,
                                        password: res.value
                                    });
                                })
                                .then(res => {
                                    this.$message.success('密码重置成功');
                                })
                                .catch(() => {
                                    this.$message.error(res.error || '重置密码失败');
                                });
                        }
                    })
                    .catch(() => {
                    });
            },

            issue(row) {
                this.$http
                    .post("/userCoupon/issue", {
                            userId: this.formData.id,
                            couponId: row.id,
                        },
                    )
                    .then(res => {
                        this.$message.success("发放成功");
                        this.showSetLogistics = false;
                        this.$router.go(0);
                    })
                    .catch(e => {
                        console.log(e);
                        this.$message.error(e.error || '发放失败');
                    });
            },
            operation1() {
                /*this.$notify({
                    title: '发放',
                    message: this.selection
                });*/
                this.$http
                    .post("/userCoupon/issue", {
                            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/all')
                    .then(res => {
                        this.coupons = res.content;
                        //console.log(this.coupons)
                    })
                    .catch(e => {
                        console.log(e);
                    });
            },
            showOrder() {
                this.dislogTableOrder = true;
                this.$http
                    .post('/orderInfo/list', {
                        id: this.formData.id,
                    })
                    .then(res => {
                        this.orders = res.content;
                        // console.log(this.orders)
                    })
                    .catch(e => {
                        console.log(e);
                    });
            }

        },
    };
</script>
<style lang="less" scoped>
</style>
