<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="typeFlag" label="类型">
                <template>
                    <el-select v-model="formData.typeFlag" clearable placeholder="请选择" :disabled="'typeFlag'==subColumn">
                        <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="服务小类" v-if="formData.serviceType">
                <el-select v-model="formData.subclass" multiple 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="userId" label="用户ID">
                <el-input v-model="formData.userId" :disabled="'userId'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="userName" label="用户">
                <el-input v-model="formData.userName" :disabled="'userName'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="storeName" label="店铺名称">
                <el-input v-model="formData.storeName" :disabled="'storeName'==subColumn"></el-input>
            </el-form-item>

            <el-form-item prop="description" label="描述">
                <el-input v-model="formData.description" :disabled="'description'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="icon" label="头像">
                <single-upload v-model="formData.icon" :disabled="'icon'==subColumn"></single-upload>
            </el-form-item>
            <el-form-item prop="province" label="省">
                <el-input v-model="formData.province" :disabled="'province'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="citye" label="市">
                <el-input v-model="formData.citye" :disabled="'citye'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="district" label="区">
                <el-input v-model="formData.district" :disabled="'district'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="addressDetail" label="详细地址">
                <el-input v-model="formData.addressDetail" :disabled="'addressDetail'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="bankCard" label="银行卡号">
                <el-input v-model="formData.bankCard" :disabled="'bankCard'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="bankName" label="开户行">
                <el-input v-model="formData.bankName" :disabled="'bankName'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="openName" label="开户人">
                <el-input v-model="formData.openName" :disabled="'openName'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="credit" label="信誉等级">
                <template>
                    <el-select v-model="formData.credit" clearable placeholder="请选择" :disabled="'credit'==subColumn">
                        <el-option v-for="item in creditList" :key="item.credit" :label="item.credit" :value="item.credit">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item prop="storelabel" label="店铺标签">
                <template>
                    <el-select v-model="formData.storelabel" multiple allow-create placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in storeLabels" :key="item.labelName" :label="item.labelName" :value="item.labelName">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item prop="rank" label="排序">
                <el-input type="number" v-model="formData.rank" :disabled="'rank'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="responseTime" label="响应时间">
                <el-input type="number" v-model="formData.responseTime" :disabled="'responseTime'==subColumn"></el-input>
            </el-form-item>
            <el-form-item prop="reworkRate" label="返片率">
                <el-input type="number" v-model="formData.reworkRate" :disabled="'reworkRate'==subColumn"></el-input>
            </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="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>
                <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: '/storeInfo/getOne',
                data: {
                    id: this.$route.query.id
                }
            }).then(res => {
                if (res.success) {

                    res.data.storelabel = res.data.storelabel ? res.data.storelabel.split(',').map(i => String(i)) : [];
                    res.data.subclass = res.data.subclass ? res.data.subclass.split(',').map(i => Number(i)) : [];
                    this.formData = res.data;
                    if (this.formData.serviceType) {

                        this.formData.serviceType = Number(this.formData.serviceType);
                    }
                    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;

                    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: '/storeLabel/all'
        }).then(res => {
            if (res.success) {
                this.storeLabels = 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

                });
            }
        });

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


    },
    data() {
        return {
            saving: false,
            formData: {
                credit: 'A',
                typeFlag: 0,
                rank: 0,
                responseTime: 0,
                reworkRate: 0,
                useFlag: true,
                serviceType: 1,
                storelabel: [],
                subclass: [],
            },
            rules: {
            },
            creditOptions: [{ label: 'A', value: 'A' }, { label: 'B', value: 'B' }, { label: 'C', value: 'C' }, { label: 'D', value: 'D' }, { label: 'E', value: 'E' }],
            typeFlagOptions: [{ label: '官方', value: 0 }, { label: '企业', value: 1 }, { label: '个人', value: 2 }],
            subColumn: '',
            subValue: '',
            serviceTypes: [],
            serviceTypeDetails: {},
            storeLabels: [],
            creditList:[]
        }
    },
    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';

            this.$http.post({
                url: this.formData.id ? '/storeInfo/update' : '/storeInfo/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: '/storeInfo/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>
