<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] }}</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" v-loading="loading">
                    <fieldset>
                        <legend><el-tag>抖音开放平台</el-tag></legend>
                        <el-form-item label="WebHooks">
                            <el-input v-model="formData.webhook" disabled readonly clearable placeholder="门店名称">
                                <template #append><el-button v-copy="formData.webhook">复制</el-button></template>
                            </el-input>
                            <div class="el-form-item-msg">开放平台 - 开发配置 - Webhooks中设置</div>
                        </el-form-item>
                    </fieldset>
                    <fieldset>
                        <legend><el-tag>顺丰开放平台</el-tag></legend>
                        <el-form-item label="路由推送接口">
                            <el-input v-model="formData.sf" disabled readonly clearable placeholder="路由推送接口">
                                <template #append><el-button v-copy="formData.sf">复制</el-button></template>
                            </el-input>
                            <div class="el-form-item-msg">顺丰开放平台</div>
                        </el-form-item>
                        <el-form-item label="订单状态推送接口">
                            <el-input v-model="formData.sf" disabled readonly clearable placeholder="订单状态推送接口">
                                <template #append><el-button v-copy="formData.sf">复制</el-button></template>
                            </el-input>
                            <div class="el-form-item-msg">顺丰开放平台</div>
                        </el-form-item>
                        <el-form-item label="清单运费推送接口">
                            <el-input v-model="formData.sf" disabled readonly clearable placeholder="清单运费推送接口">
                                <template #append><el-button v-copy="formData.sf">复制</el-button></template>
                            </el-input>
                            <div class="el-form-item-msg">顺丰开放平台</div>
                        </el-form-item>
                    </fieldset>
                </el-form>
            </el-main>
            <el-footer style="text-align: right;">
                <el-button @click="visible=false" >取 消</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
</template>

<script>
export default {
    data(){
        return {
            loading:true,
            mode:"add",
            titleMap:{
                add:"授权地址",
                edit:"授权地址"
            },
            visible: false,
            isSaveing: false,
            formData:{}
        }
    },
    methods: {
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        async getConfig(data){
            this.loading = true;
            var resp = await this.$API.store.hook.get();
            this.loading = false;
            data.webhook = resp.data.url+"notify/hook/"+data.store_id;
            data.spi = resp.data.url+"notify/spi/"+data.store_id;
            data.sf = resp.data.url+"sf/hook/"+data.store_id;
            data.pdf = resp.data.url+"sf/pdf/"+data.store_id;
            this.formData = data;
        },
        //表单注入数据
        setData(data){
            this.getConfig(data);
        },
    }
}
</script>