<template>
    <div class="main-content12">
        <div class="site-personal-wrap min-flex-right">
            <div class="siteMessage flex-common" id="siteMessage4">
                <h3>网页模板</h3>
                <el-form ref="formRef">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <p class="flex-left-desc">销售方向</p>
                            <GuipRadio v-model="siteInfo.site_type" :options="siteInfo.site_types" label="" prop="site_type" @change="radioChange" label-key="" value-key="" />

                            <div class="tem-home">
                                <img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
                                <div class="tem-home-bottom">
                                    <b>经典深蓝模板（默认）</b>
                                    <div>
                                        <div class="tem-look" @click="previewTpl">
                                            <img src="@/assets/register/look-tem.svg" alt="">
                                            预览
                                        </div>
                                        <div @click="changeTpl">
                                            <img src="@/assets/register/edit-tem.svg" alt="">
                                            修改
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-line borderNone"></div>
                        <div class="flex-right"></div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancelClick" @confirm="updateSiteCustomerService(siteInfo)" />
            </div>
            <div class="siteMessage flex-common mt12" id="siteMessage5">
                <h3>在线客服</h3>
                <el-form ref="formRef">
                    <el-tabs v-model="customerServiceTab" @tab-click="handleClick">
                        <p class="flex siteMessage5_desc"> <img src="@/assets/site/info_filled.svg" alt="">{{ textObj[customerServiceTab] }}</p>
                        <el-tab-pane label="网站客服" name="web_customer_service">
                            <div class="flex-wrap">
                                <div class="flex-left">
                                    <p class="flex-left-desc">旺旺客服</p>
                                    <GuipInput ref="GuipInput" class="mt12 mb24" v-model="siteInfo.wangwang" placeholder="请填写账号">
                                    </GuipInput>
                                    <p class="flex-left-desc">QQ客服</p>
                                    <div class="flex mt12">
                                        <img v-if="siteInfo.qq_qrcode_path" :src="siteInfo.wx_qrcode_path" class="kefuImg mr-12">
                                        <div class="qqCode-wrap">
                                            <el-upload class="avatar-uploader mt12" accept=".jpg"
                                                :on-change="handleQQkfChange" action="#" :multiple="false"
                                                :limit="Number(1)" ref="avatorUpload"
                                                :auto-upload="false">
                                                <GuipButton class="upload-button" type="ignore" :btnstyle="{width:'133px'}"> 
                                                    <div class="bgImg"></div>
                                                    <span v-if="siteInfo.wx_qrcode_path">重新上传</span>
                                                    <span v-else>上传二维码</span>
                                                </GuipButton>
                                            </el-upload>
                                            <p class="avatar-desc">仅支持JPG格式，图片尺寸不大于200px * 200px </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-line"></div>
                                <div class="flex-right">
                                    <p class="flex-left-desc">微信客服</p>
                                    <div class="flex mt12">
                                        <img v-if="siteInfo.wx_qrcode_path" :src="siteInfo.wx_qrcode_path" class="kefuImg mr-12">
                                        <div class="qqCode-wrap right">
                                            <el-upload class="avatar-uploader" accept=".jpg"
                                                :on-change="handleWxkfChange" action="#" :multiple="false"
                                                :limit="Number(1)" ref="avatorUpload"
                                                :auto-upload="false">
                                                <GuipButton class="upload-button" type="ignore" :btnstyle="{width:'118px'}">
                                                    <div class="bgImg"></div>
                                                    <span v-if="siteInfo.wx_qrcode_path">重新上传</span>
                                                    <span v-else>上传二维码</span>
                                                </GuipButton>
                                            </el-upload>
                                            <p class="avatar-desc">仅支持JPG格式，图片尺寸不大于200px * 200px </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <GroupFormBtns @cancel="cancelClick" @confirm="updateSitWebCustomerService()" />
                        </el-tab-pane>
                        <el-tab-pane label="报告页客服" name="web_report_page_customer_service">
                            <div class="flex-wrap">
                                <div class="flex-left">
                                    <p class="flex-left-desc">微信客服</p>
                                    <div class="flex mt12">
                                        <img v-if="siteInfo.wxqrcode_report_path" :src="siteInfo.wxqrcode_report_path" class="kefuImg mr-12">
                                        <div class="qqCode-wrap right">
                                            <el-upload class="avatar-uploader" accept=".jpg"
                                                :on-change="handleReportkfChange" action="#" :multiple="false"
                                                :limit="Number(1)" ref="avatorUpload"
                                                :auto-upload="false">
                                                <GuipButton class="upload-button" type="ignore" :btnstyle="{width:'118px'}">
                                                    <div class="bgImg"></div>
                                                    <span v-if="siteInfo.wx_qrcode_path">重新上传</span>
                                                    <span v-else>上传二维码</span>
                                                </GuipButton>
                                            </el-upload>
                                            <p class="avatar-desc">仅支持JPG格式，图片尺寸不大于200px * 200px </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-line borderNone"></div>
                                <div class="flex-right"></div>
                            </div>
                            <GroupFormBtns @cancel="cancelClick" @confirm="updateSiteReportCustomerService()" />
                        </el-tab-pane>
                        <el-tab-pane label="支付账单客服" name="web_wx_customer_service">
                            <div class="flex-wrap">
                                <div class="flex-left">
                                    <p class="flex-left-desc">客服微信号</p>
                                    <GuipInput ref="GuipInput" class="mt12 mb24" width="100%" v-model="siteInfo.wxkf" placeholder="请填写客服微信号"></GuipInput>
                                </div>
                                <div class="flex-line borderNone"></div>
                                <div class="flex-right"></div>
                            </div>
                            <GroupFormBtns @cancel="cancelClick" @confirm="updateSiteCustomerService(siteInfo)" />
                        </el-tab-pane>
                    </el-tabs>
                </el-form>
            </div>
            <div class="siteMessage flex-common mt12" id="siteMessage6">
                <h3>功能显隐</h3>
                <el-form :model="personalForm3" ref="formRef">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <p class="flex-left-desc">价格显隐</p>
                            <div class="left-pay-list mb24">
                                <div class="left-pay-item ">
                                    <div class="flex-between">
                                        <span class="flex">服务列表页价格 
                                            <GuipToolTip content="----居中----">
                                                <!-- <img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt=""> -->
                                            </GuipToolTip>
                                        </span>
                                        <GuipSwitch :modelValue="siteInfo.is_display_price" :active-value="1" :inactive-value="0" activeText="显示" inactiveText="隐藏" @change="updateSiteDisplayPrice(siteInfo, 'is_display_price')"></GuipSwitch>
                                    </div>
                                </div>
                                <div class="left-pay-item ">
                                    <div class="flex-between">
                                        <span class="flex">服务提交页价格 
                                            <GuipToolTip content="----居中----">
                                                <!-- <img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt=""> -->
                                            </GuipToolTip>
                                        </span>
                                        <GuipSwitch :modelValue="siteInfo.is_display_submit_page_price" :active-value="1" :inactive-value="0" activeText="显示" inactiveText="隐藏" @change="updateSiteDisplayPrice(siteInfo, 'is_display_submit_page_price')"></GuipSwitch>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-line"></div>
                        <div class="flex-right">
                            <p class="flex-left-desc">报告与真伪查询</p>
                            <div class="left-pay-list mb24">
                                <div class="left-pay-item ">
                                    <div class="flex-between">
                                        <span class="flex">检测页报告样例、报告真伪查询外链
                                            <GuipToolTip content="----居中----">
                                                <!-- <img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt=""> -->
                                            </GuipToolTip>
                                        </span>
                                        <GuipSwitch :modelValue="siteInfo.is_display_outchain" :active-value="1" :inactive-value="0" activeText="显示" inactiveText="隐藏" @change="updateSiteDisplayPrice(siteInfo, 'is_display_outchain')"></GuipSwitch>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="siteMessage flex-common mt12" id="siteMessage7">
                <h3>安全提交</h3>
                <el-form :model="personalForm7" ref="formRef">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <p class="flex-left-desc">查重服务/AI服务</p>
                            <div class="left-pay-list mb24">
                                <div class="left-pay-item ">
                                    <div class="flex-between">
                                        <span>查重60分钟内不可提交重复内容，AI产品3分钟内不能重复提交</span>
                                        <GuipSwitch :modelValue="siteInfo.is_allow_repeat_submit" :active-value="1" :inactive-value="0" activeText="开" inactiveText="关" @change="updateSiteRepeatSubmitConfig"></GuipSwitch>
                                    </div>
                                    <el-checkbox-group v-model="repeatSubmitFields" class="checkboxGroup" @change="updateSiteRepeatSubmitConfig">
                                        <el-checkbox name="repeat_submit_fields" label="title">识别重复标题</el-checkbox>
                                        <el-checkbox name="repeat_submit_fields" label="author">识别重复作者</el-checkbox>
                                        <el-checkbox name="repeat_submit_fields" label="content">识别重复正文/辅助信息</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancelClick" @confirm="updateSiteCustomerService(siteInfo)" />
            </div>
            <div class="siteMessage flex-common mt12" id="siteMessage8">
                <h3>初始订单数 <span>设定检测基数，首页显示检测数量时，显示三个月内实际数值+该数值</span></h3>
                <el-form>
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <p class="flex-left-desc">检测篇数基数</p>
                            <GuipInput ref="GuipInput" class="mt12" width="100%" v-model="siteInfo.init_checknum" placeholder="请输入数字"></GuipInput>
                        </div>
                        <div class="flex-line borderNone"></div>
                        <div class="flex-right"></div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancelClick" @confirm="updateSiteInitChecknum(siteInfo)" />
            </div>
        </div>
    </div>
</template>
<script>
import GuipInput from '@/components/GuipInput.vue';
import { mapState } from 'vuex';
import store from '@/store';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipToolTip from '@/components/GuipToolTip.vue';
import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipRadio from '@/components/GuipRadio.vue';

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        GuipInput,
        GuipButton,
        GuipSwitch,
        GuipToolTip,
        GroupFormBtns,
        GuipRadio,
    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            // 站点信息
            siteInfo: [],
            formData:new FormData(),
            repeatSubmitFields: [],

            textObj: {
                'web_customer_service': '展示在网站悬浮栏的客服，请至少设置1个',
                'web_report_page_customer_service': '展示在报告页悬浮栏的客服，请至少设置1个',
                'web_wx_customer_service': '显示在微信、支付宝账单详情中，方便用户联系'
            },
            customerServiceTab: 'web_customer_service',
            checkList1: ['识别重复辅助信息'],
            // 在线客服
            personalForm3: {
                weixinFlag1: false,
                weixinFlag2: true,
                weixinFlag3: true,
                weixinFlag4: false
            },
            personalForm7: {
                weixinFlag3: true,
                weixinFlag4: true,
            },
            personalForm8: {
                checkNum: 0,
            },
            imageUrl1:'',
            imageUrl2:'',
            imageUrl3:'',
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created(){
        store.commit('SET_CUSTOMIZE', true); 
        store.commit('SET_SLIDER_MENU','siteSettingData'); 
    },
    mounted() {
        store.commit('SET_PAGETITLE', '个性化设置');

        this.getSiteInfo();
    },
    methods: {
        // 获取站点信息
        getSiteInfo() {
            const that = this
            that.siteInfo = []
            this.$http('POST', '/agentnew/ajax_get_site_info', {
                uid: this.$route.query.uid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.siteInfo = response.data
                    that.siteInfo.is_display_outchain = Number(response.data.is_display_outchain)
                    that.siteInfo.is_display_price = Number(response.data.is_display_price)
                    that.siteInfo.is_display_submit_page_price = Number(response.data.is_display_submit_page_price)
                    that.siteInfo.is_allow_repeat_submit = Number(response.data.is_allow_repeat_submit)
                    if (response.data.repeat_submit_fields) { 
                        this.repeatSubmitFields = response.data.repeat_submit_fields
                    }

                    console.log(that.siteInfo.repeat_submit_fields, 'repeat_submit_fields')
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        updateSiteInitChecknum(row) {
            this.$http('POST', '/agentnew/ajax_update_site_init_checknum', {
                uid: this.$route.query.uid,
                init_checknum: row.init_checknum
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.getSiteInfo();
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        updateSiteDisplayPrice(row, flag) {
            var is_display_price = -1;
            var is_display_submit_page_price = -1;
            var is_display_outchain = -1;

            if (flag == 'is_display_price') {
                is_display_price = row.is_display_price==1 ? 0 : 1;
                is_display_submit_page_price = row.is_display_submit_page_price;
                is_display_outchain = row.is_display_outchain;
            } else if (flag == 'is_display_submit_page_price') { 
                is_display_price = row.is_display_price;
                is_display_submit_page_price = row.is_display_submit_page_price==1 ? 0 : 1;
                is_display_outchain = row.is_display_outchain;
            } else if (flag == 'is_display_outchain') { 
                is_display_price = row.is_display_price;
                is_display_submit_page_price = row.is_display_submit_page_price;
                is_display_outchain = row.is_display_outchain==1 ? 0 : 1;
            }

            this.$http('POST', '/agentnew/ajax_update_site_display_price', {
                uid: this.$route.query.uid,
                is_display_price: is_display_price,
                is_display_submit_page_price: is_display_submit_page_price,
                is_display_outchain: is_display_outchain,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        updateSiteRepeatSubmitConfig() {
            this.$http('POST', '/agentnew/ajax_update_site_repeatsubmit_config', {
                uid: this.$route.query.uid,
                is_allow_repeat_submit: this.siteInfo.is_allow_repeat_submit==1 ? 0 : 1,
                repeat_submit_fields: this.repeatSubmitFields.join(',')
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleTabClick(tab, event) {
            console.log(tab, event);
        },
        previewTpl() {
            window.open('http://'+this.siteInfo.domain, '_blank');
        },
        changeTpl() {
            window.open('/agent/siteTemplate', '_blank');
        },
        onSwitchChange(data) {
            console.log(data, '---');
        },
        cancelClick() {
            console.log('quxiao');
            this.getSiteInfo();
        },
        updateSiteCustomerService(row) {
            console.log(row, 'row');

            this.$http('POST', '/agentnew/ajax_update_site_kefu', {
                uid: this.$route.query.uid,
                wx: this.siteInfo.wxkf,
                wangwang: this.siteInfo.wangwang,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        updateSitWebCustomerService() {
            // for(let [key,value] of this.formData){
            //     console.log(key,value,'=====key');
            // }
            this.formData.set('wangwang', this.siteInfo.wangwang)
            this.formData.set('uid', this.$route.query.uid)
            this.$http('POST', '/agentnew/ajax_update_site_kefu', 
                this.formData
            , {
                headers: {
                    'Auth': this.token,
                    'Content-Type':'multipart/form-data'
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.getSiteInfo();
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
            this.dialogVisibleCert = false;
        },
        updateSiteReportCustomerService() {
            // for(let [key,value] of this.formData){
            //     console.log(key,value,'=====key');
            // }
            this.formData.set('uid', this.$route.query.uid)
            this.$http('POST', '/agentnew/ajax_update_site_kefu', 
                this.formData
            , {
                headers: {
                    'Auth': this.token,
                    'Content-Type':'multipart/form-data'
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                        this.getSiteInfo();
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
            this.dialogVisibleCert = false;
        },
        handleQQkfChange(file, fileList) {
            console.log(file, fileList)
            let fileObj = file.raw
            this.formData.set('qq_qrcode', fileObj)
        },
        handleWxkfChange(file, fileList) {
            console.log(file, fileList)
            let fileObj = file.raw
            this.formData.set('wxqrcode', fileObj)
        },
        handleReportkfChange(file, fileList) {
            console.log(file, fileList)
            let fileObj = file.raw
            this.formData.set('wx_report_qrcode', fileObj)
        },
        // 上传图片
        handleAvatarSuccess(res, file) {
            this.imageUrl1 = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 监听单选框组变化
        radioChange(data) {
            console.log(data, 'radio--data');
        },
    }
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-tabs__item.is-active {
//     letter-spacing: 0.08em;
//     /* main/main_stardard */
//     color: #006AFF;
//     font-weight: bold;
// }

// ::v-deep .el-tabs__nav-wrap::after {
//     content: none;
// }

::v-deep .el-tabs__header {
    margin-bottom: 0;
}

.mr-12 {
    margin-right: 12px;
}

.site-personal-wrap {
    width: 100%;

    .siteMessage {
        border-radius: 4px;
        transition: all .5s;
        border: 1px solid transparent;
    }

    .siteMessage5_desc {
        border-radius: 4px;
        /* middle/middle_blue_1 */
        background: #F2F7FF;
        /* middle/middle_blue_3 */
        border: 1px solid #BFDAFF;
        padding: 8px 13px;
        margin-bottom: 32px;

        img {
            margin-right: 8px;
        }

    }

    .checkboxGroup {
        display: flex;
        justify-content: flex-start;
        margin-top: 18px;
        padding: 10px 0;
    }

    .tem-home {
        width: 100%;
        border-radius: 4px;
        opacity: 1;
        background: #FFFFFF;
        /* middle/middle_line_1 */
        border: 1px solid #DFE2E6;

        .tem-home-top {
            width: 100%;
        }

        .tem-home-bottom {
            display: flex;
            align-items: center;
            padding: 22px 32px;
            justify-content: space-between;

            .tem-look {
                margin-right: 36px;
            }

            div {
                display: flex;
                align-items: center;

                img {
                    margin-right: 6px;
                }
            }
        }
    }

    .left-pay-list {
        width: 100%;
        border-radius: 4px;
        opacity: 1;

        /* middle/middle_grey_0 */
        // span{
        //     color: #23242B;
        // }
        .left-pay-item {
            padding: 24px;
            color: #23242B;
            background: #FAFAFA;
            margin-top: 12px;

            p {
                text-align: left;
                margin-top: 9px;
                /* caption/caption_regular */
                font-size: 12px;
                font-weight: normal;
                line-height: 13px;
                letter-spacing: 0.08em;
                color: #626573;
            }

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

    .kefuImg {
        width: 120px;
        height: 120px;
    }

    .qqCode-wrap {
        display: grid;
        justify-items: start;
        // justify-content: flex-start;
        // text-align: left;
        // flex-direction: column;
    }

    // .qqCode-wrap.right {
    //     margin: 0 0 8px 12px;
    // }

    .avatar-desc {
        /* regular/body3-Regular */
        /* 样式描述：辅助文字 */
        margin-top: 8px;
        font-family: Inter;
        font-size: 12px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: normal;
        font-variation-settings: "wght" 400;
        /* Light/中性色 Neutral/Text/Regular */
        color: var(--el-color-text-regular);
        /* #606266 */
    }
}
.avatar-uploader{
    .upload-button {
        border-radius: 4px;
        background: #F2F3F5;
        box-sizing: border-box;
        border: 1px solid #BABDC2;
    }
    .bgImg{
        width: 20px;
        height: 16px;
        margin-right: 6px;
        background-image: url(@/assets/site/uploadIcon.svg);
    }
    &:hover{
        .bgImg{
            background-image: url(@/assets/site/uploadIcon_light.svg);
        }
    }
}
</style>