<template>
  <div>
    <!--  客户信息-->
    <a-page-header
      style="background-color: #FFFFFF;margin-bottom:10px"
      title="客户详情"
      sub-title=""
      @back="back"
    >
      <a-descriptions :title="info.customerName" :column="3" :bordered="false">
        <a-descriptions-item label="客户编号">{{ info.customerNo }}</a-descriptions-item>
        <a-descriptions-item label="服务号码">{{ info.smsNumber }}</a-descriptions-item>
        <a-descriptions-item label="用户编号">{{ info.userNo }}</a-descriptions-item>
        <a-descriptions-item label="入网时间">{{ info.networkAccessTime }}</a-descriptions-item>
        <a-descriptions-item label="用户状态" :span="2">{{ info.userState }}</a-descriptions-item>
        <a-descriptions-item label="员工姓名">{{ info.staffName }}</a-descriptions-item>
        <a-descriptions-item label="员工工号">{{ info.staffNo }}</a-descriptions-item>
      </a-descriptions>
    </a-page-header>
    <!--    步骤条-->
    <div>
      <a-card style="margin-bottom:10px;width: 15%;float: left">
        <a-steps direction="vertical" :current="current" size="small" @change="stepsClick">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" :status="item.status"/>
        </a-steps>
        <a-button @click="submitAuditLot" style="width: 100%" type="primary">提交稽核</a-button>
      </a-card>
      <!--      合同-->
      <a-card v-if="current == 0 && lotData.blockType == 1"
              style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
        <div slot="title">
          <span style="float: left;position: relative;top: 4px">合同资料</span>
        </div>
        <!--        稽核结果-->
        <div style="float: left;width: 30%">
          <a-form-model-item label="稽核状态" prop="basicCheckState">
            <a-radio-group @change="basicCheckClick(lotData.contractModel.basicCheckState)"
                           v-model="lotData.contractModel.basicCheckState">
              <a-radio :value="0">未通过</a-radio>
              <a-radio :value="1">通过</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="稽核结果" prop="basicCheckNote">
            <a-textarea
              v-model="lotData.contractModel.basicCheckNote"
              placeholder="请输入合同内容的稽核结果"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
          <!--          快捷回复-->
          <div>
            <div class="alert-warning" @click="alertText(alertWarning[0])">{{ alertWarning[0] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[1])">{{ alertWarning[1] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[2])">{{ alertWarning[2] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[3])">{{ alertWarning[3] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[4])">{{ alertWarning[4] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[5])">{{ alertWarning[5] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[6])">{{ alertWarning[6] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[7])">{{ alertWarning[7] }}</div>
            <!--            <a-alert style="margin-bottom: 10px;" :message="alertWarning[0]" type="warning"/>
                        <a-alert style="margin-bottom: 10px;" :message="alertWarning[1]" type="warning"/>
                        <a-alert style="margin-bottom: 10px;" :message="alertWarning[2]" type="warning"/>
                        <a-alert style="margin-bottom: 10px;" :message="alertWarning[3]" type="warning"/>
                        <a-alert style="margin-bottom: 10px;" :message="alertWarning[4]" type="warning"/>
                        <a-alert style="margin-bottom: 10px;" :message="alertWarning[5]" type="warning"/>
                        <a-alert style="margin-bottom: 10px;" :message="alertWarning[6]" type="warning"/>
                        <a-alert style="margin-bottom: 10px;" :message="alertWarning[7]" type="warning"/>-->
          </div>
        </div>
        <!--      轮播-->
        <div style="width: 65%;float:left;margin-left: 5%">
          <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 lotData.contract" :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: 95%;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 lotData.contract"
                  :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: 95%;height: 96px"
                       v-if="!item.urlBase" :src="noDataPng" border="1">

                </swiper-slide>


                <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 == 0"
              style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
        <div slot="title">
          <span style="float: left;position: relative;top: 4px">合同资料</span>
        </div>
        <!--        稽核结果-->
        <div style="float: left;width: 30%">
          <a-form-model-item label="稽核状态" prop="basicCheckState">
            <a-radio-group @change="basicCheckClick(lotData.testCardApplicationModel.basicCheckState)"
                           v-model="lotData.testCardApplicationModel.basicCheckState">
              <a-radio :value="0">未通过</a-radio>
              <a-radio :value="1">通过</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="稽核结果" prop="basicCheckNote">
            <a-textarea
              v-model="lotData.testCardApplicationModel.basicCheckNote"
              placeholder="请输入合同内容的稽核结果"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
          <!--          快捷回复-->
          <div>
            <div class="alert-warning" @click="alertText(alertWarning[23])">{{ alertWarning[23] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[24])">{{ alertWarning[24] }}</div>
          </div>
        </div>
        <!--      轮播-->
        <div style="width: 65%;float:left;margin-left: 5%">
          <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 lotData.testCardApplication" :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: 95%;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 lotData.testCardApplication"
                  :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: 95%;height: 96px"
                       v-if="!item.urlBase" :src="noDataPng" border="1">

                </swiper-slide>


                <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;
              float: left;width: 83%;left: 2%">
        <div slot="title">
          <span style="float: left;position: relative;top: 4px">责任人和经办人授权书</span>
        </div>
        <!--        稽核结果-->
        <div style="float: left;width: 30%">
          <a-form-model-item label="稽核状态" prop="basicCheckState">
            <a-radio-group @change="basicCheckClick(lotData.empowerModel.basicCheckState)"
                           v-model="lotData.empowerModel.basicCheckState">
              <a-radio :value="0">未通过</a-radio>
              <a-radio :value="1">通过</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="稽核结果" prop="basicCheckNote">
            <a-textarea
              v-model="lotData.empowerModel.basicCheckNote"
              placeholder="请输入合同内容的稽核结果"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
          <!--          快捷回复-->
          <div>
            <div class="alert-warning" @click="alertText(alertWarning[8])">{{ alertWarning[8] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[9])">{{ alertWarning[9] }}</div>
          </div>
        </div>
        <!--      轮播-->
        <div style="width: 65%;float:left;margin-left: 5%">
          <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 lotData.empower" :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: 95%;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 lotData.empower"
                  :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: 95%;height: 96px"
                       v-if="!item.urlBase" :src="noDataPng" border="1">

                </swiper-slide>


                <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;
              float: left;width: 83%;left: 2%">
        <div slot="title">
          <span style="float: left;position: relative;top: 4px">责任人和经办人身份证</span>
        </div>
        <!--        稽核结果-->
        <div style="float: left;width: 30%">
          <a-form-model-item label="稽核状态" prop="basicCheckState">
            <a-radio-group @change="basicCheckClick(lotData.idCardModel.basicCheckState)"
                           v-model="lotData.idCardModel.basicCheckState">
              <a-radio :value="0">未通过</a-radio>
              <a-radio :value="1">通过</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="稽核结果" prop="basicCheckNote">
            <a-textarea
              v-model="lotData.idCardModel.basicCheckNote"
              placeholder="请输入责任人和经办人身份证的稽核结果"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
          <!--          快捷回复-->
          <div>
            <div class="alert-warning" @click="alertText(alertWarning[10])">{{ alertWarning[10] }}</div>
          </div>
        </div>
        <!--      轮播-->
        <div style="width: 65%;float:left;margin-left: 5%">
          <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 lotData.idCard" :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: 95%;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 lotData.idCard"
                  :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: 95%;height: 96px"
                       v-if="!item.urlBase" :src="noDataPng" border="1">

                </swiper-slide>


                <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;
              float: left;width: 83%;left: 2%">
        <div slot="title">
          <span style="float: left;position: relative;top: 4px">客户证件扫描</span>
        </div>
        <!--        稽核结果-->
        <div style="float: left;width: 30%">
          <a-form-model-item label="稽核状态" prop="basicCheckState">
            <a-radio-group @change="basicCheckClick(lotData.customerIdModel.basicCheckState)"
                           v-model="lotData.customerIdModel.basicCheckState">
              <a-radio :value="0">未通过</a-radio>
              <a-radio :value="1">通过</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="稽核结果" prop="basicCheckNote">
            <a-textarea
              v-model="lotData.customerIdModel.basicCheckNote"
              placeholder="请输入责任人和经办人身份证的稽核结果"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
          <!--          快捷回复-->
          <div>
            <div class="alert-warning" @click="alertText(alertWarning[11])">{{ alertWarning[11] }}</div>
          </div>
        </div>
        <!--      轮播-->
        <div style="width: 65%;float:left;margin-left: 5%">
          <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 lotData.customerId" :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: 95%;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 lotData.customerId"
                  :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: 95%;height: 96px"
                       v-if="!item.urlBase" :src="noDataPng" border="1">

                </swiper-slide>


                <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;
              float: left;width: 83%;left: 2%">
        <div slot="title">
          <span style="float: left;position: relative;top: 4px">风险评估表</span>
        </div>
        <!--        稽核结果-->
        <div style="float: left;width: 30%">
          <a-form-model-item label="稽核状态" prop="basicCheckState">
            <a-radio-group @change="basicCheckClick(lotData.riskModel.basicCheckState)"
                           v-model="lotData.riskModel.basicCheckState">
              <a-radio :value="0">未通过</a-radio>
              <a-radio :value="1">通过</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="稽核结果" prop="basicCheckNote">
            <a-textarea
              v-model="lotData.riskModel.basicCheckNote"
              placeholder="请输入责任人和经办人身份证的稽核结果"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
          <!--          快捷回复-->
          <div>
            <div class="alert-warning" @click="alertText(alertWarning[12])">{{ alertWarning[12] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[13])">{{ alertWarning[13] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[14])">{{ alertWarning[14] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[15])">{{ alertWarning[15] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[16])">{{ alertWarning[16] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[17])">{{ alertWarning[17] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[18])">{{ alertWarning[18] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[19])">{{ alertWarning[19] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[20])">{{ alertWarning[20] }}</div>
          </div>
        </div>
        <!--      轮播-->
        <div style="width: 65%;float:left;margin-left: 5%">
          <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 lotData.risk" :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: 95%;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 lotData.risk"
                  :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: 95%;height: 96px"
                       v-if="!item.urlBase" :src="noDataPng" border="1">

                </swiper-slide>


                <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 && !lotData.isShow.commitmentShow"
              style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
        <div slot="title">
          <span style="float: left;position: relative;top: 4px">省/集团价格审批</span>
        </div>
        <!--        稽核结果-->
        <div style="float: left;width: 30%">
          <a-form-model-item label="稽核状态" prop="basicCheckState">
            <a-radio-group @change="basicCheckClick(lotData.priceApprovalModel.basicCheckState)"
                           v-model="lotData.priceApprovalModel.basicCheckState">
              <a-radio :value="0">未通过</a-radio>
              <a-radio :value="1">通过</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="稽核结果" prop="basicCheckNote">
            <a-textarea
              v-model="lotData.priceApprovalModel.basicCheckNote"
              placeholder="请输入责任人和经办人身份证的稽核结果"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
          <!--          快捷回复-->
          <div>
            <div class="alert-warning" @click="alertText(alertWarning[21])">{{ alertWarning[21] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[22])">{{ alertWarning[22] }}</div>
            <div class="alert-warning" @click="alertText(alertWarning[23])">{{ alertWarning[23] }}</div>
          </div>
        </div>
        <!--      轮播-->
        <div style="width: 65%;float:left;margin-left: 5%">
          <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 lotData.priceApproval" :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: 95%;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 lotData.priceApproval"
                  :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: 95%;height: 96px"
                       v-if="!item.urlBase" :src="noDataPng" border="1">

                </swiper-slide>


                <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="lotData.isShow.commitmentShow"
              style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
        <div slot="title">
          <span style="float: left;position: relative;top: 4px">承诺涵/其他材料</span>
        </div>
        <!--        稽核结果-->
        <div style="float: left;width: 30%">
          <a-form-model-item label="稽核状态" prop="basicCheckState">
            <a-radio-group @change="basicCheckClick(lotData.commitmentModel.basicCheckState)"
                           v-model="lotData.commitmentModel.basicCheckState">
              <a-radio :value="0">未通过</a-radio>
              <a-radio :value="1">通过</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="稽核结果" prop="basicCheckNote">
            <a-textarea
              v-model="lotData.commitmentModel.basicCheckNote"
              placeholder="请输入其它材料的稽核结果"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
        <!--      轮播-->
        <div style="width: 65%;float:left;margin-left: 5%">
          <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 lotData.commitment" :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: 95%;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 lotData.commitment"
                  :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: 95%;height: 96px"
                       v-if="!item.urlBase" :src="noDataPng" border="1">

                </swiper-slide>


                <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>

    <!--  合同资料-->

  </div>

</template>

<script>
import {httpAction, getAction, postAction} from '@api/manage'
/*无数据图片*/
import noDataPng from '@/assets/nodata.png'
import {JeecgListMixin} from "@/mixins/JeecgListMixin";

let Base64 = require('js-base64').Base64
export default {
  name: "TaskCheckAudit",
  mixins: [JeecgListMixin],
  inject: ['closeCurrent'],
  data() {
    return {
      //无数据图片
      noDataPng: noDataPng,
      //客户信息
      info: {},
      url: {
        queryInfo: "/smsCheck/customerInfo/queryById",
        lotInfo: "/smsLot/customerData/query/infoId",
        checkInfo: "/smsLot/customerData/check/info",
        checkDataId: "/smsLot/customerData/query/check/dataId",
        list: "/smsCheck/customerData/list",
      },
      //轮播配置
      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'
        }
      },
      lotData: {
        isShow: {
          commitmentShow: false
        },

        //合同稽核状态
        contractModel: {
          //备注
          basicCheckNote: "",
          //稽核结果
          basicCheckState: null,
        },
        //责任人和经办人授权书稽核状态
        empowerModel: {
          //备注
          basicCheckNote: "",
          //稽核结果
          basicCheckState: null,
        },
        //责任人和经办人身份证
        idCardModel: {
          //备注
          basicCheckNote: "",
          //稽核结果
          basicCheckState: null,
        },
        //客户证件扫描
        customerIdModel: {
          //备注
          basicCheckNote: "",
          //稽核结果
          basicCheckState: null,
        },
        //风险评估表
        riskModel: {
          //备注
          basicCheckNote: "",
          //稽核结果
          basicCheckState: null,
        },
        //省/集团价格审批
        priceApprovalModel: {
          //备注
          basicCheckNote: "",
          //稽核结果
          basicCheckState: null,
        },
        //测试卡申请单
        testCardApplicationModel: {
          //备注
          basicCheckNote: "",
          //稽核结果
          basicCheckState: null,
        },
        //承诺函/其他材料
        commitmentModel: {
          //备注
          basicCheckNote: null,
          //稽核结果
          basicCheckState: null,
        },
        //卡类型
        blockType: "",
        //是否突破价格管控
        control: "",
        //合同
        contract: [],
        //责任人经办人授权书
        empower: [],
        //责任人经办人身份证
        idCard: [],
        //客户证件
        customerId: [],
        //风险评估表
        risk: [],
        //省/集团价格审批表
        priceApproval: [],
        //测试卡申请单
        testCardApplication: [],
        //承诺函/其它材料
        commitment: [],
      },
      //物联网资料
      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'
        }
      },
      //步骤条
      current: 0,
      steps: [{}],
      //正式卡 是否突破价格管控
      stepsControlY: [
        {
          title: '合同',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '责任人和经办人授权书',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '责任人和经办人身份证',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '客户证件扫描',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '风险评估表',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '省/集团价格审批表',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '承诺涵（其他材料-非必填）',
          content: 'First-content',
          id: "commitment",
        }
      ],
      stepsControlN: [
        {
          title: '合同',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '责任人和经办人授权书',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '责任人和经办人身份证',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '客户证件扫描',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '风险评估表',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '承诺涵（其他材料-非必填）',
          content: 'First-content',
          id: "commitment",
        }
      ],
      //测试卡步骤条
      stepsTest: [
        {
          title: '测试卡申请单',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '责任人和经办人授权书',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '责任人和经办人身份证',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '客户证件扫描',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '风险评估表',
          content: 'First-content',
          status: "wait"
        },
        {
          title: '承诺涵（其他材料-非必填）',
          content: 'First-content',
          id: "commitment",
        }
      ],
      alertWarning: [
        "没有在有效期",
        "没有明确场景，如车联网，水表等，与风险评估表不一致",
        "没有明确开通功能，如语音，短信，流量等",
        "没有明确功能限制，如定向、机卡绑定、卡片限定、限额管控、黑名单限制等",
        "没有明确白名单数量，具体号码，地址等",
        "没有明确防范垃圾短信和骚扰电话条款",
        "缺少签字，日期等",
        "合同签署不是是法人，没有有授权书",
        "经办人和责任人与授权书不一致",
        "经办人和责任人授权书未加盖公章",
        "经办人和责任人身份证复印件未加盖公章",
        "客户证件复印件未加盖公章",
        "没有进行入网风险评估",
        "安全管理能力没有填写最小必要数据",
        "没有明确使用场景（与产品形态表一致），如车联网、水表等",
        "没有明确开通功能，如语音，短信，流量等",
        "没有明确功能限制情况，如定向，机卡绑定，卡片绑定，限额管控，黑名单限制等",
        "存在低级错误，如缺少签字、日期等",
        "风险评估表中卡类型没有写清三要素：网络制式、商业级或消费级、贴片机或插卡机",
        "现场考察部分截图不清晰",
        "合同、入网评估表、系统受理不一致",
        "同客户同项目测试卡数量超过100张",
        "物联网开卡时提供公免卡审批表，开卡张数和公免额度与审批表不一致",
        "累计限免有效期原则上大于15个月",
        "测试卡申请单没有加盖公章",
        "测试卡申请单中经办人、责任人身份证不一致"
      ]
    }
  },
  components: {},
  created() {
    this.info.id = this.$route.query.id;
    this.queryInfoById(this.info.id);
    this.lotInfoById(this.info.id);
  },
  methods: {
    /**提交稽核*/
    submitAuditLot() {
      let that = this;
      let control = that.lotData.control;
      let blockType = that.lotData.blockType;
      //测试卡申请单
      let basicCheckState = that.lotData.testCardApplicationModel.basicCheckState;
      let testCardApplicationState = basicCheckState == 0 || basicCheckState == 1 ? basicCheckState : null;
      //合同
      basicCheckState = that.lotData.contractModel.basicCheckState;
      let contractState = basicCheckState == 0 || basicCheckState == 1 ? basicCheckState : null;
      //责任人经办人授权书
      basicCheckState = that.lotData.empowerModel.basicCheckState;
      let empowerState = basicCheckState == 0 || basicCheckState == 1 ? basicCheckState : null;
      //责任人经办人身份证
      basicCheckState = that.lotData.idCardModel.basicCheckState;
      let idCardState = basicCheckState == 0 || basicCheckState == 1 ? basicCheckState : null;
      //客户证件扫描
      basicCheckState = that.lotData.customerIdModel.basicCheckState;
      let customerIdState = basicCheckState == 0 || basicCheckState == 1 ? basicCheckState : null;
      //风险评估表
      basicCheckState = that.lotData.riskModel.basicCheckState;
      let riskState = basicCheckState == 0 || basicCheckState == 1 ? basicCheckState : null;
      //省集团价格审批表
      basicCheckState = that.lotData.priceApprovalModel.basicCheckState;
      let priceApprovalState = basicCheckState == 0 || basicCheckState == 1 ? basicCheckState : null;
      //承诺函，其他材料
      basicCheckState = that.lotData.commitmentModel.basicCheckState;
      let commitmentState = basicCheckState == 0 || basicCheckState == 1 ? basicCheckState : null;

      if (control == 0 && blockType == 1) {
        //正式卡 未突破价格管控
        if (contractState == null || empowerState == null ||
          idCardState == null || customerIdState == null
          || riskState == null || commitmentState == null) {
          this.$message.error("请完成相关稽核！")
          return;
        }
      } else if (control == 1 && blockType == 1) {
        //正式卡 突破价格管控
        if (contractState == null || empowerState == null ||
          idCardState == null || customerIdState == null
          || riskState === null || priceApprovalState == null || commitmentState == null) {
          this.$message.error("请完成相关稽核！")
          return;
        }
      } else if (blockType == 0) {
        //测试卡
        if (testCardApplicationState == null || empowerState == null ||
          idCardState == null || customerIdState == null ||
          riskState == null || commitmentState == null) {
          this.$message.error("请完成相关稽核！")
          return;
        }

      }

      let auditData = {
        "dataId": that.info.dataId,
        "blockType": that.lotData.blockType,
        "control": that.lotData.control,
        "infoId": that.info.id,
        "contractState": contractState,
        "contractNote": that.lotData.contractModel.basicCheckNote,
        "testCardApplicationState": testCardApplicationState,
        "testCardApplicationNote": that.lotData.testCardApplicationModel.basicCheckNote,
        "empowerState": empowerState,
        "empowerNote": that.lotData.empowerModel.basicCheckNote,
        "idCardState": idCardState,
        "idCardNote": that.lotData.idCardModel.basicCheckNote,
        "customerIdState": customerIdState,
        "customerIdNote": that.lotData.customerIdModel.basicCheckNote,
        "riskState": riskState,
        "riskNote": that.lotData.riskModel.basicCheckNote,
        "priceApprovalState": priceApprovalState,
        "priceApprovalNote": that.lotData.priceApprovalModel.basicCheckNote,
        "commitmentState": commitmentState,
        "commitmentNote": that.lotData.commitmentModel.basicCheckNote,
        "basicInfoState": parseInt("0"),
      }
      postAction(that.url.checkInfo, auditData).then(res => {
        if (res.success) {
          this.$message.success("稽核完成");
          this.$router.go(-1);
          this.closeCurrent();
        } else {
          this.$message.error("稽核失败")
        }
      })
    },

    /**节点状态*/
    basicCheckClick(state) {
      let boolean = state == "1" ? true : false;
      if (boolean) {
        this.steps[this.current]["status"] = "finish";
      } else {
        this.steps[this.current].status = "error";
      }
    },
    /**提醒点击事件*/
    alertText(text) {
      let that = this;
      let current = that.current;
      //卡类型
      let blockType = that.lotData.blockType;
      switch (current) {
        case 0:
          if (blockType == 0) {
            //测试卡
            let basicCheckNote = this.testCardApplicationModel.basicCheckNote;
            basicCheckNote = basicCheckNote + " " + text;
            this.lotData.testCardApplicationModel.basicCheckNote = basicCheckNote
          } else {
            //正式卡
            let basicCheckNote = this.lotData.contractModel.basicCheckNote;
            basicCheckNote = basicCheckNote + " " + text;
            this.lotData.contractModel.basicCheckNote = basicCheckNote
          }
          break;
        case 1:
          let basicCheckNote = this.lotData.empowerModel.basicCheckNote;
          basicCheckNote = basicCheckNote + " " + text;
          this.lotData.empowerModel.basicCheckNote = basicCheckNote
          break;
        case 2:
          let basicCheckNote2 = this.lotData.idCardModel.basicCheckNote;
          basicCheckNote2 = basicCheckNote2 + " " + text;
          this.lotData.idCardModel.basicCheckNote = basicCheckNote2
          break;
        case 3:
          let basicCheckNote3 = this.lotData.customerIdModel.basicCheckNote;
          basicCheckNote3 = basicCheckNote3 + " " + text;
          this.lotData.customerIdModel.basicCheckNote = basicCheckNote3
          break;
        case 4:
          let basicCheckNote4 = this.lotData.riskModel.basicCheckNote;
          basicCheckNote4 = basicCheckNote4 + " " + text;
          this.lotData.riskModel.basicCheckNote = basicCheckNote4
          break;
        case 5:
          let basicCheckNote5 = this.lotData.priceApprovalModel.basicCheckNote;
          basicCheckNote5 = basicCheckNote5 + " " + text;
          this.lotData.priceApprovalModel.basicCheckNote = basicCheckNote5
          break;
      }
    },
    /**步骤条点击事件*/
    stepsClick(current) {
      this.current = current;
      //其他材料
      if (this.steps[this.current].id == "commitment") {
        this.lotData.isShow.commitmentShow = true;
      } else {
        this.lotData.isShow.commitmentShow = false;
      }
      this.currentFileType(current);
    },
    /**步骤文件类型对应*/
    currentFileType(current) {
      let that = this;
      this.swiperImg = {}
      //卡类型
      let blockType = that.lotData.blockType;
      if (that.lotData.isShow.commitmentShow) {
        console.log("commitment：" + that.lotData.commitment);
        that.swiperImg = that.lotData.commitment;
      } else {
        switch (current) {
          case 0:
            if (blockType == 0) {
              that.swiperImg = that.lotData.testCardApplication
            } else {
              that.swiperImg = that.lotData.contract
            }
            break;
          case 1:
            that.swiperImg = that.lotData.empower
            break;
          case 2:
            that.swiperImg = that.lotData.idCard
            break;
          case 3:
            that.swiperImg = that.lotData.customerId
            break;
          case 4:
            that.swiperImg = that.lotData.risk
            break;
          case 5:
            that.swiperImg = that.lotData.priceApproval
            break;
        }
      }
      //拒绝下标为空 影响轮播样式
      if (that.swiperImg == null || that.swiperImg.length == 0) {
        that.swiperImg.push({})
      }
    },


    /**返回上一级*/
    back() {
      this.$router.go(-1);
      //关闭当前页
      this.closeCurrent();
    },
    /**获取客户信息*/
    queryInfoById(id) {
      let url = this.url.queryInfo;
      let params = {
        id: id
      }
      let that = this;
      getAction(url, params).then(res => {
        if (res.success) {
          that.info = res.result;
        }
      }).finally(() => {

      })
    },

    /**获取物联网文件数据*/
    lotInfoById(id) {
      let that = this;
      let url = this.url.lotInfo;
      let params = {
        infoId: id
      }
      postAction(url, params).then(res => {
        if (res.success) {
          let data = res.result;
          that.info.dataId = data.id
          //合同
          that.lotData.contract = that.packageArr(data.contract);
          //责任人经办人授权书
          that.lotData.empower = that.packageArr(data.empower)
          //责任人经办人身份证
          that.lotData.idCard = that.packageArr(data.idCard)
          //客户证件
          that.lotData.customerId = that.packageArr(data.customerId)
          //风险评估表
          that.lotData.risk = that.packageArr(data.risk)
          //省集团价格审批表
          that.lotData.priceApproval = that.packageArr(data.priceApproval)
          //测试卡申请单
          that.lotData.testCardApplication = that.packageArr(data.testCardApplication)
          //卡类型
          that.lotData.blockType = data.blockType;
          //是否突破价格管控
          that.lotData.control = data.control;
          //承诺函/其它材料
          that.lotData.commitment = that.packageArr(data.commitment);

          let control = that.lotData.control;
          let blockType = that.lotData.blockType;
          //步骤条数据源
          //是否突破价格管控
          if (control == 0 && blockType == 1) {
            this.steps = this.stepsControlN;
          } else if (control == 1 && blockType == 1) {
            this.steps = this.stepsControlY;
          } else if (blockType == 0) {
            this.steps = this.stepsTest;
          } else {
            this.steps = this.stepsControlN;
          }
        }
      }).finally(() => {

      })
    },
    /**包装轮播数据*/
    packageArr(data) {
      let id = 0;
      let newArr = []
      if (data == null) {
        newArr.push({})
        return newArr;
      }
      let splice = data.split(",");
      for (var i in splice) {
        id = id + 1;
        let filePath = splice[i];
        if (filePath == "") {
          break;
        }
        let fileName = filePath.split("/");
        fileName = fileName[fileName.length - 1];
        let swipData = {
          id: id,
          urlBase: window._CONFIG['onlinePreviewDomainURL'] + '?url='
            + encodeURIComponent(
              Base64.encode(
                (filePath)
              )),
          url: filePath,
          fileName: fileName
        }
        newArr.push(swipData);
      }
      return newArr;
    },


  },

}
</script>

<style lang="less" scoped>
.noDataPng {
  width: 70%;
  height: 70%;
  border: 1px solid;
}

.alert-warning {
  cursor: pointer;
  margin-bottom: 10px !important;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: 'tnum';
  position: relative;
  padding: 8px 15px 8px 37px;
  word-wrap: break-word;
  border-radius: 4px;
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
  padding: 8px 15px;
}


h3 {
  margin: 20px 0 0 10px;
}

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

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

.gallery-top {
  // height: 80% !important;
  /*height: 600px;*/
  width: 70%;
  /*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;
}

margin-bottom-10 {
  margin-bottom: 10px;
}


</style>