<template>
    <app-layout title="投诉">
        <view class="common-form-container">
            <view class="input-item">
                <view class="title-box">
                    <text>标题</text>
                </view>
                <view class="input-box">
                    <input class="input" v-model="title" placeholder="请输入标题" placeholder-class="placeholder-style-3" />
                </view>
            </view>
            <view class="textarea-item">
                <view class="title-box">
                    <text>内容</text>
                </view>
                <view class="textarea-box">
                    <textarea
                        v-model="content"
                        class="textarea"
                        placeholder="请输入投诉内容"
                        placeholder-class="placeholder-style-3"
                    />
                </view>
            </view>
            <view class="upload-item">
                <view v-if="image" class="image-box" @click="chooseImage">
                    <image class="image" :src="image" mode="aspectFill" />
                </view>
                <view v-else class="image-box upload" @click="chooseImage">
                    <text class="iconfont icon-shangchuantupian"></text>
                    <text class="text">上传图片</text>
                </view>
            </view>
        </view>
        <view class="common-save-form-btn">
            <view class="btn" @click="submit">提交</view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
export default {
    name: "member-omplaint",
    data() {
        return {
            title: "",
            image: "",
            content: "",
        };
    },
    components: {
        AppLayout,
    },
    onLoad() {},
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        /**
         * 上传图片
         */
        chooseImage() {
            this.$utils.chooseImage(1).then((tempFiles) => {
                this.$models.system.upload(tempFiles[0].path).then((response) => {
                    this.image = response.img;
                });
            });
        },
        /**
         * 提交
         */
        submit() {
            this.$models.system
                .submitComplaint({
                    title: this.title,
                    imgs: this.image,
                    desc: this.content,
                })
                .then((response) => {
                    console.log(response);
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.common-form-container {
    z-index: 10;
    position: relative;
    .title-box {
        font-weight: normal;
    }
    .upload-item {
        padding-bottom: 30rpx;
    }
}
</style>