<template>
  <div class="register-wrap min-width">
    <!-- 顶部提示语 -->
    <div class="register-top">
      <div class="register-top-left">
        <img src="@/assets/register/register-top-left.svg" alt="">
        <span>设置完这些信息就可以正式售卖啦，也可以选择跳过，先进入后台看看哦 </span>
      </div>
      <div class="register-top-right">
        <img src="@/assets/register/register-top-close.svg" alt="">
      </div>
    </div>
    <!-- 步骤条 -->
    <el-steps :active="activeStep" finish-status="success">
      <el-step title="步骤 1">
        <template #icon>
          <img src="@/assets/register/step1_ing.svg" alt="icon1" class="custom-icon" />
          <!-- <img src="@/assets/register/step_success.svg" alt="icon1" class="custom-icon" /> -->
        </template>
        <div>
          <span>基础信息</span>
          <span>填写站点信息、选择模板样式</span>
        </div>
      </el-step>
      <el-step title="步骤 2">
        <template #icon>
          <!-- <img src="@/assets/register/step2_ing.svg" alt="icon1" class="custom-icon" /> -->
          <img src="@/assets/register/step2_null.svg" alt="icon2" class="custom-icon" />
          <!-- <img src="@/assets/register/step_success.svg" alt="icon1" class="custom-icon" /> -->
        </template>
        <div>
          <span>基础信息</span>
          <span>填写站点信息、选择模板样式</span>
        </div>
      </el-step>
      <el-step title="步骤 3">
        <template #icon>
          <!-- <img src="@/assets/register/step3_ing.svg" alt="icon1" class="custom-icon" /> -->
          <img src="@/assets/register/step3_null.svg" alt="icon3" class="custom-icon" />
          <!-- <img src="@/assets/register/step_success.svg" alt="icon1" class="custom-icon" /> -->
        </template>
        <div>
          <span>基础信息</span>
          <span>填写站点信息、选择模板样式</span>
        </div>
      </el-step>
    </el-steps>

    <el-steps :active="activeStep" finish-status="success">
      <el-step v-for="(step, index) in steps" :key="index" :status="getStepStatus(index)">
        <!-- 自定义图标插槽 -->
        <template #icon>
          <div class="custom-icon">
            <!-- 填写完毕状态 -->
            <img v-if="isStepFinished(index)" src="@/assets/register/step1_ing.svg" alt="checked"
              style="width: 24px; height: 24px" />
            <!-- 填写中状态 -->
            <img v-else-if="isStepActive(index)" :src="step.checked" alt="editing" style="width: 24px; height: 24px" />
            <!-- 未填写状态 -->
            <img v-else :src="step.wait" alt="waiting" style="width: 24px; height: 24px" />
          </div>
        </template>

        <!-- 自定义文案插槽 -->
        <template #title>
          <div class="step-title">
            <span>{{ step.title }}</span>
            <div class="step-status">
              {{ getStepStatusText(index) }}
            </div>
          </div>
        </template>
      </el-step>
    </el-steps>

    <p class="pageDesc min-flex">搭建售卖渠道</p>

    <div class="step1-wrap min-flex" v-if="activeStep == 1">

      <div class="step1-top1 flex-common">
        <h3>站点信息</h3>
        <el-form :model="form1" ref="formRef">
          <div class="flex-wrap">
            <div class="flex-left">
              <GuipFormItem column="column" class="mb24">
                <!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
                <div slot="formLeft">站点简称
                </div>
                <div slot="formRight" class="desc">一个站点对应一个销售渠道，定义好名字好区分
                </div>
                <GuipInput slot="formDom" ref="GuipInput" :maxlength="10" :showWordLimit="true"
                  placeholder="仅自己区分站点销售渠道，客户看不到" />
              </GuipFormItem>
              <GuipFormItem column="column">
                <div slot="formLeft">销售渠道
                </div>
                <GuipRadio slot="formDom" v-model="form1.distribution_channel" :options="distribution_channel_options"
                  prop="language" @change="radioChange" />
              </GuipFormItem>
            </div>
            <div class="flex-line"></div>
            <div class="flex-right">
              <GuipFormItem column="column" class="mb24">
                <div slot="formLeft">域名来源
                </div>
                <GuipRadio slot="formDom" v-model="form1.language" :options="domain_source" prop="language"
                  @change="radioChange" />
              </GuipFormItem>
              <GuipFormItem column="column">
                <div slot="formLeft">域名设置
                </div>
                <GuipInput slot="formDom" ref="GuipInput" @click="yumingInput" placeholder="仅支持数字、字母">
                  <span slot="appendshow">.chachongz.com</span>
                </GuipInput>
              </GuipFormItem>
            </div>
          </div>
        </el-form>
      </div>
      <div class="step1-top2 flex-common">
        <h3>模板选择</h3>
        <el-form :model="form1" ref="formRef">
          <div class="flex-wrap">
            <div class="flex-left">

            </div>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 电商渠道 -->
    <div class="step2-wrap min-flex" v-if="activeStep == 2 && distribution_channel > 0">
      <div class="step1-top flex-common">
        <h3>店铺收款</h3>
        <el-form :model="form2" ref="formRef">
          <div class="flex-wrap">
            <div class="flex-left">
              <!--电商渠道-仅支持店铺首款 -->
              <GuipFormItem column="column">
                <div slot="formLeft">店铺渠道
                </div>
                <GuipRadio slot="formDom" v-model="form2.store_channel" :options="store_channel" prop="language"
                  @change="radioChange_store" />
              </GuipFormItem>

              <GuipFormItem column="column" v-if="has_store < 1">
                <div slot="formLeft">店铺授权
                </div>
                <div slot="formDom" class="first_register">
                  <div class="first_reg_left">
                    <b>请确保使用要添加的淘宝主账号登录并授权</b>
                    <p> 如未购买"快乐帮手"服务或已过期，会跳转到购买服务页面</p>
                  </div>
                  <div class="first_reg_right">
                    <GuipButton type="primary" size="medium">前往授权</GuipButton>
                  </div>
                </div>
              </GuipFormItem>
              <GuipFormItem column="column" v-else>
                <div slot="formLeft">店铺绑定
                </div>
                <div slot="formRight" class="desc">可选择已有店铺，或授权新店铺
                </div>
                <div slot="formDom" class="first_register">

                </div>
              </GuipFormItem>
            </div>

          </div>
        </el-form>
      </div>
    </div>
    <!-- 非电商 -->
    <div class="step2-wrap min-flex" v-if="activeStep == 2 && distribution_channel < 1">
      <div class="step2-top flex-common">
        <h3>店铺收款</h3>
        <el-form :model="form3" ref="formRef">
          <div class="flex-wrap">
            <div class="flex-left">
              <GuipFormItem column="column">
                <div slot="formLeft" class="form-top-icon">
                  <img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;" alt=""><span>微信收款</span>
                </div>
                <GuipSelect slot="formDom" v-model="form3.weixin_pay" prop="weixin_pay" :options="options_weixin"
                  placeholder="未绑定微信收款" />
              </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>
                <GuipSelect slot="formDom" v-model="form3.zhifubao_pay" prop="zhifubao_pay" :options="options_zhifubao"
                  placeholder="未绑定支付宝收款" />
              </GuipFormItem>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="step3-wrap min-flex" v-if="activeStep == 3">
      <div class="step3-top flex-common">
        <h3>服务列表</h3>
        <div class="btngroup">
          <GuipButton type="normal" size="mmedium" @click="showDomainModal">添加查重服务</GuipButton>
          <GuipButton type="normal" size="mmedium">添加写作辅助</GuipButton>
          <GuipButton type="normal" size="mmedium">添加AIGC</GuipButton>
        </div>
      </div>
      <div>
        <div class="flex-common table-wrap">
          <el-form>
            <el-table :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
              :key="random()">
              <!-- 其他列 -->
              <el-table-column prop="name" label="检测服务" width="210">
                <template slot-scope="scope">
                  <div class="flex">
                    <span :class="(scope.row.type == 'a' ? 'green' : 'blue')">{{ scope.row.type == 'a' ? '查重服务' : '写作辅助'
                    }}</span>
                    <span class="">{{ scope.row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="今日供货价">
                <template slot-scope="scope">
                  <div class="flex cell_render">
                    <span>¥{{ scope.row.stock }}/篇</span>
                    <img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
                  </div>
                </template>
              </el-table-column>

              <!-- 价格列 -->
              <el-table-column label="售价">
                <template v-slot="{ row, $index }">
                  <el-popover v-model="row.price_popover" placement="top" trigger="manual" :ref="`popover-${$index}`"
                    @show="popshow">
                    <!-- 弹框内容 -->
                    <div style="text-align: center">
                      <GuipInput ref="GuipInput" v-if="!row.word" width="252px" v-model="row.edit_price" label="售价"
                        placeholder="请输入售价" unit="元">
                      </GuipInput>
                      <div v-else class="flex">
                        <GuipInput ref="GuipInput" width="133px" v-model="row.edit_price" label="售价" placeholder="请输入售价"
                          unit="元">
                        </GuipInput>
                        <span class="shortspan">/</span>
                        <GuipInput ref="GuipInput" width="133px" v-model="row.edit_word" placeholder="请输入字符" unit="字符">
                        </GuipInput>
                      </div>
                      <!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
                      <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
                        <GuipButton size="medium" @click="cancelEdit(row, 'price')">取消</GuipButton>
                        <GuipButton type="primary" @click="savePrice(row, 'price')" size="medium">确定</GuipButton>
                      </div>
                    </div>
                    <!-- 触发弹框的按钮 -->
                    <span slot="reference" @click="handlePriceClick(row, $index, 'price')">

                      <div class="flex cell_render">
                        <span v-if="row.word" :key="random()">¥{{ row.price }}/{{ row.word }}字</span>
                        <span v-else :key="random()">¥{{ row.price }}/篇</span>
                        <img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
                      </div>
                    </span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="排序">
                <template v-slot="{ row, $index }">
                  <el-popover v-model="row.num_popover" placement="top" trigger="manual" :ref="`popover-${$index}`"
                    @show="popshow">
                    <!-- 弹框内容 -->
                    <div style="text-align: center">
                      <GuipInput ref="GuipInput" width="252px" v-model="row.edit_num" label="排序" placeholder="请输入数字">
                      </GuipInput>
                      <p style="    width: 252px;
    margin-left: 40px;
    text-align: right;color: #8A9099;letter-spacing: 0.08em;">输入＞0的数，越小排序越前；重复则新者优先；0则默认排序</p>
                      <!-- <el-input v-model="row.edit_price" size="small" placeholder="请输入价格" /> -->
                      <div class="flex" style="text-align: right; margin-top: 32px;justify-content: flex-end;">
                        <GuipButton size="medium" @click="cancelEdit(row, 'num')">取消</GuipButton>
                        <GuipButton type="primary" @click="savePrice(row, 'num')" size="medium">确定</GuipButton>
                      </div>
                    </div>
                    <!-- 触发弹框的按钮 -->
                    <span slot="reference" @click="handlePriceClick(row, $index, 'num')">
                      <div class="flex cell_render">
                        <span>{{ row.num }}</span>
                        <img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
                      </div>
                    </span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="收款方式" width="195">
                <template slot-scope="scope">
                  <div class="flex cell_render" @click="popPayMentModal(scope.row)">
                    <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{ scope.row.payment ==
                      '0' ? '默认站点支付' :'自定义支付' }}</span>
                    <img class="edit_icon" src="@/assets/register/tableEdit.svg" alt="">
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="stock" label="上首页">
                <template slot-scope="scope">
                  <GuipSwitch :modelValue="scope.row.homeFlag" @change="onSwitchChange(scope.row)">
                  </GuipSwitch>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="112">
                <template slot-scope="scope">
                  <div class="flex">
                    <el-button type="text">编辑</el-button>
                    <el-button @click="handleClick(scope.row)" type="text">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
              :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
              :total="tableData1.length">
            </el-pagination>
          </el-form>
        </div>

      </div>
    </div>
    <!-- 设置域名弹出框 -->
    <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
      :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
      @dialogVisibleChange="dialogVisibleChange">
      <PaymentMethod :paymentList="paymentList" />
    </GuipDialog>
    <GuipDialog :dialogVisible="dialogVisible1" title="温馨提示" :show-close-button="false"
      :show-cancel-button="showCancelButton" cancelText="先用平台免费域名" confirmText="准备完毕，验证自有域名" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
      @dialogVisibleChange="dialogVisibleChange">
      <DomainModal/>
    </GuipDialog>
    <Footer></Footer>
    <div class="register-btns">
      <GuipButton type="mild">跳过</GuipButton>
      <GuipButton type="primary">完成</GuipButton>
    </div>
  </div>
</template>
<script>
import Footer from '@/components/Footer.vue';
import GuipButton from '@/components/GuipButton.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipRadio from '@/components/GuipRadio.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import PaymentMethod from '@/components/paymentMethod.vue';
import DomainModal from '@/components/domainModal.vue';
// import GuipTable from '@/components/GuipTable.vue';

export default {
  components: {
    GuipButton,
    GuipFormItem,
    GuipInput,
    GuipRadio,
    GuipSelect,
    Footer,
    GuipSwitch,
    GuipDialog,
    PaymentMethod,
    DomainModal
    // GuipTable
  },
  data() {
    return {
      dialogTitle:'编辑',
      dialogVisible1:false,
      paymentList: [
        {
          type: '1',
          name: '小知攻城狮',
          num: '1520574481 （wx1bda8b3d08d169cb）',
          flag: true
        },
        {
          type: '2',
          name: '自收款',
          num: 'wangyong@kuailebanshou.com',
          flag: true
        },
        {
          type: '3',
          name: '店铺收款',
          num: '轻歌曼舞82',
          flag: false
        },
        {
          type: '4',
          name: '京东收款',
          num: 'celunwen',
          flag: false
        },
      ],
      currentPage: 1,    //当前页
      pageSize: 5,   //每页的容量
      total: 0,   //列表总数
      dialogVisible: false,//是否展示弹框
      showCancelButton: true, // 控制是否显示取消按钮
      showCloseButton: true, // 控制是否显示关闭按钮
      activeStep: 3,//当前步骤条
      has_store: '1',//是否是初次授权 还是已有店铺 大于0 已有店铺
      distribution_channel: '0',//销售渠道 是否为电商 0 非电商 >0 电商
      payment_method_list: [//收款方式

      ],
      add_chachong_list: [//查重服务

      ],
      distribution_channel_options: [
        { label: '电商平台销售', value: '1', selectedLabel: '电商平台销售（淘宝、天猫、拼多多店铺）' },
        { label: '非电商平台销售', value: '0', selectedLabel: '非电商平台销售（浏览器搜索推广、微信售卖等）' },
      ],
      domain_source: [
        { label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
        { label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
      ],
      store_channel: [
        { label: '拼多多', value: '拼多多', selectedLabel: "拼多多" },
        { label: '天猫', value: '天猫', selectedLabel: "天猫" },
        { label: '淘宝', value: '淘宝', selectedLabel: "淘宝" },
      ],
      steps: [
        { title: "步骤 1", 'desc': '', 'wait': '@/assets/register/step1_ing.svg', 'checked': '@/assets/register/step1_ing.svg', 'finish': '@/assets/register/step_success.svg' },
        { title: "步骤 2", 'desc': '', 'wait': '@/assets/register/step2_null.svg', 'checked': '@/assets/register/step2_ing.svg', 'finish': '@/assets/register/step_success.svg' },
        { title: "步骤 3", 'desc': '', 'wait': '@/assets/register/step3_null.svg', 'checked': '@/assets/register/step3_ing.svg', 'finish': '@/assets/register/step_success.svg' }
      ],
      tableData1: [
        { id: 1, name: '万方大学生版', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a', num: '1', edit_num: '', num_popover: false, homeFlag: true, payment: '0' },
        { id: 2, name: '维普检测版', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a', num: '2', edit_num: '', num_popover: false, homeFlag: true, payment: '1' },
        { id: 3, name: '商品C1', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b', num: '2', edit_num: '', num_popover: false, homeFlag: false, payment: '0' },
        { id: 1, name: '商品A2', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a', num: '3', edit_num: '', num_popover: false, homeFlag: false, payment: '0' },
        { id: 2, name: '商品B2', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a', num: '0', edit_num: '', num_popover: false, homeFlag: true },
        { id: 3, name: '商品C2', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b', num: '1', edit_num: '' },
        { id: 1, name: '商品A3', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a' },
        { id: 2, name: '商品B3', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a' },
        { id: 3, name: '商品C3', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b' },
        { id: 1, name: '商品A4', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a' },
        { id: 2, name: '商品B4', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a' },
        { id: 3, name: '商品C4', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b' },
        { id: 1, name: '商品A5', stock: 100, price: 50, price_popover: false, edit_price: '', type: 'a' },
        { id: 2, name: '商品B5', stock: 200, price: 80, word: 1000, price_popover: false, edit_price: '', editWord: '', type: 'a' },
        { id: 3, name: '商品C5', stock: 150, price: 120, price_popover: false, edit_price: '', type: 'b' },
      ],
      typelistobj: {
        a: ''
      },

      // 表格列配置
      columns: [
        { prop: 'name', label: '检测服务', popover: false }, // 支持气泡框
        { prop: 'age', label: '今日供货价', popover: true }, // 不支持气泡框
        { prop: 'address', label: '售价', popover: true }, // 支持气泡框
        { prop: 'address1', label: '收款方式', popover: true }, // 支持气泡框
        { prop: 'address2', label: '排序', popover: true }, // 支持气泡框
        { prop: 'address3', label: '上首页', popover: false }, // 支持气泡框
        // { prop: 'address', label: '操作', popover: false }, // 支持气泡框
      ],
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        price: '20',
        age: 20,
        // 在支持修改的项目中，需要主动保留一份原始数据
        edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
      },],
      form1: {
        username: '',
        distribution_channel: '',
      },
      form2: {
        store_channel: '',
      },
      form3: {
        zhifubao_pay: '',
        weixin_pay: '',
      },
      options_weixin: [],
      options_zhifubao: [],
    };
  },
  methods: {
    showDomainModal(){
      this.dialogVisible1 = true
    },
    yumingInput(){
      this.dialogVisible1 = true;
    },
    // 确认按钮事件
    handleConfirm() {
      this.$message.success('点击了确认按钮');
      this.dialogVisible = false;
    },
    // 取消按钮事件
    handleCancel() {
      this.$message.warning('点击了取消按钮');
      this.dialogVisible = false;
    },
    // 关闭弹框事件
    handleClose() {
      this.$message.info('弹框已关闭');
      this.dialogVisible = false;
    },
    dialogVisibleChange(data) {
      console.log(data, 'data098908090');
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    popshow() {
      var ariaEls = document.querySelectorAll('.el-popover')
      ariaEls.forEach((item) => {
        item.removeAttribute('aria-hidden')
      })

      ariaEls = document.querySelectorAll('.el-radio__original')
      ariaEls.forEach((item) => {
        item.removeAttribute('aria-hidden')
      })
    },
    // 表格首页开关
    onSwitchChange(row) {
      console.log(row, '------flag');
      row.homeFlag = !row.homeFlag;
      this.$set(this.tableData1, row)
    },
    // 点击价格单元格时触发
    handlePriceClick(row, index, type) {
      // 关闭其他行的弹框
      this.tableData.forEach((item, i) => {
        if (i !== index) {
          item[type + '_popover'] = false;
        }
      });
      // 打开当前行的弹框
      row[type + '_popover'] = true;
      row['edit_' + type] = row[type]
      // row.edit_price = row.price; // 初始化输入框的值
    },
    // 保存价格
    savePrice(row, type) {
      if (type == 'price' && row.edit_price === '') {
        this.$message.warning('价格不能为空');
        return;
      }
      if (type == 'word' && row.word && row.editWord === '') {
        this.$message.warning('字符不能为空');
        return;
      }
      if (row.edit_word) {
        row.word = row.edit_word
      }
      row[type] = row['edit_' + type]; // 更新价格
      row[type + '_popover'] = false; // 关闭弹框
      this.$message.success('保存成功');
      this.$set(this.tableData1, row)
      console.log('保存价格：', this.tableData1, row.price);
      // 这里可以调用接口保存修改后的价格
    },
    // 取消编辑
    cancelEdit(row, type) {
      row[type + '_popover'] = false; // 关闭弹框
      this.$message.info('已取消编辑');
    },
    random() {
      var randomNumber = Math.random();
      return randomNumber
    },
    // nextStep() {
    //   if (this.activeStep < 2) {
    //     this.activeStep++;
    //   }
    // },
    // 销售渠道
    radioChange(type) {
      console.log(type, '--');
      this.distribution_channel = type;
    },
    // 店铺渠道选择
    radioChange_store(data) {
      console.log(data, '店铺渠道选择');
      // this.distribution_channel= data;
    },
    // 上一步
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--;
      }
    },
    // 下一步
    nextStep() {
      if (this.activeStep < this.steps.length - 1) {
        this.activeStep++;
      }
    },
    // 判断步骤是否已完成
    isStepFinished(index) {
      return index < this.activeStep;
    },
    // 判断步骤是否为当前步骤（填写中）
    isStepActive(index) {
      return index === this.activeStep;
    },
    // 获取步骤状态
    getStepStatus(index) {
      if (this.isStepFinished(index)) {
        return "success"; // 已完成
      } else if (this.isStepActive(index)) {
        return "process"; // 进行中
      } else {
        return "wait"; // 未开始
      }
    },
    // 获取步骤状态文案
    getStepStatusText(index) {
      if (this.isStepFinished(index)) {
        return "已完成";
      } else if (this.isStepActive(index)) {
        return "填写中";
      } else {
        return "未开始";
      }
    },
    popPayMentModal(row) {
      this.dialogVisible = true;
      this.dialogTitle = row.name + '-收款方式'
      console.log(row, '=====');
    }
  }
};
</script>
<style lang="scss" scoped>
.width-box {
  width: 1220px;
}

@media (min-width: 1441px) {
  .width-box {
    width: 1220px;
  }
}

@media (max-width:1200px) {
  .width-box {
    width: 1100px;
  }

}


.shortspan {
  display: inline-block;
  height: 38px;
  margin: 0 12px;
}

.custom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-status {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.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;
      }
    }
  }

  .pageDesc {
    /* 自动布局 */
    display: flex;
    flex-direction: column;
    padding: 24px 36px;
    line-height: 32px;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 0.06em;
    color: #1E2226;
    text-align: left;
    width: calc(84.75% - 72px);
  }

  .step1-top {
    .form-item1 {
      margin-bottom: 24px;
    }
  }

  .step1-top2 {
    margin-top: 20px;
  }

  // 店铺首次授权
  .first_register {
    letter-spacing: 0.08em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    align-self: stretch;
    background: #FAFAFA;
    border-radius: 4px;

    b {
      display: inline-block;
      width: 100%;
      text-align: left;
      font-weight: normal;
      margin-bottom: 12px;
    }

    p {
      font-size: 12px;
      font-weight: normal;
      line-height: 13px;
      color: #626573;
    }
  }

  .step3-wrap {
    flex: 1;

    .step3-top {
      display: flex;
      justify-content: space-between;

      .btngroup {
        display: flex;

        button {
          margin-left: 12px;
        }
      }
    }
  }

}

.normal_payment,
.self_payment {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2px 10px;
  border-radius: 4px;
  background: #F6F7FA;
  box-sizing: border-box;
  border: 1px solid #DFE2E6;
  letter-spacing: 0.08em;
  color: #626573;
}

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

.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 {
  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;
}

.register-btns {
  // height: 78px;
  /* 自动布局 */
  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);
}
</style>