<style>
  ._info_img ul {
    /* padding: 10px 0 */
  }

  ._info_img ul li {
    width: 52px;
    height: 52px;
    float: left;
    position: relative;
    cursor: pointer;
    margin-right: 5px;
    border: 1px dashed #d1d1d1;
    border-radius: 6px;
  }

  ._info_img ul li:hover ._see_img {
    opacity: 1;
  }

  ._info_img ul li img {
    width: 50px;
    height: 50px;
  }

  ._see_img {
    position: absolute;
    top: 0;
    width: 50px;
    height: 50px;
    line-height: 34px;
    text-align: center;
    background-color: rgba(2, 2, 2, 0.3);
    display: inherit;
    opacity: 0;
    transition: all linear .5s
  }

  ._see_img i.iconfont {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-top: 8px;
    border-radius: 50%;
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.5);
  }

  ._show_img_box {
    position: fixed;
    background: rgba(0, 0, 0, .6);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center;
    overflow: auto;
  }

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

</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>
        <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('objFill.hetongziliang')}}
            </p>
            <p class="pImg" v-if="!detailList.businessCardPhotos"><span
                class="fz12 color333">{{$t('active.cl_zanwu')}}</span></p>
            <p class="pImg" v-else>
              <div class="_info_img" v-if="detailList.businessCardPhotos&&detailList.businessCardPhotos.length>0">
                <ul class="clearfix">
                  <li v-for="(img,imgI) in detailList.businessCardPhotos" :key="imgI">
                    <img v-if="!img" src="../../assets/img/Travelslider.png" alt="">
                    <el-image v-if="img&&verificationFile(img,3)" :src="img" :preview-src-list="[img]">
                    </el-image>
                    <div v-if="img&&verificationFile(img,1)" style="width: 50px; line-height: 50px;text-align: center;">
                      <span class="_wenjian_P iconfont"
                        :class="img.substring(img.lastIndexOf('.')+1,img.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"></span>
                    </div>
                    <div v-if="img&&verificationFile(img,1)" class="_see_img" @click="showUpLoadFile2(img)">
                      <i class="iconfont icon-sousuo"></i>
                    </div>
                  </li>
                </ul>
              </div>
            </p>
            <p class="fz14 color666 mt10">
              <i class="iconfont icon-ico-menpaizhaopian fz14 colorccc"></i>&nbsp;
              {{$t('objFill.pingtaiyhm')}}
            </p>
            <p>
              <div style="display: flex; flex-wrap: wrap;align-items: center;">
                <el-tag :key="tag" v-for="tag in detailList.platformUserNameList" :disable-transitions="false"
                  size="medium" style="margin-right: 5px;margin-bottom: 3px;">
                  {{tag}}
                </el-tag>
              </div>
            </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)" :key="index+10000"
                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'" :key="index+20000" />
              <img @click="getPic(detailList.housePhotos,index)"
                v-if='detailList.housePhotos.length==3||detailList.housePhotos.length>=5'
                v-for="(i,index) in detailList.housePhotos" :key="index+30000"
                :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" :key="index+40000"
                :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'" :key="index+50000" />
              <img @click="getPic(detailList.images,index)"
                v-if='detailList.images.length==3||detailList.images.length>=5' v-for="(i,index) in detailList.images"
                :key="index+60000" :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-fangwenjilu fz14 colorccc"></i>&nbsp;
              {{$t('salesModule.kaifaDetail')}}
            </p>
            <p class="fz12 color333 mt10">
              {{detailList.remark==''?$t('pub.noMsg'):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==''?$t('pub.noMsg'):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 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: 250px; 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>
          <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%">{{$t('salesModule.SaveTime')}}</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>{{item.expectVisitDateTime}}</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;"
            @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 {
        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: {
          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: {
      showUpLoadFile2(i) { // 预览上传文件
        if (i.substring(i.lastIndexOf('.') + 1, i.length).toUpperCase() == 'PDF') {
          this.previewPDF(i)
        } else {
          window.open("https://view.officeapps.live.com/op/view.aspx?src=" + i)
        }
      },
      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.meta = obj.customerName
        this.addMsg.VisitId = obj.visitID
        this.addMsg.CustomerId = obj.customerId
        this.customerStatus = obj.customerStatus
        this.apipost('app_today_visit_GetVisitByCustomerIDEntity', {
          customerId: obj.customerId
        }, res => {
          if (res.data.resultCode == 1) {
            this.openLayer()
            this.detailList = res.data.data.customerInfo
          } else {}

        }, err => {})
        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.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>