<template>
    <el-drawer :title="titleMap[mode]" :append-to-body="true" v-model="visible" :size="800" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')" :with-header="false">
        <el-container class="flex-column" v-loading="loading">  
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{ titleMap[mode] }} <span class="tips">{{ formData.truename }}</span></div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-main>
                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <el-form-item label="门店名称" prop="truename">
                                <el-input v-model="formData.truename" clearable placeholder="请输入门店名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="店长名称" prop="store_mch">
                                <el-input v-model="formData.store_mch" clearable placeholder="请输入店长名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="门店类型" prop="store_type">
                                <el-select v-model="formData.store_type" placeholder="请选择门店类型">
                                    <el-option label="洗护实体店" :value="1"></el-option>
                                    <el-option label="洗护代收店" :value="2"></el-option>
                                    <el-option label="洗护美团店" :value="3"></el-option>
                                    <el-option label="洗护抖音店" :value="4"></el-option>
                                    <el-option label="商城自提店" :value="5"></el-option>
                                    <el-option label="洗护口碑店" :value="6"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="洗衣能力" prop="wash_type">
                                <el-radio-group v-model="formData.wash_type">
                                    <el-radio border :label="1">门店自洗</el-radio>
                                    <el-radio border :label="2">洗衣地址</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="门店地址" prop="store_address">
                                <el-input v-model="formData.store_address" clearable placeholder="请输入门店地址"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="营业执照" prop="license">
                                <sc-upload accept="image/gif,image/jpeg,image/jpg,image/png" v-model="formData.license" title="大小不超过10M"></sc-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="门店状态" prop="store_status">
                                <el-radio-group v-model="formData.store_status">
                                    <el-radio :label="1">已启用</el-radio>
                                    <el-radio :label="2">已失效</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="独立财务" prop="store_order">
                                <el-radio-group v-model="formData.store_order">
                                    <el-radio :label="1">关闭</el-radio>
                                    <el-radio :label="2">开启</el-radio>
                                </el-radio-group>
                                <div class="el-form-item-msg">温馨提示：开启独立财务后，该门店将实施单独扣费，费用不足时无法发送短信等功能</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="短信收费" prop="store_sms" v-if="formData.store_order==2">
                                <el-input v-model="formData.store_sms" clearable placeholder="请输入短信费用">
                                    <template #append>元/条</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="快递加价" prop="store_express" v-if="formData.store_order==2">
                                <el-input v-model="formData.store_express" clearable placeholder="请输入快递溢价">
                                    <template #append>元/次</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="网单收费加价（短信、快递加价失效）" prop="store_inter_order" v-if="formData.store_order==2">
                                <el-input v-model="formData.store_inter_order" clearable placeholder="请输入网单收费">
                                    <template #append>元/单</template>
                                </el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-main>
            <el-footer style="text-align: right;">
			    <el-button @click="visible=false" >取 消</el-button>
                <el-button type="primary" :loading="isSaveing" @click="submit(stepActive)">保存</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>
<script>
export default {
    
    data(){
        return {
            isSaveing:false,
            loading: false,
            mode:"add",
            visible: false,
            titleMap:{
                add:"新增门店",
                edit:"编辑门店"
            },
            stepActive:1,
            formData:{},
            disabled:false,
            rules:{
                store_order: [
                    {required: true, message: '请选择'}
                ],
                store_status: [
                    {required: true, message: '请选择'}
                ],
                wash_type: [
                    {required: true, message: '请选择'}
                ],
                truename: [
                    {required: true, message: '请输入门店名称'}
                ],
                store_mch: [
                    {required: true, message: '请输入店长名称'}
                ],
                store_type: [
                    {required: true, message: '请选择门店类型'}
                ],
                store_address: [
                    {required: true, message: '请输入门店地址'}
                ],
                license: [
                    {required: true, message: "请上传营业执照"}
                ],
            },
        }
    },
    methods: {
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = data;
            console.log(data)
        },
        async submit(){
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            
        }
    }
}
</script>