<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 v-if="!onlyArea" content-position="left">{{isMerchant? '店铺': '个人'}}信息</el-divider>
        <Form ref="form" v-model="form">
            <template v-if="!onlyArea">
                <template v-if="isMerchant">
                    <Input label="店铺名称" prop="merchantName" required :disabled="isAuditing"/>
                    <Input label="店铺地址" prop="detail" :maxlength="100" disabled/>
                    <Form v-model="form.user" style="display: inline">
                        <Input label="联系人" prop="nickName" required :disabled="isAuditing"/>
                    </Form>
                    <Input label="门牌号" prop="houseNumber" :maxlength="100" :disabled="isAuditing"/>
                    <Form v-model="form.user" style="display: inline">
                        <Input label="联系电话（账号）" prop="phonenumber" validate="phone" disabled/>
                    </Form>
                    <Cell label="坐标">
                        <el-input class="location" :value="form.longitude" disabled/>
                        <el-input class="location" :value="form.latitude" disabled/>
                        <el-link v-if="isPassed" type="primary" @click="$router.push('/merchant/area')">前往店铺配置</el-link>
                    </Cell>
                    <InputNumber v-if="isPassed" label="店龄（年）" prop="storeAge" required :precision="2" :max="999.99"/>
                    <Input label="客服电话" prop="serverPhone" validate="phone" required :disabled="isAuditing"/>
                    <Images v-if="isPassed" label="店铺LOGO" prop="avatar" required/>
                    <Images v-if="isPassed" label="店铺Banner" prop="bannerImgUrl" required/>
                    <Input v-if="isPassed" label="店铺简介" prop="merchantDesc" type="textarea" :maxlength="100"/>
                </template>
                <template v-else>
                    <Form v-model="form.user">
                        <Input label="手机号" prop="phonenumber" disabled/>
                        <Input label="姓名" prop="nickName"  disabled/>
                    </Form>
                </template>
            </template>
            <template v-else>
                <Amap label="地址" prop="address" required :disabled="isAuditing"/>
                <InputNumber label="服务范围（公里）" prop="serviceDistance" required :disabled="isAuditing" :precision="2" :max="99999999.99" />
                <Radio label="订单总金额" prop="orderTotalAmountShow" required :data="[{value: 1, label:'显示'},{value: 0, label:'不显示'}]" remark="注:设置在服务人员的公众号页面中是否显示他本周服务的订单总金额，如不希望服务人员看到请选择不显示。"/>
                <Radio label="允许组合服务时间段" prop="allowCompose" required :data="[{value: 1, label:'是'},{value: 0, label:'否'}]" remark="服务人员上门服务的时段，是否可以分段服务；例如设定的午休时间，可外出休息，再返回继续服务"/>
            </template>
        </Form>

        <template v-if="!onlyArea">
            <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>
        </template>


        <div  style="width: 100%; text-align:center">
            <el-button v-if="(isMerchant && isPassed) || onlyArea" type="primary" @click="handleSave">保存</el-button>
            <el-button v-if="isRejected" 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
        },
        onlyArea: {
            type: Boolean,
            default: false
        }
    },
    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(){
            await this.$refs.form.validate()
            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% - 160px);;
}
.location {
    width: 150px;
    margin-right: 10px;
}
</style>
