<template>
  <!-- 常规陈列 -->
  <SearchList :showSearch="showSearch"
    :queryParams="params"
    @change="getTableList" />
  <CustomTable :tableData="tableData"
    :baseColumns="baseColumns"
    :total="total"
    :params="params"
    :isLoading="isLoading"
    @getTableList="getTableList"
    @updateShowSearch="v => showSearch.value = v" />
</template>

<script setup
  lang="jsx">
  import CustomTable from '../components/Table'
  import SearchList from '../components/SearchList'
  import { getDisplayList, submitDisplayPlan } from '@/api'
  import { parseTime } from '@/utils'
  import { getDisplayConfig } from './data.jsx'

  /*************** 表格操作相关 ***************/

  // 提交变更
  const tableColumns = getDisplayConfig(async (row, col) => {
    // 需要特殊处理的
    // 实际主货架-形式，为空时，置空实际主货架-数量
    if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
      row.actualMainShelfQty = ''
    }

    let requestObj = {}
    if (col.requestKey) {
      // 关联的公式计算列，需要特殊处理
      for (const str of col.requestKey) {
        // 找到目标列的列对象，调用列对象自己的公式函数进行计算
        const obj = getDisplayConfig().flatMap(item => {
          if (item.children) {
            return item.children.filter(child => !child.onlyFill);
          }
          return [];
        }).find(item => item.prop === str)
        if (obj && obj.type === 'formula') {
          obj.func(row)
        }
      }
      requestObj = col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {})
    }

    await submitDisplayPlan({
      id: row.sadId,
      [col.prop]: row[col.prop], // 当前修改列的值
      ...requestObj,
      // 特殊类型数据处理（比如前端要字符串''，后端要数字0）
      actualMainShelfQty: row.actualMainShelfQty || 0,
      actualEndCapQty: row.actualEndCapQty || 0,
      actualFloorStackArea: row.actualFloorStackArea || 0,
      actualFloorStackQty: row.actualFloorStackQty || 0,
    })
  })
  // 全部列
  const baseColumns = ref(tableColumns);

  // 表格数据
  const tableData = ref([])
  const isLoading = ref(true)
  const params = ref({
    pageNum: 1,
    pageSize: 50,
    salesMonth: new Date(),
    deptName: '',
    dealerCN: '',
    lineNameLike: '',
    storeCN: ''
  })
  const total = ref(0)

  // 筛选列表数据
  const getTableList = async () => {
    isLoading.value = true
    const res = await getDisplayList({
      ...params.value,
      salesMonth: parseTime(params.value.salesMonth, '{y}-{m}')
    })
    res.data.rows.forEach(item => {
      // 计划月份
      item.salesMonth = parseTime(item.salesMonth, '{y}-{m}')
      // 开户日期
      item.openingDate = parseTime(item.openingDate, '{y}-{m}-{d}')
      // 闭户日期
      item.closingDate = parseTime(item.closingDate, '{y}-{m}-{d}')
      // 修改时间
      item.updateTime = parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}:{s}')

      // 动态新增列：门店名称+门店编码+经销山名称（填报模式下，合并到一起）
      item.storeNameCodeDealerName = item.storeName + '\n(' + item.storeCode + ')' + '\n(' + item.dealerName + ')'

      // 特殊类型数据处理，前端要字符串''，后端要数字0
      // item.actualMainShelfQty = item.actualMainShelfQty || ''
      // item.actualEndCapQty = item.actualEndCapQty || ''
      // item.actualFloorStackArea = item.actualFloorStackArea || ''
      // item.actualFloorStackQty = item.actualFloorStackQty || ''
    })

    tableData.value = res.data.rows
    total.value = res.data.total
    isLoading.value = false
  }
  getTableList()

  /*************** 筛选 ***************/
  const showSearch = ref(true)
</script>

<style lang="scss">
// 动态列内容的 render 内样式
// 操作提示列
.operation_tip_cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  p {
    width: 100%;
    margin: 0;
  }

  p:first-child {
    background-color: #e1e2e6;
    border-bottom: 1px solid #ebeef5;
  }

  p:last-child {
    padding: 15px 0;
  }
}

// 只在填报模式出现的门店名称+门店编码+经销山名称（合并到一起）
.store-name-render-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  p {
    width: 100%;
    margin: 0;
  }
}
</style>