<template>
    <view class="container">
        <form @submit="onSubmit">
            <block v-if="orderdetail.base_order_status.status">
                <view class="form-item">
                    <view class="input-block flex box-pack-between">
                        <label class="label">状态</label>
                        <view class="content">
                            {{getStatusName(orderdetail.base_order_status.status)}}
                        </view>
                    </view>
                </view>
                <view class="form-item" v-if="orderdetail.base_order_status.status == 'REJECT'">
                    <view class="input-block flex box-pack-between">
                        <label class="label">驳回原因</label>
                        <view class="content">
                            <rich-text :nodes="orderdetail.base_order_status.reject_reason"></rich-text>
                        </view>
                    </view>
                </view>
            </block>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">服务描述</label>
                    <view class="content flex-grow-1 ">
                        <textarea v-model="info.descprise" name="descprise"  placeholder="请输入"
                            placeholder-style="font-size:28rpx;line-height:1.5" disable-default-padding
                            style="padding-top:7rpx ;" class="input-box" />
                    </view>
                </view>
                <view class="tips">字数限制1～256个字</view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">关键词 </label>
                    <view class="content flex-grow-1 ">
                        <textarea v-model="info.key_words" name="key_words" placeholder="请输入" disable-default-padding
                            style="padding-top:7rpx ;" class="input-box" />
                    </view>
                </view>
                <view class="tips">提报关键词列表，例如：111,222,333</view>
            </view>
            <button class="sub-btn"  form-type="submit"
                v-if="!orderdetail.base_order_status.status || ['AGREE','REJECT','CANCEL'].includes(orderdetail.base_order_status.status)">
                立即提交</button>
        </form>
        <view class="is-iphone-x"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                admin_id: '',
                info: {},
                orderdetail: {
                    base_order_status: {
                        status: ""
                    }
                },
                baseUrl: getApp().globalData.URL
            }
        },
        onLoad() {
            this.admin_id = uni.getStorageSync('admin_id')
            this.getInfo()
        },
        methods: {
            getInfo() {
                this.request({
                    url: 'alipaycoupon/search_index',
                    data: {
                        admin_id: this.admin_id
                    }
                }).then(res => {
                    if (res.code == 200) {
                        console.log(res)
                        this.info = res.data.info
                        this.orderdetail = res.data.orderdetail

                    }
                })
            },

            getStatusName(status) {
                let name = ""
                switch (status) {
                    case "AUDIT":
                        name = "审核中"
                        break;
                    case "AGREE":
                        name = "审核成功"
                        break;
                    case "REJECT":
                        name = "审核驳回"
                        break;
                    case "CANCEL":
                        name = "撤销"
                        break;
                    case "EDIT":
                        name = "编辑中"
                        break;
                }
                console.log(status, name)
                return name
            },
            onLeimuChange(e) {
                this.info.category_id = this.leimuList[e.detail.value].code
                this.getCategoryName(this.leimuList[e.detail.value].code)
            },

            onChangeTime(e, name) {
                this.info[name] = e.detail.value
            },
            onSubmit(e) {
				let {key_words,descprise} = e.detail.value;
                let params = {
                    admin_id: this.admin_id,
                    descprise,
                    key_words,
                    id: this.info ? this.info.id : '',
                }

                this.request({
                    url: 'alipaycoupon/search_edit',
                    data: params
                }).then(res => {
                    if (res.code == 200) {
                        uni.showModal({
                            content: "提交成功",
                            showCancel: false,
                            success: (r) => {
                                this.getInfo()
                            }
                        })
                    } else {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        })
                    }
                }).catch(res => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                })

            }
        }
    }
</script>
<style>
    page {
        background-color: #f4f5f6;
    }
</style>
<style lang="scss" scoped>
    @import url("@/static/css/flex.css");


    .container {

        background-color: #f4f5f6
    }

    .desc-info {
        padding: 20rpx;
        font-size: 26rpx;
        line-height: 1.5;
    }

    .desc-info-img {
        display: block;
        width: 100%;
    }

    .text-align-right {
        text-align: right;
    }

    .form-item {
        padding: 20rpx 20rpx;
        font-size: 28rpx;
        line-height: 1.5;
        margin-bottom: 20rpx;
        background: #fff;
        word-break: break-all;

        .input-block {}

        .label {
            flex: none;
            display: block;
            font-size: 28rpx;
            line-height: 1.5;
            padding-right: 30rpx;

        }

        .content {}

        .input-box {
            width: 100%;
            font-size: 28rpx;
            line-height: 1.5;

        }

        .tips {
            font-size: 24rpx;
            color: #f00;
            line-height: 1.5;
            border-top: 1rpx solid #f2f2f2;
            margin-top: 20rpx;
            padding-top: 15rpx;
        }

        .image-bg {
            background-color: #f4f5f6;
        }

        .image-block {
            overflow: hidden;
            border-radius: 12rpx;
            position: relative;

            .form-img {
                display: block;
                width: 100%;
                height: 100%;
            }

            .form-img-add-btn {
                display: block;
                width: 100rpx;
                height: 100rpx;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);

            }
        }
    }

    .sub-btn {
        width: 700rpx;
        height: 100rpx;
        background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
        border-radius: 8rpx;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
        text-align: center;
        line-height: 100rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: #fff;
        margin: 0 auto;
    }
</style>
