<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5" style="border-right: 1px solid #e4e7ed;">
        <div style="font-weight: 900;">订单列表</div>
        <div style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
          <!-- 主搜索和添加 -->
          <el-input style="flex: 1;" prefix-icon="el-icon-search" placeholder="输入订单编号搜索"
            v-model="queryParams.orderNum"></el-input>
          <el-button icon="el-icon-search" @click="toggleQuery"></el-button>
          <el-button type="primary" icon="el-icon-plus" style="margin-left: 0;"></el-button>
        </div>
        <div v-show="showQuery"
          style="display: flex; align-items: center; gap: 5px; margin-top: 10px; flex-wrap: wrap;">
          <!-- 查询区，通过上方的查询按钮控制显示隐藏 -->
          <!-- 客户行业和客户等级的下拉选 -->
          <el-select style="width: 100px;" v-model="queryParams.customerId" placeholder="客户" clearable>
            <el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
          <el-select style="width: 100px;" v-model="queryParams.salesman" placeholder="销售员" clearable>
            <el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
          <el-select style="width: 100px;" v-model="queryParams.orderStatus" placeholder="订单状态" clearable>
            <el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
          <el-select style="width: 100px;" v-model="queryParams.financeStatus" placeholder="财务状态" clearable>
            <el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </div>
        <div>
          <!-- 列表区域 -->
          <KLPList :listData="orderList" listKey="orderId" :loading="orderLoading" />
        </div>
      </el-col>

      <el-col :span="19">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane label="订单详情" name="detail">
            <div class="order-detail" v-if="activeTab === 'detail'">
              <!-- 订单详情内容 -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="财务状态" name="finance">
            <div class="order-finance" v-if="activeTab === 'finance'">
              <!-- 财务状态内容 -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="订单异议" name="dispute">
            <div class="order-dispute" v-if="activeTab === 'dispute'">
              <!-- 订单异议内容 -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="record">
            <div class="order-record" v-if="activeTab === 'record'">
              <!-- 操作记录内容 -->
            </div>
          </el-tab-pane>
           <el-tab-pane label="钢卷追溯" name="trace">
            <div class="order-trace" v-if="activeTab === 'trace'">
              <!-- 钢卷追溯内容 -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import KLPList from '@/components/KLPUI/KLPList/index.vue'

export default {
  name: 'OrderPage',
  components: {
    KLPList
  },
  dicts: ['customer_level', 'customer_industry'],
  data() {
    return {
      showQuery: false,
      queryParams: {
        orderNum: '',
        customerId: '',
        salesman: '',
        orderStatus: '',
        financeStatus: ''
      },
      activeTab: 'detail',
      currentOrder: {},
      orderList: [],
      orderLoading: false
    }
  },
  methods: {
    toggleQuery() {
      this.showQuery = !this.showQuery
    },
  }
}
</script>