<template>
  <div class="applyUserList_container">
    <div class="applyUserList_top">
      <el-select v-model="custom_type" placeholder="请选择状态" style="width: 200px; margin-right: 16px" clearable>
        <el-option v-for="item in statusArr" :key="item.name" :label="item.name" :value="item.value"> </el-option>
      </el-select>
      <el-input placeholder="姓名/手机号/邮箱" v-model="search_txt" clearable style="max-width: 500px">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div class="applyUserList_cont">
      <el-table ref="userTable" :data="tableData" v-loading="isShowloadding" element-loading-text="数据加载中..." border>
        <el-table-column prop="RealName" label="姓名" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.RealName }}</span></template
          >
        </el-table-column>
        <el-table-column prop="Mobile" label="手机号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.Mobile }}</span></template
          >
        </el-table-column>
        <el-table-column prop="Email" label="邮箱" align="center" min-width="120px">
          <template slot-scope="scope">
            <span>{{ scope.row.Email }}</span></template
          >
        </el-table-column>
        <el-table-column prop="CompanyName" label="客户名称" align="center">
          <template slot-scope="scope">
            <span
              style="color: #409eff; cursor: pointer"
              v-if="scope.row.CompanyIdPay !== 1"
              @click="
                $router.push({
                  path: '/RaiDetail',
                  query: {
                    id: scope.row.CompanyIdPay,
                  },
                })
              "
              >{{ scope.row.CompanyName }}</span
            >
            <span v-else>{{ scope.row.CompanyName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="SellerName" label="所属销售" align="center" width="125">
          <template slot-scope="scope">
            <span>{{ scope.row.SellerName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="申请时间" width="160" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.CreateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="CompanyIdTypeName" label="用户状态" min-width="130" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.CompanyIdTypeName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ApplicationSource" label="申请来源" width="115" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ApplicationSource }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Title" label="申请内容" min-width="130" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.IsGray">{{ scope.row.Title }}</span>
            <span v-else class="editsty" @click="applicationContent(scope.row)">{{ scope.row.Title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="110">
          <template slot-scope="scope">
            <span class="editsty" v-if="scope.row.BusinessCardUrl" @click="previewImg(scope.row)">查看名片</span>
            <span class="editsty" v-if="scope.row.Status === 0" @click="dealHandle(scope.row)">标记处理</span>
          </template>
        </el-table-column>
        <div slot="empty" style="line-height: 44px; margin: 60px 0; color: #999">
          <img src="~@/assets/img/cus_m/nodata.png" alt="" style="display: block; width: 160px; height: 128px; margin: auto" />
          <span>暂无数据</span>
        </div>
      </el-table>
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </div>
    <!-- 图片预览 -->
    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="reviewList" />
    <!-- 弹窗 -->
    <intervewDia :title="'deal'" :isShowDia="isShowDia" @cancel="isShowDia = false" @saveOver="dealApplyHandle" />
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
import mPage from "@/components/mPage.vue";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import intervewDia from "../components/interviewDia.vue";
export default {
  name: "",
  components: { mPage, ElImageViewer, intervewDia },
  watch: {
    search_txt(newval) {
      this.page_no = 1;
      this.getTableData();
    },
    custom_type(newval) {
      this.page_no = 1;
      this.getTableData();
    },
  },
  data() {
    return {
      custom_type: "",
      statusArr: [
        { name: "潜在用户", value: 1 },
        { name: "ficc", value: 3 },
        { name: "现有用户", value: 2 },
      ],
      tableData: [],
      total: 0,
      page_no: sessionStorage.getItem("applyUserListBack") ? JSON.parse(sessionStorage.getItem("applyUserListBack")).page_no : 1,
      pageSize: 10,
      search_txt: "",
      showViewer: false,
      reviewList: [],
      isShowDia: false, //处理弹窗
      dealObj: {},
    };
  },
  /* 页面跳转前记录参数 */
  beforeRouteLeave(to, form, next) {
    let backData = {
      page_no: this.page_no,
      keyword: this.search_txt,
    };
    sessionStorage.setItem("applyUserListBack", JSON.stringify(backData));
    next();
  },
  /* 页面进入前是否清除参数 */
  beforeRouteEnter(to, from, next) {
    if (from.path != "/customDetail") {
      sessionStorage.removeItem("applyUserListBack");
    }
    next();
  },
  methods: {
    /* 获取表格数据 */
    getTableData() {
      raiInterface
        .applyList({
          PageSize: this.pageSize,
          CurrentIndex: this.page_no,
          KeyWord: this.search_txt,
          CustomType: this.custom_type,
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.tableData = res.Data.List || [];
            this.total = res.Data.Paging.Totals;
          }
        });
    },
    /* 页码改变 */
    handleCurrentChange(page) {
      this.page_no = page;
      this.getTableData();
    },
    /* 预览名片 */
    previewImg(item) {
      this.showViewer = true;
      this.reviewList = item.BusinessCardUrl.split("#");
    },
    /* 关闭预览 */
    closeViewer() {
      this.reviewList = [];
      this.showViewer = false;
    },
    dealHandle(item) {
      this.dealObj = item;
      this.isShowDia = true;
    },
    /* 处理申请 */
    dealApplyHandle() {
      raiInterface
        .delApply({
          ApplyRecordId: this.dealObj.ApplyRecordId,
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.$message.success(res.Msg);
            this.dealObj.Status = 1;
            this.isShowDia = false;
          }
        });
    },
    // 申请内容
    applicationContent(item) {
      window.open(item.HttpUrl, "_blank");
    },
  },
  created() {},
  mounted() {
    if (sessionStorage.getItem("applyUserListBack")) {
      let backData = JSON.parse(sessionStorage.getItem("applyUserListBack"));
      this.search_txt = backData.keyword;
      this.page_no = backData.page_no;
    }
    this.getTableData();
  },
};
</script>
<style lang="scss" scoped>
.applyUserList_container {
  .applyUserList_top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border: 1px solid #ececec;
    padding: 20px 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  }
  .applyUserList_cont {
    min-height: calc(100vh - 320px);
    padding: 20px 30px 80px;
    background: #fff;
    margin-top: 20px;
    position: relative;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  }
}
</style>
