<template>
  <div class="koi-flex">
    <KoiCard>
      <el-form :model="queryParams" inline>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 260px"
          />
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="queryParams.model" placeholder="请输入型号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格头部按钮 -->
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button icon="Download" plain type="success" @click="handleExport">导出</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="delete" plain type="danger" :disabled="multiple">批量删除</el-button>
        </el-col>
        <KoiToolbar v-model:showSearch="showSearch" @refreshTable="getList"></KoiToolbar>
      </el-row>

      <div class="h-20px"></div>
      <el-table
        v-loading="loading"
        :data="tableList"
        :header-cell-style="{ background: '#f1f1f1' }"
        border
        empty-text="暂时没有数据哟"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" label="型号" prop="model" show-overflow-tooltip />
        <el-table-column align="center" label="出立创单价" prop="factoryPrice" width="140px" />
        <el-table-column align="center" label="立创正常利润价" prop="lcPrice" width="140px" />
        <el-table-column align="center" label="立创售价" prop="lcPrice" width="140px" />
        <el-table-column align="center" label="竞品最低售价" prop="competitorPrice" width="140px" />
        <el-table-column align="center" label="建议指导价" prop="suggestedPrice" width="140px" />
        <el-table-column align="center" label="利润点数" prop="profitPoint" width="140px" />
        <el-table-column align="center" label="状态" width="120px">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ row.statusText }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="日期" prop="date" width="140px" />
        <el-table-column align="center" label="操作" width="120">
          <template #default="{ row }">
            <el-tooltip content="删除" placement="top">
              <el-button circle icon="delete" plain type="danger" @click="handleDetail(row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="h-20px"></div>
      <!-- 分页 -->
      <Pagination :getList="getList" :queryParams="queryParams" :total="total"/>

    </KoiCard>
  </div>
</template>

<script setup name="sellingPrice">
import { ref, reactive } from 'vue'

// 查询参数
const queryParams = reactive({
  dateRange: [],
  model: '',
  pageNum: 1,
  pageSize: 10
})

const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const tableList = ref([
  {
    date: '2024-01-20',
    model: 'XS2024001',
    factoryPrice: '1.20',
    lcPrice: '1.32',
    competitorPrice: '1.40',
    suggestedPrice: '1.25',
    profitPoint: '12',
    status: 2,
    statusText: 'LR低于竞品'
  },
  // 更多模拟数据...
])

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    1: 'warning',
    2: 'danger',
    3: 'info',
    4: 'success'
  }
  return types[status] || ''
}

// 获取列表数据
const getList = () => {
  loading.value = true
  // 这里调用后端接口
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 重置查询
const resetQuery = () => {
  queryParams.dateRange = []
  queryParams.model = ''
  getList()
}

// 导出
const handleExport = () => {
  // 实现导出功能
}

// 查看详情
const handleDetail = (row) => {
  // 实现查看详情功能
}

const ids = ref([]); // 选择数组
const multiple = ref(true); // 非多个禁用
/** 是否多选 */
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.recordId);
  multiple.value = !selection.length; // 多选
};
</script>

<style scoped lang="scss">

</style>
