<template>
  <!-- 表格列表 -->
  <el-table :data="tableList"
    border
    style="width: 100%"
    show-overflow-tooltip
    :row-class-name="tableRowTimeOutClassName">
    <!-- <el-table-column type="selection"
      width="55"
      :selectable="selectableFn">
    </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"
      :show-overflow-tooltip="true" />
    <!-- <el-table-column label="操作"
      width="150"
      fixed="right">
      <template #default="scope">
        <el-button type="success"
          link
          :disabled="!selectableFn(scope.row)"
          @click="editFn(scope.row)">
          编辑
        </el-button>
        <el-button type="danger"
          link
          :disabled="!selectableFn(scope.row)"
          @click="deletePlane(scope.row)">
          删除
        </el-button>
      </template>
</el-table-column> -->
  </el-table>
  <!-- 分页 -->
  <pagination :total="total"
    v-model:page="pageNum"
    v-model:limit="pageSize"
    @pagination="getPlanList" />
</template>

<script setup>
import { getPlanListAPI } from '@/api'
import { getPromotionActiveStatus } from '@/dicts'
import { parseTime } from '@/utils'

const { proxy } = getCurrentInstance();

const props = defineProps({
  queryParams: {
    type: Object,
  }
})
/*************** 计划表格 ***************/
const tableList = ref([])
const columns = ref([
  {
    label: '归属人',
    prop: 'employeeName',
    width: 150,
    fixed: true
  },
  {
    label: '战区',
    prop: 'orgName',
    width: 120
  },
  {
    label: '店铺名称',
    prop: 'storeName',
    width: 240
  },
  {
    label: '活动日期',
    prop: 'date',
    width: 120
  },
  {
    label: '星期',
    prop: 'week',
    width: 80
  },
  {
    label: '活动状态',
    prop: 'planStatus',
    width: 100
  },
  {
    label: '活动模式',
    prop: 'pattern',
    width: 100
  },
  {
    label: '系统名称',
    prop: 'lineName',
    width: 150
  },
  {
    label: '店铺编码',
    prop: 'storeCode',
    width: 160
  },
  {
    label: '经销商',
    prop: 'dealerName',
    width: 220
  },
  {
    label: '经销商 ID',
    prop: 'dealerId',
    width: 120
  },
  {
    label: '省份',
    prop: 'province',
    width: 100
  },
  {
    label: '地址',
    prop: 'addr',
    width: 200
  },
  {
    label: '上班时间',
    prop: 'clockInTime',
    width: 180
  },
  {
    label: '午休开始时间',
    prop: 'noonClockOutTime',
    width: 180
  },
  {
    label: '午休结束时间',
    prop: 'noonClockInTime',
    width: 180
  },
  {
    label: '下班时间',
    prop: 'clockOutTime',
    width: 180
  },
  // {
  //   label: '促销员薪资',
  //   prop: 'salary',
  //   width: 100
  // },
  // {
  //   label: '杂费',
  //   prop: 'incidentals',
  //   width: 100
  // },
  {
    label: "是否有促销台",
    prop: "temWlSct",
    width: 120
  },
  {
    label: "活动品项",
    prop: "prdClass",
    width: 100
  },
  {
    label: '创建人',
    prop: 'createBy',
    width: 120
  },
  {
    label: '最近修改人',
    prop: 'modifyBy',
    width: 100
  },
  {
    label: '最后修改时间',
    prop: 'modifyTime',
    width: 180
  },
  {
    label: '活动 ID',
    prop: 'id',
    width: 90
  }
])
// 格式化计划列表单元格内容
const formatter = (row, col, value) => {
  if (col.property === 'planStatus') {
    return getPromotionActiveStatus(value)?.label
  } else if (col.property === 'date') { // 活动日期
    return parseTime(value, '{y}-{m}-{d}')
  } else if (col.property === 'week') {
    return parseTime(row['date'], '周{a}')
  } else if (col.property === 'modifyTime') {
    return parseTime(value, '{y}-{m}-{d} {h}:{i}:{s}')
  } else if (col.property === 'clockInTime' || col.property === 'clockOutTime') {
    return parseTime(value)
  } else if (col.property === 'employeeName') {
    // 判断归属人名字小于 4 个字，少于几个就加几个空格
    if (value.length === 2) {
      return value + '　　' + '(' + row.employeeNo + ')'
    } else if (value.length === 3) {
      return value + '　' + '(' + row.employeeNo + ')'
    } else {
      return value + '(' + row.employeeNo + ')'
    }
  } else if (col.property === 'salary' || col.property === 'incidentals') {
    return '¥ ' + value + ' 元'
  } else {
    return value
  }
}
// 计算当前行类名
const tableRowTimeOutClassName = () => {
  // 检查计划是否能操作
  return 'timeout-row'
}

/*************** 数据和分页 ***************/
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
// 任务列表
const getPlanList = async (arg) => {
  if (arg === 'resetPage') pageNum.value = 1
  const res = await getPlanListAPI({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    queryParams: {
      activityStartDate: props.queryParams.activityDate && props.queryParams.activityDate[0],
      activityEndDate: props.queryParams.activityDate && props.queryParams.activityDate[1],
      planStatus: props.queryParams.planStatus,
      region: props.queryParams.region,
      province: props.queryParams.provinceName,
      city: props.queryParams.cityName,
      dealerId: props.queryParams.dealerId,
      orgQcId: props.queryParams.warZoneId,
      employeeId: props.queryParams.employeeId,
      storeNameLike: props.queryParams.storeName,
      statusType: 'INVALID' // 查询已删除的计划
    }
  })
  tableList.value = res.data.records
  total.value = res.data.totalRecord
}

defineExpose({
  getPlanList
})

onMounted(() => {
  // 删除任务时，重新请求已删除列表
  proxy.eventBus.on('refreshPlanList', getPlanList)
})
onUnmounted(() => {
  proxy.eventBus.off('refreshPlanList', getPlanList)
})
</script>

<style scoped
  lang="scss">

  .el-table {

    /* 灰色过期行颜色 */
    ::v-deep(.timeout-row) {
      --el-table-tr-bg-color: var(--el-timeout-row);
    }
  }

</style>