<template>
  <div>
    <el-dialog title="订单导出" v-model="dialogVisible" width="30%">
      <div>
        <el-form ref="formRef" :model="form" label-width="200px">
          <el-form-item
            label="请选择订单完成的日期范围"
            prop="time"
            :rules="[
              {
                required: true,
                message: '请选择订单完成的日期范围',
                trigger: 'blur'
              }
            ]"
          >
            <div class="w-1/3">
              <el-date-picker
                v-model="form.time"
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
              />
            </div>
          </el-form-item>
          <el-form-item label="订单状态" required>交易成功</el-form-item>
          <el-form-item label="订单所属店铺" prop="shopIds">
            <el-select
              v-model="form.shopIds"
              filterable
              multiple
              style="width: 200px; margin-right: 10px"
            >
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button type="" @click="onReset">重置</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
          </el-form-item>
        </el-form>
        <el-card v-if="state.loading != 'none'">
          <template #header>
            <span class="text-gray-500">{{
              state.loading == "loading"
                ? "订单生成中，请稍后..."
                : "订单已完成"
            }}</span>
            <el-button type="primary" class="ml-4" plain @click="refreshDetail"
              >刷新</el-button
            >
          </template>
          <div>
            <el-table
              :data="state.fileList"
              :show-header="false"
              style="width: 100%"
            >
              <el-table-column prop="" label="">
                <template #default="{ row }">
                  {{ row.filename }}
                </template>
              </el-table-column>
              <el-table-column prop="操作" label="">
                <template #default="{ row }">
                  <el-link
                    type="success"
                    :href="`${VITE_APP_DOMAIN}/mallService/orders/export/download?id=${row.id}`"
                    target="download"
                    v-if="state.loading == 'success'"
                    >下载</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <!-- <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
import { request, downloadFile } from "@/utils";
const { VITE_APP_DOMAIN } = import.meta.env;
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:show"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      getShopList();
    } else {
      onReset();
    }
  }
);

const form = reactive({
  time: "",
  shopIds: undefined
});
const state = reactive({
  id: "",
  loading: "none", // none: '没有项目'  loading: '生成中' success: '完成'
  fileList: []
});
const formRef = ref();
const shopList = ref([]);

const getShopList = () => {
  request
    .get("/articleService/serviceProvider/shop/paginate", {
      params: {
        page: 1,
        pageSize: 9999,
        type: -1,
        status: -1
      }
    })
    .then(resp => {
      shopList.value = resp.data.list;
    });
};
const onSubmit = () => {
  console.log("form.time", form.time);

  const [start, end] = form.time;
  request
    .get("mallService/mechanism/orders/export", {
      params: {
        shopIds: form.shopIds?.join(","),
        start,
        end
      }
    })
    .then(resp => {
      state.id = resp.data?.id;
      state.loading = "loading";
      getExportStatus();
    });
};
const onReset = () => {
  state.loading = "none";
  state.fileList = [];
  formRef.value?.resetFields();
};
const getExportStatus = () => {
  request
    .get(`mallService/mechanism/orders/export/status?id=${state.id}`)
    .then(resp => {
      state.fileList = [resp.data];
      state.loading = resp.data.status == 1 ? "loading" : "success";
    })
    .catch(() => {
      state.loading = "loading";
    });
};
const refreshDetail = () => {
  getExportStatus();
};
</script>
