<template>
  <!-- 档期计划 -->
  <!-- 隐藏门店搜索 -->
  <el-form :inline="true"
    :model="queryParams"
    class="demo-form-inline">
    <el-form-item label="计划月份">
      <el-date-picker v-model="queryParams.salesMonth"
        type="month"
        placeholder="选择计划月份"
        @change="getTableList"
        clearable />
    </el-form-item>
  </el-form>
  <CustomTable :tableData="tableData"
    :baseColumns="baseColumns"
    :isLoading="isLoading"
    :queryParams="queryParams"
    @getTableList="getTableList"
    @updateShowSearch="v => showSearch.value = v" />
</template>

<script setup
  lang="jsx">
  import CustomTable from '../components/Table'
  import { getDisplayScheduleDashboardList, getDisplayScheduleDashboardListArea, getDisplayScheduleDashboardListStore } from '@/api'
  import { parseTime } from '@/utils'
  import { getSchedulePlanConfig } from './data.jsx'

  const { proxy } = getCurrentInstance()
  /*************** 操作类型 ***************/

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

    let requestObj = {}
    if (col.requestKey) {
      // 关联的公式计算列，需要特殊处理
      for (const str of col.requestKey) {
        const obj = getSchedulePlanConfig().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 submitDisplaySchedulePlan({
      id: row.sapId,
      [col.prop]: row[col.prop], // 当前修改列的值
      ...requestObj,
      actualPromotionFlavor: Array.isArray(row.actualPromotionFlavor) ? row.actualPromotionFlavor.join(',') : '-', // 档期执行-促销口味，为数组时，转成字符串
      actualPromotionStartDate: row.actualPromotionStartDate ? parseTime(row.actualPromotionStartDate, '{y}-{m}-{d}') : '', // 档期执行-促销开始日期，为字符串时，转成日期格式
    })
  }
  // 基础列配置
  const baseColumns = ref(getSchedulePlanConfig(submitChange));

  // 表格数据
  const queryParams = reactive({
    salesMonth: new Date(),
    operation: ''
  })
  const tableData = ref([])
  const isLoading = ref(true)
  const total = ref(0)

  // 筛选列表数据
  const apiObj = {
    '大区战区-分析': getDisplayScheduleDashboardList,
    '城市经理-分析': getDisplayScheduleDashboardListArea,
    '经销商-分析': getDisplayScheduleDashboardListStore,
  }
  const getTableList = async () => {
    isLoading.value = true
    const res = await apiObj[queryParams.operation]({
      ...queryParams,
      salesMonth: parseTime(queryParams.salesMonth, '{y}-{m}')
    })
    if (queryParams.operation === '大区战区-分析') {
      // 合并战区大区结构为扁平化
      const { zq, dq, hz } = res.data
      tableData.value = [...zq, ...dq, ...hz]
    } else if (queryParams.operation === '经销商-分析') {
      // 合并经销商结构为扁平化
      const { dist, hz } = res.data
      tableData.value = [...dist, ...hz]
    } else {
      tableData.value = res.data
    }
    isLoading.value = false
  }

  onMounted(() => {
    const isDaQuZQ = proxy.checkPermi(['promotion:dashboard:list-show'])
    queryParams.operation = isDaQuZQ ? '大区战区-分析' : '城市经理-分析'
    getTableList()
  })

</script>
