<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"
    @getTableList="getTableList"
    @updateShowSearch="v => showSearch.value = v" />
</template>

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

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

  // 提交变更
  const tableColumns = getDisplayConfig()
  // 全部列
  const baseColumns = ref(tableColumns);

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

  // 筛选列表数据
  const getTableList = async () => {
    isLoading.value = true
    const res = await getDisplayScheduleDashboardList({
      ...queryParams,
      salesMonth: parseTime(queryParams.salesMonth, '{y}-{m}')
    })
    // 合并战区大区结构为扁平化
    const { zq, dq  } = res.data
    tableData.value = [...zq, ...dq]
    isLoading.value = false
  }
  getTableList()
</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>