<template>
    <div v-loading="loading" class="merchant-info">
        <el-alert v-if="isAuditing" title="正在审批中" type="warning" :closable="false" center/>
        <el-alert v-if="isRejected" :title="`审核未通过，请重新填写信息（未通过原因：${form.examineReason}）`" type="error" :closable="false" center/>
        <el-divider content-position="left">{{isMerchant? '店铺': '个人'}}信息</el-divider>
        <Form ref="form" v-model="form">
            <Input v-if="isMerchant" label="店铺名称" prop="merchantName" required :disabled="isAuditing"/>
            <Input v-if="isMerchant" label="店铺地址" prop="detail" :maxlength="100" required :disabled="isAuditing"/>
            <Input v-if="isMerchant" label="门牌号" prop="houseNumber" :maxlength="100" :disabled="isAuditing"/>
            <Input v-if="isMerchant" label="客服电话" prop="serverPhone" validate="phone" required :disabled="isAuditing"/>
            <Input v-if="isMerchant && isPassed" label="店龄" prop="storeAge" required/>
            <br/>
            <Form v-model="form.user">
                <Input :label="isMerchant? '联系人': '姓名'" prop="nickName" required disabled/>
                <Input :label="isMerchant? '联系电话（账号）': '手机号'" prop="phonenumber" validate="phone" disabled/>
            </Form>
            <Images v-if="isMerchant && isPassed" label="店铺LOGO" prop="avatar" required/>
            <Input v-if="isMerchant && isPassed" label="店铺简介" prop="merchantDesc" type="textarea" :maxlength="100"/>
            <el-form-item v-if="isMerchant && isPassed" style="width: 100%; text-align:center">
                <el-button type="primary" @click="handleSave">保存</el-button>
            </el-form-item>
        </Form>

        <el-divider v-if="isMerchant" content-position="left">资质信息</el-divider>
        <Form v-model="form.info" :disabled="!isRejected">
            <Input v-if="isMerchant" label="营业执照号" prop="businessNum"/>
            <Input label="法人身份证号" prop="legalPersonNo" validate="idCard"/>
            <br/>
            <Images v-if="isMerchant" label="营业执照" prop="businessImg"/>
            <Images :label="`${isMerchant?'法定代表':''}手持身份证（正面）`" prop="legalPersonFrontImg"/>
            <Images v-if="isMerchant" label="许可证" prop="businessLicenseImg"/>
            <Images :label="`${isMerchant?'法定代表':''}手持身份证（反面）`" prop="legalPersonBackImg"/>
        </Form>


        <el-divider content-position="left">收款信息</el-divider>
        <Form v-model="form.bank" :disabled="!isRejected">
            <Input label="户名" prop="userName"/>
            <Input label="账号" prop="bankAccount"/>
            <Input label="开户银行" prop="bankBranchName"/>
            <Input label="开户行卡联行号" prop="bankBranchCode"/>
        </Form>

        <Form v-model="form" disabled>
            <Input label="业务经理" prop="promoter" validate="phone"/>
        </Form>

        <div v-if="isRejected" style="width: 100%; text-align:center">
            <el-button type="primary" @click="handleSettled">提交</el-button>
        </div>
    </div>
</template>

<script>
import {settledModify, merchantModify, detail} from '@/api/merchant/merchant'

export default {
    name: "merchant",
    props: {
        merchantId: {
            type: Number,
            required: true
        }
    },
    data(){
        return {
            loading: false,
            form: {
                info: {},
                bank: {},
                user: {}
            }
        }
    },
    computed: {
        isMerchant() {
            return this.form.merchantType === 0
        },
        isAuditing() {
            return this.form.shopState === '001'
        },
        isPassed() {
            return this.form.shopState === '002'
        },
        isRejected() {
            return this.form.shopState === '003'
        }
    },
    created() {
        this.getDetail()
    },
    watch: {
        merchatId() {
            this.getDetail()
        }
    },
    methods: {
        async getDetail(){
            if (!this.merchantId) {
                return
            }
            this.loading = true
            const {code, data} = await detail(this.merchantId)
            this.loading = false
            if (code === 200) {
                this.form = data
            }
        },
        async handleSave(){
            const {code} = await merchantModify(this.form)
            if (code === 200) {
                this.$message.success('保存成功')
                this.getDetail()
            }
        },
        async handleSettled(){
            const {code} = await settledModify(this.form)
            if (code === 200) {
                this.$message.success('提交成功')
                this.getDetail()
            }
        }
    }
};
</script>

<style>
.merchant-info .detail-form.el-form--inline .el-form-item {
  width: calc(50% - 10px);
}
.merchant-info  .detail-form.el-form--inline .el-form-item__content{
  width: calc(100% - 140px);;
}
</style>