<template>
    <div class="config-offline-wrap">
        <el-form>
            <p class="flex"><a href="" class="flex"> <img src="@/assets/site/form_linkActive.svg"
                alt="">前往微软云</a>左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid</p>
            
            <p class="createOffdescBox mt12 mb24">
                以链接https://ui.ads.microsoft.com/campai/vnext/conversiongoals?<br/>aid=12345&ccuisrc=4&cid=67890&uid=xxx 为例<br/>
    aid就是12345 cid就是67890
            </p>
            <p class="column">
                <b>1. cid</b>
            </p>
            <GuipInput :value="siteInfo.bing_customer_id" @input="val => updateField('bing_customer_id', val)" placeholder="" />
            <p class="column mt16">
                <b>2. aid</b>
            </p>
            <GuipInput :value="siteInfo.bing_customer_account_id" @input="val => updateField('bing_customer_account_id', val)" placeholder="" />
        </el-form>
    </div>
</template>
<script>
import GuipInput from '@/components/GuipInput.vue';
// import GuipFormItem from '@/components/GuipFormItem.vue';

export default {
    // 站点设置
    name: '',
    props: ['siteInfo'],
    components: {
        GuipInput,
        // GuipFormItem,
    },
    data() {
        return {
            // localSiteInfo: { ...this.siteInfo }
        }
    },
    computed: {
        // ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        // store.commit('SET_PAGETITLE', '营销推广');
    },
    methods: {
        updateField(field, value) {
            this.$emit('update-field', {
                field,
                value
            })
        }
    }
}
</script>
<style scoped lang="scss">
.config-offline-wrap {
    b {
        font-weight: normal;
        margin-bottom: 8px;
    }
    a {
        text-decoration: none;
        color: #006AFF;

        img {
            margin-right: 10px;
        }
    }

    .el-form-item {
        margin-bottom: 0;
    }
    .createOffdescBox {
        color: #6B7280;
        text-align: left;
    }
}
</style>