<script setup lang="ts">
import { shallowReactive, ref, onMounted, onUnmounted } from "vue";
import getColumns, { reports } from "./config/detail";
import CompanySelect from "./company-select.vue";
import { useUserStoreHook } from "/@/store/modules/user";
import { httpRequsetExport } from "/@/utils/export";
import { ElMessage } from "element-plus";
import { useCompany } from "/@/hooks/core/useCompany";

defineOptions({
  name: "commission"
});

const dataList = ref<Array<Record<string, string>>>(getColumns);
const reportList = ref<Array<Record<string, string>>>(reports);

const { currentCompany } = useCompany();

const powers = ref<Array<string>>([]);
const state = shallowReactive({
  currentLine: -1,
  loading: false
});

//导出模板
async function onDownloadOpenInv(row, index: number) {
  const relaComNo = currentCompany.value.companyNo;

  if (!relaComNo) {
    ElMessage.warning("请选择业务公司!");
    return;
  }

  if (row.time.length === 2) {
    await httpRequsetExport({
      url: row.url,
      name: row.label,
      onStart: () => {
        state.currentLine = index;
        state.loading = true;
      },
      onSuccess: () => {
        state.currentLine = -1;
        state.loading = false;
      },
      onFail: () => {
        state.currentLine = -1;
        state.loading = false;
      },
      params: {
        start: row.time[0],
        company: relaComNo,
        end: row.time[1]
      }
    });
  } else {
    ElMessage.warning("请选择时间区间!");
  }
}

async function onDownloadOpenInvWithCompany(row, index: number) {
  const relaComNo = currentCompany.value.companyNo;
  const { supplierNo } = row;

  if (!relaComNo) {
    ElMessage.warning("请选择业务公司!");
    return;
  }

  if (relaComNo === supplierNo) {
    ElMessage.warning("卖方公司与业务公司不能一致!");
    return;
  }

  if (row.time.length === 2) {
    await httpRequsetExport({
      url: row.url,
      name: row.label,
      onStart: () => {
        state.currentLine = index;
        state.loading = true;
      },
      onSuccess: () => {
        state.currentLine = -1;
        state.loading = false;
      },
      onFail: () => {
        state.currentLine = -1;
        state.loading = false;
      },
      params: {
        start: row.time[0],
        companyNo: relaComNo,
        end: row.time[1],
        supplierNo
      }
    });
  } else {
    ElMessage.warning("请选择时间区间!");
  }
}

onMounted(() => {
  const p = useUserStoreHook().getMenuActions("commission");
  powers.value = p;

  dataList.value.forEach((_, index) => {
    dataList.value[index].time = "";
    dataList.value[index].end = "";
  });

  reportList.value.forEach((_, index) => {
    reportList.value[index].time = "";
    reportList.value[index].end = "";
    reportList.value[index].supplierNo = "";
  });
});

onUnmounted(() => {});
</script>

<template>
  <div class="main">
    <PagePower :is-show="powers.some(i => i === '001')">
      <div style="width: 100%; text-align: center">
        <div
          style="
            width: 1200px;
            text-align: left;
            display: inline-block;
            margin: 14vh 2vh 0 0;
          "
        >
          <div
            v-for="(si, sii) in dataList"
            :key="si.value + sii"
            style="padding: 10px 20px"
          >
            <el-row style="width: 100%">
              <el-col
                :span="7"
                class="tr"
                style="padding: 0 30px 0 0; line-height: 32px"
                >{{ si.label }}</el-col
              >
              <el-col :span="8">
                <el-date-picker
                  v-model="si.time"
                  type="daterange"
                  range-separator="至"
                  value-format="YYYY-MM-DD"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-col>
              <el-col :span="3"
                ><el-button
                  type="primary"
                  :loading="state.currentLine === sii && state.loading"
                  @click="onDownloadOpenInv(si, sii)"
                >
                  导出
                </el-button></el-col
              >
            </el-row>
          </div>

          <div
            v-for="(si, sii) in reportList"
            :key="si.value + sii"
            style="padding: 10px 20px"
          >
            <el-row style="width: 100%">
              <el-col
                :span="7"
                class="tr"
                style="padding: 0 30px 0 0; line-height: 32px"
                >{{ si.label }}</el-col
              >
              <el-col :span="8">
                <el-date-picker
                  v-model="si.time"
                  type="daterange"
                  range-separator="至"
                  value-format="YYYY-MM-DD"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-col>

              <el-col :span="6">
                <CompanySelect v-model="si.supplierNo" />
              </el-col>

              <el-col :span="3"
                ><el-button
                  type="primary"
                  :loading="
                    state.currentLine === sii + dataList.length && state.loading
                  "
                  @click="
                    onDownloadOpenInvWithCompany(si, sii + dataList.length)
                  "
                >
                  导出
                </el-button></el-col
              >
            </el-row>
          </div>
        </div>
      </div>
    </PagePower>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
