<template>
    <div class="edit-view">
        <page-title>
            <el-button @click="$router.go(-1)" :disabled="saving">取消</el-button>
            <!-- <el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id"> 删除 </el-button> -->
            <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
        </page-title>
        <div class="edit-view__content-wrapper">
            <div class="edit-view__content-section">
                <el-form
                    :model="formData"
                    :rules="rules"
                    ref="form"
                    label-width="125px"
                    label-position="right"
                    size="small"
                    style="max-width: 750px"
                >
                    <el-form-item prop="reason" label="拒绝理由" v-if="formData.reason && formData.status != 'SUCCESS'">
                        <el-input
                            type="textarea"
                            v-model="formData.reason"
                            :rows="3"
                            style="width: 500px"
                            disabled
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="userId" label="用户ID">
                        <el-input-number
                            type="number"
                            v-model="formData.userId"
                            style="width: 200px"
                            disabled
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item prop="nickname" label="昵称">
                        <el-input v-model="formData.nickname" style="width: 280px" disabled></el-input>
                    </el-form-item>
                    <el-form-item prop="maxCollection" label="最多可放藏品数量">
                        <el-input-number
                            type="number"
                            v-model="formData.maxCollection"
                            style="width: 280px"
                            disabled
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item prop="pic" label="logo">
                        <single-upload v-model="formData.pic"></single-upload>
                    </el-form-item>
                    <el-form-item prop="introduction" label="简介">
                        <el-input type="textarea" :rows="4" v-model="formData.introduction"></el-input>
                    </el-form-item>

                    <el-form-item prop="settingId" label="模版">
                        <el-select v-model="formData.settingId" style="width: 280px" @change="changeBg">
                            <el-option
                                v-for="item in settings"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="headBg" label="背景" v-if="formData.settingId">
                        <el-image :src="formData.headBg" style="height: 170px"></el-image>
                        <el-image :src="formData.showroomBg" style="height: 170px"></el-image>
                    </el-form-item>
                    <el-form-item prop="collections" label="藏品">
                        <el-table :data="formData.collections">
                            <el-table-column type="index" label="#"></el-table-column>
                            <el-table-column prop="collectionId" label="ID" width="110"></el-table-column>
                            <el-table-column prop="pic" label="图" width="110">
                                <template slot-scope="{ row }">
                                    <el-image style="width: 30px; height: 30px" :src="row.pic" fit="cover"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="名称"></el-table-column>
                            <el-table-column width="80" align="center">
                                <template v-slot="{ $index }">
                                    <el-link type="danger" plain @click="delCollection($index)" size="mini">
                                        删除
                                    </el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button @click="addCollection" size="mini">添加</el-button>
                    </el-form-item>
                    <!-- <el-form-item prop="publish" label="发布" v-if="formData.status == 'SUCCESS'">
                        <el-radio v-model="formData.publish" :label="true">是</el-radio>
                        <el-radio v-model="formData.publish" :label="false">否</el-radio>
                    </el-form-item> -->

                    <el-form-item class="form-submit">
                        <el-button @click="onSave" :loading="saving" type="primary"> 保存 </el-button>
                        <!-- <el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id">
                            删除
                        </el-button> -->
                        <el-button @click="$router.go(-1)" :disabled="saving">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-dialog title="添加藏品" :visible.sync="showCollectionDialog" width="500px">
                <div style="margin-bottom: 10px">如果找到没有藏品，请先查看藏品是否审核通过</div>
                <el-form :model="{ collectionId }" ref="collectionForm" inline>
                    <el-form-item prop="collectionId" :rules="{ required: true, message: '请选择藏品' }">
                        <!-- <el-select v-model="collectionId" style="width: 350px">
                            <el-option
                                v-for="item in collections"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select> -->
                        <el-select v-model="collectionId" filterable>
                            <el-option v-for="item in collections" :label="item.name" :value="item.id" :key="item.id">
                                <span style="float: left">{{ item.name }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">#{{ item.id }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="showCollectionDialog = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="saveCollection">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';

export default {
    name: 'ShowroomEdit',
    created() {
        if (this.$route.query.id) {
            this.$http
                .get('showroom/get/' + this.$route.query.id)
                .then(res => {
                    this.formData = res;
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
        this.$http
            .post('/setting/byFlag', { flag: 2 })
            .then(res => {
                this.settings = res;
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
        this.$http
            .post(
                '/collection/all',
                {
                    sort: 'sort,desc;createdAt,desc',
                    query: { del: false, ownerId: this.userInfo.id }
                },
                { body: 'json' }
            )
            .then(res => {
                this.collections = res.content;
            });
    },
    data() {
        return {
            saving: false,
            formData: {
                showCollections: []
            },
            rules: {},
            statusOptions: [
                { label: '未审核', value: 'NOT_AUTH' },
                { label: '审核中', value: 'PENDING' },
                { label: '已审核', value: 'SUCCESS' },
                { label: '失败', value: 'FAIL' }
            ],
            settings: [],
            collections: [],
            showCollectionDialog: false,
            collectionId: ''
        };
    },
    computed: {
        ...mapState(['userInfo'])
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$confirm('提交后将重新审核，确认提交吗', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            this.submit();
                        })
                        .catch(() => {});
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.formData };
            data.status = 'PENDING';

            this.saving = true;
            this.$http
                .post('/showroom/update', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
        onDelete() {
            this.$confirm('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/showroom/del/${this.formData.id}`);
                })
                .then(() => {
                    this.$message.success('删除成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    if (e !== 'cancel') {
                        console.log(e);
                        this.$message.error((e || {}).error || '删除失败');
                    }
                });
        },
        changeBg(res) {
            let data = this.settings.find(item => {
                return item.id === res;
            });
            this.formData.headBg = data.pic;
            this.formData.showroomBg = data.description;
        },
        addCollection() {
            this.showCollectionDialog = true;
            if (this.$refs.collectionForm) {
                this.$nextTick(() => {
                    this.$refs.collectionForm.clearValidate();
                });
            }
        },
        delCollection(index) {
            this.formData.collections.splice(index, 1);
        },
        saveCollection(res) {
            this.$refs.collectionForm
                .validate()
                .then(() => {
                    if (!this.formData.collections.find(i => i.collectionId === this.collectionId)) {
                        let data = this.collections.find(i => i.id === this.collectionId);
                        if (data.pic[0].type == 'video/mp4') {
                            this.formData.collections.push({
                                showroomId: this.formData.id,
                                collectionId: data.id,
                                pic: data.pic[0].thumb,
                                name: data.name
                            });
                        } else {
                            this.formData.collections.push({
                                showroomId: this.formData.id,
                                collectionId: data.id,
                                pic: data.pic[0].url,
                                name: data.name
                            });
                        }
                        this.showCollectionDialog = false;
                    } else {
                        this.$message.error('请勿重复添加');
                    }
                })
                .catch(() => {});
        }
    }
};
</script>
<style lang="less" scoped>
/deep/.el-input.is-disabled .el-input__inner {
    color: #7c7e7e;
}
/deep/.el-textarea.is-disabled .el-textarea__inner {
    color: #7c7e7e;
}
</style>