<template>
  <div class="CertificationDetail">
    <viewer :options="imageOptions" @inited="inited" class="viewer" :images="images">
      <img v-for="item in images" :src="item"/>
    </viewer>
    <div>
      <div
        :class="{salesApprovalLayercontentDiv:showlayer,rightZero:isTransition}"
        class="ownScrollbarStyle"
        @click.stop
      >
        <div class="title" style="background:#fff">{{$t('salesModule.SMdetails')}}</div>
        <div class="list">
          <div class="itemAnswer" v-show="answerDetailList.length>0" style="padding:0">
            <div class="item" v-for="item in answerDetailList" style="margin:0">
              <div class="topMsg">
                <!-- <img v-if="!item.photo" src="../../assets/img/litheader.png">
                <img v-if="item.photo" :onerror="defaultImg" :src="item.photo">-->
                <p>
                  {{item.CustomerName}}
                  <span
                    v-if="item.ApplyState === 0"
                    class="_status_str _status_str_y"
                  >{{$t('fnc.a_shezhong')}}</span>
                  <span v-if="item.ApplyState == 1||item.ApplyState == 3" class="_status_str _status_str_g">{{$t('fnc.ytongguo')}}</span>
                  <span v-if="item.ApplyState === 2" class="_status_str _status_str_r">{{$t('salesModule.HasRefused')}}</span>
                </p>
                <p class="mt5">
                  <i class="iconfont icon-img_dianhua fz12" style="color: #09d49d;"></i>
                  <span class="fz14 color333">{{item.Customer}}</span>
                  &nbsp;&nbsp;&nbsp;
                  <span
                    class="fz14 color333"
                  >{{item.ContactPhone}}</span>
                </p>
                <p class="fz12 color999 mt5">{{item.Addres}}</p>
              </div>
              <p class="fz16 color666">
                <i class="iconfont icon-ico-renwuyaoqiu fz14 color999"></i>&nbsp;{{$t('salesModule.AuInformatiton')}}
              </p>
              <div class="salesApprovalLayercontentBtn">
                <p class="fz12 color999 mt5">{{$t('salesModule.Autication')}}：{{item.ApplyType==1?"三证合一":"身份证+名片"}}</p>
                <p class="fz12 color999 mt5">{{$t('salesModule.ApplyTime')}}：{{item.CreateDateStr}}</p>
                <div v-if="item.CertificationPics&&item.CertificationPics.length>0" class="mt10">
                  <div v-for="picItem in item.CertificationPics" class="img_box">
                    <img v-if="!picItem" src="../../assets/img/litheader.png" />
                    <img @click="imgPrev(picItem)" v-if="picItem" :src="picItem" />
                  </div>
                </div>
                <div>
                  <span class="fz14 color333">{{$t('salesModule.SPYJ')}}</span>
                </div>
                <p class="mt10">
                  <el-input v-if="item.ApplyState === 0" type="textarea" v-model="Reason"></el-input>
                  <span v-else>Reason</span>
                </p>
                <input type="button" class="hollowFixedBtn mt20 fr" :value="$t('pub.cancelBtn')" @click="closeLayer" />
                <input
                  type="button"
                  class="normalBtn mt20 fr"
                  v-if="item.ApplyState === 0"
                  :value="$t('visa.v_tongguo')"
                  @click="saveIdea(item,1)"
                />
                <input
                  type="button"
                  class="normalBtn mt20 fr"
                  v-if="item.ApplyState === 0"
                  :value="$t('visa.v_jujue')"
                  @click="saveIdea(item,2)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="query-box" style="border: none;">
      <ul>
        <!-- <li><span><em>姓名</em></span>
						<el-input v-model='msg.CustomerName'></el-input>
					</li>
        -->
        <li>
          <span>
            <em>{{$t('salesModule.ApplyTime')}}</em>
          </span>
          <el-date-picker
            v-model="msg.SDate"
            @change="dataDui()"
            class="w135"
            value-format="yyyy-MM-dd"
            type="date"
          ></el-date-picker> -
          <el-date-picker
            v-model="msg.EDate"
            @change="dataDui()"
            class="w135"
            value-format="yyyy-MM-dd"
            type="date"
          ></el-date-picker>
        </li>
        <li style="display:none;">
          <span>
            <em>{{$t('system.query_company')}}</em>
            <el-select filterable v-model="msg.RB_Branch_Id">
              <el-option :value="-2" :label="$t('pub.unlimitedSel')"></el-option>
              <el-option
                v-for="item in CompanyList"
                :label="item.BName"
                :value="item.Id"
                :key="item.Id"
              ></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('admin.admin_status')}}</em>
          </span>
          <el-select v-model="msg.ApplyState">
            <el-option :label="$t('pub.unlimitedSel')" value="-1" key="-1"></el-option>
            <el-option :label="$t('salesModule.Appling')" value="0" key="0"></el-option>
            <el-option :label="$t('visa.v_tongguo')" value="1" key="1"></el-option>
            <el-option :label="$t('visa.v_jujue')" value="2" key="2"></el-option>
          </el-select>
        </li>
        <li>
          <input
            type="button"
            class="hollowFixedBtn"
            :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()"
          />
        </li>
      </ul>
    </div>
    <table
      class="publicCustomerTable"
      border="0"
      cellspacing="0"
      cellpadding="0"
      v-loading="loading"
    >
      <tr>
        <th width="10%">{{$t('salesModule.storeName')}}</th>
        <th width="10%">{{$t('hotel.suplier_contact')}}</th>
        <th width="10%">{{$t('hotel.table_tel')}}</th>
        <th width="10%">{{$t('salesModule.TransactionMon')}}</th>
        <th width="10%">{{$t('admin.admin_address')}}</th>
        <th width="10%">{{$t('salesModule.belongUnion')}}</th>
        <th width="10%">{{$t('salesModule.ApplyTime')}}</th>
        <th width="10%">{{$t('fnc.shzhuangtai')}}</th>
         <th width="10%">{{$t('ground.glxiaoshou')}}</th>
           <th width="10%">{{$t('pub.mbPhoneNum')}}</th>
        <th width="10%">{{$t('system.table_operation')}}</th>
        
      </tr>
      <tr>
        <td colspan="9" align="center" v-show="list.length==0">{{$t('system.content_noData')}}</td>
      </tr>
      <tr v-for="(item,index) in list">
        <td>{{item.CustomerName}}</td>
        <td>{{item.Customer}}</td>
        <td>{{item.ContactPhone}}</td>
        <td>{{item.TradeMoney}}</td>
        <td>{{item.Addres}}</td>
        <td>{{item.AllianceName}}</td>
        <td>{{item.CreateDateStr}}</td>
        <td>
          <span v-if="item.ApplyState === 0" class="_status_str _status_str_y">{{$t('fnc.a_shezhong')}}</span>
          <span v-if="item.ApplyState == 1||item.ApplyState === 3" class="_status_str _status_str_g">{{$t('fnc.ytongguo')}}</span>
          <span v-if="item.ApplyState === 2" class="_status_str _status_str_r">{{$t('salesModule.HasRefused')}}</span>
        </td>
          <td>{{item.SellName}}</td>
        <td>{{item.SellPhone}}</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
      },
      images: [''],
      layerShow: false,
      msg: {
        pageIndex: 1,
        pageSize: 10,
        SDate: "",
        EDate: "",
        ApplyState: "-1",
        RB_Branch_Id: '',
        Type:0
      },
      viewerObj: null,
      Reason: "",
      showlayer: false,
      loading: false,
      isTransition: false,
      currentPage: 1,
      total: 0,
      answerDetailList: [],
      list: [],
      CompanyList: [],
      getCompanyMsg: {
        // 公司
        RB_Group_Id: "0",
        Status: "0"
      }
    };
  },
  methods: {
    inited(viewer) {
      this.viewerObj = viewer;
    },
    imgPrev(url) {
      this.$set(this.images, 0, url);
      setTimeout(() => {
        this.viewerObj.show();
      }, 1000);
    },
    getCompanyList() {
      //获取公司列表
      this.apipost(
        "admin_get_BranchGetList",
        this.getCompanyMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.CompanyList = res.data.data;
          } else {
          }
        },
        err => {}
      );
    },
    // 结束日期不能大于开始日期
    dataDui() {
      if (this.msg.SDate > this.msg.EDate && this.msg.EDate !== "") {
        this.$message.error("结束日期不能大于开始日期");
        this.msg.EDate = "";
      }
    },
    closeLayer() {
      let _this = this;
      setTimeout(function() {
        _this.showlayer = false;
      }, 300);
      this.isTransition = false;
      this.Reason = "";
    },
    saveIdea(obj, applyState) {
      obj.applyState = applyState;
      obj.Reason = this.Reason;
      this.apipost(
        "app_customer_UpdateCertification",
        obj,
        res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.getList();
            this.closeLayer();
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    getList() {
      this.loading = true;
      this.apipost(
        "app_customer_GetCertificationPageList",
        this.msg,
        res => {
          if (res.data.resultCode == 1) {
            this.loading = false;
            this.list = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.$message.error(res.data.message);
            this.loading = false;
          }
        },
        err => {}
      );
    },
    closeLayer() {
      let _this = this;
      setTimeout(function() {
        _this.showlayer = false;
      }, 300);
      this.isTransition = false;
      this.Reason = "";
    },
    getDetail(obj) {
      this.showlayer = true;
      this.isTransition = true;
      this.apipost(
        "app_customer_GetCertificationModel",
        { ID: obj.ID },
        res => {
          if (res.data.resultCode == 1) {
            this.answerDetailList = res.data.data;
            this.Reason = this.answerDetailList[0].Reason;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    }
  },
  mounted() {
    let userInfo = this.getLocalStorage();
    this.getCompanyMsg.RB_Group_Id = userInfo.RB_Group_id; //集团ID
    this.msg.RB_Branch_Id = userInfo.RB_Branch_id; //公司ID
    this.getList();
    this.getCompanyList();
  }
};
</script>

<style>
.CertificationDetail {
  overflow-x: hidden;
}
.CertificationDetail .title {
  width: 420px;
  height: 48px;
  line-height: 48px;
  text-indent: 20px;
  font-size: 16px;
  color: #333;
}
.CertificationDetail .list .item {
  height: auto;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  padding: 20px;
}
.CertificationDetail .list .item .topMsg {
  overflow: hidden;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6e6e6;
}
.CertificationDetail .list .item .topMsg > img {
  float: left;
  margin-right: 13px;
}
.CertificationDetail .list .item .topMsg .newGuest {
  width: 50px;
  height: 18px;
  text-align: center;
  font-size: 14px;
  color: #257bf1;
  background: #dae4ff;
}
.CertificationDetail .list .item .bottomMsg {
  padding: 15px 0;
}
.CertificationDetail .list .itemAnswer {
  height: auto;
  margin: 20px;
  padding: 20px;
  background: #ebf0ff;
}
.CertificationDetail .list .itemAnswer .answerItem {
  border-bottom: 1px solid #bcc0cc;
  overflow: hidden;
  padding: 15px 0;
}
.CertificationDetail .list .itemAnswer .answerItem > img {
  float: left;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  margin-right: 10px;
}
.publicCustomerTable {
  width: 100%;
  font-size: 14px;
  color: #333;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
  border-bottom: none;
  border-right: none;
}
.publicCustomerTable tr th {
  background: #dcdcdc;
  height: 30px;
  font-size: 12px;
  text-align: left;
  text-indent: 25px;
}
.publicCustomerTable tr {
  text-align: left;
}
.publicCustomerTable tr:nth-child(2n) {
  background: #f2f2f2;
}
.publicCustomerTable tr:nth-child(2n + 1) {
  background: #ffffff;
}
.publicCustomerTable tr:hover {
  background: #d0d2d9;
}
.publicCustomerTable tr td {
  height: 40px;
  padding-left: 25px;
  border-bottom: 1px solid #dcdcdc;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #dcdcdc;
}
.pd20 {
  padding: 12px 20px !important;
}
.el-popper[x-placement^="bottom"] {
  margin-top: 0px !important;
}
.el-popper[x-placement^="top"] {
  margin-bottom: 0px !important;
}
.CertificationDetail .ownScrollbarStyle {
  width: 0px;
  position: absolute;
  right: 0;
  background-color: white;
  transition: all linear 0.5s;
  height: 100%;
  overflow: hidden;
}
.salesApprovalLayercontentDiv {
  width: 450px !important;
}
.salesApprovalLayercontentBtn .img_box img {
  height: 120px;
}
._status_str {
  float: right;
}
._status_str_y {
  color: #e6a23c;
}
._status_str_g {
  color: #67c23a;
}
._status_str_r {
  color: #f56c6c;
}
td ._status_str {
  float: initial;
}
</style>