<template>
    <div class="site-setting-wrap min-flex">
        <div class="siteMessage1 flex-common">
            <h3>站点信息</h3>
            <el-form :model="siteForm" :rules="siteFormrules" ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10" :showWordLimit="true"
                            desc="这是是右侧文案" v-model="siteForm.site_alias" prop="site_alias"
                            placeholder="仅自己区分站点销售渠道，客户看不到" />
                        <GuipInput ref="GuipInput" column="column" label="公司名称" desc="在站点首页底部“关于我们”展示"
                            v-model="siteForm.company_name" prop="company_name" placeholder="非必填" />
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipInput ref="GuipInput" column="column" label="公司地址" desc="在站点首页底部“关于我们”展示"
                            v-model="siteForm.company_address" prop="company_address" placeholder="非必填" />
                        <GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示"
                            v-model="siteForm.company_phone" prop="company_phone" placeholder="非必填" />
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" />

        </div>
        <div class="siteMessage2 flex-common">
            <h3>站点信息</h3>
            <el-form :model="siteForm1" :rules="siteFormrules1" ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" class="mb24" label="域名来源" required="true">
                            <GuipRadio slot="formDom" v-model="siteForm1.domain_source" :options="domain_source"
                                prop="domain_source" @change="domain_radioChange" />
                        </GuipFormItem>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="域名设置" required="true">
                            <GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母">
                                <span slot="appendshow">.chachongz.com</span>
                            </GuipInput>
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm1')" />

        </div>
        <div class="siteMessage3 flex-common">
            <h3>店铺收款</h3>
            <el-form :model="siteForm2" ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" class="mb24">
                            <div slot="formLeft" class="form-top-icon">
                                <img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;"
                                    alt=""><span>微信收款</span>
                            </div>
                            <CustomDropdown slot="formDom" v-model="siteForm1.weixin_pay" :options="options_weixin"
                                @change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null"
                                @changeNormal="changeNormalWeixin">
                                <!-- 自定义触发按钮 -->
                                <template #trigger>
                                    <span v-if="selectedItemWeixin"
                                        style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
                                            select_placeholder_weixin ? select_placeholder_weixin :
                                                selectedItemWeixin.desc }}</span>
                                    <span v-else>请选择</span>
                                </template>
                                <template #normal>
                                    <div class="flex flex-between noraml-jump">
                                        <div class="left">
                                            <b>绑定新微信收款</b>
                                            <p class="one">需要使用您公司的微信支付</p>
                                            <p>需在微信商户平台-产品中心开通Native支付</p>
                                        </div>
                                        <div class="right">
                                            <GuipButton type="primary" size="medium">前往绑定</GuipButton>
                                        </div>
                                    </div>
                                </template>

                                <!-- 自定义下拉选项 -->
                                <template #item="{ item }">
                                    <div class="flex-between">
                                        <div class="left">
                                            <p class="one">{{ item.label }}</p>
                                            <p>{{ item.desc }}</p>
                                        </div>
                                        <div class="right">
                                            <img v-if="selectedItem.value == item.value"
                                                src="../assets/register/drop-selected.svg" alt="">
                                        </div>
                                    </div>
                                </template>
                            </CustomDropdown>
                        </GuipFormItem>
                        <GuipFormItem column="column">
                            <div slot="formLeft" class="form-top-icon">
                                <img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;"
                                    alt=""><span>支付宝收款</span>
                            </div>
                            <!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay"
                                        :options="options_zhifubao" placeholder="未绑定支付宝收款" /> -->
                            <CustomDropdown slot="formDom" v-model="siteForm1.zhifubao_pay" :options="options_weixin"
                                @change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null"
                                @changeNormal="changeNormalWeixin">
                                <!-- 自定义触发按钮 -->
                                <template #trigger>
                                    <span v-if="selectedItemWeixin"
                                        style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
                                            select_placeholder_weixin ? select_placeholder_weixin :
                                                selectedItemWeixin.desc }}</span>
                                    <span v-else>请选择</span>
                                </template>
                                <template #normal>
                                    <div class="flex flex-between noraml-jump">
                                        <div class="left">
                                            <b>绑定新支付宝收款</b>
                                            <p class="one">需要使用您公司的支付宝支付</p>
                                            <p>需在支付宝商户平台-产品中心开通Native支付</p>
                                        </div>
                                        <div class="right">
                                            <GuipButton type="primary" size="medium">前往绑定</GuipButton>
                                        </div>
                                    </div>
                                </template>

                                <!-- 自定义下拉选项 -->
                                <template #item="{ item }">
                                    <div class="flex-between">
                                        <div class="left">
                                            <p class="one">{{ item.label }}</p>
                                            <p>{{ item.desc }}</p>
                                        </div>
                                        <div class="right">
                                            <img v-if="selectedItem.value == item.value"
                                                src="../assets/register/drop-selected.svg" alt="">
                                        </div>
                                    </div>
                                </template>
                            </CustomDropdown>
                        </GuipFormItem>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <!-- <div>{{ input1 }}</div> -->
                        <div class="addStore flex">
                            <img src="@/assets/addIcon.svg" alt="">添加其他收款方式
                        </div>
                    </div>
                </div>
            </el-form>
            <GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm2')" />
        </div>
    </div>
</template>
<script>
// import GuipInput from '@/components/GuipInput.vue';
import store from '../store';
import { mapState } from 'vuex';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipRadio from '@/components/GuipRadio.vue';
import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        GuipRadio,
        GuipFormItem,
        GuipInput,
        CustomDropdown,
        GuipButton,
        GroupFormBtns

    },
    data() {
        return {
            siteForm: {
                company_name: '',
                company_address: '',
                company_phone: '',
                site_alias: '',
            },
            siteFormrules: {
                site_alias: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ]
            },
            siteForm1: {
                domain_set: '',
                domain_source: '平台免费域名',
            },
            siteForm2: {
                zhifubao_pay: '',
                weixin_pay: '',
            },
            siteFormrules1: {
                domain_source: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ]
            },
            domain_source: [
                { label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
                { label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
            ],
            options_weixin_null: {
                label: '暂无收款账号',
                value: '暂时没有收款账号，我想稍后配置',
                desc: '暂无收款账号，稍后配置'
            },
            select_placeholder_weixin: '暂无收款账号，稍后配置',
            selectedItemWeixin: {},//微信收款方式
            options_weixin: [],
            options_zhifubao: [],
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        store.commit('SET_PAGETITLE', '基本设置');
    },
    methods: {
        changeNormalWeixin() {

        },
        changeSelectWeixin(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.selectedItem = { ...item };
            console.log(this.selectedItem, 'this.selectedItem====');
        },
        //  销售渠道
        domain_radioChange(type) {
            console.log(type, '--');
        },
        onSwitchChange(data) {
            console.log(data, '---');
        },
        submitForm(form) {
            console.log(form, '-----');
            this.$refs.formRef.validate((valid) => {
                console.log(this.form, '======formxinxi');
                if (valid) {
                    alert('提交成功!');
                } else {
                    return false;
                }
            });
        },
        cancelClick() {
            console.log('quxiao');
        },
        confirmClick(type) {
            console.log(type, '确认');
        }

    }
}
</script>
<style lang="scss">
.addStore {
    margin-top: 12px;
    border-radius: 4px;
    opacity: 1;
    /* text/text_white_2 */
    border: 1px dashed #BABDC2;
    padding: 15px 20px;
    color: #626573;
    justify-content: center;

    img {
        margin-right: 12px;
    }
}


.site-setting-wrap{
    width: 100%;
}
.siteMessage2{
    margin: 12px 0;
}
.domain-wrap {
    .domain-item {
        margin-bottom: 10px;
    }


    .domain-item p:last-child {
        padding-left: 23px;
        color: #8A9099;
    }

    p {
        text-align: left;
        line-height: 18px;
        margin-bottom: 8px;
    }

    .domain-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}
</style>