<style lang="less">
    .upload-list {
        display: inline-block;
        height: 60px;
    }
    .admin-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .admin-upload-list img{
        width: 100%;
        height: 100%;
    }
    .admin-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .admin-upload-list:hover .admin-upload-list-cover{
        display: block;
    }
    .admin-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>

<template>
    <div>
        <Row>
            <Col>
                <Card>
                    <Form :label-width="110">
                        <FormItem label="父分类">
                            <Select v-model="form.pname">
                                <Option v-for="item in pList" :value="item.name" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="分类名称">
                            <Input v-model="form.name"/>
                        </FormItem>
                        <!-- <FormItem label="服务标题">
                            <Input v-model="form.server" />
                        </FormItem> -->
                        <FormItem label="描述信息">
                            <Input v-model="form.info" />
                        </FormItem>
                        <FormItem label="服务介绍">
                            <Input v-model="form.summary" />
                        </FormItem>
                        <FormItem label="提交项">
                            <Input v-model="form.fields_json" type="textarea" :rows="10" placeholder="请输入表单提交项" />
                        </FormItem>
                        <FormItem label="服务详情">
                            <editor :editor-content="form.content"></editor>
                        </FormItem>
                         <FormItem label="服务图片">
                             <!-- <img :src="form.photo" style="width:100%;max-width:750px;" v-if="form.photo" class="upload-img"> -->
                             <Upload
                                ref="upload"
                                type="drag"
                                multiple
                                :show-upload-list="false"
                                :on-success="handleSuccess" 
                                style="display: inline-block;width:58px;"
                                :action='$domain + "/upload"'>
                                <div style="width: 58px;height:58px;line-height: 58px;">
                                    <Icon type="camera" size="20"></Icon>
                                </div>
                            </Upload>
                            <div class="upload-list">
                                <div class="admin-upload-list" v-for="(url, index) in uploadList" :key="url">
                                    <img :src="url">
                                    <div class="admin-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(url)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                                    </div>
                                </div>
                            </div>
                            <Modal title="查看图片" v-model="isPreview">
                                <img :src="imgUrl" v-if="isPreview" style="width: 100%">
                            </Modal>
                        </FormItem>
                         <FormItem label="是否显示轮播">
                             <Select v-model="form.location" style="width: 150px">
                                <Option value="top">是</Option>
                                <Option value="">否</Option>
                            </Select>
                        </FormItem> 
                    </Form>
                    <div class="submit">
                        <Button @click="handlePublish" :loading="publishLoading" icon="ios-checkmark" size="large" type="primary">发布</Button>
                        <Button @click="cancelEdit" style="margin-left:10px;" size="large" type="default">取消</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,
        parentList: Array
    },
    watch: {
        formContent() {
            if (!this.formContent.location) {
                this.formContent.location = '';
            }
            this.form = this.formContent;
            
            let photo = this.form.photo;
            let arr = [];
            if (photo) {
                let list = this.form.photo.split(";");
                list.forEach((url) => {
                    arr.push(url);
                });
            }
            this.uploadList = arr;
        },
        parentList() {
            this.pList = this.parentList;
        }
    },
    data () {
        return {
            form: this.formContent,
            publishLoading: false,
            pList: this.parentList,
            isPreview: false,
            imgUrl: "",
            uploadList: []
        };
    },
    methods: {
        cancelEdit() {
            this.$emit("pub-cancel");
        },
        handlePublish() {
            // return console.warn(this.form, this.pList);
            const form = this.form;
            if (form.name && form.pname) {
                this.publishLoading = true;
                let content = tinymce.activeEditor.getContent();
                for (let p of this.pList) {
                    if (p.name === form.pname) {
                        form.pid = p.id;
                    }
                }
                let data = {
                    pid: form.pid,
                    name: form.name,
                    info: form.info,
                    summary: form.summary,
                    // server: form.server,
                    server: 'server',
                    content,
                    photo: this.uploadList.join(";"),
                    location: form.location || 'bottom',
                    fields_json: form.fields_json
                };
                if (this.form.id) {
                    data.id = this.form.id;
                }
                this.axios.post("/classify/store", data).then((res) => {
                    this.publishLoading = false;
                    if (res.data.status == 0) {
                        this.$Message.success('操作成功！');
                        setTimeout(() => {
                            this.$emit("pub-success");
                        }, 1000);
                    } else {
                        this.$Message.warning(res.data.message);
                    }
                });
            } else {
                this.$Message.error('请完善所有信息！');
                this.publishLoading = false;
            }
        },
        handleSuccess (res, file) {
            if (res.status == 0) {
                this.uploadList.push(res.location);
            }
        },
        handleView (url) {
            this.imgUrl = url;
            this.isPreview = true;
        },
        handleRemove (index) {
            this.uploadList.splice(index, 1);
        },
    }
};
</script>
