<template>
  <div class="app-container">
    <div class="container">
      <!-- 查询表单 -->
      <el-form :model="queryParams"
        inline
        label-width="68px">
        <el-form-item label="选择日期"
          prop="date">
          <el-date-picker v-model="queryParams.activityDate"
            type="daterange"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="pickerOptions" />
        </el-form-item>
        <el-form-item label="上传计划">
          <el-upload class="upload-demo"
            action="#"
            accept=".xls,.xlsx"
            :http-request="uploadFile"
            :show-file-list="false"
            :limit="1">
            <template #trigger>
              <el-button type="primary">选择 Excel</el-button>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 表格列表 -->
      <el-table :data="tableList"
        :cell-style="{ 'word-wrap': 'break-word', 'white-space': 'normal' }"
        border
        style="width: 100%"
        show-overflow-tooltip>
        <el-table-column type="selection"
          width="55">
        </el-table-column>
        <el-table-column v-for="item in columns"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="formatter"
          :fixed="item.fixed" />
      </el-table>
      <!-- 弹窗确认上传计划 -->
      <el-dialog title="上传计划"
        v-model="dialogVisible"
        width="80%">
        <div>
          <!-- 计划表格 -->
          <el-table :data="planTableList"
            border
            style="width: 100%">
            <el-table-column prop="name"
              label="文件名"
              width="200">
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { getPlanListAPI, uploadFileToOSSAPI } from '@/api'
import { useDatePickerOptions } from '@/hooks'
import { v4 as uuidv4 } from 'uuid';
import store from '@/store'

const { recentPickerOptions: pickerOptions, last7Date } = useDatePickerOptions(0)
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  activityDate: last7Date
})

// 任务列表
const tableList = ref([])
const columns = ref([
  {
    label: '活动 ID',
    prop: 'id',
    width: 90,
    fixed: true
  },
  {
    label: '负责人',
    prop: 'employeeName',
    width: 90,
    fixed: true
  },
  {
    label: '经销商',
    prop: 'dealerName',
    width: 220,
    fixed: true
  },
  {
    label: '系统名称',
    prop: 'lineName',
    width: 100
  },
  {
    label: '店铺名称',
    prop: 'storeName',
    width: 200
  },
  {
    label: '活动状态',
    prop: 'planStatus',
    width: 100
  },
  {
    label: '活动模式',
    prop: 'pattern',
    width: 100
  },
  {
    label: '省份',
    prop: 'province',
    width: 100
  },
  {
    label: '城市',
    prop: 'city',
    width: 100
  },
  {
    label: '最后修改时间',
    prop: 'modifyTime',
    width: 250
  },
  {
    label: '上传文件名称',
    prop: '',
    width: 150
  },
  {
    label: '操作',
    prop: ''
  },
])
const getPlanList = async () => {
  const res = await getPlanListAPI(queryParams)
  tableList.value = res.data.records
}
getPlanList()
const formatter = (row, col, value) => {
  return value
}

// 上传计划
const uploadFile = async (file) => {
  console.log(store.state)
  const excelUrl = await uploadFileToOSSAPI(`planExcel/${store.state.value.user.name}/${uuidv4()}-` + file.file.name, file.file)
  // const res = await addPlanAPI({
  //   "excelUrl": excelUrl,
  //   "employeeNo": store.state.value.user.userInfo.userName
  // })
  dialogVisible.value = true
}

// 确认计划
const planTableList = ref([])
const dialogVisible = ref(false)
</script>

<style scoped
  lang="scss"></style>