tnc-fe/src/views/lotCheck/modules/TaskCheckDetails.vue

<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="员工工号" :span="2">{{ 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-alert v-if="info.checkState == '5'" :message="info.statusFilter" type="success" show-icon/>
        <a-alert v-if="info.checkState == '0' || info.checkState == '1'" :message="info.statusFilter" type="warning"
                 show-icon/>
        <a-alert v-if="info.checkState == '2' || info.checkState == '3'" :message="info.statusFilter" type="info"
                 show-icon/>
        <a-alert v-if="info.checkState == '4'" :message="info.statusFilter" type="error" show-icon/>
      </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%">
          <div class="markdown" style="position: relative;top:0px">
            <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: 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%">
          <div class="markdown" style="position: relative;top:30px">
            <ul>
              <li>1）测试卡申请单是否加盖公章</li>
              <li>2）测试卡申请单中经办人、责任人身份证是否一致</li>
            </ul>
          </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%">
          <div class="markdown" style="position: relative;top:30px">
            <ul>
              <li>1）经办人和责任人授权书齐全并且加盖公章</li>
              <li>2）经办人和责任人与授权书一致</li>
            </ul>
          </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%">
          <div class="markdown" style="position: relative;top:30px">
            <ul>
              <li>1）经办人和责任人身份证复印件加盖公章</li>
            </ul>
          </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%">
          <div class="markdown" style="position: relative;top:30px">
            <ul>
              <li>1）客户证件复印件加盖公章</li>
            </ul>
          </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%">
          <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: 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"
              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%">
          <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: 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%">
          <div class="markdown" style="position: relative;top:30px">
            <ul>
              <li>1）请上传承诺函或其它资料</li>
            </ul>
          </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.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: "TaskCheckDetails",
  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'
        }
      },
      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'
        }
      },

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


    /**节点状态*/
    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;
      this.currentFileType(current);
    },
    /**步骤文件类型对应*/
    currentFileType(current) {
      let that = this;
      this.swiperImg = {}
      //卡类型
      let blockType = that.lotData.blockType;
      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;
        default:
          if (that.steps[current].id == "commitment") {
            that.swiperImg = that.lotData.commitment;
          }
      }
      //拒绝下标为空 影响轮播样式
      if (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
          //当前状态
          let checkState = that.info.checkState;
          that.info.statusFilter = this.statusFilter(checkState);
        }
      }).finally(() => {

      })
    },

    statusFilter(status) {
      const statusMap = {
        '0': '未完善',
        '1': '未完善',
        '2': '待稽核',
        '3': '待稽核',
        '4': '待整改',
        '5': '通过'
      }
      return statusMap[status]
    },
    /**获取稽核结果*/
    lotCheckById(id) {
      let that = this;
      let url = this.url.checkDataId;
      let params = {
        infoId: id
      }
      postAction(url, params).then(res => {
        if (res.success) {
          let data = res.result;
          if (data != null) {
            for (var i in that.steps) {
              that.stepsStatus(i, data);
            }
          }
        }
      }).finally(() => {

      })
    },
    stepsStatus(current, data) {
      let that = this;
      //卡类型
      let blockType = that.lotData.blockType;
      switch (current) {
        case '0':
          if (blockType == 0) {
            //测试卡
            that.steps[current].status = data.testCardApplicationState == '0' ? "error" : "finish";
          } else {
            //正式卡
            that.steps[current].status = data.contractState == '0' ? "error" : "finish";
          }
          break;
        case '1':
          that.steps[current].status = data.empowerState == '0' ? "error" : "finish";
          break;
        case '2':
          that.steps[current].status = data.idCardState == '0' ? "error" : "finish";
          break;
        case '3':
          that.steps[current].status = data.customerIdState == '0' ? "error" : "finish";
          break;
        case '4':
          that.steps[current].status = data.riskState == '0' ? "error" : "finish";
          break;
        case '5' && that.steps[current].id != "commitment":
          that.steps[current].status = data.priceApprovalState == '0' ? "error" : "finish";
          break;
        default:
          if (that.steps[current].id == "commitment") {
            that.steps[current].status = data.commitmentState == '0' ? "error" : "finish";
          }
          break;
      }
    },

    /**获取物联网文件数据*/
    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.commitment = that.packageArr(data.commitment)
          //卡类型
          that.lotData.blockType = data.blockType;
          //是否突破价格管控
          that.lotData.control = data.control;
          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;
          }
          this.lotCheckById(id);

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