<style>
  .iconfont {
    font-size: 14px;
    display: inline-block;
  }
  ._wenjian_P {
    font-size: 30px;
    text-align: center;
    color: #41D2A1;
  }
  .customerApproval .approvalNav {
    height: 52px;
    width: 100%;
    margin: 30px 0 20px;
  }

  .customerApproval .approvalNav>li {
    float: left;
    width: 116px;
    font-size: 14px;
    height: 52px;
    color: #666;
    text-align: center;
    line-height: 52px;
    background: #e9e9e9;
    cursor: pointer;
  }

  .customerApproval .approvalNav>li.active {
    background: #fff;
    color: #333;
  }

  .customerApproval .approvalNav .divActive {
    margin: -3px auto;
    width: 26px;
    height: 3px;
    background: #e95252;
  }

  .customerApprovalDetailTable {
    width: 100%;
    font-size: 14px;
    color: #333;
  }

  .customerApprovalDetailTable tr th {
    background: #e6e6e6;
    height: 30px;
    font-size: 12px;
    text-align: left;
    text-indent: 25px;
  }

  .customerApprovalDetailTable tr {
    background: #fff;
    text-align: left;
  }

  .customerApprovalDetailTable tr td {
    height: 60px;
    padding-left: 25px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
  }

  .customerApprovalLayer {
    position: fixed;
    z-index: 99;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .customerApprovalLayer .rightZero {
    right: 0px;
  }

  .customerApprovalLayercontentDiv {
    width: 420px;
    background: #fff;
    height: 100%;
    overflow: auto;
    top: 0;
    right: -420px;
    position: fixed;
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.1);
    transition: right 0.5s;
  }

  .customerApprovalLayercontentDiv .title {
    width: 420px;
    height: 48px;
    line-height: 48px;
    text-indent: 20px;
    font-size: 16px;
    color: #333;
    background: #edeef0;
  }

  .customerApprovalLayercontentDiv .item {
    width: 380px;
    height: auto;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    margin: 20px 0 20px 20px;
    padding: 20px;
  }

  .customerApprovalLayercontentDiv .item .topMsg {
    overflow: hidden;
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
  }

  .customerApprovalLayercontentDiv .item .topMsg>img {
    float: left;
    margin-right: 13px;
  }

  .customerApprovalLayercontentDiv .item .bottomMsg {
    padding: 15px 0;
  }

  .customerApprovalLayercontentDiv .item .bottomMsg .pImg {
    margin-top: 10px;
  }

  .customerApprovalLayercontentDiv .item .bottomMsg .pImg img {
    cursor: pointer;
    height: 100px;
  }

  .customerApprovalLayercontentDiv .answerItem {
    overflow: hidden;
    padding: 15px 0;
  }

  .customerApprovalLayercontentDiv .answerItem>img {
    float: left;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    margin-right: 10px;
  }

  .customerApprovalLayercontentBtn {
    position: fixed;
    bottom: 0;
    background: #f5f5f5;
    width: 420px;
    height: 70px;
    line-height: 70px;
    text-align: right;
    padding: 0 20px;
  }

  .customerApprovalLayercontentBtn>div {
    border-bottom: 1px solid #d9d9d9;
    height: 40px;
    line-height: 40px;
    text-align: left;
    overflow: hidden;
  }

  .customerApprovalLayercontentBtn>span {
    display: inline-block;
    line-height: 18px;
    color: #333;
    font-size: 12px;
    text-align: center;
    border: 2px solid #fff;
    cursor: pointer;
    background: #fff;
    height: 110px;
    width: 110px;
    margin-top: 20px;
    box-sizing: border-box;
  }

  .customerApprovalLayercontentBtn>span.cked {
    border: 2px solid #e95252;
    box-sizing: border-box;
  }

  .customerApprovalLayercontentBtn>span>img {
    float: left;
    margin: 10px 23px;
    width: 63px;
    height: 63px;
  }

  .customerApproval .lastVisitContent {
    background: #f5f5f5;
    font-size: 12px;
    padding: 5px 12px;
    margin-top: 8px;
  }

  .customerApproval ._class_b {
    color: #257bf1 !important;
  }

  .price-item {
    padding: 10px 20px;
    font-size: 14px;
  }

  .price-item-title {
    color: #666;

  }
</style>

<template>
  <div class="customerApproval">
    <div :class="{ viewBigPicLayer: true, viewBigPicLayerDisplayNone: dspNone }" @click="closePicLayer">
      <i @click="closePicLayer" class="el-icon-circle-close-outline clolseViewBigPicLayer"></i>
      <el-carousel height="600px" :initial-index="initialIndex" :interval="5000" trigger="click">
        <el-carousel-item v-for="(item, index) in picObj" :key="index">
          <div class="inlineDiv ownScrollbarStyle"><img :src="item" /></div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <viewer :images="picObj" :options="imageOptions" @inited="inited" class="viewer" ref="viewer">
      <img v-for="item in picObj" :src="item" :key="item" />
    </viewer>

    <div :class="{ customerApprovalLayer: showlayer }" @click="closeLayer"
    >
      <div :class="{
          customerApprovalLayercontentDiv: true,
          rightZero: isTransition,
        }" class="ownScrollbarStyle" @click.stop
        v-loading="loadingInfor">
        <div class="title">{{ meta }}{{ $t("fnc.xiangqing") }}</div>
        <div class="item">
          <div class="topMsg">
            <img v-if="!detailList.photo" src="../../assets/img/litheader.png" />
            <img v-if="detailList.photo" :onerror="defaultImg" :src="detailList.photo" />
            <p>{{ detailList.customerName }}</p>
            <p class="mt5">
              <i class="iconfont icon-img_dianhua fz12" style="color: #09d49d"></i>
              <span class="fz14 color333">{{ detailList.contact }}</span>
              &nbsp;&nbsp;&nbsp;
              <span class="fz14 color333">{{ detailList.contactNumber }}</span>
            </p>
            <p class="fz12 color999 mt5">
              {{ detailList.expectVisitDateTime }}
            </p>
          </div>
          <p v-if="lastVisitObj.visitId > 0" class="fz14 mt10 color666">
            <i class="iconfont icon-shijian colorccc"></i>&nbsp;{{
              $t("salesModule.HistoryVisit")
            }}&nbsp;
            <span class="color666 fz12">{{ lastVisitObj.timestr }}</span>
          </p>
          <div v-if="lastVisitObj.visitId > 0" style="border-bottom: 1px solid #ccc; padding-bottom: 10px">
            <p class="fz12 mt10">
              {{ $t("salesModule.ProcessType") }}：{{
                lastVisitObj.salesProcess
              }}
            </p>
            <p class="fz12 mt10">{{ $t("salesModule.fwRecord") }}：</p>
            <p v-if="lastVisitObj.remark != ''" class="lastVisitContent">
              {{ lastVisitObj.remark }}
            </p>
            <p class="fz12 mt10">{{ $t("salesModule.goutong") }}：</p>
            <p v-if="lastVisitObj.visitRecord != ''" class="lastVisitContent">
              {{ lastVisitObj.visitRecord }}
            </p>
          </div>
          <div class="bottomMsg">
            <p class="fz14 color666 mt10">
              <i class="iconfont icon-ico-mingpianzhaopian fz14 colorccc"></i>&nbsp;
              {{ $t("salesModule.BusinessPhoto") }}
            </p>
            <p class="pImg" v-if="!detailList.businessCardPhotos">
              <span class="fz12 color333">{{ $t("active.cl_zanwu") }}</span>
            </p>
            <p class="pImg" v-else>
              <img @click="getPic(detailList.businessCardPhotos, index)"
                v-if="detailList.businessCardPhotos.length == 1" v-for="(i, index) in detailList.businessCardPhotos"
                :src="i + '?x-oss-process=image/resize,m_mfit,h_100,w_300'" />
              <img @click="getPic(detailList.businessCardPhotos, index)" v-if="
                  detailList.businessCardPhotos.length == 2 ||
                  detailList.businessCardPhotos.length == 4
                " v-for="(i, index) in detailList.housePhotos" :src="
                  i +
                  '?x-oss-process=image/resize,m_pad,w_169,h_150,color_333333'
                " />
              <img @click="getPic(detailList.businessCardPhotos, index)" v-if="
                  detailList.businessCardPhotos.length == 3 ||
                  detailList.businessCardPhotos.length >= 5
                " v-for="(i, index) in detailList.housePhotos" :src="
                  i +
                  '?x-oss-process=image/resize,m_pad,h_100,w_100,color_333333'
                " />
            </p>
            <p class="fz14 color666 mt10">
              <i class="iconfont icon-ico-menpaizhaopian fz14 colorccc"></i>&nbsp;
              {{ $t("salesModule.doorPhoto") }}
            </p>
            <p class="pImg" v-if="!detailList.housePhotos">
              <span class="fz12 color333">{{ $t("active.cl_zanwu") }}</span>
            </p>
            <p class="pImg" v-else>
              <img @click="getPic(detailList.housePhotos, index)" v-if="detailList.housePhotos.length == 1"
                v-for="(i, index) in detailList.housePhotos"
                :src="i + '?x-oss-process=image/resize,m_mfit,h_100,w_300'" />
              <img @click="getPic(detailList.housePhotos, index)" v-if="
                  detailList.housePhotos.length == 2 ||
                  detailList.housePhotos.length == 4
                " v-for="(i, index) in detailList.housePhotos" :src="
                  i +
                  '?x-oss-process=image/resize,m_pad,w_169,h_150,color_333333'
                " />
              <img @click="getPic(detailList.housePhotos, index)" v-if="
                  detailList.housePhotos.length == 3 ||
                  detailList.housePhotos.length >= 5
                " v-for="(i, index) in detailList.housePhotos" :src="
                  i +
                  '?x-oss-process=image/resize,m_pad,h_100,w_100,color_333333'
                " />
            </p>
            <p class="fz14 color666 mt10">
              <i class="iconfont icon-ico_yingyezhizhao fz14 colorccc"></i>&nbsp;
              {{ $t("salesModule.BusinessLicense") }}
            </p>
            <p class="pImg" v-if="!detailList.images">
              <span class="fz12 color333">{{ $t("active.cl_zanwu") }}</span>
            </p>
            <p class="pImg" v-else>
              <img @click="getPic(detailList.images, index)" v-if="detailList.images.length == 1"
                v-for="(i, index) in detailList.images"
                :src="i + '?x-oss-process=image/resize,m_mfit,h_100,w_300'" />
              <img @click="getPic(detailList.images, index)" v-if="
                  detailList.images.length == 2 || detailList.images.length == 4
                " v-for="(i, index) in detailList.images" :src="
                  i +
                  '?x-oss-process=image/resize,m_pad,w_169,h_150,color_333333'
                " />
              <img @click="getPic(detailList.images, index)" v-if="
                  detailList.images.length == 3 || detailList.images.length >= 5
                " v-for="(i, index) in detailList.images" :src="
                  i +
                  '?x-oss-process=image/resize,m_pad,h_100,w_100,color_333333'
                " />
            </p>

            <p class="fz14 color666 mt10">
              <i class="iconfont icon-ico_yingyezhizhao fz14 colorccc"></i>&nbsp;
              签约资料
            </p>
            <!-- <a v-if="detailList.signingFile" style="margin-left:20px;color:blue;cursor:pointer;font-size: 14px;"
              target="_blank" @click="downloadFile(detailList.signingFile)">签约客户附件</a> -->
            <div v-if="detailList&&detailList.signingFile" style="display: flex;">
              <!-- <span style="color:blue;font-size: 12px; padding: 5px 0;">签约附件：</span> -->
              <div>
                <div class="pImg" v-if="verificationFile(detailList.signingFile)==3">
                  <el-image :src="domainManager().ViittoFileUrl+detailList.signingFile"
                :preview-src-list="[domainManager().ViittoFileUrl+detailList.signingFile]"
                 style="height: 100px;">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
                <div v-if="verificationFile(detailList.signingFile)==1"
                  style="width: 88px; line-height: 59px;text-align: center;cursor: pointer;"
                  @click="showUpLoadFile(domainManager().ViittoFileUrl+detailList.signingFile)">
                  <span class="_wenjian_P iconfont"
                    :class="detailList.signingFile.substring(detailList.signingFile.lastIndexOf('.')+1,detailList.signingFile.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"></span>
                </div>
              </div>
            </div>
            <p class="fz14 color666 mt10">
              <i class="iconfont icon-fangwenjilu fz14 colorccc"></i>&nbsp;
              {{ $t("salesModule.kaifaDetail") }}
            </p>
            <p class="fz12 color333 mt10">
              {{ detailList.remark == "" ? "暂无" : detailList.remark }}
            </p>
            <p class="fz14 color666 mt10">
              <i class="iconfont icon-goutongneirong fz14 colorccc"></i>&nbsp;
              {{ $t("salesModule.VisitJG") }}
            </p>
            <p class="fz12 color333 mt10">
              {{
                detailList.visitRecord == "" ? "暂无" : detailList.visitRecord
              }}
            </p>
            <p class="fz14 mt10" style="color: #4779ff" v-show="customerStatus == 2 || customerStatus == 3">
              <i class="iconfont icon-shenpiyijian fz14" style="color: #4779ff"></i>&nbsp;
              {{ $t("salesModule.SPYJ") }}
            </p>
            <div class="answerItem" v-for="item in answerDetailList">
              <img v-if="!item.emPhoto" src="../../assets/img/litheader.png" />
              <img v-if="item.emPhoto" :onerror="defaultImg" :src="item.emPhoto" />
              <p>
                <span class="fz14 color333">{{ item.createBy }}</span>
                <span class="fz12 color999">{{ item.createDate }}</span>
              </p>
              <p class="mt5" style="color: #e95252" v-show="item.adviceStatus == 2">
                {{ $t("salesModule.ApprovalRejected") }}
              </p>
              <p style="color: #09d49d" v-show="item.adviceStatus == 1">
                {{ $t("salesModule.ApprovalPassed") }}
              </p>
              <p class="fz12 color333 mt5" style="margin-left: 35px; background: #f5f5f5; padding: 10px">
                {{ item.adviceContent }}
              </p>
            </div>
          </div>
        </div>
        <div v-if="(customerStatus == 0 || customerStatus == 1)">
        </div>
        <div v-else>
          <div class="price-item">
            <span class="price-item-title">签约额度:</span>
            <span>{{addMsg.SigningPrice}}</span>
          </div>
          <div class="price-item">
            <span class="price-item-title">有效日期:</span>
            <span>{{addMsg.SigningEndTime}}</span>
          </div>
        </div>
        <div class="customerApprovalLayercontentBtn"
          v-show="(customerStatus == 0 || customerStatus == 1) && isOk == -1">
          <input type="button" class="normalBtn" :value="$t('visa.v_tongguo')" @click="
              isOk = 1;
              addMsg.AdviceStatus = 1;
            " />
          <input type="button" class="hollowFixedBtn" :value="$t('visa.v_jujue')" @click="
              isOk = 0;
              addMsg.AdviceStatus = 2;
            " />
        </div>

        <div class="customerApprovalLayercontentBtn" style="height: 190px" v-show="isOk == 0">
          <div>
            <span class="fz14 color333">{{ $t("salesModule.RejectJJ") }}</span>
          </div>
          <p class="mt10">
            <el-input type="textarea" v-model="addMsg.AdviceContent" maxlength="200"></el-input>
          </p>
          <input type="button" class="normalBtn" :value="$t('adm.adm_publish')" @click="saveApproval()" />
          <input type="button" class="hollowFixedBtn" :value="$t('pub.cancelBtn')" @click="isOk = -1" />
        </div>

        <div class="customerApprovalLayercontentBtn" style="height: 400px; text-align: center" v-show="isOk == 1">
          <div>
            <span class="fz14 color333">{{
              $t("salesModule.ChoiceCustomer")
            }}</span>
          </div>
          <span :class="{ cked: addMsg.IsMember == 2 }" @click="addMsg.IsMember = 2">
            <img src="../../assets/img/notVip.png" />
            {{ $t("salesModule.NormalCustomer") }}
          </span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span :class="{ cked: addMsg.IsMember == 1 }" @click="addMsg.IsMember = 1">
            <img src="../../assets/img/isVip.png" />
            {{ $t("salesModule.MemberCustomer") }}
          </span>
          <p class="clearfix"></p>
          <el-form>
            <el-form-item label="签约额度">
              <el-input style="width: 220px" v-model="addMsg.SigningPrice" type="number"></el-input>
            </el-form-item>
            <el-form-item label="有效日期">
              <el-date-picker class="h34" v-model="addMsg.SigningEndTime" type="date" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <input type="button" class="normalBtn mg0" :value="$t('restaurant.res_confirm')" @click="saveApproval()" />
          &nbsp;&nbsp;
          <input type="button" class="hollowFixedBtn mg0" :value="$t('pub.cancelBtn')" @click="isOk = -1" />
        </div>
      </div>
    </div>

    <div class="approvalNav">
      <li :class="{ active: type == -1 }" @click="
          type = -1;
          clickGetList(-1);
        ">
        {{ $t("salesModule.AllApproval") }}
        <div class="divActive" v-show="type == -1"></div>
      </li>
      <li :class="{ active: type == 1 }" @click="
          type = 1;
          clickGetList(1);
        ">
        {{ $t("salesModule.Pending") }}
        <div class="divActive" v-show="type == 1"></div>
      </li>
      <li :class="{ active: type == 2 }" @click="
          type = 2;
          clickGetList(2);
        ">
        {{ $t("salesModule.YSP") }}
        <div class="divActive" v-show="type == 2"></div>
      </li>
    </div>
    <table class="customerApprovalDetailTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th width="20%">{{ $t("salesModule.Stores") }}</th>
        <th width="10%">{{ $t("hotel.suplier_contact") }}</th>
        <th width="15%">{{ $t("hotel.table_tel") }}</th>
        <th width="15%" v-if="type != 1">到期时间</th>
        <th width="15%" v-if="type != 1">签约金额</th>
        <th width="10%">{{ $t("salesModule.Laiyuan") }}</th>
        <th width="15%">{{ $t("hotel.hotel_status") }}</th>
        <th width="15%">{{ $t("admin.admin_operate") }}</th>
      </tr>
      <tr v-for="item in list">
        <td class="fz16">
          {{ item.customerName
          }}<i class="iconfont icon-shimingrenzheng" :class="{ _class_b: item.RealNameAuthentication === 1 }"></i>
        </td>
        <td>
          {{ item.contact }}
        </td>
        <td>{{ item.contactNumber }}</td>
        <td v-if="type != 1">{{ item.signingEndTime }}</td>
        <td v-if="type != 1">{{ item.signingPrice }}</td>
        <td>{{ item.emName }}</td>
        <td>
          <img src="../../assets/img/dsp.png" v-show="item.customerStatus == 0 || item.customerStatus == 1" />
          <img src="../../assets/img/ysp.png" v-show="item.customerStatus == 2 || item.customerStatus == 3" />
        </td>
        <td>
          <input type="button" :value="$t('salesModule.CheckDetails')" class="normalBtn" style="margin-left: 0;margin-right: 10px;"
            @click="getDetail(item)" />
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loadingInfor: false,
        subItem: {},
        imageOptions: {
          navbar: false,
          title: false,
        },
        lastVisitObj: {},
        meta: "",
        isOk: -1,
        type: -1,
        loading: false,
        isTransition: false,
        showlayer: false,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          CustomerStatus: -1,
        },
        addMsg: {
          SigningPrice: "",
          SigningEndTime: "",
          CustomerId: 0,
          AdviceStatus: 0,
          AdviceContent: "",
          VisitId: -1,
          IsMember: 2,
        },
        customerStatus: -1,
        picObj: [],
        dspNone: true,
        initialIndex: 0,
        defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
        currentPage: 1,
        total: 0,
        list: [],
        detailList: {},
        answerDetailList: [],
      };
    },
    methods: {
      showUpLoadFile(i) { // 预览上传文件
        this.previewPDF(i)
      },
      //下载文件
      downloadFile(fileUrl) {
        var newUrl = this.domainManager().ViittoFileUrl + fileUrl
        const link = document.createElement('a');
        link.href = newUrl;
        link.download = '签约客户附件';
        document.body.appendChild(link);
        link.click();
      },
      inited(viewer) {
        this.$viewer = viewer;
      },
      saveApproval() {
        if (this.addMsg.AdviceStatus == 1) {
          this.addMsg.AdviceContent = "";
        } else {
          this.addMsg.IsMember = 2;
        }
        this.apipost(
          "app_today_visit_SetCustomerAdvice",
          this.addMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.$message.success(res.data.message);
              this.closeLayer();
              this.getList();
            } else {
              this.$message.error(res.data.message);
            }
          },
          (err) => {}
        );
      },
      closePicLayer() {
        this.dspNone = true;
      },
      getPic(obj, index) {
        this.picObj = obj;
        this.$viewer.show();
      },
      getDetail(obj) {
        this.openLayer();
        this.meta = obj.customerName;
        this.addMsg.VisitId = obj.visitID;
        this.addMsg.CustomerId = obj.customerId;
        this.addMsg.SigningEndTime = obj.signingEndTime;
        this.addMsg.SigningPrice = obj.signingPrice;
        this.customerStatus = obj.customerStatus;
        this.loadingInfor = true
        this.apipost(
          "app_today_visit_GetVisitByCustomerIDEntity", {
            customerId: obj.customerId
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.detailList = res.data.data.customerInfo;
            } else {}
            this.loadingInfor = false
          },
          (err) => {this.loadingInfor = false}
        );

        this.apipost(
          "app_today_visit_GetCustomerAdvice", {
            CustomerId: obj.customerId
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.answerDetailList = res.data.data;
            } else {}
          },
          (err) => {}
        );

        this.apipost(
          "app_get_my_GetVisitPlanLastList", {
            empId: obj.creatBy,
            customerId: obj.customerId
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.lastVisitObj = res.data.data;
            } else {}
          },
          (err) => {}
        );
      },
      clickGetList(type) {
        this.msg.CustomerStatus = type;
        this.msg.pageIndex = 1;
        this.currentPage = 1;
        this.getList();
      },
      getList() {
        this.loading = true;
        this.msg.SigningType = 1;
        this.apipost(
          "app_today_visit_GetMyDeptCustomerList",
          this.msg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.list = res.data.data.pageData;
              this.total = res.data.data.count;
              this.loading = false;
            } else {
              this.$message.error(res.data.message);
            }
          },
          (err) => {}
        );
      },
      openLayer() {
        this.showlayer = true;
        this.isTransition = true;
      },
      closeLayer() {
        let _this = this;
        setTimeout(function () {
          _this.showlayer = false;
        }, 300);
        this.isTransition = false;
        this.isOk = -1;
        this.addMsg.AdviceContent = "";
        this.addMsg.IsMember = 2;
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
    },
    mounted() {
      this.getList();
    },
  };
</script>