<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 '@/views/promotion/components/Table'
  import SearchList from '@/views/promotion/components/SearchList'
  import { getSnackPlanList, submitSnackPlan } from '@/api'
  import { parseTime } from '@/utils'
  import { getSnackCofing } from './data.jsx';

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

    // 关联的公式计算列，需要特殊处理
    for (const str of col.requestKey) {
      const obj = getSnackCofing().find(item => item.prop === str)
      if (obj && obj.type === 'formula') {
        obj.func(row)
      }
    }

    await submitSnackPlan({
      id: row.sasdId,
      [col.prop]: row[col.prop], // 当前修改列的值
      ...col.requestKey.reduce((acc, key) => ({ ...acc, [key]: row[key] }), {}), // 额外携带影响的列字段值
    })
    // // 这些提交变化的，同时会影响公式计算的，需要把公式计算的字段列结果，一起发给后台
    // // 注意：实际主货架形式改变并为空时，要置空实际主货架数量
    // if (col.prop === 'actualMainShelfType' && !row.actualMainShelfType) {
    //   row.actualMainShelfQty = ''
    //   // 并提交保存一次
    //   await submitDisplayPlan({
    //     id: row.sadId,
    //     actualMainShelfQty: row.actualMainShelfQty,
    //   })
    // }

    // // 主货架
    // if (['actualMainShelfType', 'actualMainShelfQty'].includes(col.prop)) {
    //   await submitDisplayPlan({
    //     id: row.sadId,
    //     actualMainShelfExecuted: row.actualMainShelfExecuted,
    //   })
    // }
    // // 端架
    // if (['actualEndCapQty'].includes(col.prop)) {
    //   await submitDisplayPlan({
    //     id: row.sadId,
    //     actualEndCapExecuted: row.actualEndCapExecuted,
    //   })
    // }
    // // 地堆
    // if (['actualFloorStackArea', 'actualFloorStackQty'].includes(col.prop)) {
    //   await submitDisplayPlan({
    //     id: row.sadId,
    //     actualFloorStackExecuted: row.actualFloorStackExecuted,
    //   })
    // }
    // // 常规陈列是否执行
    // await submitDisplayPlan({
    //   id: row.sadId,
    //   regularDisplayExecuted: row.regularDisplayExecuted,
    // })
  }
  // 全部列
  const baseColumns = ref(getSnackCofing(submitChange));

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

  // 筛选工具
  const getTableList = async () => {
    isLoading.value = true
    const res = await getSnackPlanList({
      ...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}')
    })
    tableData.value = res.data.rows
    total.value = res.data.total
    isLoading.value = false
  }
  getTableList()
  const showSearch = ref(true)
</script>

<style scoped
  lang="scss">
  .container {

    .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column-reverse;

      .el-tabs__content {
        display: flex;
        flex-direction: column;
        height: 100%;

        .el-tab-pane {
          height: 100%;
          display: flex;
          flex-direction: column;

          .pagination-container {
            margin: 10px;
          }
        }

        .formula-column {
          display: flex;
          justify-content: center;
          align-items: center;

          .el-icon {
            margin-left: 2px;
          }
        }
      }
    }

    .el-form-item {
      align-items: center;
    }

    /* 表格区域 */
    .auto-fit-header-table {

      /* 优化超长文本的显示效果 */
      .cell {
        /* padding: 0 .2133rem; */
      }

      ::v-deep(.el-table__row) {
        .el-table__cell {
          padding: 0;
        }
      }


      ::v-deep(.column-style) {

        .cell-style {
          /* margin: 0 -12px; */


          >div {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            >span {
              text-align: left;
              text-indent: 5px;
              display: inline-block;
              width: 100%;
              background-color: #e1e2e6;
              border-bottom: 1px solid #ebeef5;
            }
          }

          /* 表格内下拉框 */
          .el-select {
            width: 100% !important;
            padding: 10px;
          }

          .el-input {
            padding: 10px;
          }
        }
      }

    }
  }
</style>