<template>
  <div class="container-box">
    <div class="header-box">
      <div>
        <a-input-search
          :bordered="false"
          placeholder="请输入销售员姓名"
          style="width: 200px"
          @search="onSearch"
          v-model:value="searchState.userName"
        />
        <a-input-search
          :bordered="false"
          placeholder="请输入销售员工号"
          style="width: 200px"
          @search="onSearch"
          v-model:value="searchState.jobNumber"
        />
        <a-input-search
          :bordered="false"
          placeholder="请输入销售站点"
          style="width: 200px"
          @search="onSearch"
          v-model:value="searchState.siteName"
        />
        <a-range-picker
          @change="changeDate"
          valueFormat="YYYY-MM-DD"
          v-model:value="date"
        >
        </a-range-picker>
      </div>
      <a-button type="primary" shape="round" @click="exportDate"
        >导出表格</a-button
      >
    </div>
    <div class="table-box">
      <a-table
        :columns="columns"
        :data-source="reportList"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        class="table-index"
        :scroll="{ y: 650 }"
        :row-key="(record) => record.id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span
              class="theme-color cursor"
              @click="goDetail(record.id)"
              >查看详情</span
            >
          </template>
        </template>
      </a-table>
    </div>
    <el-dialog
      v-model="dialogTableVisible"
      :title="title"
      :show-close="false"
      width="30%"
      :closeOnClickModal="false"
    >
      <div class="item">
        <span>业务汇报</span>
        <span>{{ detailObj.businessReport }}</span>
      </div>
      <div class="item">
        <span>当前业务完成金额</span>
        <span>{{ detailObj.businessAmount }}</span>
      </div>
      <div class="item">
        <span>当前业务达成递增情况</span>
        <span>{{ detailObj.businessIncrease + "%" }}</span>
      </div>
      <div class="item">
        <span>本场业务开拓新客户人数</span>
        <span>{{ detailObj.newCustomers }}</span>
      </div>
      <div class="item">
        <span>此次业务参加小活动次数</span>
        <span>{{ detailObj.numOfActivities }}</span>
      </div>
      <div class="item">
        <span>上场画展实际邀约人数</span>
        <span>{{ detailObj.enterOnTheStage }}</span>
      </div>
      <div class="item">
        <span>下场画展准备邀约人数</span>
        <span>{{ detailObj.goOffTheStage }}</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <n-button @click="dialogTableVisible = false" type="primary"
            >确认</n-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, getCurrentInstance } from "vue";
import { processError, processSuccess } from "@/utils/helper/message";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
const searchState = reactive({
  page: 1,
  pageSize: 10,
  userName: "",
  jobNumber: "",
  siteName: "",
  startDate: "",
  endDate: "",
});
const onSearch = () => {
  searchState.page = 1;
  getReportList();
};
const pagination = reactive({
  total: 0, // 总数
  current: searchState.page, // 当前页数
  pageSize: searchState.pageSize, // 每页条数
  showTotal: (total) => `共 ${total} 条`, // 展示总数
  showSizeChanger: true, // 是否可以改变pageSize
  showQuickJumper: false, // 跳转
});
const date = ref();
const reportList = ref([]);
const loading = ref(false);
const dialogTableVisible = ref(false);
const title = ref("");
const detailObj = ref({});
const changeDate = ($event, value) => {
  searchState.startDate = value[0];
  searchState.endDate = value[1];
  getReportList();
};
const columns = [
  {
    title: "销售员姓名",
    dataIndex: "staffName",
    key: "staffName",
    align: "center",
    minWidth: 100,
  },
  {
    title: "销售员工号",
    dataIndex: "jobNumber",
    key: "jobNumber",
    align: "center",
    minWidth: 100,
  },
  {
    title: "归属站点",
    dataIndex: "siteName",
    key: "siteName",
    align: "center",
    minWidth: 100,
  },
  {
    title: "提交时间",
    dataIndex: "fillingDate",
    key: "fillingDate",
    align: "center",
    minWidth: 100,
  },
  {
    title: "当前业务金额",
    dataIndex: "businessAmount",
    key: "businessAmount",
    align: "center",
    minWidth: 100,
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    align: "center",
    minWidth: 100,
  },
];
const handleTableChange = (event) => {
  pagination.current = event.current;
  pagination.pageSize = event.pageSize;
  searchState.page = event.current;
  searchState.pageSize = event.pageSize;
  getReportList();
};
const getReportList = () => {
  loading.value = true;
  $request.HTTP.seller
    .reportList(searchState)
    .then((res) => {
      if (res.status === 0) {
        console.log(res);
        loading.value = false;
        reportList.value = res.data.weeklyList;
        pagination.total = res.data.total;
      } else {
        processError(res.msg);
      }
    })
    .catch((err) => {
      loading.value = false;
      processError(err);
    });
};
const goDetail = (id) => {
  console.log(id);
  $request.HTTP.seller.getReportDetail({ id }).then((res) => {
    console.log(res);
    dialogTableVisible.value = true;
    const { staffName, jobNumber, siteName, fillingDate } = res.data;
    title.value = `${staffName}    ${jobNumber}    ${siteName}    ${fillingDate}`;
    detailObj.value = res.data;
  });
};
const exportDate = () => {
  if (!reportList.value) return processError("暂无数据");
  $request.HTTP.seller.exportReport(searchState).then((res) => {
    console.log(res);
    // const uint = new Uint8Array(res)
    const blob = new Blob([res], { type: "application/vnd.ms-excel" });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "汇报管理.xlsx";
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
  });
};

onBeforeMount(() => {
  getReportList();
});
</script>

<style lang="scss" scoped>
.container-box {
  padding: 20px 30px 0 30px;

  .header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    :deep(.ant-input-search) {
      border-radius: 10px;
      background-color: rgb(229, 229, 229);
      color: rgb(136, 136, 136);
      margin-right: 20px;
      margin-right: 20px;
    }

    :deep(
        .ant-input-search
          > .ant-input-group
          > .ant-input-group-addon:last-child
          .ant-input-search-button:not(.ant-btn-primary)
      ) {
      border: 0;
      color: rgba(0, 0, 0, 0.45);
      background-color: rgb(229, 229, 229);
      border-radius: 0px 10px 10px 0;
    }

    :deep(.ant-picker-range) {
      border-radius: 10px;
      background-color: rgb(229, 229, 229);
      color: rgb(136, 136, 136);
    }
  }

  .table-box {
    margin-top: 30px;

    :deep(.table-index .ant-table) {
      
      border-radius: 20px;
      overflow: hidden;
      color: $basic-black;
    }

    :deep(.table-index .ant-table-thead > tr > th) {
      background: $theme-primary !important;
      // border-bottom: 1px solid $theme-primary;
      font-weight: 500 !important;
      color: #fff!important;
    }

    :deep(.table-index .ant-table-tbody > tr > td) {
      // border-bottom: 1px solid $theme-primary;
    }
  }

  :deep(.el-dialog__title) {
    color: #6300bf !important;
    white-space: pre;
  }

  :deep(.el-dialog__body) {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .item {
      width: 70%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
