<template>
    <div>
        <div class="step2-wrap min-flex">
            <div class="flex-common">
                <h3>店铺收款</h3>

                <template v-if="!isJd">

                    <el-form ref="formRef" v-if="siteInfo.sale_channel === '0'">
                        <div class="flex-wrap">
                            <div class="flex-left">
                                <div class="shopadd-wrap" v-if="!taobaoList.length">
                                    <p class="shopadd-title">店铺授权</p>
                                    <div class="flex-between shopadd-area">
                                        <div>
                                            <p>请确保使用要添加的淘宝主账号登录并授权</p>
                                            <p>如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                        </div>
                                        <GuipButton :disabled="!addablePays[payTypeTaoBao]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypeTaoBao)">前往添加</GuipButton>
                                    </div>
                                </div>
                                <GuipFormItem column="column" v-else>
                                    <div slot="formLeft" class="form-top-icon">
                                        <img src="@/assets/register/taobao.svg" style="width: 26px;height: 26px;" alt=""><span>淘宝/天猫店铺</span>
                                    </div>

                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectTaobao" valueKey="payid"
                                                    :options="taobaoList" :options_null="!taobaoList.length">

                                        <template #trigger>
                                            <span v-if="selectTaobao">{{ selectTaobao.short_name }} {{ selectTaobao.account }}</span>
                                            <span v-else-if="!taobaoList.length">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定店铺</span>
                                        </template>

                                        <template #normal>
                                            <div class="flex-between noraml-jump">
                                                <div class="left">
                                                    <b>添加新店铺</b>
                                                    <p class="one">请确保使用要添加的淘宝主账号登录并授权</p>
                                                    <p>如未购买"快乐帮手"服务或已过期，会跳转到购买服务页面</p>
                                                </div>
                                                <div class="right">
                                                    <GuipButton type="primary" size="medium" @click="goBindPay(payTypeTaoBao)">前往添加</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.account }}</p>
                                                    <p>{{ item.short_name }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectTaobao && selectTaobao.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                        </div>
                    </el-form>

                    <el-form ref="formRef" v-if="siteInfo.sale_channel === '1'">
                        <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" width="100%" @change="changeSelectWeixin" valueKey="payid"
                                                    :options="wxpayList" :options_null="!wxpayList.length">
                                        <!-- 选择后显示数据 -->
                                        <template #trigger>
                                            <span v-if="selectWxpay">{{ selectWxpay.short_name }} {{ selectWxpay.account }}</span>
                                            <span v-else-if="wxpayList.length === 0">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定微信收款</span>
                                        </template>

                                        <!-- 自定义下拉选项 -->
                                        <template #normal>
                                            <div class="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" @click="goBindPay(payTypeWeixin)">前往绑定</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.short_name }}</p>
                                                    <p>{{ item.account }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectWxpay && selectWxpay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                            <div class="flex-line"></div>
                            <div class="flex-right">
                                <!-- 支付宝 -->
                                <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>

                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectAlipay" valueKey="payid"
                                                    :options="alipayList" :options_null="!alipayList.length">

                                        <template #trigger>
                                            <span v-if="selectAlipay">{{ selectAlipay.short_name }} {{ selectAlipay.account }}</span>
                                            <span v-else-if="alipayList.length === 0">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定支付宝收款</span>
                                        </template>

                                        <template #normal>
                                            <div class="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" @click="goBindPay(payTypeAlipay)">前往绑定</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.short_name }}</p>
                                                    <p>{{ item.account }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectAlipay && selectAlipay.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                        </div>
                    </el-form>

                    <el-form ref="formRef" v-if="siteInfo.sale_channel === '3'">
                        <div class="flex-wrap">
                            <div class="flex-left">
                                <div class="shopadd-wrap" v-if="pddList.length">
                                    <p class="shopadd-title">店铺授权</p>
                                    <div class="flex-between shopadd-area">
                                        <div>
                                            <p>请确保使用要添加的拼多多主账号登录并授权</p>
                                            <p>如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                        </div>
                                        <GuipButton :disabled="!addablePays[payTypePdd]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypePdd)">前往添加</GuipButton>
                                    </div>
                                </div>
                                <GuipFormItem column="column" v-else>
                                    <div slot="formLeft" class="form-top-icon">
                                        <img src="@/assets/register/pinduoduo.svg" style="width: 26px;height: 26px;" alt=""><span>拼多多店铺</span>
                                    </div>

                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectPdd" valueKey="payid"
                                                    :options="pddList" :options_null="!pddList.length">

                                        <template #trigger>
                                            <span v-if="selectPdd">{{ selectPdd.short_name }} {{ selectPdd.account }}</span>
                                            <span v-else-if="pddList.length === 0">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定拼多多店铺</span>
                                        </template>

                                        <template #normal>
                                            <div class="flex-between noraml-jump">
                                                <div class="left">
                                                    <b>绑定新拼多多店铺</b>
                                                    <p class="one">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                                                </div>
                                                <div class="right">
                                                    <GuipButton type="primary" size="medium" @click="goBindPay(payTypePdd)">前往绑定</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.short_name }}</p>
                                                    <p>{{ item.account }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectPdd && selectPdd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                        </div>
                    </el-form>

                </template>

                <template v-else>
                    <el-form ref="formRef">
                        <div class="flex-wrap">
                            <div class="flex-left">
                                <div class="shopadd-wrap" v-if="!jdList.length">
                                    <p class="shopadd-title">店铺授权</p>
                                    <div class="flex-between shopadd-area">
                                        <div>
                                            <p>请确保使用要添加的京东主账号登录并授权</p>
                                            <p>如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p>
                                        </div>
                                        <GuipButton :disabled="!addablePays[payTypeJingdong]" type="primary" :btnstyle="{ width: '88px', height: '33px', 'border-radius': '4px' }" @click="goBindPay(payTypeJingdong)">前往添加</GuipButton>
                                    </div>
                                </div>
                                <GuipFormItem column="column" v-else>
                                    <div slot="formLeft" class="form-top-icon">
                                        <img src="@/assets/register/jingdong.svg" style="width: 26px;height: 26px;" alt=""><span>京东店铺</span>
                                    </div>

                                    <CustomDropdown slot="formDom" width="100%" @change="changeSelectJindong" valueKey="payid"
                                                    :options="jdList" :options_null="!jdList.length">

                                        <template #trigger>
                                            <span v-if="selectJd">{{ selectJd.short_name }} {{ selectJd.account }}</span>
                                            <span v-else-if="jdList.length === 0">暂无收款账号，稍后配置</span>
                                            <span v-else>未绑定京东店铺</span>
                                        </template>

                                        <template #normal>
                                            <div class="flex-between noraml-jump">
                                                <div class="left">
                                                    <b>绑定新京东店铺</b>
                                                    <p class="one">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面。</p>
                                                </div>
                                                <div class="right">
                                                    <GuipButton type="primary" size="medium" @click="goBindPay(payTypeJingdong)">前往绑定</GuipButton>
                                                </div>
                                            </div>
                                        </template>

                                        <template #item="{ item }">
                                            <div class="flex-between">
                                                <div class="left">
                                                    <p class="one">{{ item.short_name }}</p>
                                                    <p>{{ item.account }}</p>
                                                </div>
                                                <div class="right">
                                                    <img v-if="selectJd && selectJd.payid == item.payid" src="@/assets/register/drop-selected.svg" alt="">
                                                </div>
                                            </div>
                                        </template>
                                    </CustomDropdown>
                                </GuipFormItem>
                            </div>
                        </div>
                    </el-form>
                </template>

                <addPay :payType="addPayType" :visible="isShowAddPay" @update:visible="handleEvent" :authToken="authToken"
                        :taobaoAuthUrl="taobaoAuthUrl" :isExistSelfSupplys="isExistSelfSupplys" :pddAuthUrl="pddAuthUrl" :jdAuthUrl="jdAuthUrl"></addPay>
            </div>
        </div>

        <div class="register-btns">
            <GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">去首页</GuipButton>
            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="nextStep">下一步</GuipButton>
        </div>
    </div>
</template>
<script>


import GuipButton from "@/components/GuipButton.vue";
import addPay from "@/components/pay/addPay.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import CustomDropdown from "@/components/CustomDropdown.vue";

const PAY_TYPE_TAOBAO = 0;    // 淘宝
const PAY_TYPE_WEIXIN = 2;    // 微信
const PAY_TYPE_ALIPAY = 3;    // 支付宝
const PAY_TYPE_JINGDONG = 4;  // 京东
const PAY_TYPE_PDD = 11;      // 拼多多

export default {
  name: 'domainSet',
  props: {
      siteInfo: {
          type: Object,
          required: true
      },
      isJd: {
          type: Boolean,
          default: false
      },
  },
  components: {
      CustomDropdown, GuipFormItem,
      addPay,
      GuipButton

  },
  data(){
    return {
        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',

        // 收款方式
        payTypeTaoBao: PAY_TYPE_TAOBAO,
        payTypeWeixin: PAY_TYPE_WEIXIN,
        payTypeAlipay: PAY_TYPE_ALIPAY,
        payTypeJingdong: PAY_TYPE_JINGDONG,
        payTypePdd: PAY_TYPE_PDD,

        taobaoList: [],
        wxpayList: [],
        alipayList: [],
        pddList: [],
        jdList: [],

        bindWxpayId: 0,
        selectWxpay: null,
        bindAlipayId: null,
        selectAlipay: null,
        bindTaobaoId: 0,
        selectTaobao: null,
        bindPddId: 0,
        selectPdd: null,
        bindJdId: 0,
        selectJd: null,

        addPayType: -1,
        isShowAddPay: false,
        authToken: '',
        addablePays: [],

        // 淘宝授权url
        taobaoAuthUrl: '',
        // 是否存在自供货 存在自供货 则不支持支付宝代收款
        isExistSelfSupplys: false,
        // 拼多多授权url
        pddAuthUrl: '',
        // 拼多多店铺名称
        pdd_shop_name: '',
        // 京东授权url
        jdAuthUrl: '',
    }
  },
  mounted() {
      if(Object.keys(this.siteInfo).length === 0) {
          this.$message.error('未知错误');
          this.$emit('handelStep', 1)
          return false;
      }

      if(this.siteInfo.sale_channel === '2'){
          this.$emit('handelStep', 3)
          return false;
      }

      this.getSitePayIndex()
      this.getPayList()
      this.getAddablePays()
  },
  methods:{
      // 获取支付列表
      getSitePayIndex() {
          this.$http('POST', '/agentnew/ajax_get_site_pay_index', {
              uid: this.siteInfo.uid
          },{
              headers:{
                  'Auth': this.token
              }
          }).then(response => {
              if(Object.keys(response.data).length>0){
                  console.log(response.data)
                  this.$nextTick(() => {
                      if (response.data[this.payTypeWeixin]) {
                          this.bindWxpayId = response.data[this.payTypeWeixin].payid;
                          this.selectWxpay = response.data[this.payTypeWeixin];
                      }
                      if (response.data[this.payTypeAlipay]) {
                          this.bindAlipayId = response.data[this.payTypeAlipay].payid;
                          this.selectAlipay = response.data[this.payTypeAlipay];
                      }
                      if (response.data[this.payTypeTaoBao]) {
                          this.bindTaobaoId = response.data[this.payTypeTaoBao].payid;
                          this.selectTaobao = response.data[this.payTypeTaoBao];
                      }
                      if (response.data[this.payTypePdd]) {
                          this.bindPddId = response.data[this.payTypePdd].payid;
                          this.selectPdd = response.data[this.payTypePdd];
                      }
                      if (response.data[this.payTypeJingdong]) {
                          this.bindJdId = response.data[this.payTypeJingdong].payid;
                          this.selectJd = response.data[this.payTypeJingdong];
                      }
                  })
              }
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      // 获取支付列表
      getPayList() {
          this.$http('POST', '/agentnew/ajax_get_pay_list', {},{
              headers:{
                  'Auth': this.token
              }
          }).then(response => {
              this.$nextTick(() => {
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypeWeixin] &&
                      response.data.paylist[this.payTypeWeixin].length > 0
                  ) {
                      this.wxpayList = response.data.paylist[this.payTypeWeixin]
                  }
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypeAlipay] &&
                      response.data.paylist[this.payTypeAlipay].length > 0
                  ) {
                      this.alipayList = response.data.paylist[this.payTypeAlipay]
                  }
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypeTaoBao] &&
                      response.data.paylist[this.payTypeTaoBao].length > 0
                  ) {
                      this.taobaoList = response.data.paylist[this.payTypeTaoBao]
                  }
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypePdd] &&
                      response.data.paylist[this.payTypePdd].length > 0
                  ) {
                      this.pddList = response.data.paylist[this.payTypePdd]
                  }
                  if (
                      response.data &&
                      response.data.paylist &&
                      response.data.paylist[this.payTypeJingdong] &&
                      response.data.paylist[this.payTypeJingdong].length > 0
                  ) {
                      this.jdList = response.data.paylist[this.payTypeJingdong]
                  }
              })
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      // 获取可添加的收款方式
      getAddablePays() {
          this.$http('POST', '/agentnew/ajax_get_addable_pays', {},{
              headers:{
                  'Auth': this.token
              }
          }).then(response => {
              this.$nextTick(() => {
                  this.addablePays = response.data
                  if(response.data[PAY_TYPE_TAOBAO]) {
                      this.taobaoAuthUrl = response.data[PAY_TYPE_TAOBAO].authurl
                  }

                  if (response.data[PAY_TYPE_ALIPAY]) {
                      this.isExistSelfSupplys = response.data[PAY_TYPE_ALIPAY].is_exist_self_supplys
                  }

                  if (response.data[PAY_TYPE_PDD]) {
                      this.pddAuthUrl = response.data[PAY_TYPE_PDD].authurl
                  }

                  if (response.data[PAY_TYPE_JINGDONG]) {
                      this.jdAuthUrl = response.data[PAY_TYPE_JINGDONG].authurl
                  }

              })
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      changeSelectWeixin(item) {
          this.bindWxpayId = item.payid;
          this.selectWxpay = item;
          console.log(this.bindWxpayId, 'bindWxpayId');
          console.log(this.selectWxpay, 'selectWxpay');

          this.selectedItem = { ...item };
          console.log(this.selectedItem, 'this.selectedItem====');
      },
      changeSelectAlipay(item) {
          this.bindAlipayId = item.payid;
          this.selectAlipay = item;
          console.log(this.bindWxpayId, 'bindWxpayId');

          this.selectedItem = { ...item };
          console.log(this.selectedItem, 'this.selectedItem====');
      },
      changeSelectTaobao(item) {
          this.bindTaobaoId = item.payid;
          this.selectTaobao = item;

          this.selectedItem = { ...item };
      },
      changeSelectJindong(item) {
          this.bindJdId = item.payid;
          this.selectJd = item;

          this.selectedItem = { ...item };
      },
      changeSelectPdd(item) {
          this.bindPddId = item.payid;
          this.selectPdd = item;

          this.selectedItem = { ...item };
      },
      goBindPay(type) {
          this.addPayType = type;
          this.isShowAddPay = true;
          this.authToken = this.token;
      },
      handleEvent() {
          this.getPayList()
          this.getAddablePays()
      },
      jumpStep(){
          this.$router.push('/')
      },
      nextStep() {
          if(this.siteInfo.sale_channel === '0' && !this.bindTaobaoId && !this.bindJdId){
              this.$Message.error('请绑定收款方式');
              return false
          }
          if(this.siteInfo.sale_channel === '1' && !this.bindWxpayId && !this.bindAlipayId){
              this.$Message.error('请绑定收款方式');
              return false
          }
          if(this.siteInfo.sale_channel === '3' && !this.bindPddId){
              this.$Message.error('请绑定收款方式');
              return false
          }

          var data = {
              uid: this.siteInfo.uid,
              open_processs: 4,
              pay_config: {
                  0: this.bindTaobaoId,
                  2: this.bindWxpayId,
                  3: this.bindAlipayId,
                  4: this.bindJdId,
                  11: this.bindPddId,
              },
          }

          this.$http('POST', '/agentnew/ajax_update_site_pay', data, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              this.$nextTick(() => {
                  if (response.status) {
                      this.$emit('handelStep', 3)
                      return true;
                  }
                  this.$Message.error(response.info);
              })
          }).catch(error => {
              console.error(error, 'error')
          })
      },
  }
}
</script>
<style lang="scss">
.shopadd-wrap{
  .shopadd-title{
    color: #1E2226;
    letter-spacing: 0.08em;
    font-size: 14px;
    margin-bottom: 12px;
    text-align: left;
  }
  .shopadd-area{
    width: 510px;
    padding: 24px;
    border-radius: 4px;
    background: #FAFAFA;
    div{
      letter-spacing: 0.08em;
      font-size: 12px;
      text-align: left;
      color: #626573;

      p:first-child{
        font-size: 14px;
        color: #1E2226;
        margin-bottom: 12px;
      }
    }
  }
}
</style>