<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>
    <div class="sticky">
      <div style="width: 100%;background: #fff;">
        <div class="step-wrap min-flex">
          <div :class="['step-item', activeStep == 1 ? 'checked' : 'success']" @click="goCurActiveStep(1)">
            <img v-if="activeStep == 1" src="@/assets/register/step1_ing.svg" alt="" class="custom-icon">
            <img v-if="activeStep > 1" src="@/assets/register/step_success.svg" alt="" class="custom-icon">
            <span>基础信息</span>
          </div>
          <div :class="['step-line', activeStep > 1 ? 'step_active-line' : '']"></div>
          <div :class="['step-item', activeStep == 2 ? 'checked' : activeStep > 2 ? 'success' : '']"
            @click="goCurActiveStep(2)">
            <img v-if="activeStep == 1" src="@/assets/register/step2_null.svg" alt="" class="custom-icon">
            <img v-if="activeStep == 2" src="@/assets/register/step2_ing.svg" alt="" class="custom-icon">
            <img v-if="activeStep > 2" src="@/assets/register/step_success.svg" alt="" class="custom-icon">
            <span>收款方式</span>
          </div>
          <div :class="['step-line', activeStep > 2 ? 'step_active-line' : '']"></div>
          <div :class="['step-item', activeStep == 3 ? 'checked' : activeStep > 2 ? 'success' : '']"
            @click="goCurActiveStep(3)">
            <img v-if="activeStep != 3" src="@/assets/register/step3_null.svg" alt="" class="custom-icon">
            <img v-if="activeStep == 3" src="@/assets/register/step3_ing.svg" alt="" class="custom-icon">
            <!-- <img v-if="activeStep >2" src="@/assets/register/step_success.svg" alt=""> -->
            <span>添加服务</span>
          </div>
        </div>
      </div>
      <div style="width: 100%;background: #fff;">
        <div class="step-desc min-flex">
          <span> {{ renderStepDesc('1') }}</span>
          <span>{{ renderStepDesc('2') }}</span>
          <span>{{ renderStepDesc('3') }}</span>
        </div>
      </div>
    </div>
    <!-- 步骤条 -->
    <!-- <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="step.finish" 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>
                <span slot="formRight">适用于搜索推广，如360、百度、微信售卖等渠道</span>
                <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>
        <div class="flex-wrap">
          <div class="flex-left">
            <div class="tem-home">
              <img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
              <div class="tem-home-bottom">
                <b>经典深蓝模板（默认）</b>
                <div>
                  <div class="tem-look" @click="lookTemImg">
                    <img src="@/assets/register/look-tem.svg" alt="">
                    预览
                  </div>
                  <div @click="editTemImg">
                    <img src="@/assets/register/edit-tem.svg" alt="">
                    修改
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-line"></div>
          <div class="flex-right">
          </div>
        </div>

      </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">
                  <CustomDropdown v-model="selectedValue1" :options="options1" @change="changeSelect" placeholder="请选择">
                    <!-- 自定义触发按钮 -->
                    <template #trigger>
                      <span v-if="selectedItem" style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
                        selectedItem.desc }}</span>
                      <span v-else>请选择</span>
                    </template>
                    <template #normal>
                      <div class="flex flex-between noraml-jump">
                        <div class="left">
                          <b>授权新店铺</b>
                          <p class="one">请确保使用要添加的淘宝主账号登录并授权</p>
                          <p>如未购买"快乐帮手"服务或已过期，会跳转到购买服务页面</p>
                        </div>
                        <div class="right">
                          <GuipButton type="primary" size="medium">点击授权</GuipButton>
                        </div>
                      </div>
                    </template>

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

                  <!-- 自定义下拉选项 -->
                  <template #item="{ item }">
                    <div class="flex-between">
                      <div class="left">
                        <p class="one">{{ item.label }}</p>
                        <p>{{ item.desc }}</p>
                      </div>
                      <div class="right">
                        <img v-if="selectedItem.value == item.value" src="../assets/register/drop-selected.svg" alt="">
                      </div>
                    </div>
                  </template>
                  <!-- <template #options_null>
                    <div class="flex-between dropdown-item" >
                      <div class="left">
                        <p class="one">暂无收款账号</p>
                        <p>暂时没有收款账号，我想稍后配置</p>
                      </div>
                      <div class="right">
                        <img 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>
                <GuipSelect slot="formDom" v-model="form3.zhifubao_pay" prop="zhifubao_pay" :options="options_zhifubao"
                  placeholder="未绑定支付宝收款" />
                <!-- <CustomDropdown slot="formDom" v-model="form3.weixin_pay" :options="options_weixin"
                  @change="changeSelectWeixin" placeholder="请选择" :options_null="options_weixin_null"
                  @changeNormal="changeNormalWeixin">
                  <template #trigger>
                    <span v-if="selectedItemWeixin" style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
                      select_placeholder_weixin ? select_placeholder_weixin :
                        selectedItemWeixin.desc }}</span>
                    <span v-else>请选择</span>
                  </template>
                  <template #normal>
                    <div class="flex flex-between noraml-jump">
                      <div class="left">
                        <b>绑定新微信收款</b>
                        <p class="one">需要使用您公司的微信支付</p>
                        <p>需在微信商户平台-产品中心开通Native支付</p>
                      </div>
                      <div class="right">
                        <GuipButton type="primary" size="medium">前往绑定</GuipButton>
                      </div>
                    </div>
                  </template>
                  <template #item="{ item }">
                    <div class="flex-between">
                      <div class="left">
                        <p class="one">{{ item.label }}</p>
                        <p>{{ item.desc }}</p>
                      </div>
                      <div class="right">
                        <img v-if="selectedItem.value == item.value" src="../assets/register/drop-selected.svg" alt="">
                      </div>
                    </div>
                  </template>
                </CustomDropdown> -->
              </GuipFormItem>
            </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="handleClose1" @dialogVisibleChange="dialogVisibleChange">
      <DomainModal />
    </GuipDialog>

    <el-dialog :visible.sync="dialogVisibleAdd" ref="addDialog" width="1011px" class="addDialog-wrap"
      :show-close="false">
      <div class="addService_wrap">
        <div class="addServicetop">
          <div class="flex">
            <b>添加查重服务</b>
            <!-- 分类导航 -->
            <el-scrollbar>
              <ul>
                <li v-for="(item, index) in addlist" :key="item.name" @click="scrollToCategory(index)"
                  :class="['normal_service', activeCategory == index ? 'active_service' : '']">
                  <img :src="addImgList[item.name]" alt="">
                  {{ item.name }}
                </li>
              </ul>
            </el-scrollbar>
          </div>
          <img src="@/assets/register/close.svg" alt="" @click="handleCloseAdd">
        </div>
        <!-- 内容 -->
        <div class="addServicebot" ref="content">
          <div v-for="(category, index) in addlist" :key="index" :ref="`category-${index}`" class="category-section">
            <h3 class="flex"><img :src="addImgList[category.name]" alt="">{{ category.name }}</h3>
            <p class="service-desc">{{ category.desc }}</p>
            <ul>
              <li v-for="item in category.list" :key="item.name" :class="item.checked ? 'service-active' : ''">
                <div class="service-name-item flex-between">
                  <span>{{ item.name }}</span>
                  <input type="checkbox" :id="`item-${item.id}`" v-model="item.checked"
                    @change="updateSelectedCount(item)" />
                </div>
                <p class="service-desc-item">{{ item.desc }}</p>
                <p class="service-price-item"><i>¥</i><span>{{ item.price }}</span> / {{ item.word }}</p>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <div class="bottom flex">
        <span>已选{{ serviceTotal }}项服务</span>
        <GuipButton type="primary" :btnstyle="btnstyleObj1" @click="nextGoSettingPrice">下一步</GuipButton>
      </div>
    </el-dialog>

    <Footer></Footer>
    <div class="register-btns">
      <GuipButton type="mild" @click="jumpCurStep">跳过</GuipButton>
      <GuipButton type="primary" @click="finishCurStep">完成</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 CustomDropdown from '@/components/CustomDropdown.vue';
// import GuipTable from '@/components/GuipTable.vue';
import store from '../store';

export default {
  components: {
    GuipButton,
    GuipFormItem,
    GuipInput,
    GuipRadio,
    GuipSelect,
    Footer,
    GuipSwitch,
    GuipDialog,
    PaymentMethod,
    DomainModal,
    CustomDropdown
    // GuipTable
  },
  data() {
    return {
      btnstyleObj1: {
        width: '137px',
        height: '38px',
      },
      serviceTotal: 0,
      activeCategory: 0,
      addlist: [
        {
          name: '万方',
          desc: '提供中英文文献相似性检测服务。自主研发的“句子级正交软聚类倒排语义” 算法，海量数据全文对比，5分钟快速出报告。',
          list: [
            {
              name: '一般新文献',
              desc: '适用于所有未正式发表的文献类型。',
              price: '2.4',
              word: '1000字符',
              checked: false,
              checkFlag: true
            },
            {
              name: '本科论文',
              desc: '适用于在校大学生毕业论文。',
              price: '2.4',
              word: '1000字符',
              checked: false,
              checkFlag: false
            },
            {
              name: '说博士论文',
              desc: '适用于应届高校硕博士研究生论文检测。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '高职高专',
              desc: '适用于高等职业学院和高等专科学校论文检测。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '一般新文献1name',
              desc: '适用于所有未正式发表的文献类型。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
          ]
        },
        {
          name: '维普',
          desc: '维普维普维普维普维普维普维普维普',
          list: [
            {
              name: '一般新文献222',
              desc: '适用于所有未正式发表的文献类型。',
              price: '2.4',
              checked: false,
              checkFlag: true,
              word: '1000字符'
            },
            {
              name: '本科论文222',
              desc: '适用于在校大学生毕业论文。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '说博士论文222',
              desc: '适用于应届高校硕博士研究生论文检测。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '高职高专222',
              desc: '适用于高等职业学院和高等专科学校论文检测。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '一般新文献2222',
              desc: '适用于所有未正式发表的文献类型。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '高职高专2224',
              desc: '适用于高等职业学院和高等专科学校论文检测。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '一般新文献2222221',
              desc: '适用于所有未正式发表的文献类型。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '高职高专22242',
              desc: '适用于高等职业学院和高等专科学校论文检测。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '一般新文献22222211',
              desc: '适用于所有未正式发表的文献类型。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
          ]
        },
        {
          name: '学术不端',
          desc: '学术不端学术不端学术不端学术不端学术不端学术不端',
          list: [
            {
              name: '一般新文献333',
              desc: '适用于所有未正式发表的文献类型。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '本科论文33',
              desc: '适用于在校大学生毕业论文。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '说博士论文333',
              desc: '适用于应届高校硕博士研究生论文检测。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '高职高专333',
              desc: '适用于高等职业学院和高等专科学校论文检测。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
            {
              name: '一般新文献3332',
              desc: '适用于所有未正式发表的文献类型。',
              price: '2.4',
              checked: false,
              word: '1000字符'
            },
          ]
        },
      ],
      addImgList: {
        '万方': require('@/assets/register/wanfang.png'),
        '维普': require('@/assets/register/weipu.svg'),
        '学术不端': require('@/assets/register/xueshubuduan.svg'),
      },
      dialogVisibleAdd: false,
      selectedItemWeixin: {},//微信收款方式
      selectedItem: {},//店铺绑定
      selectedValue1: null,//店铺绑定
      options1: [//店铺
        { label: "博闻教育专营店", time: "有效期至2025-06-13 05:00:00", desc: "博闻教育专营店 有效期至2025-06-13 05:00:00", value: 1 },
        { label: "这是一个店", time: "有效期至2025-06-13 05:00:00", desc: "这是一个店 有效期至2025-06-13 05:00:00", value: 2 },
        { label: "ewqewq地方", time: "有效期至2025-06-13 05:00:00", desc: "ewqewq地方 有效期至2025-06-13 05:00:00", value: 3 },
      ],
      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: 1,   //每页的容量
      total: 0,   //列表总数
      dialogVisible: false,//是否展示弹框
      showCancelButton: true, // 控制是否显示取消按钮
      showCloseButton: true, // 控制是否显示关闭按钮
      activeStep: 2,//当前步骤条
      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' }
      ],
      stepDesc: {
        '1': '填写站点信息、选择模板样式',
        '2': '配置收款方式',
        '3': '想卖哪些东西？来选选吧',
      },
      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_null: {
        label: '暂无收款账号',
        value: '暂时没有收款账号，我想稍后配置',
        desc: '暂无收款账号，稍后配置'
      },
      select_placeholder_weixin: '暂无收款账号，稍后配置',
      options_weixin: [],
      options_zhifubao: [],
    };
  },
  computed: {
    // 计算选中的总数
    selectedCount() {
      const newaddlist = JSON.parse(JSON.stringify(this.addlist))
      let list = []
      let listTotal = []
      newaddlist.forEach(item => {
        let item2 = JSON.parse(JSON.stringify(item));
        item2.list = [];
        item.list.forEach((item1) => {
          if (item1.checked) {
            // list1.push(item1)
            listTotal.push(item1)
            if (item2.list.length == 0) {
              item2.list = [item1]
            } else {
              item2.list.push(item1)
            }
          }
        })
        if (item2.list.length > 0) {
          list.push(item2)
        }
      })
      console.log(list, 'list----', this.addlist);
      store.commit('SET_ADDSERVICELIST', list);
      return listTotal.length;
    },
  },
  methods: {
    nextGoSettingPrice() {
      this.$router.push('/configureServicePrices')
    },
    goCurActiveStep(step) {
      if (step < this.activeStep) {
        this.activeStep = step
      }
    },
    showDomainModal() {
      this.dialogVisibleAdd = true;
      this.$nextTick(() => {
        this.$refs.content.addEventListener('scroll', this.handleScroll);
      });
    },
    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;
    },
    handleClose1() {
      this.$message.info('弹框已关闭111');
      this.dialogVisible1 = 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 "未开始";
      }
    },
    renderStepDesc(step) {
      return this.stepDesc[step]
    },
    popPayMentModal(row) {
      this.dialogVisible = true;
      this.dialogTitle = row.name + '-收款方式'
      console.log(row, '=====');
    },
    lookTemImg() {

    },
    editTemImg() {

    },
    jumpCurStep() {
      if (this.activeStep != '3') {
        this.activeStep = Number(this.activeStep) + 1
      } else {
        // 直接进入主页面
      }
    },
    finishCurStep() {
      if (this.activeStep != '3') {
        this.activeStep = Number(this.activeStep) + 1
      } else {
        // 直接进入主页面
      }
    },

    // 店铺绑定下拉框
    changeSelect(item) {
      this.selectedItem = { ...item };
      console.log(this.selectedItem, 'this.selectedItem====');
    },
    changeSelectWeixin(item, flag) {
      if (flag) {
        this.select_placeholder_weixin = this.options_weixin_null.desc;
        return
      }
      this.selectedItem = { ...item };
      console.log(this.selectedItem, 'this.selectedItem====');
    },
    changeNormalWeixin() {

    },
    // 关闭弹窗
    handleCloseAdd() {
      this.dialogVisibleAdd = false;
      this.$refs.content.removeEventListener('scroll', this.handleScroll);
    },
    // 滚动到指定分类
    scrollToCategory(index) {
      this.activeCategory = index;
      const element = this.$refs[`category-${index}`][0];
      element.scrollIntoView({ behavior: 'smooth' });
    },
    // 处理滚动事件
    handleScroll() {
      const scrollPosition = this.$refs.content.scrollTop;
      // console.log(this.activeCategory,scrollPosition,'this.activeCategory');
      this.addlist.forEach((category, index) => {
        const element = this.$refs[`category-${index}`][0];
        const elementTop = Math.round(element.offsetTop - 70);
        const elementBottom = elementTop + element.offsetHeight;
        // console.log('进来了',scrollPosition,elementTop,elementBottom,index,scrollPosition >= elementTop && scrollPosition < elementBottom);
        if (scrollPosition >= elementTop && scrollPosition < elementBottom) {
          this.activeCategory = index;
        }
      });
    },
    updateSelectedCount(item) {
      this.serviceTotal = this.selectedCount;
      console.log(item, 'item----');
      // this.$set(this.addlist,item)
      console.log('选中总数已更新：', this.addlist);
    },

  },

};
</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;
      padding-bottom: 0;

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

.tem-home {
  width: 100%;
  border-radius: 4px;
  opacity: 1;
  background: #FFFFFF;
  /* middle/middle_line_1 */
  border: 1px solid #DFE2E6;

  .tem-home-top {
    width: 100%;
  }

  .tem-home-bottom {
    display: flex;
    align-items: center;
    padding: 22px 32px;
    justify-content: space-between;

    .tem-look {
      margin-right: 36px;
    }

    div {
      display: flex;
      align-items: center;

      img {
        margin-right: 6px;
      }
    }
  }
}

// .el-step__head:nth-child(1){
//   background: url('../assets/register/step1_ing.svg') no-repeat center;
//   background-size: cover;
//   width: 24px; /* 图标大小 */
//   height: 24px; /* 图标大小 */
// }
// :deep(.el-step__line) {
//   height: 0px; // 线的高度
//   width: 50px;
//   margin-top: 14px; // 线与圆圈的间距
//   left: 80% !important;
//   position: absolute;
//   border: 1px solid #006AFF;
// }
.step2-wrap {
  flex: 1;
}

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

::v-deep .addDialog-wrap .el-dialog {
  background: #F6F7FA;
  height: 546px;
  border-radius: 8px;
}

::v-deep .addDialog-wrap .el-dialog .el-dialog__body {
  padding: 0 24px 0;
}

::v-deep .addDialog-wrap .el-dialog__header {
  background: #F6F7FA;
  border-radius: 8px;

}

.addDialog-wrap {
  .bottom {
    margin-top: 24px;
    justify-content: flex-end;
    align-items: center;

    span {
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-align: center;
      letter-spacing: 0.08em;
      font-variation-settings: "opsz" auto;
      color: #9E9E9E;
      display: inline-block;
      margin-right: 16px;
    }
  }
}

.addService_wrap {
  text-align: left;
  background-color: #fff;

  // display: ;
  .addServicetop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 12px;
    left: 24px;
    width: 963.43px;

    b {
      font-size: 20px;
      font-weight: bold;
      line-height: 26px;
      letter-spacing: 0.08em;
      font-variation-settings: "opsz" auto;
      color: #1E2226;
    }

    ul {
      display: flex;
      padding-left: 20px;

      li {
        cursor: pointer;
        list-style-type: none;
        display: flex;
        align-items: center;
        display: flex;
        margin-right: 12px;
      }

      .normal_service {
        padding: 4px 10px;
        border-radius: 100px;
        opacity: 1;
        background: #FFFFFF;
        letter-spacing: 0.08em;
        color: #8A9099;
        border: 1px solid transparent;

        img {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
      }

      .active_service {
        color: #006AFF;
        box-sizing: border-box;
        border: 1px solid #006AFF;
      }
    }
  }

  .addServicebot {
    overflow-y: auto;
    max-height: 380px;
    margin-top: 24px;

    ul {
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-between;
      display: grid;
      grid-gap: 14px;
      grid-template-columns: repeat(auto-fit, 220px);
      // grid-auto-rows: 50px;
      padding-left: 0;
      margin: 20px 0 0;

      li {
        list-style-type: none;
        width: 220px;
        height: 126px;
        border-radius: 4px;
        opacity: 1;
        padding: 14px 10px;
        background: #FFFFFF;
        box-sizing: border-box;
        border: 1px solid #DFE2E6;
        cursor: pointer;
        transition: all .3s;
      }

      li:hover {
        background: #F6F7FA;
        transition: all .3s;
      }
    }

    .service-active {
      border: 1px solid #006AFF;
    }

    .service-desc {
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0.08em;
      font-variation-settings: "opsz" auto;
      color: #8A8C99;
      margin: 6px 0 8px;
    }

    .service-name-item {
      font-size: 14px;
      letter-spacing: 0.08em;
      color: #1E2226;
    }

    .service-desc-item {
      font-size: 12px;
      font-weight: normal;
      line-height: 17px;
      letter-spacing: 0.03em;
      font-variation-settings: "opsz" auto;
      color: #8A9099;
      margin: 14px 0 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* 注意：这不是一个标准的CSS属性，仅在WebKit浏览器中有效 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 34px;
    }

    .service-price-item {
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.08em;
      font-variation-settings: "opsz" auto;
      color: #8A9099;

      i {
        font-style: normal;
        color: #1E2226;

      }

      span {
        color: #1E2226;
        font-size: 20px;
        font-weight: normal;
        line-height: 20px;
      }
    }

    .category-section {
      padding: 20px;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: normal;
        letter-spacing: 0.08em;
        color: #1E2226;

        img {
          width: 30px;
          height: 30px;
          margin-right: 8px;
        }
      }
    }

  }
}
</style>
