<template>
    <div class="edit-view">
        <el-tabs class="my-tabs" v-model="active">
            <el-tab-pane label="基本信息" name="first">
                <PackageEdit @next="goNext" />
            </el-tab-pane>
            <el-tab-pane label="详细信息" name="second">
                <PackageEdit2 @next="goNext" />
            </el-tab-pane>
            <el-tab-pane label="分享信息" name="third">
                <PackageEdit3 />
            </el-tab-pane>
            <!-- <el-tab-pane label="套餐内容" :disabled="!id" name="second">
                <PackageGoodsTable ref="setGoodsList" />
            </el-tab-pane> -->
        </el-tabs>
        <!-- <el-form
            :model="formData"
            ref="form"
            label-width="120px"
            label-position="right"
            size="small"
            style="max-width: 800px;"
        >
            <el-form-item>
                <el-button @click="onSave" :loading="saving" type="primary" v-if="$route.query.id">保存</el-button>
                <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除 </el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form> -->
    </div>
</template>
<script>
import PackageEdit from '../components/PackageEdit';
import PackageEdit2 from '../components/PackageEdit2';
import PackageEdit3 from '../components/PackageEdit3';
// import PackageGoodsTable from '../components/PackageGoodsTable';

export default {
    name: 'PackageMain',
    created() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id;
            this.$http
                .get('package/get/' + this.$route.query.id)
                .then(res => {
                    this.formData = res;
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
            this.$http.get('/stock/byPackageId', { packageId: this.$route.query.id }).then(res => {
                this.stockList = res;
            });
        }
    },
    data() {
        return {
            active: 'first',
            id: 0,
            formData: {},
            stockList: [],
            saving: false
        };
    },
    // mounted() {
    //     this.updateType();
    // },
    methods: {
        goNext(page) {
            this.active = page;
        },
        updateType() {
            let type = this.$route.query.type;
            //通过拿到的值不同，更改activeName的值
            if (type === '1') {
                this.active = 'first';
            } else if (type === '2') {
                this.active = 'second';
            }
        },
        // 切换tab时再根据标签名的不同将url中的参数值改掉
        handleClick(tab) {
            let queryType;
            if (tab.name === 'first') {
                queryType = 1;
            } else if (tab.name === 'second') {
                queryType = 2;
            }
            //将新的值和url放在一起拼成一个完整的路径
            this.$router.push({
                path: '/packageEdit',
                query: {
                    id: this.id,
                    type: queryType || 1
                }
            });
        },
        onSave() {
            // this.$refs.form.validate(valid => {
            //     if (valid) {
            //         this.submit();
            //     } else {
            //         return false;
            //     }
            // });
            Promise.all(this.$refs.subform.map(i => i.validate())).then(() => {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submit();
                    } else {
                        return false;
                    }
                });
            });
        },
        submit() {
            let data = { ...this.formData };
            this.saving = true;
            if (!this.formData.detail && !this.formData.workflow) {
                this.$alert('详细信息未填，确认保存吗？', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${action}`
                        });
                    }
                });
            }
            if (!this.formData.poster && !this.formData.smallPoster && !this.formData.share) {
                this.$alert('分享内容未填，确认保存吗？', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${action}`
                        });
                    }
                });
            }
            this.$http
                .post('/package/save', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    // this.$message.success('成功');
                    this.packageId = res.id;
                    this.$nextTick(() => {
                        this.$http.post('/stock/batchSave', {
                            stocks: this.saveOtherJson
                        });
                        this.$message.success('成功');
                        this.$router.go(-1);
                    });
                    this.$emit('next', 'second');
                    this.$router.replace({
                        name: 'PackageEdit',
                        query: {
                            id: res.id,
                            attractionsId: res.attractionsId
                        }
                    });
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/package/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);
                    }
                });
        }
    },
    components: {
        // PackageGoodsTable,
        PackageEdit,
        PackageEdit2,
        PackageEdit3
    },
    watch: {
        // id() {
        //     if (this.id) {
        //         this.$refs.setGoodsList.getList(this.id);
        //     }
        // },
        $route() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id;
            }
        }
    }
};
</script>
<style lang="less" scoped></style>
