<template>

  <div>
    <a-page-header
      style="background-color: #FFFFFF;margin-bottom:10px"
      title="上传资料"
      sub-title=""
      @back="goBack"
    ></a-page-header>

    <a-card style="margin-bottom:10px;color: #000000d9;font-size: 15px;line-height: 2.5;">
      <div>
        <span>1.请选择客户类型</span>
      </div>
      <a-radio-group style="position: relative;left: 30px"
                     @change="controlChange" v-model:value="truckData.customType">
        <a-radio :value="'0'">一类客户（党政军、大型企事业单位）</a-radio>
        <a-radio :value="'1'">二类客户（其余用户）</a-radio>
      </a-radio-group>
      <div>
        <span style="display: block">2.请选择使用场景</span>
        <a-radio-group style="position: relative;left: 30px;"
                       @change="controlChange" v-model:value="truckData.scene">
          <a-radio :value="'0'">办公自用</a-radio>
          <a-radio :value="'1'">自用型呼叫中心</a-radio>
          <a-radio :value="'2'">经营型呼叫中心</a-radio>
          <a-radio :value="'3'">经济型会议电话</a-radio>
        </a-radio-group>
      </div>
    </a-card>

    <!--    步骤条-->
    <a-card style="margin-bottom:10px">
      <!--      v-model:current="current"-->
      <a-steps :current="current" size="small">
        <a-step v-for="item in steps" :key="item.title" :title="item.title"/>
      </a-steps>
    </a-card>
    <!--    客户营业执照-->
    <a-card  v-if="current == 0 && truckData.customType == '0'" style="margin-bottom:10px">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">客户营业执照</span>
        <!--        操作按钮-->
        <div style="position: relative;left: 10px">
          <a-button v-if="current < steps.length - 1" type="primary" @click="nextSteps">下一步</a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="submitLot"
          >提交
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prevSteps">上一步</a-button>
        </div>
      </div>
      <div style="float: left;width: 43%">
        <div class="markdown" style="position: relative;top:30px">
          <ul>
            <li>1）是否在有效期</li>
          </ul>
        </div>
      </div>
      <div style="width: 50%;float:left;">
        <div style="height: 70%">
          <div class="thumb-example">

            <!-- swiper1 -->
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in swiperImg" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="604px"
                  height="445px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <a-button v-if="item.urlBase" style="display: block;margin-top: 10px;border-color: red;color: red"
                          danger @click="removeFile(item)">移除
                </a-button>

              </swiper-slide>
              <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
              ></div>
              <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
              ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
            >
              <swiper-slide
                class="slide"
                style="width:100px;height:100px;"
                v-for="(item, index) in swiperImg"
                :key="item.id"
              >
                <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                  <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
                </div>

                <img style="width: 100%;height: 96px"
                     v-if="!item.urlBase" :src="noDataPng" border="1">

              </swiper-slide>
              <!--              点我上传文件按钮-->
              <div class="clearfix">
                <a-upload
                  listType="picture-card"
                  name="file"
                  :multiple="false"
                  :action="importMinioUploadAction"
                  :customRequest="selfUploadContract"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div v-if="lotData.contractFiles.length < 10">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">点我上传合同</div>
                  </div>
                </a-upload>

              </div>

              <div class="swiper-button-next swiper-button-white" slot="button-next">
                <div>
                  <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-white" slot="button-prev">
                <div>
                  <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
                </div>
              </div>
            </swiper>
          </div>
        </div>
      </div>



    </a-card>
    <!--    测试卡申请单-->
    <a-card v-if="current == 0 && lotData.blockType == 'test'" style="margin-bottom:10px">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">测试卡申请单</span>
        <!--        操作按钮-->
        <div style="position: relative;left: 10px">
          <a-button v-if="current < steps.length - 1" type="primary" @click="nextSteps">下一步</a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="submitLot"
          >提交
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prevSteps">上一步</a-button>
        </div>
      </div>
      <div style="float: left;width: 43%">
        <div class="markdown" style="position: relative;top:30px">
          <ul>
            <li>1）测试卡申请单是否加盖公章</li>
            <li>2）测试卡申请单中经办人、责任人身份证是否一致</li>
          </ul>
        </div>
      </div>
      <div style="width: 50%;float:left;">
        <div style="height: 70%">
          <div class="thumb-example">

            <!-- swiper1 -->
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in swiperImg" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="604px"
                  height="445px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <a-button v-if="item.urlBase" style="display: block;margin-top: 10px;border-color: red;color: red"
                          danger @click="removeFile(item)">移除
                </a-button>

              </swiper-slide>
              <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
              ></div>
              <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
              ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
            >
              <swiper-slide
                class="slide"
                style="width:100px;height:100px;"
                v-for="(item, index) in swiperImg"
                :key="item.id"
              >
                <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                  <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
                </div>

                <img style="width: 100%;height: 96px"
                     v-if="!item.urlBase" :src="noDataPng" border="1">

              </swiper-slide>
              <!--              点我上传文件按钮-->
              <div class="clearfix">
                <a-upload
                  listType="picture-card"
                  name="file"
                  :multiple="false"
                  :action="importMinioUploadAction"
                  :customRequest="selfUploadContract"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div v-if="lotData.contractFiles.length < 10">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">点我上传合同</div>
                  </div>
                </a-upload>

              </div>

              <div class="swiper-button-next swiper-button-white" slot="button-next">
                <div>
                  <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-white" slot="button-prev">
                <div>
                  <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
                </div>
              </div>
            </swiper>
          </div>
        </div>
      </div>
    </a-card>
    <!--    合同要求-->
    <a-card v-if="current == 0 && lotData.blockType == 'model'" style="margin-bottom:10px">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">合同要求</span>
        <!--        操作按钮-->
        <div style="position: relative;left: 10px">
          <a-button v-if="current < steps.length - 1" type="primary" @click="nextSteps">下一步</a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="submitLot"
          >提交
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prevSteps">上一步</a-button>
        </div>
      </div>
      <div style="float: left;width: 43%">
        <div class="markdown" style="position: relative;top:30px">
          <ul>
            <li>1）是否在有效期</li>
            <li>2）是否明确场景，如车联网，水表等，且与风险评估表一致</li>
            <li>3）是否明确开通功能，如语音，短信，流量等</li>
            <li>4）是否明确功能限制，如定向、机卡绑定、卡片限定、限额管控、黑名单限制等</li>
            <li>5）是否明确白名单数量，具体号码，地址等</li>
            <li>6）是否明确禁止二次销售</li>
            <li>7）是否明确防范垃圾短信和骚扰电话条款</li>
            <li>8）是否无低级错误，如缺少签字，日期等</li>
            <li>9）合同签署是否是法人，是否有授权书</li>
          </ul>
        </div>
      </div>
      <div style="width: 50%;float:left;">
        <div style="height: 70%">
          <div class="thumb-example">

            <!-- swiper1 -->
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in swiperImg" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="604px"
                  height="445px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <a-button v-if="item.urlBase" style="display: block;margin-top: 10px;border-color: red;color: red"
                          danger @click="removeFile(item)">移除
                </a-button>

              </swiper-slide>
              <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
              ></div>
              <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
              ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
            >
              <swiper-slide
                class="slide"
                style="width:100px;height:100px;"
                v-for="(item, index) in swiperImg"
                :key="item.id"
              >
                <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                  <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
                </div>

                <img style="width: 100%;height: 96px"
                     v-if="!item.urlBase" :src="noDataPng" border="1">

              </swiper-slide>
              <!--              点我上传文件按钮-->
              <div class="clearfix">
                <a-upload
                  listType="picture-card"
                  name="file"
                  :multiple="false"
                  :action="importMinioUploadAction"
                  :customRequest="selfUploadContract"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div v-if="lotData.contractFiles.length < 10">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">点我上传合同</div>
                  </div>
                </a-upload>

              </div>

              <div class="swiper-button-next swiper-button-white" slot="button-next">
                <div>
                  <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-white" slot="button-prev">
                <div>
                  <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
                </div>
              </div>
            </swiper>
          </div>
        </div>
      </div>
    </a-card>
    <!--    责任人和经办人授权书-->
    <a-card v-if="current == 1" style="margin-bottom:10px">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">责任人和经办人授权书</span>
        <!--        操作按钮-->
        <div style="position: relative;left: 10px">
          <a-button v-if="current < steps.length - 1" type="primary" @click="nextSteps">下一步</a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
          >
            提交
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prevSteps">上一步</a-button>
        </div>
      </div>
      <div style="float: left;width: 43%">
        <div class="markdown" style="position: relative;top:30px">
          <ul>
            <li>1）经办人和责任人授权书齐全并且加盖公章</li>
            <li>2）经办人和责任人与授权书一致</li>
          </ul>
        </div>


      </div>
      <div style="width: 50%;float:left;">
        <div style="height: 70%">
          <div class="thumb-example">

            <!-- swiper1 -->
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in swiperImg" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="604px"
                  height="445px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
              </swiper-slide>
              <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
              ></div>
              <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
              ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
            >
              <swiper-slide
                class="slide"
                style="width:100px;height:100px;"
                v-for="(item, index) in swiperImg"
                :key="item.id"
              >
                <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                  <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
                </div>

                <img style="width: 100%;height: 96px"
                     v-if="!item.urlBase" :src="noDataPng" border="1">

              </swiper-slide>
              <!--              点我上传文件按钮-->
              <div class="clearfix">
                <a-upload
                  listType="picture-card"
                  name="file"
                  :multiple="false"
                  :action="importMinioUploadAction"
                  :customRequest="selfUploadContract"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div v-if="lotData.contractFiles.length < 10">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">点我上传合同</div>
                  </div>
                </a-upload>

              </div>

              <div class="swiper-button-next swiper-button-white" slot="button-next">
                <div>
                  <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-white" slot="button-prev">
                <div>
                  <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
                </div>
              </div>
            </swiper>
          </div>
        </div>
      </div>


    </a-card>
    <!--    责任人和经办人身份证-->
    <a-card v-if="current == 2" style="margin-bottom:10px">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">责任人和经办人身份证</span>
        <!--        操作按钮-->
        <div style="position: relative;left: 10px">
          <a-button v-if="current < steps.length - 1" type="primary" @click="nextSteps">下一步</a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
          >
            提交
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prevSteps">上一步</a-button>
        </div>
      </div>
      <div style="float: left;width: 43%">
        <div class="markdown" style="position: relative;top:30px">
          <ul>
            <li>1）经办人和责任人身份证复印件加盖公章</li>
          </ul>
        </div>


      </div>
      <div style="width: 50%;float:left;">
        <div style="height: 70%">
          <div class="thumb-example">

            <!-- swiper1 -->
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in swiperImg" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="604px"
                  height="445px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
              </swiper-slide>
              <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
              ></div>
              <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
              ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
            >
              <swiper-slide
                class="slide"
                style="width:100px;height:100px;"
                v-for="(item, index) in swiperImg"
                :key="item.id"
              >
                <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                  <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
                </div>

                <img style="width: 100%;height: 96px"
                     v-if="!item.urlBase" :src="noDataPng" border="1">

              </swiper-slide>
              <!--              点我上传文件按钮-->
              <div class="clearfix">
                <a-upload
                  listType="picture-card"
                  name="file"
                  :multiple="false"
                  :action="importMinioUploadAction"
                  :customRequest="selfUploadContract"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div v-if="truckData.contractFiles.length < 10">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">点我上传合同</div>
                  </div>
                </a-upload>

              </div>

              <div class="swiper-button-next swiper-button-white" slot="button-next">
                <div>
                  <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-white" slot="button-prev">
                <div>
                  <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
                </div>
              </div>
            </swiper>
          </div>
        </div>
      </div>


    </a-card>
    <!--    客户证件扫描-->
    <a-card v-if="current == 3" style="margin-bottom:10px">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">客户证件扫描</span>
        <!--        操作按钮-->
        <div style="position: relative;left: 10px">
          <a-button v-if="current < steps.length - 1" type="primary" @click="nextSteps">下一步</a-button>
          <a-button
            v-if="current == steps.length - 1" @click="handSubmit"
            type="primary"
          >
            提交
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prevSteps">上一步</a-button>
        </div>
      </div>
      <div style="float: left;width: 43%">
        <div class="markdown" style="position: relative;top:30px">
          <ul>
            <li>1）客户证件复印件加盖公章</li>
          </ul>
        </div>


      </div>
      <div style="width: 50%;float:left;">
        <div style="height: 70%">
          <div class="thumb-example">

            <!-- swiper1 -->
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in swiperImg" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="604px"
                  height="445px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
              </swiper-slide>
              <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
              ></div>
              <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
              ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
            >
              <swiper-slide
                class="slide"
                style="width:100px;height:100px;"
                v-for="(item, index) in swiperImg"
                :key="item.id"
              >
                <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                  <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
                </div>

                <img style="width: 100%;height: 96px"
                     v-if="!item.urlBase" :src="noDataPng" border="1">

              </swiper-slide>
              <!--              点我上传文件按钮-->
              <div class="clearfix">
                <a-upload
                  listType="picture-card"
                  name="file"
                  :multiple="false"
                  :action="importMinioUploadAction"
                  :customRequest="selfUploadContract"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div v-if="truckData.contractFiles.length < 10">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">点我上传合同</div>
                  </div>
                </a-upload>

              </div>

              <div class="swiper-button-next swiper-button-white" slot="button-next">
                <div>
                  <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-white" slot="button-prev">
                <div>
                  <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
                </div>
              </div>
            </swiper>
          </div>
        </div>
      </div>


    </a-card>
    <!--    风险评估表-->
    <a-card v-if="current == 4" style="margin-bottom:10px">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">风险评估表</span>
        <!--        操作按钮-->
        <div style="position: relative;left: 10px">
          <a-button v-if="current < steps.length - 1" type="primary" @click="nextSteps">下一步</a-button>
          <a-button
            v-if="current == steps.length - 1"
            type="primary"
            @click="submitLot"
          >
            提交
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prevSteps">上一步</a-button>
        </div>
      </div>
      <div style="float: left;width: 43%">
        <div class="markdown" style="position: relative;top:30px">
          <ul>
            <li>1）是否进行入网风险评估</li>
            <li>2）安全管理能力是否填写最小必要数据</li>
            <li>3）是否明确使用场景（与产品形态表一致），如车联网、水表等</li>
            <li>4）是否明确开通功能，如语音，短信，流量等</li>
            <li>5）是否明确功能限制情况，如定向，机卡绑定，卡片绑定，限额管控，黑名单限制等</li>
            <li>6）是否无低级错误，如缺少签字、日期等</li>
            <li>7）风险评估表中卡类型需写清三要素：网络制式、商业级或消费级、贴片机或插卡机</li>
            <li>8）现场考察部分截图是否清晰</li>
            <li>9）合同、入网评估表、系统受理是否一致</li>
          </ul>
        </div>
      </div>
      <div style="width: 50%;float:left;">
        <div style="height: 70%">
          <div class="thumb-example">
            <!-- swiper1 -->
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in swiperImg" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="604px"
                  height="445px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
              </swiper-slide>
              <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
              ></div>
              <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
              ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
            >
              <swiper-slide
                class="slide"
                style="width:100px;height:100px;"
                v-for="(item, index) in swiperImg"
                :key="item.id"
              >
                <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                  <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
                </div>

                <img style="width: 100%;height: 96px"
                     v-if="!item.urlBase" :src="noDataPng" border="1">

              </swiper-slide>
              <!--              点我上传文件按钮-->
              <div class="clearfix">
                <a-upload
                  listType="picture-card"
                  name="file"
                  :multiple="false"
                  :action="importMinioUploadAction"
                  :customRequest="selfUploadContract"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div v-if="truckData.contractFiles.length < 10">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">点我上传合同</div>
                  </div>
                </a-upload>

              </div>

              <div class="swiper-button-next swiper-button-white" slot="button-next">
                <div>
                  <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-white" slot="button-prev">
                <div>
                  <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
                </div>
              </div>
            </swiper>
          </div>
        </div>
      </div>


    </a-card>
    <!--    省/集团价格审批表-->
    <a-card v-if="current == 5" style="margin-bottom:10px">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">风险评估表</span>
        <!--        操作按钮-->
        <div style="position: relative;left: 10px">
          <a-button v-if="current < steps.length - 1" type="primary" @click="nextSteps">下一步</a-button>
          <a-button
            v-if="current == steps.length - 1"
            @click="submitLot"
            type="primary"
          >
            提交
          </a-button>
          <a-button v-if="current > 0" style="margin-left: 8px" @click="prevSteps">上一步</a-button>
        </div>
      </div>
      <div style="float: left;width: 43%">
        <div class="markdown" style="position: relative;top:30px">
          <ul>
            <li>1）最终审批价格不低于1元/户/月（对2020年1月1日前签署合同的存量客户，若存量价格审批表中只约定了保底流量无功能费的，按存量审批表执行）</li>
            <li>2）不参与打折，最低优惠至1元/户/月（2020年1月1日前签署合同的存量客户，池功能费可以按照池成员流量价格授权同步享受折扣）</li>
            <li>3）同客户同项目测试卡数量不得超100张，最高不得超500张。</li>
            <li>4）物联网开卡时提供公免卡审批表，开卡张数和公免额度与审批表一致。物联网公免卡的审批人员和流程同大网公免卡一致。</li>
            <li>5）累计限免有效期原则上不得大于15个月</li>
          </ul>
        </div>
      </div>
      <div style="width: 50%;float:left;">
        <div style="height: 70%">
          <div class="thumb-example">
            <!-- swiper1 -->
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in swiperImg" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="604px"
                  height="445px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
              </swiper-slide>
              <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
              ></div>
              <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
              ></div>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
            >
              <swiper-slide
                class="slide"
                style="width:100px;height:100px;"
                v-for="(item, index) in swiperImg"
                :key="item.id"
              >
                <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                  <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
                </div>

                <img style="width: 100%;height: 96px"
                     v-if="!item.urlBase" :src="noDataPng" border="1">

              </swiper-slide>
              <!--              点我上传文件按钮-->
              <div class="clearfix">
                <a-upload
                  listType="picture-card"
                  name="file"
                  :multiple="false"
                  :action="importMinioUploadAction"
                  :customRequest="selfUploadContract"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div v-if="truckData.contractFiles.length < 10">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">点我上传合同</div>
                  </div>
                </a-upload>

              </div>

              <div class="swiper-button-next swiper-button-white" slot="button-next">
                <div>
                  <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
                </div>
              </div>
              <div class="swiper-button-prev swiper-button-white" slot="button-prev">
                <div>
                  <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
                </div>
              </div>
            </swiper>
          </div>
        </div>
      </div>


    </a-card>

  </div>

</template>

<script>

import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {httpAction, postAction} from '@api/manage'
import {snippetsOutlined, StarFilled, StarTwoTone} from '@ant-design/icons-vue';
/*无数据图片*/
import noDataPng from '@/assets/nodata.png'

let Base64 = require('js-base64').Base64

export default {
  name: "TaskUploadData",
  mixins: [JeecgListMixin],
  inject: ['closeCurrent'],
  components: {noDataPng},
  data() {
    return {
      noDataPng: noDataPng,
      //加载状态
      loading: false,
      //弹窗
      previewImage: "",
      previewVisible: false,
      url: {
        updateFile: "/smsCheck/customerData/updateFile",
        minioUpload: "/smsCheck/customerData/uploadMinio",
        list: "/smsCheck/customerData/list",
        addOrEdit: "/smsLot/customerData/edit/info"
      },
      //步骤条数据
      current: 0,
      steps: "",
      steps00: [
        {
          title: '客户营业执照',
          content: 'First-content',
        },
        {
          title: '经办人介绍信和身份证复印件',
          content: 'First-content',
        },
        {
          title: '标准文本合同',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务预审表',
          content: 'First-content',
        },
      ],
      steps01: [
        {
          title: '客户营业执照',
          content: 'First-content',
        },
        {
          title: '经办人介绍信和身份证复印件',
          content: 'First-content',
        },
        {
          title: '标准文本合同',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务预审表',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务接入场景风险评估表',
          content: 'First-content',
        },
        {
          title: '呼叫中心/会议电话业务说明函',
          content: 'First-content',
        },
        {
          title: '办公现场和装机地址现场拍照',
          content: 'First-content',
        },
        {
          title: '短号码外呼',
          content: 'First-content',
        },
      ],
      steps02: [
        {
          title: '客户营业执照',
          content: 'First-content',
        },
        {
          title: '经办人介绍信和身份证复印件',
          content: 'First-content',
        },
        {
          title: '标准文本合同',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务预审表',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务接入场景风险评估表',
          content: 'First-content',
        },
        {
          title: '呼叫中心/会议电话业务说明函',
          content: 'First-content',
        },
        {
          title: '办公现场和装机地址现场拍照',
          content: 'First-content',
        },
        {
          title: '短号码外呼',
          content: 'First-content',
        },
        {
          title: '增值业务许可证',
          content: 'First-content',
        },
      ],
      steps10: [
        {
          title: '客户营业执照',
          content: 'First-content',
        },
        {
          title: '经办人介绍信和身份证复印件',
          content: 'First-content',
        },
        {
          title: '标准文本合同',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务预审表',
          content: 'First-content',
        },
        {
          title: '注册资金不低于50万',
          content: 'First-content',
        },
        {
          title: '客户办公现场和装机地址现场拍照',
          content: 'First-content',
        },
        {
          title: '屋租赁合同或房屋产权证明',
          content: 'First-content',
        },
        {
          title: '客户信用查询截屏',
          content: 'First-content',
        },
        {
          title: '企业法人身份证复印件',
          content: 'First-content',
        },


      ],
      steps11: [
        {
          title: '客户营业执照',
          content: 'First-content',
        },
        {
          title: '经办人介绍信和身份证复印件',
          content: 'First-content',
        },
        {
          title: '标准文本合同',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务预审表',
          content: 'First-content',
        },
        {
          title: '注册资金不低于50万',
          content: 'First-content',
        },
        {
          title: '客户办公现场和装机地址现场拍照',
          content: 'First-content',
        },
        {
          title: '屋租赁合同或房屋产权证明',
          content: 'First-content',
        },
        {
          title: '客户信用查询截屏',
          content: 'First-content',
        },
        {
          title: '企业法人身份证复印件',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务接入场景风险评估表',
          content: 'First-content',
        },
        {
          title: '呼叫中心/会议电话业务说明函',
          content: 'First-content',
        },
        {
          title: '办公现场和装机地址现场拍照',
          content: 'First-content',
        },
        {
          title: '短号码外呼',
          content: 'First-content',
        },


      ],
      steps12: [
        {
          title: '客户营业执照',
          content: 'First-content',
        },
        {
          title: '经办人介绍信和身份证复印件',
          content: 'First-content',
        },
        {
          title: '标准文本合同',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务预审表',
          content: 'First-content',
        },
        {
          title: '注册资金不低于50万',
          content: 'First-content',
        },
        {
          title: '客户办公现场和装机地址现场拍照',
          content: 'First-content',
        },
        {
          title: '屋租赁合同或房屋产权证明',
          content: 'First-content',
        },
        {
          title: '客户信用查询截屏',
          content: 'First-content',
        },
        {
          title: '企业法人身份证复印件',
          content: 'First-content',
        },
        {
          title: '中国电信北京公司语音中继线业务接入场景风险评估表',
          content: 'First-content',
        },
        {
          title: '呼叫中心/会议电话业务说明函',
          content: 'First-content',
        },
        {
          title: '办公现场和装机地址现场拍照',
          content: 'First-content',
        },
        {
          title: '短号码外呼',
          content: 'First-content',
        },
        {
          title: '增值业务许可证',
          content: 'First-content',
        },
      ],


      next: "",
      prev: "",

      //客户信息ID
      infoId: "",
      lotData: {
        //客户类型
        customType: "0",
        //使用场景
        scene: "0",
        //正式卡/测试卡
        blockType: "model",
        //价格管控
        control: "controlN",
        //合同文件
        contractFiles: [],
        //责任人和经办人授权书
        empowerFiles: [],
        //责任人和经办人身份证
        idCardFiles: [],
        //客户证件扫描
        scanningFiles: [],
        //风险评估表
        riskFiles: [],
        //价格审批表
        priceFiles: [],
        //测试卡申请单
        testCardApplication: []
      },
      truckData: {
        //客户类型
        customType: "0",
        //使用场景
        scene: "0",
        //正式卡/测试卡
        blockType: "model",
        //价格管控
        control: "controlN",
        //合同文件
        contractFiles: [],
        //责任人和经办人授权书
        empowerFiles: [],
        //责任人和经办人身份证
        idCardFiles: [],
        //客户证件扫描
        scanningFiles: [],
        //风险评估表
        riskFiles: [],
        //价格审批表
        priceFiles: [],
        //测试卡申请单
        testCardApplication: []
      },
      //缩略与大图数据源
      swiperId: 0 + 1,
      swiperImg: [{}],
      //轮播配置
      swiperOptionTop: {
        zoom: true,
        loop: false,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        // autoplay: {  //自动轮播
        //   delay: 2000,
        //   disableOnInteraction: false
        // },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: false,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    };
  },
  created() {
    this.infoId = this.$route.query.id;
  },
  computed: {
    importMinioUploadAction() {
      return window._CONFIG['domianURL'] + this.url.minioUpload;
    },
  },
  props: {
    poster: {
      type: String,
      required: false,
      default: ""
    },
    controls: {
      type: Boolean,
      required: false,
      default: true
    },
    control: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  watch: {
    // 监听操作
    videoData(val, oldVal) {
      const {currentTime, duration} = val;
      if (currentTime && duration && currentTime < duration) {
        this.hintOperate();
      }
    }
  },
  mounted() {
    // 实现swiper双向控制
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
    //默认流程
    this.steps = this.steps00;
  },
  methods: {
    //客户类型与使用场景监听
    controlChange(a, event) {
      this.current = 0;
      let customType = this.truckData.customType;
      let scene = this.truckData.scene;
      if (customType == '0') {
        if (scene == '0') {
          this.steps = this.steps00
        }
        if (scene == '1') {
          this.steps = this.steps01
        }
        if (scene == '2') {
          this.steps = this.steps02
        }
        if (scene == '3') {
          this.steps = this.steps02
        }
      }
      if (customType == '1') {
        if (scene == '0') {
          this.steps = this.steps10
        }
        if (scene == '1') {
          this.steps = this.steps11
        }
        if (scene == '2') {
          this.steps = this.steps12
        }
        if (scene == '3') {
          this.steps = this.steps12
        }
      }

    },
    //移除文件
    removeFile(fileData) {
      let that = this;
      //卡类型
      let blockType = this.lotData.blockType;
      //处理轮播数据
      let swiperImg = this.swiperImg;
      let number = swiperImg.indexOf(fileData);
      swiperImg.splice(number, 1)
      if (swiperImg.length == 0) {
        swiperImg.push({})
      }
      this.swiperImg = swiperImg;
      //当前步骤
      let current = this.current;
      switch (current) {
        //合同
        case 0:
          if (blockType == "test") {
            this.lotData.testCardApplication = that.swiperImg;
          } else {
            this.lotData.contractFiles = that.swiperImg;
          }
          break;
        //责任人和经办人授权书
        case 1:
          this.lotData.empowerFiles = that.swiperImg;
          break;
        //责任人和经办人身份证
        case 2:
          this.lotData.idCardFiles = that.swiperImg;
          break;
        //客户证件扫描
        case 3:
          this.lotData.scanningFiles = that.swiperImg;
          break;
        //风险评估表
        case 4:
          this.lotData.riskFiles = that.swiperImg;
          break;
        //价格审批表
        case 5:
          this.lotData.priceFiles = that.swiperImg;
          break;
      }
    },

    //分割数组
    spliceArr(data, fileData) {
      let indexOf = data.indexOf(fileData);
      return data.splice(indexOf, 1)
    },

    //自定义的上传文件方法
    selfUploadContract(data) {
      let that = this;
      if (data.file) {
        let formData = new FormData();
        formData.append('file', data.file),
          postAction(this.url.minioUpload, formData).then((res) => {
            if (res.success) {
              that.swiperId = that.swiperId + 1;
              //文件链接
              let filePath = res.message;
              let swipData = {
                id: that.swiperId,
                urlBase: window._CONFIG['onlinePreviewDomainURL'] + '?url='
                  + encodeURIComponent(
                    Base64.encode(
                      (filePath)
                    )),
                url: filePath,
                fileName: data.file.name
              }
              if (that.swiperImg[0].urlBase) {
                that.swiperImg.push(swipData)
              } else {
                //数据发生变化
                that.swiperImg = []
                that.swiperImg[0] = swipData;
              }
              //当前步骤
              let current = this.current;
              switch (current) {
                //合同
                case 0:
                  if (that.lotData.blockType == "test") {
                    that.lotData.testCardApplication = that.swiperImg;
                  } else {
                    that.lotData.contractFiles = that.swiperImg;
                  }
                  break;
                //责任人和经办人授权书
                case 1:
                  that.lotData.empowerFiles = that.swiperImg;
                  break;
                //责任人和经办人身份证
                case 2:
                  that.lotData.idCardFiles = that.swiperImg;
                  break;
                //客户证件扫描
                case 3:
                  that.lotData.scanningFiles = that.swiperImg;
                  break;
                //风险评估表
                case 4:
                  that.lotData.riskFiles = that.swiperImg;
                  break;
                //价格审批表
                case 5:
                  that.lotData.priceFiles = that.swiperImg;
                  break;
              }
              console.log(that.lotData)
              console.log(that.swiperImg)
            }
          })
      }
    },
    //文件上传成功后回调
    importHandleChange(info) {

    },
    //文件格式限制
    importBeforeUpload(file) {
      var fileType = file.type;
      if (fileType === 'image') {
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片');
          return false;
        }
      } else if (fileType === 'file') {
        if (fileType.indexOf('image') >= 0) {
          this.$message.warning('请上传文件');
          return false;
        }
      }
      return true
    },
    //返回上一菜单
    goBack() {
      this.$router.go(-1);
      this.closeCurrent();
    },
    //下一步骤
    nextSteps() {
      if (this.current < this.steps.length) {
        this.current = this.current + 1;
        this.currentFileType(this.current);
      }
    },
    //上一步骤
    prevSteps() {
      if (this.current != 0) {
        this.current = this.current - 1;
        this.currentFileType(this.current);
        console.log(this.swiperImg)
      }
    },
    //步骤文件类型对应
    currentFileType(current) {
      let that = this;
      this.swiperImg = {}
      //卡类型
      let blockType = that.lotData.blockType;
      switch (current) {
        case 0:
          if (blockType == "test") {
            that.swiperImg = that.lotData.testCardApplication
          } else {
            that.swiperImg = that.lotData.contractFiles
          }
          break;
        case 1:
          that.swiperImg = that.lotData.empowerFiles
          break;
        case 2:
          that.swiperImg = that.lotData.idCardFiles
          break;
        case 3:
          that.swiperImg = that.lotData.scanningFiles
          break;
        case 4:
          that.swiperImg = that.lotData.riskFiles
          break;
        case 5:
          that.swiperImg = that.lotData.priceFiles
          break;
      }
      //拒绝下标为空 影响轮播样式
      if (that.swiperImg.length == 0) {
        that.swiperImg.push({})
      }
    },
    //提交稽核
    submitLot() {
      //卡类型
      let blockType = this.lotData.blockType;
      //价格突破
      let control = this.lotData.control;
      let data = {};
      //测试卡
      if (blockType == "test") {
        data = {
          //测试卡申请单
          "testCardApplication": this.urlBaseJoin(this.lotData.testCardApplication, "url"),
          //责任人经办人授权书
          "empower": this.urlBaseJoin(this.lotData.empowerFiles, "url"),
          //责任人经办人身份证
          "idCard": this.urlBaseJoin(this.lotData.idCardFiles, "url"),
          //客户证件扫描
          "customerId": this.urlBaseJoin(this.lotData.scanningFiles, "url"),
          //风险评估表
          "risk": this.urlBaseJoin(this.lotData.riskFiles, "url"),
        }
      } else {
        //突破价格管控
        if (control == "controlY") {
          data = {
            //合同文件
            "contract": this.urlBaseJoin(this.lotData.contractFiles, "url"),
            //责任人经办人授权书
            "empower": this.urlBaseJoin(this.lotData.empowerFiles, "url"),
            //责任人经办人身份证
            "idCard": this.urlBaseJoin(this.lotData.idCardFiles, "url"),
            //客户证件扫描
            "customerId": this.urlBaseJoin(this.lotData.scanningFiles, "url"),
            //风险评估表
            "risk": this.urlBaseJoin(this.lotData.riskFiles, "url"),
            //省/集团价格审批
            "priceApproval": this.urlBaseJoin(this.lotData.priceFiles, "url")
          }
        } else {
          data = {
            //合同文件
            "contract": this.urlBaseJoin(this.lotData.contractFiles, "url"),
            //责任人经办人授权书
            "empower": this.urlBaseJoin(this.lotData.empowerFiles, "url"),
            //责任人经办人身份证
            "idCard": this.urlBaseJoin(this.lotData.idCardFiles, "url"),
            //客户证件扫描
            "customerId": this.urlBaseJoin(this.lotData.scanningFiles, "url"),
            //风险评估表
            "risk": this.urlBaseJoin(this.lotData.riskFiles, "url"),
          }
        }
      }
      this.postLotInfo(data);
    },
    postLotInfo(data) {
      //任务Id
      data["infoId"] = this.infoId;
      //卡类型
      data["blockType"] = this.lotData.blockType == "model" ? 1 : 0;
      //是否突破价格管控
      data["control"] = this.lotData.control == "controlY" ? 1 : 0;
      postAction(this.url.addOrEdit, data).then((res) => {
        if (res.success) {
          this.$message.success("提交成功");
          this.$router.go(-1);
          this.closeCurrent();
          //this.$router.push({path: '/lot/check/task/check', query: {id: record.id}});
        } else {
          this.$message.error(res.message);
        }
      });
    },
    urlBaseJoin(dataArray, name) {
      let newDataArr = [];
      for (var i in dataArray) {
        let dataArrayElementElement = dataArray[i][name];
        newDataArr.push(dataArrayElementElement);
      }
      return newDataArr.toString();
    }

  }
};
</script>

<style lang="less" scoped>
h3 {
  margin: 20px 0 0 10px;
}

.thumb-example {
  width: 864px;
  margin-top: 20px;
  // background: #000;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.gallery-top {
  // height: 80% !important;
  /*height: 600px;*/
  width: 100%;
  left: 15%;
  margin-bottom: 50px
}

.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0px;
  /*  width: 864px;*/
  margin-left: 2px;

  .swiper-button-next {
    right: 0px;
  }

  .swiper-button-prev {
    left: 0px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    background: #fff;
    width: 45px;
    text-align: center;
    height: 101px;
    top: 26%;

    div {
      margin-top: 30px;
      background: rgb(207, 205, 205);
      height: 45px;
      border-radius: 50%;

      img {
        margin: 7px 0 0 2px;
        width: 30px;
      }
    }
  }

  .swiper-button-next:hover div {
    background: rgb(189, 186, 186);
  }

  .swiper-button-prev:hover div {
    background: rgb(189, 186, 186);
  }
}

.gallery-thumbs .swiper-slide {
  width: 20%;
  height: 80px;
  // opacity: 0.4;
}

.gallery-thumbs .swiper-slide-active {
  border: 2px solid red;
}

.markdown ul > li {
  color: #000000d9;
  font-size: 15px;
  line-height: 3;
  margin-left: 20px;
  padding-left: 4px;
  list-style-type: circle;
}
</style>





