<template>
  <a-modal
    v-model:visible="state.modalVisible"
    width="90vw"
    :bodyStyle="{ padding: 0 }"
    :closable="false"
    :maskClosable="false"
    :keyboard="false"
    :footer="null"
  >
    <div class="bg-white height-100">
      <div
        class="items-center space-between modal-header row"
        style="justify-content: center"
      >
        <div
          style="font-size: 26px; flex-shrink: 0"
          class="fl-mx-sm theme-color"
        >
          {{ state.fatherData.Site }}
        </div>
        <div style="margin: 0 auto">
          <div style="font-size: 20px; margin-left: -200px">
            {{ state.fatherData.StartDate }} - {{ state.fatherData.EndDate }}
          </div>
        </div>
        <a-button
          type="grey"
          shape="circle"
          @click="handleCloseModal"
          style="flex-shrink: 0"
        >
          <template #icon>
            <CloseOutlined />
          </template>
        </a-button>
      </div>

      <div class="modal-container">
        <fl-table
          :config="state.tableConfig"
          :refreshCount="state.tableConfig.refreshCount"
          :fatherData="state.fatherData"
          class="artwork-table"
          @triggerRowActions="handleRowActions"
        >
          <template #IncreaseRate="record">
            {{ `${parseInt(record.text.IncreaseRate * 100)}%` }}
          </template>
        </fl-table>
      </div>
      <div
        class="items-center justify-between row fl-px-lg"
        style="height: 60px"
      >
        <div></div>
        <a-button
          v-permission="'r_salebot_btn_site_export'"
          type="primary"
          shape="round"
          style="width: 131px"
          @click="handleExport"
          :loading="state.btnLoading"
          >导出报表</a-button
        >
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { CloseOutlined } from "@ant-design/icons-vue";
import flTable from "@/components/layout/table/commonTable.vue";
import { Local } from "@/utils/storage.js";
import {
  reactive,
  onMounted,
  getCurrentInstance,
  computed,
  watch,
  defineProps,
} from "vue";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
import { processError } from "@/utils/helper/message";
import { calcFormat } from "@/utils/helper/form";
const props = defineProps({
  fatherData: {
    type: Object,
  },
  modelOpenCount: {
    type: Number,
  },
});
const state = reactive({
  fatherData: {},
  btnLoading: false,
  modalVisible: false,
  tableConfig: {
    tableScroolHeight: 0.48,
    refreshCount: 0,
    listUrl: {
      url: "report/users",
      params: [
        {
          label: "ReportId",
          field: "ID",
        },
      ],
    },
    columns: [
      {
        title: "工号",
        field: "SellerNum",
      },
      {
        title: "员工姓名",
        field: "SellerName",
      },
      {
        title: "本场销售额",
        field: "Amount",
      },
      {
        title: "到期金额",
        field: "DueAmount",
      },
      {
        title: "递增金额",
        field: "IncreaseAmount",
      },
      {
        title: "增长率",
        field: "IncreaseRate",
        type: "slot",
        slotName: "IncreaseRate",
      },
      {
        type: "select",
        title: "业绩健康码",
        field: "Color",
        options: [
          { label: "绿", value: "green", class: "color-info" },
          { label: "黄", value: "yellow", class: "color-yellow" },
          { label: "红", value: "red", class: "color-danger" },
          { label: "新站点", value: "newValue", class: "color-danger" },
        ],
      },
    ],
  },
});
watch(
  () => props.modelOpenCount,
  () => {
    state.modalVisible = true;
    state.fatherData = props.fatherData;
    state.tableConfig.refreshCount++;
  }
);
onMounted(() => {});

const handleCloseModal = () => {
  state.modalVisible = false;
};
const handleExport = () => {
  let url =
    import.meta.env.VITE_API_URL +
    "report/down/users?id=" +
    state.fatherData.ID;
  var xhr = new XMLHttpRequest();
  xhr.open("get", url, true);
  xhr.responseType = "blob"; // 返回类型blob  blob 存储着大量的二进制数据
  xhr.setRequestHeader("Authorization", Local.get("token")); // 添加toke下载文件
  xhr.onload = function (e) {
    if (this.status === 200) {
      let blob = xhr.response;
      let a = document.createElement("a");
      let url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = decodeURIComponent("报表");
      document.body.appendChild(a); // 火狐浏览器 必须把元素插入body中
      a.click();
      document.body.removeChild(a);
      //释放之前创建的URL对象
      window.URL.revokeObjectURL(url);
    }
  };
  xhr.send();
};
const handleRowActions = (btnConfig, rowData) => {
  if (btnConfig.actionType === "modal_view") {
    state.rowData = rowData;
    state.modelOpenCount++;
  }
};
</script>
<style scoped>
.modal-header {
  background-size: 100% auto;
  height: 70px;
  padding-left: 20px;
  padding-right: 20px;
}
.modal-container {
  height: calc(100% - 130px);
  padding-left: 40px;
  padding-right: 40px;
}
.artwork-table :deep(.ant-table-thead th:first-child) {
  border-radius: 23px 0px 0 0 !important;
}

.artwork-table :deep(.ant-table-thead th:last-child) {
  border-radius: 0 23px 0 0 !important;
}
</style>
