<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>
      <!-- 表格列表 -->
      <!-- 数据表格 -->
      <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>
    </div>
  </div>
</template>

<script setup>
import { getPlanListAPI } from '@/api'
import { useDatePickerOptions } from '@/hooks'

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
}
</script>

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