<template>
    <el-drawer v-model="visible" size="800px" destroy-on-close :close-on-click-modal="false" :with-header="false">
        <el-container class="flex-column">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{titleMap[mode]}}</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>
                <div class="mb10" v-if="formData.status && formData.status == 2">
                    <el-alert title="驳回原因" :description="formData.remark" :show-icon="false" type="error"></el-alert>
                </div>
                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                    <fieldset>
                        <legend><el-button>商户主体信息</el-button></legend>
                        <el-form-item label="企业名称" prop="company_name">
                            <el-input v-model="formData.company_name" clearable placeholder="请输入"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-form-item label="企业简称" prop="company_sub_name">
                            <el-input v-model="formData.company_sub_name" clearable placeholder="请输入"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-form-item label="统一社会信用码" prop="company_number">
                            <el-input v-model="formData.company_number" clearable placeholder="请输入"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-form-item label="营业执照" prop="company_license">
                            <sc-upload v-model="formData.company_license" title="营业执照"></sc-upload>
                            <div class="el-form-item-msg">营业执照原件或加盖公章的副本复印件</div>
                        </el-form-item>
                    </fieldset>
                    <fieldset>
                        <legend><el-button>经营地址</el-button></legend>
                        <el-form-item label="所在省市区" prop="city" v-loading="cityLoad">
                            <el-cascader ref="cascaderRef" v-model="formData.city" :options="cityData" :props="deptsProps" @change="getTemplate" clearable style="width: 100%;" />
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="address">
                            <el-input v-model="formData.address" clearable placeholder="无需再填省市区"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                    </fieldset>
                    <fieldset>
                        <legend><el-button>商户法人信息</el-button></legend>
                        <el-form-item label="法人姓名" prop="legal_name">
                            <el-input v-model="formData.legal_name" clearable placeholder="请输入"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-form-item label="法人手机号" prop="legal_mobile">
                            <el-input v-model="formData.legal_mobile" clearable placeholder="请输入"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-form-item label="法人证件号" prop="legal_idcard">
                            <el-input v-model="formData.legal_idcard" clearable placeholder="请输入"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-form-item label="联系人邮箱" prop="email">
                            <el-input v-model="formData.email" clearable placeholder="请输入"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-row :gutter="15">
                            <el-col :span="12">
                                <el-form-item label="法人证件照正面" prop="legal_id_front">
                                    <sc-upload v-model="formData.legal_id_front" title="法人证件照正面"></sc-upload>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="法人证件照反面" prop="legal_id_back">
                                    <sc-upload v-model="formData.legal_id_back" title="法人证件照反面"></sc-upload>
                                    <div class="el-form-item-msg"></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </fieldset>
                    <fieldset>
                        <legend><el-button>结算账户信息</el-button></legend>
                        <el-form-item label="企业银行卡号" prop="bank_number">
                            <el-input v-model="formData.bank_number" clearable placeholder="请输入"></el-input>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                        <el-form-item label="企业开户行编码" prop="bank_code">
                            <el-select v-model="formData.bank_code" clearable filterable remote remote-show-suffix :remote-method="remoteMethod" :loading="codeLoad" style="width: 100%;" placeholder="请选择">
                                <el-option
                                    v-for="item in codeData"
                                    :key="item.bank_code"
                                    :label="item.name"
                                    :value="item.bank_code"
                                >
                                    <span style="float: left">{{ item.name }}</span>
                                    <span
                                        style="
                                        float: right;
                                        color: var(--el-text-color-secondary);
                                        font-size: 13px;
                                        "
                                    >
                                        {{ item.bank_code }}
                                    </span>
                                </el-option>
                            </el-select>
                            <div class="el-form-item-msg">如：输入中国银行，根据下拉选择</div>
                        </el-form-item>
                        <el-form-item label="开户许可证照片" prop="bank_img">
                            <sc-upload v-model="formData.bank_img" title="开户许可证照片"></sc-upload>
                            <div class="el-form-item-msg"></div>
                        </el-form-item>
                    </fieldset>
                </el-form>
            </el-main>
            <el-footer>
                <el-button @click="visible=false" size="large">取 消</el-button>
                <el-button size="large" type="primary" :loading="isSaveing" @click="submitEdit()">提 交</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>

<script>
export default {
    data(){
        return {
            loading: false,
            isSaveing: false,
            mode:"add",
            titleMap:{
                add:"新增进件管理",
                edit:"进件管理"
            },
            visible:false,
            formData:{},
            deptsProps:{
                value: "value",
                label: "text"
            },
            cityData:[],
            cityLoad:false,
            codeLoad:false,
            codeData:[],
            rules:{
                company_name: [
                    {required: true, message: '请输入'}
                ],
                company_number: [
                    {required: true, message: '请输入'}
                ],
                company_sub_name: [
                    {required: true, message: '请输入'}
                ],
                company_license: [
                    {required: true, message: '请上传'}
                ],
                city: [
                    {required: true, message: '请选择'}
                ],
                address: [
                    {required: true, message: '请输入'}
                ],
                legal_name: [
                    {required: true, message: '请输入'}
                ],
                legal_mobile: [
                    {required: true, message: '请输入'}
                ],
                legal_idcard: [
                    {required: true, message: '请输入'}
                ],
                legal_id_front: [
                    {required: true, message: '请上传'}
                ],
                legal_id_back: [
                    {required: true, message: '请上传'}
                ],
                email: [
                    {required: true, message: '请输入'}
                ],
                bank_number: [
                    {required: true, message: '请输入'}
                ],
                bank_code: [
                    {required: true, message: '请输入'}
                ],
                bank_img: [
                    {required: true, message: '请上传'}
                ]
            }
        }
    },
    methods: {
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            this.getCity()
            return this
        },
        async remoteMethod(data){
            this.codeLoad = true;
            var resp = await this.$API.finance.code.get({name:data})
            this.codeLoad = false;
            if (resp.code == 0) return ;
            this.codeData = resp.data;
        },
        async getCity(){
            this.cityLoad = true;
            var resp = await this.$API.finance.city.get();
            this.cityLoad = false;
            if (resp.code == 0) return this.$message.error(resp.msg)
            this.cityData = resp.data;
        },
        getTemplate(v){
            const nodes = this.$refs.cascaderRef.getCheckedNodes()
            this.formData.city_name = nodes[0].text;
        },
        //表单注入数据
        setData(data){
            this.formData = JSON.parse(JSON.stringify(data));
            this.formData.city = data.city_code;
        },
        async submitEdit(){
            var { formData, $message } = this;
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            this.isSaveing = true;
            var resp = await this.$API.finance.save.post(formData);
            this.isSaveing = false;
            if (resp.code == 0) {
                return $message.error(resp.msg)
            }
            $message.success(resp.msg)
            this.visible = false;
            this.formData = {};
            this.$emit("success");
        }
    }
}
</script>

<style>
.mb10{margin-bottom: 10px;}
</style>