<template>
    <div class="site-sem-wrap min-flex-right">
        <div class="siteMessage flex-common" id="siteMessage11">
            <h3>搜索引擎优化（SEO） <span>通过SEO设置，可以免费获得流量、提高网站在搜索引擎中的排名</span></h3>
            <el-form ref="formRef" :model="semForm1">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" class="mb24" label="站点标题（T：title）">
                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
                                v-model="semForm1.title" placeholder="建议80字内">
                            </GuipInput>

                        </GuipFormItem>
                        <GuipFormItem column="column" label="站点关键词（K：keyword）">
                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea"
                                v-model="semForm1.keyWord">
                            </GuipInput>
                        </GuipFormItem>
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="站点描述（D：description）">
                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
                                v-model="semForm1.desc">
                            </GuipInput>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm1')" />
        </div>
        <div class="siteMessage flex-common mt12" id="siteMessage12">
            <h3>搜索引擎竞价（SEM） <span>通过SEM设置，获得流量、提高网站在搜索引擎中的排名</span></h3>
            <el-form ref="baiduRef" class="bidform" :model="semFormbid1" v-if="bidList.includes('baidu')">
                <div class="semBidWrap">
                    <h3 class="flex-between">
                        <p>百度OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
                        <div class="flex close-bid point" @click="deleteBid('baidu')">删除<img
                                src="@/assets/register/close.svg" alt=""></div>
                    </h3>
                    <div class="baidu-wrap bidWrap">
                        <div class="bidwrap-item">
                            <div class="bidwrap-item-top mb24 flex">
                                <img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
                                <div class="top-right column">
                                    <b>输入Token</b>
                                    <p>百度创建转化追踪：转化类型选择“服务购买成功”，接入方式选择“线索API”，复制token，填入下方输入框。<img
                                            src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p>
                                </div>
                            </div>
                            <div class="bidwrap-item-bot flex">
                                <div style="flex: 1;margin-right: 10px;">
                                    <GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.token"
                                        placeholder="请输入token" />
                                </div>
                                <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" @click="semFormConmit('baidu','token')">确认</GuipButton>
                            </div>
                        </div>
                        <div class="bidwrap-item">
                            <div class="bidwrap-item-top mb24 flex">
                                <img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
                                <div class="top-right column">
                                    <b>联调创建OCPC</b>
                                    <p>创建转化追踪后：点击该条记录的“联调”，复制带有bd-vid的推广url，复制到下方输入框，点击按钮开始联调。<img
                                            src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p>
                                </div>
                            </div>
                            <div class="bidwrap-item-bot flex">
                                <div style="flex: 1;margin-right: 10px;">
                                    <GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.url"
                                        placeholder="请输入url" />
                                </div>
                                <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"  @click="semFormConmit('baidu','url')">开始联调
                                </GuipButton>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>
            <el-form class="bidform" ref="360Ref" :model="semFormbid2" v-if="bidList.includes('360')">
                <div class="semBidWrap">
                    <h3 class="flex-between">
                        <p>360OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
                        <div class="flex close-bid point" @click="deleteBid('360')">删除<img
                                src="@/assets/register/close.svg" alt=""></div>
                    </h3>
                    <div class="baidu-wrap bidWrap">
                        <div class="beforeNotice">
                            <h4> <img src="@/assets/site/info_filled.svg" alt=""> 前期准备事项</h4>
                            <p class="mt12 flex">1. <a href="" class="flex"> <img
                                        src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台</p>
                            <p class="mt10 flex">2. <a href="" class="flex"> <img
                                        src="@/assets/site/form_linkActive.svg"
                                        alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。</p>
                        </div>
                        <div class="bidwrap-item">
                            <div class="biditem360 mb24 flex">
                                <img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
                                <b>AppKey</b>
                                <div style="flex: 1;margin-right: 10px;">
                                    <GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appKey"
                                        placeholder="请输入" />
                                </div>
                                <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
                                    @click="semFormConmit('360','appKey')">确认</GuipButton>
                            </div>
                            <div class="biditem360 mb24 flex">
                                <img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
                                <b>AppSecret</b>
                                <div style="flex: 1;margin-right: 10px;">
                                    <GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appSecret"
                                        placeholder="请输入" />
                                </div>
                                <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
                                    @click="semFormConmit('360','appSecret')">确认</GuipButton>
                            </div>

                        </div>
                    </div>
                </div>
            </el-form>
            <el-form ref="formRef" class="bidform tcpr-wrap" :model="semFormbid3" v-if="bidList.includes('mast')">
                <div class="semBidWrap">
                    <h3 class="flex-between">
                        <p>必应TCPA竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
                        <div class="flex close-bid point" @click="deleteBid('360')">删除<img
                                src="@/assets/register/close.svg" alt=""></div>
                    </h3>
                    <div class="baidu-wrap bidWrap">
                        <div class="beforeNotice">
                            <h4> <img src="@/assets/site/info_filled.svg" alt=""> 前期准备事项</h4>
                            <p class="mt12 flex"><i>1.</i> <a href="" class="flex"> <img
                                        src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>（Azure），登录后填写个人资料并完成注册。
                            </p>
                            <p class="mt10 flex"><i>2.</i> <a href="" class="flex"> <img
                                        src="@/assets/site/form_linkActive.svg"
                                        alt="">前往应用注册</a>，侧边栏点击“应用注册”，然后在右侧应用列表中注册应用程序</p>
                            <div>
                                <p>名称：填写应用名称</p>
                                <p>受支持的帐户类型：选择 任何组织目录(任何 Microsoft Entra ID 租户 - 多租户)中的帐户和个人 Microsoft 帐户(例如 Skype、Xbox)</p>
                                <p>重定向URI：忽略</p>
                                <p>点击：注册</p>
                            </div>
                            <p class="mt10"><i>3.</i> <span>应用配置，返回应用列表，在应用列表点击刚创建的应用，然后在应用概览页点击“添加重定向URI”->点击添加平台，选择移动和桌面应用程序->自定义重定向 URI，
                                <b>https://www.kuailelunwen.com/callback/microsoft_callback <img class="point" src="@/assets/site/form_copy.svg" alt=""></b></span>
                                
                            </p>
                        </div>
                        <div class="bidwrap-item">
                            <div class="biditemMast mb24 flex-between">
                                <div class="bidwrap-item-top mb24 flex">
                                    <img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
                                    <div class="top-right column">
                                        <b>配置应用信息</b>
                                        <p>在微软云平台，获得应用程序(客户端) ID。并联系开户人员，获得开发者令牌Developer token </p>
                                    </div>
                                </div>
                                <div class="flex">
                                    <span class="yesSet">已设置</span>
                                    <GuipButton type="normal" :btnstyle="{ width: '94px', height: '38px' }"
                                        @click="manageDialog('configAppInfo')">管理设置</GuipButton>
                                </div>
                            </div>
                            <div class="biditemMast mb24 flex-between">
                                <div class="bidwrap-item-top mb24 flex">
                                    <img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
                                    <div class="top-right column">
                                        <b>配置离线转化信息</b>
                                        <p class="flex"><a href="" class="flex"> <img
                                            src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p>
                                    </div>
                                </div>
                                <div class="flex">
                                    <span class="notSet">已设置</span>
                                    <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
                                        @click="manageDialog('configOffline')">立即设置</GuipButton>
                                </div>
                            </div>
                            <div class="biditemMast mb24 flex-between">
                                <div class="bidwrap-item-top mb24 flex">
                                    <img class="bid-item-img" src="@/assets/site/step_3.png" alt="">
                                    <div class="top-right column">
                                        <b>创建离线转化</b>
                                        <p>在微软云平台创建离线转化，创建成功后2个小时才生效，转化数据查看最晚有5-6小时延迟。 </p>
                                    </div>
                                </div>
                                <div class="flex">
                                    <span class="notSet">已设置</span>
                                    <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
                                        @click="manageDialog('createOffline')">立即设置</GuipButton>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>
            <div class="addStore flex" @click="addBid">
                <img src="@/assets/addIcon.svg" alt="">增加搜索竞价
            </div>
        </div>
        <div class="siteMessage flex-common mt12" id="siteMessage13">
            <h3>访问统计 <span>输入统计代码，便于统计浏览点击量(可以不填)</span></h3>
            <el-form ref="formRef" :model="semForm3">
                <GuipInput ref="GuipInput" width="100%" height="160px" type="textarea" v-model="semForm3.code">
                </GuipInput>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm3')" />
        </div>
        <GuipDialog type="normal" width="457px" :dialogVisible="dialogVisibleBid" title="增加搜索竞价" :show-close-button="false"
            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirm" @cancel="handleCancel"
            @dialogVisibleChange="dialogVisibleChange">
            <el-radio-group v-model="bidAddRadio" class=" mt12 column" @input="radioChange">
                <!-- <div style="margin-top: 16px;" class="column radio-wrap"> -->
                <el-radio class="mb24" v-for="key in Object.keys(bidAddList)" :disabled="bidList.includes(key)"
                    :key="key" :label="key">{{
                        bidAddList[key] }}{{ bidList.includes(key) ? '（已添加）' : '' }}</el-radio>
                <!-- </div> -->
            </el-radio-group>
        </GuipDialog>
        <GuipDialog type="normal" :dialogVisible="dialogVisibleConfig" :title="diaTitle" :show-close-button="false"
            :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmConfig" @cancel="handleCancelConfig"
            @dialogVisibleChange="dialogVisibleChange">
           <ConfigOffLineConversion v-if="configType == 'configOffline'"/>
           <ConfigAppInformation v-if="configType == 'configAppInfo'"/>
           <CreateOffLine v-if="configType == 'createOffline'"/>
        </GuipDialog>
    </div>

</template>
<script>
import GuipInput from '@/components/GuipInput.vue';
import { mapState } from 'vuex';
import store from '../store';
// import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipButton from '@/components/GuipButton.vue';
import ConfigOffLineConversion from '@/components/site/ConfigOffLineConversion.vue';
import ConfigAppInformation from '@/components/site/ConfigAppInformation.vue';
import CreateOffLine from '@/components/site/CreateOffLine.vue';

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        CreateOffLine,
        ConfigAppInformation,
        ConfigOffLineConversion,
        GuipInput,
        GuipFormItem,
        GuipButton,
        GroupFormBtns,
        GuipDialog
    },
    data() {
        return {
            configType:'configAppInfo',
            diaTitle:'配置应用信息',
            bidList: ['baidu', '360', 'mast'],
            bidAddRadio: '',
            bidAddList: {
                'baidu': '百度OCPC竞价',
                '360': '360OCPC竞价',
                'mast': '必应TCPA竞价',
            },
            configTitle:{
                createOffline:'创建离线转化',
                configOffline:'配置离线转化信息',
                configAppInfo:'配置应用信息',
            },
            dialogVisibleBid: false,
            dialogVisibleConfig: false,
            semForm1: {
                title: '',
                keyWord: '',
                desc: ''
            },
            semForm2: {
                title: '',
                keyWord: '',
                desc: ''
            },
            semForm3: {
                code: '',
            },
            semFormbid1: {
                token: '',
                url: ''

            },
            semFormbid2: {
                appKey: '',
                appSecret: ''
            },

            semFormbid3: {

            }
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        store.commit('SET_PAGETITLE', '营销推广');
    },
    methods: {
        addBid() {
            this.dialogVisibleBid = true;
        },
        semFormConmit(type,key) {
            console.log(key, 'key---');
        },
        radioChange(data) {
            console.log(data, 'radio--data');
        },
        cancelClick() {

            console.log('quxiao');
        },
        confirmClick(type) {
            console.log(type, '确认');
        },
        // 确认按钮事件
        handleConfirm() {
            this.$message.success('点击了确认按钮');
            this.dialogVisibleBid = false;
        },
        // 取消按钮事件
        handleCancel() {
            this.$message.warning('点击了取消按钮');
            this.dialogVisibleBid = false;
        },
        manageDialog(type){
            this.configType = type;
            this.dialogVisibleConfig = true;
            this.diaTitle = this.configTitle[type]
        },
        // 确认按钮事件
        handleConfirmConfig() {
            this.$message.success('点击了确认按钮');
            this.dialogVisibleConfig = false;
        },
        // 取消按钮事件
        handleCancelConfig() {
            this.$message.warning('点击了取消按钮');
            this.dialogVisibleConfig = false;
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
        deleteBid(type) {
            let index = this.bidList.indexOf(type)
            this.bidList.splice(index, index + 1)
        }
    }
}

</script>
<style scoped lang="scss">
.site-sem-wrap {
    width: 100%;
    letter-spacing: 0.08em;
}

.notSet,.yesSet {
    margin-right: 12px;
    color: #FF4D4F;
}

.yesSet {
    color: #00C261;
}
.bidform {
    &:nth-child(even) {
        margin: 32px 0;
    }
}

.beforeNotice {

    h4 {
        margin: 0;
    }

    margin-bottom: 18px;
    text-align: left;
    box-sizing: border-box;
    padding: 20px 14px;
    border-radius: 4px;
    /* middle/middle_blue_1 */
    background: #F2F7FF;
    /* middle/middle_blue_3 */
    border: 1px solid #BFDAFF;
    div {
        margin-top: 2px;
        padding-left: 23px;
        p{
            color: #8A9099;
        }

    }
p{
    color: #1E2226;
    i{
        font-style: normal;
    }
    &:last-child{
        display: flex;
        align-items: stretch;
        b{
            font-weight: normal;
            color: #8A9099;
            display: inline-flex;
            img{
                margin-left: 4px;
            }
        }
    }
}
    a {
        text-decoration: none;
        color: #006AFF;
        margin-right: 10px;

        img {
            margin-left: 12px;
        }
    }
}

.biditem360 {
    b {
        display: inline-block;
        width: 80px;
        text-align: left;
        margin-right: 10px;
    }
}

.addStore {
    margin-top: 24px;
}

.radio-wrap {}
.tcpr-wrap .bidwrap-item{
        padding: 0;
        background: transparent;
        .biditemMast{
                background: #fff;
                padding: 24px 16px;
            }
    }
.semBidWrap {
    background: #FAFAFA;
    padding: 18px 14px;
    box-sizing: border-box;

    .el-form-item {
        margin-bottom: 0;
    }

    .close-bid {
        color: #626573;
        font-size: 14px;
        font-weight: normal;

        img {
            width: 16px;
            height: 16px;
            margin-left: 6px;
        }
    }

 
    .bidWrap {
        .bidwrap-item {
            padding: 24px 16px;
            box-sizing: border-box;
            border-radius: 8px;
            background: #FFFFFF;
           

            .bid-item-img {
                width: 32px;
                height: 32px;
                margin-right: 22px;
            }

            .bidwrap-item-top {
                .top-right {
                    p {
                        margin-top: 10px;
                    }
                    a{
                        text-decoration: none;
                        color: #006AFF;
                        img{
                            margin-right: 10px;
                        }
                    }
                }
            }

            .bidwrap-item-bot {
                padding-left: 54px;
                justify-content: flex-end;

            }

        }
    }

}
</style>