<template>
    <div>
        <PromptText text='操作提示：设置价格并保存，即添加服务' :type="2" class="mr12 ml12"/>

        <div class="main-content12">
            <!-- page content -->
            <div class="flex-common" v-for="(ver_row) in serviceAddList" :key="ver_row.name">
                <h3>{{ver_row.name}}</h3>
                <div class="service-setting-area" :class="row.status == 1 ? 'service-setting-open' : ''" v-for="(row) in ver_row.list" :key="row.type" :id="'section_'+row.type">
                    <el-form class="el-row demo-ruleForm" ref="formRef">
                        <div class="flex flex-between mb24 line40 service-title">
                            <div class="service-title-left">
                                <span class="service-title-name">{{row.type_name}}</span>
                                <span v-if="row.status == 1" class="service-title-status">已开启</span>
                                <span v-if="row.status == 1" class="service-title-close">关闭服务</span>
                            </div>
                            <div class="service-title-right" v-if="row.base_set">
                                <el-checkbox v-model="row.has_base_price" @change="toggleSetBasePrice(row)">设置起售价格</el-checkbox>
                            </div>
                        </div>

                        <div class="flex mb24 line40" v-if="row.supply_price_warning">
                            <div class="service-info-item">
                                <span class="mr12">供货价格</span>
                                <span>{{row.supply_price}} {{row.supply_price_warning}}</span>
                            </div>
                        </div>

                        <div class="flex mb24 line40">
                            <div class="service-info-item mr50" v-if="!row.supply_price_warning">
                                <span class="mr12">供货价格</span>
                                <span>{{row.supply_price}}</span>
                            </div>

                            <div class="service-info-item mr50" v-if="row.set_units">
                                <GuipRadio label="计费方式" v-model="row.unit" :options="row.set_units" @change="methodChange()"/>
                            </div>

                            <div class="service-info-item">
                                <template v-if="row.price_set_label == '售价管理'">
                                    <GuipInput v-model="row.price" :label="row.price_set_label" ref="GuipInput" width="150px" unit="元"></GuipInput>
                                </template>
                                <template v-else>
                                    <GuipInput v-model="row.unit_piece" :label="row.price_set_label" ref="GuipInput" width="150px" unit="件"></GuipInput>
                                </template>

                                <template v-if="row.unit == 0">
                                    <span class="slash">/</span>
                                    <GuipInput v-model="row.unit_num" ref="GuipInput" width="150px" unit="字符"></GuipInput>
                                </template>
                                <template v-if="row.unit == 1">
                                    <span class="slash">/</span>
                                    <span>篇</span>
                                </template>
                                <template v-if="row.unit == 2">
                                    <span class="slash">/</span>
                                    <span>页</span>
                                </template>
<!--                                <div>对应电商商品件数，这样在电商平台进行促销也不影响提交论文</div>-->
                            </div>
                        </div>

                        <div class="flex mb24 line40" v-if="row.has_base_price">
                            <div class="service-info-item" v-if="row.price_set_label == '售价管理'">
                                <GuipInput v-model="row.b_unit_num" label="起售价格" ref="GuipInput" width="180px" unit="字符内"></GuipInput>
                                <span class="ml12 mr12">用户需支付</span>
                                <GuipInput v-model="row.b_unit_price" ref="GuipInput" width="180px" unit="元"></GuipInput>
                                <span class="service-base-remark ml12">备注：超过设定字符，按照正常售价收取</span>
                            </div>
                            <div class="service-info-item" v-else>
                                <GuipInput v-model="row.b_unit_num" label="起售价格" ref="GuipInput" width="180px" unit="字符内"></GuipInput>
                                <span class="ml12 mr12">用户需支付</span>
                                <GuipInput v-model="row.b_unit_piece" ref="GuipInput" width="180px" unit="件"></GuipInput>
                                <span class="service-base-remark ml12">备注：超过设定字符，按照正常售价收取</span>
                            </div>
                        </div>

                        <div class="flex mb24 line40" v-if="row.enable_bind">
                            <GuipButton @click="bindGoods(row.type)" class="bind-button" type="ignore" :btnstyle="{width:'148px',height:'40px',background:'#F2F3F5','border-radius':'4px'}">
                                <div class="bgImg"></div>
                                <span>关联商品</span>
                            </GuipButton>
                        </div>

                        <div class="flex flex-between service-opt">
                            <GuipButton type="ignore" @click="reset(row)">重置</GuipButton>
                            <GuipButton type="primary" @click="save(row)" size="medium">保存</GuipButton>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>

        <component :is="bindComponent" ref="dynamicComponent" @handleBind="handleBind"
                   :uid="bindData.uid" :type="bindData.type" :pati="bindData.pati" :pageCode="bindData.pageCode"/>

        <div class="register-btns">
            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">添加完成</GuipButton>
        </div>
    </div>
</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import GuipRadio from "@/components/GuipRadio.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipButton from "@/components/GuipButton.vue";
import PromptText from "@/components/PromptText.vue";
import bindGoods from "@/components/bindGoods.vue";
export default {
    name: 'siteAddFinally',
    props: [''],
    components: {
        bindGoods,
        PromptText,
        GuipButton,
        GuipInput,
        GuipRadio
    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            siteInfo:{},
            serviceAddList: [],
            menuList:{},
            siteAddUrl: '/agent/siteAdd',
            showBind:false,
            bindComponent:'',
            bindData: {
                uid: 0,
                type: 0,
                pati: '',
                pageCode: '',
            },
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created() {
        if (!this.$route.query.uid) {
            this.$message.error('非法请求');
            this.$router.push('/agent/siteAdd')
        }
        this.initPddSdk2(this.$route.query.uid)
        console.log('wwww')
    },
    mounted() {
        store.commit('SET_PAGETITLE', '添加服务');

        this.getAddServiceList();
        this.getServiceAdd();
    },
    methods: {
        bindGoods(type){
            this.bindData.uid = this.siteInfo.uid
            this.bindData.type = type
            // if(this.siteInfo.sale_channel == 3){
            //     const initData = this.initPddSdk2(this.$route.query.uid)
            //     this.bindData.type = initData.pageCode
            //     this.bindData.type = initData.pati
            // }
            // this.bindComponent = 'bindGoods'
        },
        async getPddPageCode(uid){
            console.log('aaa')
            const that = this
            that.$http('POST', '/agentnew/ajax_get_pdd_page_code', {
                uid: uid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                console.log(response.data,'bbb')
                that.bindData.pageCode = response.data
                return response.data
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        async loadPddSk(pageCode){
            console.log('ccc',pageCode)
            const script = document.createElement('script');
            script.src = 'https://pfile.pddpic.com/galerie-go/open_sdk/pc.202102201613.js';
            script.onload = () => {
                window.PDD_OPEN_init({
                    code: pageCode
                    // 对于获取 code 接口或未登录态，可不传：PDD_OPEN_init({}, function () { ... })
                }).then(function () {
                    console.log('ddd')
                    // 初始化已完成
                    window.PDD_OPEN_getPati().then(
                        function (pati) {
                            console.log(pati)
                            // 使用 pati
                        }).catch(error => console.log(error))
                })
            };
            script.onerror = () => {
                console.log('errpr')
                console.error('拼多多 SDK 加载失败');
            };
            document.head.appendChild(script);
        },
        async initPddSdk2(uid) {
            const that = this
            try {
                const pageCode = await that.getPddPageCode(uid)
                // await that.loadPddSk(pageCode)
                console.log(pageCode,'eee')
                // console.log(that.bindData.pageCode,'bbb')
                // that.bindData.pati = await that.loadPddSk(that.bindData.pageCode)
                // console.log('aaa')

            } catch (e) {
                console.log(e)
            }
        },
        handleBind(data){
            this.bindComponent = ''
            console.log(data)
        },
        getAddServiceList(){
            const that = this
            that.siteInfo = []
            this.$http('POST', '/agentnew/ajax_get_add_service_list', {
                uid: this.$route.query.uid,
                prodid: that.$route.query.prodid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    this.menuList = response.data
                    store.commit('SET_SECOND_MENU', response.data);
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        // 获取站点信息
        getServiceAdd() {
            const that = this
            this.$http('POST', '/agentnew/ajax_get_service_addinfo', {
                uid: this.$route.query.uid,
                prodid: that.$route.query.prodid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.siteInfo = response.data.siteinfo
                    that.serviceAddList = response.data.service_add_list
                    store.commit('SET_BREADRIGHTTEXT', that.siteInfo.short_name);
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        toggleSetBasePrice(row) {
            row.has_base_price = row.has_base_price == true ? false : true;
        },
        methodChange() {
        },
        reset(row) {
            row.price = ''
            row.unit_num = ''
            row.unit_piece = ''
            row.b_unit_num = ''
            row.b_unit_price = ''
            row.b_unit_piece = ''
        },
        save(row) {
            console.log(row)
            const that = this
            this.$http('POST', "/agentnew/ajax_set_service_price", {
                uid: that.uid,
                type: row.type,
                unit: row.unit,
                unit_num: row.unit_num,
                unit_price: row.price,
                unit_piece: row.unit_piece,
                b_unit_num: row.b_unit_num,
                b_unit_price: row.b_unit_price,
                b_unit_piece: row.b_unit_piece,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                if (response.status) {
                    that.$message.success('保存成功');
                    return true;
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        jumpStep(){
            this.$router.push(this.siteAddUrl + '?uid=' + this.uid)
        }
    }
}
</script>
<style lang="scss" scoped>
.line40{
  line-height: 40px;
}
.ml12 {
  margin-left: 12px;
}

.mr12 {
  margin-right: 12px;
}

.mr50 {
  margin-right: 50px;
}

.slash{
  margin: 0 6px;
}

.warning-text {
  margin: 0 12px;
  display: flex;
  align-items: center;
  padding: 8px 13px;
  align-self: stretch;
  z-index: 1;
  border-radius: 4px;
  background: #FEFCE8;
  border: 1px solid rgba(255, 140, 0, 0.3);

  .warning-icon {
    width: 16px;
    height: 16px;;
    margin-right: 8px;
  }

  span {
    color: #1E2226;
    letter-spacing: 0.08em;
    font-size: 14px;
  }
}

.service-setting-open {
  background: #F2FBED !important;
}

.service-setting-area {
  padding: 24px;
  background: #F6F7FA;
  margin-bottom: 12px;
  letter-spacing: 0.08em;

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

  .el-checkbox {
    color: #1E2226;
  }

  .service-title {

    .service-title-left .service-title-name {
      color: #1E2226;
      margin-right: 24px;
    }

    .service-title-left .service-title-status {
      border-radius: 4px;
      border: 1px solid rgba(0, 194, 97, 0.6);
      color: #0DAF49;
      padding: 2px 10px 2px 32px;
      background-image: url(@/assets/site/open_success.svg);
      background-repeat: no-repeat;
      background-position: 10px 50%;
      background-size: 16px 16px;
      margin-right: 12px;
    }

    .service-title-left .service-title-close {
      color: #8A9099;
      background-image: url(@/assets/site/form_close.svg);
      background-repeat: no-repeat;
      background-position: 0 50%;
      background-size: 16px 16px;
      padding: 2px 10px 2px 22px;
    }
  }

  .service-info-item {
    display: flex;
    align-items: center;

    .el-radio-group{
      margin: 0;
    }
  }

  .service-base-remark {
    font-size: 12px;
    color: #8A9099;
  }

  .service-opt {
    justify-content: right;
  }
}

.register-btns {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: #FFFFFF;
  padding: 16px 0px;
  /* 蓝色阴影_常规 */
  box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
  z-index: 999;
  button:nth-child(1) {
    margin-right: 56px;
  }
}

.bgImg{
  width: 20px;
  height: 16px;
  margin-right: 6px;
  background-image: url(@/assets/site/shop_bag.svg);
}
</style>