<template>
    <div class="main-content12">
        <div class="pageheader">
            <div class="pageheader-title">
                <h3>收款列表</h3>
            </div>
            
            <div class="button-group">
                <GuipButton :key="item.type" v-for="item in addablePays" :btnstyle="{ width: '150px', height: '33px' }" @click="showAddPaymentMethodDialog(item.type, item.type_desc)">添加{{ item.type_desc }}</GuipButton>
            </div>
        </div>
        <!-- 支付宝 -->
        <div class="register-wrap">
            <div class="step3-wrap">
                <div class="step3-top flex-common">
                    <h3 class="flex gap8">
                    <img src="@/assets/register/zhifubao.svg" alt="">
                    支付宝收款</h3>
                </div>
                <div>
                    <div class="flex-common table-wrap">
                        <el-form>
                            <GuipTable :border="true" :tableData="payList[payTypeAlipay]" :loading="tableLoading">
                              <el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
                              <el-table-column prop="account" label="账号"></el-table-column>
                              <el-table-column prop="expires_time" label="有效期" min-width="30px"></el-table-column>
                              <el-table-column prop="is_auto_refund" fixed="right" label="授权平台退款" min-width="30px">
                                  <template slot-scope="scope">
                                    <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                    <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                    <!-- 传入的modelvalue 为数字 0 或者 1 -->
                                    <GuipSwitch v-if="scope.row.is_pay_public == 0" :modelValue="scope.row.is_auto_refund" active-value="1" inactive-value="0" @change="updateAutoRefund(scope.row)"></GuipSwitch>
                                  </template>
                              </el-table-column>
                              <el-table-column prop="status" fixed="right" label="启用状态"  min-width="30px">
                                  <template slot-scope="scope">
                                    <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                    <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                    <!-- 传入的modelvalue 为数字 0 或者 1 -->
                                    <GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
                                  </template>
                              </el-table-column>
                              <el-table-column label="操作" fixed="right" min-width="30px">
                                  <template slot-scope="scope">
                                  <div class="flex">
                                      <el-button @click="handleClick2(scope.row)" type="text">设置</el-button>
                                  </div>
                                  </template>
                              </el-table-column>
                            </GuipTable>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <!-- 微信 -->
        <div class="register-wrap">
            <div class="step3-wrap">
                <div class="step3-top flex-common">
                    <h3 class="flex gap8">
                    <img src="@/assets/register/weixin.svg" alt="">
                    微信收款</h3>
                </div>
                <div>
                    <div class="flex-common table-wrap">
                        <el-form>
                            <GuipTable :border="true" :tableData="payList[payTypeWeixin]" :loading="tableLoading">
                              <el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
                              <el-table-column prop="account" label="账号"></el-table-column>
                              <el-table-column prop="expires_time" label="有效期" min-width="30px"></el-table-column>
                              <el-table-column prop="is_auto_refund" fixed="right" label="授权平台退款" min-width="30px">
                                  <template slot-scope="scope">
                                    <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                    <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                    <!-- 传入的modelvalue 为数字 0 或者 1 -->
                                    <GuipSwitch v-if="scope.row.is_pay_public == 0"  :modelValue="scope.row.is_auto_refund" active-value="1" inactive-value="0" @change="updateAutoRefund(scope.row)"></GuipSwitch>
                                  </template>
                              </el-table-column>
                              <el-table-column prop="status" fixed="right" label="启用状态"  min-width="30px">
                                  <template slot-scope="scope">
                                    <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                    <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                    <!-- 传入的modelvalue 为数字 0 或者 1 -->
                                    <GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
                                  </template>
                              </el-table-column>
                              <el-table-column label="操作" fixed="right" min-width="30px">
                                  <template slot-scope="scope">
                                  <div class="flex">
                                      <el-button @click="handleClick2(scope.row)" type="text">设置</el-button>
                                  </div>
                                  </template>
                              </el-table-column>
                            </GuipTable>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <!-- 淘宝 -->
        <div class="register-wrap">
            <div class="step3-wrap">
                <div class="step3-top flex-common">
                    <h3 class="flex gap8">
                    <img src="@/assets/register/taobao.svg" alt="">
                    淘宝/天猫店铺</h3>
                </div>
                <div>
                    <div class="flex-common table-wrap">
                        <el-form>
                            <GuipTable :border="true" :tableData="payList[payTypeTaoBao]" :loading="tableLoading">
                              <el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
                              <el-table-column prop="account" label="账号"></el-table-column>
                              <el-table-column prop="expires_time" label="有效期" min-width="50px">
                                <template slot-scope="scope">
                                  <span v-if="scope.row.is_expired==true" class="red">授权过期</span>
                                  <span v-else>{{ scope.row.expires_time }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="status" fixed="right" label="启用状态"  min-width="30px">
                                  <template slot-scope="scope">
                                    <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                    <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                    <!-- 传入的modelvalue 为数字 0 或者 1 -->
                                    <GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
                                  </template>
                              </el-table-column>
                              <el-table-column label="操作" fixed="right" min-width="30px">
                                  <template slot-scope="scope">
                                  <div class="flex">
                                      <el-button @click="handleClick2(scope.row)" type="text">设置</el-button>
                                  </div>
                                  </template>
                              </el-table-column>
                            </GuipTable>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 拼多多 -->
        <div class="register-wrap">
            <div class="step3-wrap">
                <div class="step3-top flex-common">
                    <h3 class="flex gap8">
                    <img src="@/assets/register/pinduoduo.svg" alt="">
                    拼多多店铺</h3>
                </div>
                <div>
                    <div class="flex-common table-wrap">
                        <el-form>
                            <GuipTable :border="true" :tableData="payList[payTypePdd]" :loading="tableLoading">
                              <el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
                              <el-table-column prop="account" label="账号"></el-table-column>
                              <el-table-column prop="expires_time" label="有效期" min-width="50px">
                                <template slot-scope="scope">
                                  <span v-if="scope.row.is_expired==true" class="red">授权过期</span>
                                  <span v-else>{{ scope.row.expires_time }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="status" fixed="right" label="启用状态"  min-width="30px">
                                  <template slot-scope="scope">
                                    <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                    <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                    <!-- 传入的modelvalue 为数字 0 或者 1 -->
                                    <GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
                                  </template>
                              </el-table-column>
                              <el-table-column label="操作" fixed="right" min-width="30px">
                                  <template slot-scope="scope">
                                  <div class="flex">
                                      <el-button @click="handleClick2(scope.row)" type="text">设置</el-button>
                                  </div>
                                  </template>
                              </el-table-column>
                            </GuipTable>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <!-- 京东 -->
        <div class="register-wrap">
            <div class="step3-wrap">
                <div class="step3-top flex-common">
                    <h3 class="flex gap8">
                    <img src="@/assets/register/jingdong.svg" alt="">
                    京东店铺</h3>
                </div>
                <div>
                    <div class="flex-common table-wrap">
                        <el-form>
                            <GuipTable :border="true" :tableData="payList[payTypeJingdong]" :loading="tableLoading">
                              <el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
                              <el-table-column prop="account" label="账号"></el-table-column>
                              <el-table-column prop="expires_time" label="有效期" min-width="50px">
                                <template slot-scope="scope">
                                  <span v-if="scope.row.is_expired==true" class="red">授权过期</span>
                                  <span v-else>{{ scope.row.expires_time }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column prop="status" fixed="right" label="启用状态"  min-width="30px">
                                  <template slot-scope="scope">
                                    <!-- :active-value="1"  :inactive-value="0"（关闭） 加冒号表示数字格式 -->
                                    <!-- active-value="1"  inactive-value="0"（关闭） 不加冒号表示字符串 -->
                                    <!-- 传入的modelvalue 为数字 0 或者 1 -->
                                    <GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
                                  </template>
                              </el-table-column>
                              <el-table-column label="操作" fixed="right" min-width="30px">
                                  <template slot-scope="scope">
                                  <div class="flex">
                                      <el-button @click="handleClick2(scope.row)" type="text">设置</el-button>
                                  </div>
                                  </template>
                              </el-table-column>
                            </GuipTable>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>

        <GuipDialog :dialogVisible="addPayDialogVisible" :title="addPayTitle" :show-close-button="false"
            :show-cancel-button="showCancelButton" @confirm="addPayment" @cancel="handleCancel"
            @close="handleClose" @dialogVisibleChange="dialogVisibleChange" :confirmText="addPayconfirmText" width="700px">
            <!-- 自定义内容 -->
            <div>
                <!-- 淘宝 -->
                <div class="taobaopay"  v-if="addPayType==payTypeTaoBao">
                  <div class="beforeNotice">
                      <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                      <p class="mt12 flex">
                        请确保使用要添加的淘宝主账号登录并授权
                      </p>
                      <p class="mt10 flex">
                        如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面
                      </p>
                  </div> 
                </div>
                <!-- 微信 -->
                <div class="weixinpay" v-else-if="addPayType==payTypeWeixin">
                  <div class="beforeNotice">
                      <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                      <p class="mt12">1.申请公司微信支付。<a href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3" target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">常见问题</a> </p>
                      <p class="mt12 flex">
                        2.前往<a href="https://pay.weixin.qq.com/"
                                          class="flex" target="_blank">
                                          <img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>
                      </p>
                      <p> 在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p>
                  </div>
                  <el-form>
                    <GuipFormItem column="column" class="mb24" label="1. 公司简称">
                        <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name" prop="company_short_name" placeholder="6字以内">
                        </GuipInput>
                    </GuipFormItem>
                    <GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）">
                        <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span>
                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="mch_id" prop="mch_id" placeholder="请输入商户号">
                        </GuipInput>
                    </GuipFormItem>
                    <GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥">
                        <span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">注意，支付密钥不能设置为纯数字</p></span>
                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="apiv2" prop="apiv2" placeholder="请输入微信支付秘钥">
                        </GuipInput>
                    </GuipFormItem>
                    <GuipFormItem column="column" class="mb24" label="4. 公众号APPID">
                        <span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span>
                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="appid" prop="appid" placeholder="请输入公众号APPID">
                        </GuipInput>
                    </GuipFormItem>
                  </el-form>
                </div>
                <!-- 支付宝 -->
                <div class="alipay"  v-if="addPayType==payTypeAlipay">
                  <el-tabs v-model="isPayPublic" @tab-click="handleClick">
                    <el-tab-pane label="我有公司，使用本公司支付宝" name="0">
                      <el-form>
                        <GuipFormItem column="column" class="mb24" label="1. 公司简称">
                            <span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span>
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name" prop="company_short_name" placeholder="6字以内"></GuipInput>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号">
                            <span class="desc" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝</span>
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="alipay_account" prop="mch_id" placeholder="请输入公司支付宝账号"></GuipInput>
                        </GuipFormItem>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="我无公司，申请平台代收款" name="1" v-if="isExistSelfSupplys===false">
                      <div class="beforeNotice">
                        <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4>
                        <p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p>
                        <p class="mt12 flex">使用平台“支付宝支付”，真实姓名必须和支付宝账号实名认证姓名统一</p>
                      </div>
                      <el-form>
                        <GuipFormItem column="column" class="mb24" label="1. 收款人姓名">
                            <span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span>
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_name" prop="company_short_name" placeholder="6字以内"></GuipInput>
                        </GuipFormItem>
                        <GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号">
                            <span class="desc" slot="formRight">请输入有效账号</span>
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_account" prop="mch_id" placeholder="请输入有效收款支付宝账号"></GuipInput>
                        </GuipFormItem>
                      </el-form>
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <!-- 拼多多 -->
                <div class="pddpay"  v-if="addPayType==payTypePdd">
                  <div class="beforeNotice">
                    <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                    <p class="mt12 flex">主账号登录并授权。<a :href="pddAuthUrl" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p>
                    <p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p>
                    <p class="mt5 flex gray">授权成功后会进入＂快乐帮手＂烽火台，复制右上角名称填入下方保存。</p>
                  </div>
                  <el-form>
                    <GuipFormItem column="column" class="mb24" label="账号名称">
                        <!-- <span class="desc" slot="formRight">账号名称</span> -->
                        <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="pdd_shop_name" prop="company_short_name" placeholder="请输入账号名称"></GuipInput>
                    </GuipFormItem>
                  </el-form>
                </div>
                <!-- 京东 -->
                <div class="jdpay"  v-if="addPayType==payTypeJingdong">
                  <div class="beforeNotice">
                      <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                      <p class="mt12 flex">请确保使用要添加的京东主账号登录并授权</p>
                      <p class="mt10 flex">如未购买＂快乐论文检测服务＂服务或已过期，会跳转到购买服务页面</p>
                  </div>
                </div>
            </div>
        </GuipDialog>
    </div>
</template>
<script>
import GuipButton from '@/components/GuipButton.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipTable from '@/components/GuipTable.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 {
  components: {
    GuipButton,
    GuipFormItem,
    GuipInput,
    GuipSwitch,
    GuipDialog,
    GuipTable,
  },
  data() {
    return {
      // 收款方式
      payTypeTaoBao: PAY_TYPE_TAOBAO,
      payTypeWeixin: PAY_TYPE_WEIXIN,
      payTypeAlipay: PAY_TYPE_ALIPAY,
      payTypeJingdong: PAY_TYPE_JINGDONG,
      payTypePdd: PAY_TYPE_PDD,
      // AUTH
      token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
      // 可添加的收款方式
      addablePays: [],
      // 收款方式列表
      payList: [],
      // 表格加载
      tableLoading: false,
      // 添加收款方式弹框
      addPayDialogVisible: false,
      // 控制是否显示取消按钮
      showCancelButton: true, 
      // 控制是否显示关闭按钮
      showCloseButton: true, 
      // 添加收款方式弹框标题
      addPayTitle: '',
      // 添加收款方式类型
      addPayType: '',
      // 添加收款方式确认按钮文本
      addPayconfirmText: '确定',
      // 淘宝授权url
      taobaoAuthUrl: '',
      // 公司简称
      company_short_name: '',
      // 商户号
      mch_id: '',
      // 微信支付秘钥
      apiv2: '',
      // 公众号APPID
      appid: '',
      // 支付宝账号
      alipay_account: '',
      // 是否存在自供货 存在自供货 则不支持支付宝代收款
      isExistSelfSupplys: false,
      // 代收款 收款账号
      receive_payment_account: '',
      // 代收款 收款人姓名
      receive_payment_name: '',
      // 是否是平台支付 0平台支付 1自营支付
      isPayPublic: '0',
      // 拼多多授权url
      pddAuthUrl: '',
      // 拼多多店铺名称
      pdd_shop_name: '',
      // 京东授权url
      jdAuthUrl: '',
    }
  },
  computed: {
    
  },
  mounted() {
    this.getAddablePays()
    this.getPayList()
  },
  methods: {
    // 获取可添加的收款方式
    getAddablePays() {
        this.$http('POST', '/agentnew/ajax_get_addable_pays', {
            gid: this.gid,
        },{
            headers:{
                'Auth': this.token
            }
        }).then(response => {
            this.tableLoading = false
            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')
        })
    },
    // 获取支付列表
    getPayList() {
        this.tableLoading = true
        const that = this
        that.payList = []
        this.$http('POST', '/agentnew/ajax_get_pay_list', {
            gid: this.gid,
        },{
            headers:{
                'Auth': this.token
            }
        }).then(response => {
            this.tableLoading = false
            this.$nextTick(() => {
                that.payList = response.data.paylist
            })
        }).catch(error => {
            console.error(error, 'error')
        })
    },
    updatePayStatus(row) { 
      this.$http('POST', '/agentnew/ajax_update_pay_status', {
          payid: row.payid,
          status: row.status==1 ? 0 : 1,
      }, {
          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')
      })
    },
    updateAutoRefund(row) { 
      this.$http('POST', '/agentnew/ajax_setting_auto_refund', {
          payid: row.payid,
          status: row.status==1 ? 0 : 1,
      }, {
          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')
      })
    },
    
    // 弹框相关方法---start
    showAddPaymentMethodDialog(type, type_desc) {
      console.log(type, 'type');
      this.addPayDialogVisible = true;
      this.addPayTitle = '添加' + type_desc;
      this.addPayType = type;
      if (type == PAY_TYPE_TAOBAO || type == PAY_TYPE_JINGDONG) {
        this.addPayconfirmText = '去授权';
      }
    },
    // 确认按钮事件
    addPayment() {
      if (this.addPayType == PAY_TYPE_TAOBAO) {
        window.open(this.taobaoAuthUrl, '_blank');
        
      } else if (this.addPayType == PAY_TYPE_WEIXIN) {
        this.$http('POST', '/agentnew/ajax_add_weixinpay', {
            company_short_name: this.company_short_name,
            mch_id: this.mch_id,
            apiv2: this.apiv2,
            appid: this.appid
        }, {
            headers: {
                'Auth': this.token
            }
        }).then(response => {
            this.$nextTick(() => {
                if (response.status) {
                    this.$Message.success(response.info);
                    this.getPayList();
                } else {
                    this.$Message.error(response.info);
                }
            })
        }).catch(error => {
            console.error(error, 'error')
        })

      } else if (this.addPayType == PAY_TYPE_ALIPAY) { 
        this.$http('POST', '/agentnew/ajax_add_alipay', {
            company_short_name: this.company_short_name,
            alipay_account: this.alipay_account,
            is_pay_public: this.isPayPublic,
            receive_payment_account: this.receive_payment_account,
            receive_payment_name: this.receive_payment_name
        }, {
            headers: {
                'Auth': this.token
            }
        }).then(response => {
            this.$nextTick(() => {
                if (response.status) {
                    if (this.isPayPublic == 1) {
                      this.$Message.success(response.info);
                      this.getPayList();
                      this.receive_payment_account = ''
                      this.receive_payment_name = ''
                    } else { 
                      window.open(response.data.authurl, '_blank');
                    }
                    
                } else {
                    this.$Message.error(response.info);
                }
            })
        }).catch(error => {
            console.error(error, 'error')
        })
      } else if (this.addPayType == PAY_TYPE_PDD) { 
        this.$http('POST', '/agentnew/ajax_add_pddpay', {
            shop_name: this.pdd_shop_name,
        }, {
            headers: {
                'Auth': this.token
            }
        }).then(response => {
            this.$nextTick(() => {
                if (response.status) {
                    this.$Message.success(response.info);
                    this.getPayList();
                    this.pdd_shop_name = ''
                    
                } else {
                    this.$Message.error(response.info);
                }
            })
        }).catch(error => {
            console.error(error, 'error')
        })
      } else if (this.addPayType == PAY_TYPE_JINGDONG) { 
        window.open(this.jdAuthUrl, '_blank');
      }

      this.addPayDialogVisible = false;
    },
    // 取消按钮事件
    handleCancel() {
        this.addPayDialogVisible = false;
    },
    // 关闭弹框事件
    handleClose() {
        this.addPayDialogVisible = false;
    },
    dialogVisibleChange(data) {
        console.log(data, 'data098908090');
    },
    // 弹框相关方法---end
    handleClick(tab, event) {
        console.log(tab, event);
    }
  },

};
</script>
<style lang="scss" scoped>
.pageheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pageheader-title {
    flex: 1;
    min-width: 300px;
}

.pageheader-title h3 {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
    margin-top:8px;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.red {
  color:#FF4D4F !important;
}

.gray {
  color:#8A9099 !important;
}

a {
  text-decoration: none;
  color: #006AFF;
}

.el-table {
  min-height: auto !important;
}

.beforeNotice {

    h4 {
        margin: 0;
        gap: 8px;
    }

    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: 5px;
            margin-right: 5px;
        }
    }
}

::v-deep .custom-popover {
    position: fixed !important;
    // max-height: 290px;
    // overflow-y: auto;
    margin-top: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
}

.register-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;

  .custom-icon {
    width: 24px;
    height: 24px;
  }

  .register-top {
    display: flex;
    justify-content: space-between;
    // height: 72px;
    align-items: center;
    padding: 20px 40px 20px 110px;
    background: linear-gradient(270deg, #F6EEF7 3%, #EDE9FB 97%);
    color: #23242B;
    letter-spacing: 0.08em;
    line-height: 32px;

    .register-top-left {
      display: flex;
      align-items: center;

      .register-top-left img {
        margin-right: 12px;
      }
    }
  }

  .step3-wrap {
    flex: 1;

    .step3-top {
      display: flex;
      justify-content: space-between;
      padding-bottom: 0;
      align-items: end;
      h3{
        margin: 0;
      }

    }
  }

}


.table-wrap {
  span {
    color: #1E2226;
  }

  .edit_icon {
    display: none;
    transition: all .3s;
    margin-left: 8px;
  }

  .el-table__row:hover {
    .edit_icon {
      display: block;
      transition: all .3s;
    }
  }
}

.green,
.blue {
  width: 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #0DAF49 !important;
  letter-spacing: 0.08em;
  /* 基本 */
  width: 80px;
  border-radius: 4px;
  background: rgba(239, 255, 224, 0.5);
  box-sizing: border-box;
  border: 1px solid rgba(0, 194, 97, 0.6);
  margin-right: 8px;
}

.blue {
  background: #F2F7FF;
  border: 1px solid #BFDAFF;
  color: #006AFF !important;
}




.step-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 0 0;

  .step-item {
    align-items: center;
    display: flex;

    span {
      color: #1E2226;
      letter-spacing: 0.08em;
    }

    .custom-icon {
      margin-right: 12px;
    }
  }

  .checked span {
    font-size: 16px;
    font-weight: bold;
    color: #006AFF !important;
    transition: all .3s;

  }

  .success span {
    font-size: 16px;
    font-weight: normal;
    color: #006AFF !important;
    transition: all .3s;
  }

  .step-line {
    flex: 1;
    margin: 0 32px;
    border-bottom: 1px solid #DFE2E6;
  }

  .step_active-line {
    transition: all .3s;
    border-bottom: 1px solid #006AFF;
  }
}

.step-desc {
  padding-top: 6px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px;
  color: #8A9099;

  span {
    padding-left: 36px;
  }
}


</style>
