<template>
    <el-form :model="formData" :rules="rules" ref="storeInfo" label-width="100px" label-position="right" style="max-width: 600px;">
        <el-form-item prop="storeName" label="店铺名称">
            <el-input maxlength="30" v-model="formData.storeName" style="width:320px;" :disabled="'storeName'==subColumn" placeholder="中英文、数字或字符（30字以内）"></el-input>
        </el-form-item>

        <!-- <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" style="width:109px;" @change="formData.subclass=[]">
                <el-option v-for="item in serviceTypes" :key="item.id" :label="item.shortName" :value="item.id">
                </el-option>
            </el-select>

            <span style="font-size:12px;color:rgba(3,147,202,1);margin-left:10px;">注：前期我们为您免费提供1T储存空间，超出请联系客服申请哦</span>

        </el-form-item>

        <el-form-item prop="subclass" label="服务小类">
            <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="description" label="店铺简介">
            <el-input type="textarea" :rows="2" v-model="formData.description" maxlength="30" style="width:320px;" :disabled="'description'==subColumn" placeholder="请输入店铺简介（30字以内）"></el-input>
        </el-form-item>
        <el-form-item prop="icon" label="店铺头像">
            <single-upload-title v-model="formData.icon" :width='200' :height='125' :title="'添加头像'" :disabled="'icon'==subColumn"></single-upload-title>
            <div style="font-size:12px;color:rgba(153,153,153,1);">注：格式jpg/jpeg/png，大小不超过10M，建议尺寸360*280</div>
        </el-form-item>
        <el-form-item prop="address" label="经营地址">
            <el-cascader :options="cityData" placeholder="省/市/区" :props='{value:"name",label:"name"}' v-model="formData.address">
            </el-cascader>
        </el-form-item>
        <el-form-item prop="addressDetail" label="">
            <el-input v-model="formData.addressDetail" placeholder="详细地址" :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>

            <el-button v-if="nowStyle=='商家店铺'" @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
            <el-button v-else @click="onSave" style='width:320px;' :loading="$store.state.fetchingData" type="primary">下一步</el-button>

        </el-form-item>
    </el-form>
</template>
<script>
import formValidator from '../formValidator'
import { mapState } from 'vuex'
import cityData from '../city'
export default {
    props: {
        typeFlag: {
            type: Number,
            default: 0
        },
        nowStyle: {
            type: String,
            default: ''
        }
    },
    created() {

        this.$http.get({
            url: '/creditRating/all'
        }).then(res => {
            if (res.success) {
                this.creditList = res.data;
            }
        });
        this.formData.typeFlag = this.typeFlag
        this.formData.userId = this.userInfo.id
        this.formData.userName = this.userInfo.nickname
        this.formData.address = []
        this.formData.subclass = []
        this.formData.useFlag = 'N'
        if (this.$route.query.column) {
            this.subColumn = this.$route.query.column.split(',')[1];
            this.subValue = this.$route.query.column.split(',')[0];
        }

        this.$http.get({
            url: '/storeInfo/getOne',
            data: {
                userId: this.userInfo.id
            }
        }).then(res => {
            if (res.success) {
                if (res.data) {
                    res.data.address = []
                    res.data.address.push(res.data.province)
                    res.data.address.push(res.data.citye)
                    res.data.address.push(res.data.district)
                    var subclass = res.data.subclass.split(',')
                    res.data.subclass = []
                    subclass.forEach(item => {
                        if (item) {
                            res.data.subclass.push(Number(item))
                        }

                    })
                    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;
                    }
                }


            }
        })
        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

                });
            }
        });


    },
    data() {
        return {
            cityData,
            saving: false,
            formData: {
                credit: 'A',
                typeFlag: 0,
                rank: 0,
                responseTime: 0,
                reworkRate: 0,
                serviceType: 1,
                storelabel: [],
                address: [],
                subclass: []
            },
            city: [],
            rules: {
                storeName: [
                    { required: true, message: '请填写店铺名称', trigger: 'blur' },
                ],
                serviceType: [
                    { required: true, message: '请选择服务类型', trigger: 'blur' },
                ],
                description: [
                    { required: true, message: '请填写店铺简介', trigger: 'blur' },
                ],
                icon: [
                    { required: true, message: '请上传店铺头像', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请选择经营地址', trigger: 'blur' },
                ],
                addressDetail: [
                    { required: true, message: '请填写详细地址', trigger: 'blur' },
                ],
                bankCard: [
                    { required: true, message: '请填写银行卡账户', trigger: 'blur' },
                ],
                bankName: [
                    { required: true, message: '请填写开户行', trigger: 'blur' },
                ],
                openName: [
                    { required: true, message: '请填写开户名称', trigger: 'blur' },
                ]
            },
            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: []
        }
    },
    computed: {
        ...mapState(['userInfo']),
    },
    methods: {
        onSave() {
            this.$refs.storeInfo.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.province = this.formData.address[0]
            data.citye = this.formData.address[1]
            data.district = this.formData.address[2]
            data.subclass = data.subclass.toString()

            if (!data.credit) {
                data.credit = this.creditList[0].credit
            }

            this.$http.post({
                url: this.formData.id ? '/storeInfo/update' : '/storeInfo/save',
                data: data
            }).then(res => {
                if (res.success) {
                    this.$message.success('成功');
                    if (this.nowStyle == '商家店铺') {


                        this.$http.get({
                            url: '/storeInfo/getOne',
                            data: {
                                userId: this.userInfo.id
                            }
                        }).then(res => {
                            if (res.success) {
                                this.$store.commit('updateStoreInfo', res.data);


                            }
                        })
                    }
                    else {
                        this.$emit('nextStep')
                    }

                } 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>
