<template>
    <div>
        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">

            <el-form-item prop="storeId" label="店铺">
                <template>
                    <el-select v-model="formData.storeId" clearable filterable placeholder="请选择" :disabled="'storeId'==subColumn">
                        <el-option v-for="item in storeInfos" :key="item.id" :label="item.storeName" :value="item.id">
                        </el-option>
                    </el-select>
                </template>

            </el-form-item>
            <el-form-item prop="typeFlag" label="类型">
                <template>
                    <el-select v-model="formData.typeFlag" clearable placeholder="请选择">
                        <el-option v-for="item in typeFlagOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item prop="serviceType" label="服务大类">
                <el-select v-model="formData.serviceType" filterable placeholder="请选择" size="small">
                    <el-option v-for="item in serviceTypes" :key="item.id" :label="item.shortName" :value="item.id">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="subclass" label="服务小类">
                <el-select v-model="formData.subclass" filterable placeholder="请选择" size="small">
                    <el-option v-for="item in serviceTypeDetails[formData.serviceType]" :key="item.id" :label="item.typeName" :value="item.id">
                    </el-option>
                </el-select>

            </el-form-item>

            <el-form-item prop="title" label="标题">
                <el-input v-model="formData.title" :disabled="'title'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="image" label="主图">
                <single-upload v-model="formData.image" :disabled="'image'==subColumn"></single-upload>
            </el-form-item>
            <el-form-item prop="serviceDetail" label="服务详情">
                <el-input type="textarea" v-model="formData.serviceDetail" :disabled="'serviceDetail'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="inventory" label="库存">
                <el-input v-model="formData.inventory" :disabled="'inventory'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="默认价格">
                <el-input v-model="formData.price"></el-input>
            </el-form-item>
            <el-form-item prop="onShelf" label="上下架">
                <el-switch v-model="formData.onShelf" active-color="#13ce66" inactive-color="#ff4949" :disabled="'onShelf'==subColumn">
                </el-switch>
            </el-form-item>
            <el-form-item prop="useFlag" label="可用">
                <el-switch v-model="formData.useFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'useFlag'==subColumn">
                </el-switch>
            </el-form-item>
            <el-form-item prop="hotFlag" label="热门">
                <el-switch v-model="formData.hotFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'hotFlag'==subColumn">
                </el-switch>
            </el-form-item>
            <el-form-item prop="homeFlag" label="首页">
                <el-switch v-model="formData.homeFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'homeFlag'==subColumn">
                </el-switch>
            </el-form-item>
            <el-form-item prop="rank" label="排序">
                <el-input v-model="formData.rank" :disabled="'rank'==subColumn"></el-input>
            </el-form-item>

            <el-form-item prop="salesVolume" label="销量">
                <el-input v-model="formData.salesVolume" :disabled="'salesVolume'==subColumn"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
                <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
                <el-button @click="$router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import formValidator from '../formValidator'

export default {
    created() {
        if (this.$route.query.column) {
            this.subColumn = this.$route.query.column.split(',')[1];
            this.subValue = this.$route.query.column.split(',')[0];
        }

        if (this.$route.query.id) {
            this.$http.get({
                url: '/productInfo/getOne',
                data: {
                    id: this.$route.query.id
                }
            }).then(res => {
                if (res.success) {


                    this.formData = res.data;

                    if (this.formData.serviceType) {

                        this.formData.serviceType = Number(this.formData.serviceType);
                    }
                    if (this.formData.subclass) {
                        this.formData.subclass = Number(this.formData.subclass);
                    }

                    this.formData.hotFlag = this.formData.hotFlag == 1 ? true : false;
                    this.formData.homeFlag = this.formData.homeFlag == 1 ? true : false;
                    this.formData.useFlag = this.formData.useFlag == 'Y' ? true : false;
                    this.formData.onShelf = this.formData.onShelf == 'Y' ? true : false;


                    if (this.$route.query.column) {
                        this.formData[this.subColumn] = this.subValue;
                    }
                }
            })
        } else {
            if (this.$route.query.column) {
                this.formData[this.subColumn] = this.subValue;
            }
        }


        this.$http.get({
            url: '/storeInfo/all'
        }).then(res => {
            if (res.success) {
                this.storeInfos = res.data;

            }
        });


        this.$http.get({
            url: '/serviceType/all'
        }).then(res => {
            if (res.success) {
                this.serviceTypes = res.data;

                this.serviceTypes.forEach(element => {

                    this.serviceTypeDetails[element.id] = element.serviceTypeDetailList

                });
            }
        });

    },
    data() {
        return {
            saving: false,
            formData: {
                typeFlag: 0,
                rank: 0,
                responseTime: 0,
                reworkRate: 0,
                useFlag: true,
                serviceType: 1,
                onShelf: false,
                storeId:'',
            },
            rules: {
            },
            subColumn: '',
            subValue: '',
            serviceTypes: [],
            serviceTypeDetails: {},
            typeFlagOptions: [{ label: '修图', value: 0 }, { label: '实体商品', value: 1 }],
            storeInfos:[],
        }
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            var data = JSON.parse(JSON.stringify(this.formData));

            data.hotFlag = this.formData.hotFlag ? 1 : 0;
            data.homeFlag = this.formData.homeFlag ? 1 : 0;
            data.useFlag = this.formData.useFlag ? 'Y' : 'N';
            data.onShelf = this.formData.onShelf ? 'Y' : 'N';

            this.$http.post({
                url: this.formData.id ? '/productInfo/update' : '/productInfo/save',
                data: data
            }).then(res => {
                if (res.success) {
                    this.$message.success('成功');
                    this.$router.go(-1);
                } else {
                    this.$message.warning('失败')
                }
            });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
                return this.$http.post({
                    url: '/productInfo/del',
                    data: { id: this.formData.id }
                })
            }).then(() => {
                this.$message.success('删除成功');
                this.$router.go(-1);
            }).catch(action => {
                if (action === 'cancel') {
                    this.$message.info('删除取消');
                } else {
                    this.$message.error('删除失败');
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
</style>
