<style lang="less">

</style>

<template>
    <div>
        <Row>
            <Col span="18">
                <Card>
                    <Form :label-width="80">
                        <FormItem label="产品名称">
                            <Input v-model="form.name" icon="android-list"/>
                        </FormItem>
                        <FormItem label="产品颜色">
                            <Input v-model="form.color" icon="android-list"/>
                        </FormItem>
                        <FormItem label="产品价格">
                            <Input v-model="form.price" icon="android-list"/>
                        </FormItem>
                        <FormItem label="产品分类">
                            <Select v-model="form.classify">
                                <Option v-for="classify in classifys" :value="classify.classify" :key="classify.id">{{classify.classify}}</Option>
                            </Select>
                            <!-- <Input v-model="form.classify" icon="android-list"/> -->
                        </FormItem>
                        <FormItem label="产品状态">
                            <Select v-model="form.status" style="width: 150px">
                                <Option :value="0">上架</Option>
                                <Option :value="1">下架</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="产品图片">
                            <img :src="form.photo" style="width:100%;max-width:750px;" v-if="form.photo" class="upload-img">
                            <Upload :headers="uploadHeader" :on-success="handleSuccess" :action='$domain + "/upload"'>
                                <Button icon="ios-cloud-upload-outline">上传图片</Button>
                            </Upload>
                        </FormItem>
                        <FormItem label="产品信息">
                            <editor :editor-content="form.info"></editor>
                        </FormItem>
                    </Form>
                    <div class="submit">
                        <Button @click="handlePublish" :loading="publishLoading" icon="ios-checkmark" size="large" type="primary">发布</Button>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import tinymce from 'tinymce';
import editor from '../main-components/editor'
export default {
    name: 'edit',
    components: {
        editor
    },
    props: {
        formContent: Object
    },
    watch: {
        formContent() {
            if (!this.formContent.status) {
                this.formContent.status = 0;
            }
            this.form = this.formContent;
        }
    },
    data () {
        return {
            form: this.formContent,
            publishLoading: false,
            classifys: [],
            uploadHeader: {}
        };
    },
    methods: {
        handlePublish() {
            if (true) {
                this.publishLoading = true;
                let info = tinymce.activeEditor.getContent();
                let data = {
                    name: this.form.name,
                    info: info,
                    color: this.form.color || 'hao se',
                    photo: this.form.photo,
                    price: parseFloat(this.form.price),
                    classify: this.form.classify,
                    status: this.form.status
                };
                if (this.form.id) {
                    data.id = this.form.id;
                }
                this.axios.post("/product/store", data).then((res) => {
                    if (res.data.status == 0) {
                        this.$Message.success('操作成功！');
                        this.publishLoading = false;
                        setTimeout(() => {
                            this.$emit("pub-success");
                        }, 1000);
                    }
                });
            } else {
                this.$Message.error('请完善所有信息！');
                this.publishLoading = false;
            }
        },
        handleSuccess(res) {
            if (res.status == 0) {
                this.$set(this.form, "photo", res.location);
            }
        },
        getData() {
            this.axios.get("/product_classify")
                .then((res) => {
                    this.classifys = res.data.data;
                });
        }
    },
    mounted() {
        this.getData();
    }
};
</script>
