<script setup>
import { computed, reactive, ref, toRefs } from "vue";
import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { customInterence } from "@/api/api.js";
import { useList } from "./hooks/customlistHook";
import DatePicker from "vue-datepicker-next";

const $router = useRouter();
const $route = useRoute();

const { goDetail } = useList();

const Role = computed(() => {
  let role = localStorage.getItem("Role") || "";
  return role;
});

onBeforeRouteLeave((to, form, next) => {
  let backData = {
    page_no: filterState.page_no,
    keyword: filterState.search_txt,
    start_date: filterState.start_date,
    end_date: filterState.end_date,
    date: filterState.date,
  };
  sessionStorage.setItem("pickListBack", JSON.stringify(backData));
  next();
});

const filterState = reactive({
  date: "",
  start_date: "", //开始日期
  end_date: "", //结束日期
  search_txt: "",
  page_no: sessionStorage.getItem("pickListBack")
    ? JSON.parse(sessionStorage.getItem("pickListBack")).page_no
    : 1,
  pageSize: 10,
});
const tableData = ref([]);
const total = ref(0);
/* 获取表格 */
function getTableData() {
  let params = {
    PageSize: filterState.pageSize,
    CurrentIndex: filterState.page_no,
    StartDate: filterState.start_date,
    EndDate: filterState.end_date,
    KeyWord: filterState.search_txt,
  };
  customInterence.pickList(params).then((res) => {
    if (res.Ret === 200) {
      res.Data.List &&
        res.Data.List.forEach((item) => {
          item.StartDate = item.StartDate.replace(/-/g, ".");
          item.EndDate = item.EndDate.replace(/-/g, ".");
        });
      tableData.value = res.Data.List || [];
      total.value = res.Data.Paging.Totals;
    }
  });
}
/* 页码改变 */
function handleCurrentChange(page) {
  filterState.page_no = page;
  getTableData();
}

/* 搜索客户 重置筛选条件 */
function searchHandle() {
  filterState.page_no = 1;
  getTableData();
}

function init() {
  if (sessionStorage.getItem("pickListBack")) {
    let backData = JSON.parse(sessionStorage.getItem("pickListBack"));
    filterState.search_txt = backData.keyword;
    (filterState.page_no = backData.page_no),
      (filterState.date = backData.date),
      (filterState.start_date = backData.start_date),
      (filterState.end_date = backData.end_date);
  }
  getTableData();
}
init();

/* 选择日期 */
function dateChange(e) {
  if (e[0]) {
    filterState.start_date = e[0];
    filterState.end_date = e[1];
  } else {
    filterState.start_date = "";
    filterState.end_date = "";
  }
  filterState.page_no = 1;
  getTableData();
}

/* 领取客户 */
function receiveHandle(item) {
  $router.push({
    path: "/pickCustom",
    query: {
      id: item.CompanyId,
    },
  });
}

const { date, search_txt, page_no, pageSize } = toRefs(filterState);
</script>
<template>
  <div class="pickCustom_container">
    <div class="customList_bot_top">
      <div>
        <date-picker
          v-model:value="date"
          type="date"
          range
          value-type="format"
          placeholder="创建日期"
          @change="dateChange"
        ></date-picker>
      </div>
      <el-input
        placeholder="客户名称/社会信用码/手机号码/邮箱"
        v-model="search_txt"
        style="max-width: 500px"
        @input="searchHandle"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="customList_bot">
      <div class="bot_cont">
        <el-table
          ref="userTable"
          :data="tableData"
          v-loading="isShowloadding"
          element-loading-text="数据加载中..."
          highlight-current-rows
          border
        >
          <el-table-column prop="CompanyName" label="客户名称" align="center">
            <template #default="scope">
              <span
                style="color: #409eff; cursor: pointer"
                @click="goDetail(scope.row)"
                class="customName"
                >{{ scope.row.CompanyName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="ProductName"
            label="客户类型"
            align="center"
            width="120px;"
          >
            <template #default="scope">
              <span :style="scope.row.IsButtonShow == 8 ? 'color:#bbb' : ''">{{
                scope.row.ProductName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="IndustryName" label="所属行业" align="center">
            <template #default="scope">
              <span :style="scope.row.IsButtonShow == 8 ? 'color:#bbb' : ''">{{
                scope.row.IndustryName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="SellerName" label="所属销售" align="center">
            <template #default="scope">
              <span :style="scope.row.IsButtonShow == 8 ? 'color:#bbb' : ''">{{
                scope.row.SellerName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Status" label="客户状态" align="center">
            <template #default="scope">
              <span :style="scope.row.IsButtonShow == 8 ? 'color:#bbb' : ''">{{
                scope.row.Status
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="EndDate"
            label="服务期限"
            align="center"
            min-width="120px"
          >
            <template #default="scope">
              <span :style="scope.row.IsButtonShow == 8 ? 'color:#bbb' : ''"
                >{{ scope.row.StartDate }}-{{ scope.row.EndDate }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="ExpireDay"
            label="到期天数"
            align="center"
            sortable
          >
            <template #default="scope">
              <span :style="scope.row.IsButtonShow == 8 ? 'color:#bbb' : ''">{{
                scope.row.ExpireDay || "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="CreatedTime"
            label="创建时间"
            sortable
            align="center"
          >
            <template #default="scope">
              <span :style="scope.row.IsButtonShow == 8 ? 'color:#bbb' : ''">{{
                scope.row.CreatedTime
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="120">
            <template #default="scope">
              <div style="color: #4099ef; font-size: 24px">
                <span
                  class="editsty"
                  style="margin-right: 10px"
                  @click="receiveHandle(scope.row)"
                  >领取</span
                >
              </div>
            </template>
          </el-table-column>
          <template #empty>
            <div style="lineheight: 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>
          </template>
        </el-table>
        <el-col :span="24" class="toolbar">
          <el-pagination
            layout="total,prev,pager,next,jumper"
            background
            :current-page="page_no"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            :total="total"
            style="float: right"
          >
          </el-pagination>
        </el-col>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.pickCustom_container {
  .customList_bot_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 20px 30px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  }
  .customList_bot {
    // min-height: calc(100vh - 286px);
    padding: 30px 30px 80px;
    background: #fff;
    position: relative;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    .try_style {
      color: #bbbbbb;
    }
  }
}
</style>
