<template>
  <div class="select-config-page">
    <div class="page-header">
      <h3>可选合同配置</h3>
      <div class="header-stats">
        <span class="stat-item">
          <span class="stat-label">已配置</span>
          <span class="stat-value">{{ contractList.length }}</span>
        </span>
        <span class="stat-item">
          <span class="stat-label">手动添加</span>
          <span class="stat-value manual">{{contractList.filter(i => i.isManual).length}}</span>
        </span>
        <span class="stat-item">
          <span class="stat-label">接口同步</span>
          <span class="stat-value api">{{contractList.filter(i => !i.isManual).length}}</span>
        </span>
      </div>
    </div>

    <div class="content-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="可选合同" name="configured">
          <div v-if="contractList.length === 0" class="empty-state">
            <i class="el-icon-document"></i>
            <p>暂无已配置合同</p>
            <span>切换至"所有合同"标签页添加合同</span>
          </div>
          <el-table v-else v-loading="configLoading" :data="contractList" style="width: 100%" size="small" stripe
            max-height="calc(100vh - 280px)">
            <el-table-column prop="contractCode" label="合同编号" width="160" />
            <el-table-column prop="contractName" label="合同名称" min-width="180" show-overflow-tooltip />
            <el-table-column prop="customer" label="客户" width="140" />
            <el-table-column prop="salesman" label="销售人员" width="100" />
            <el-table-column prop="deliveryDate" label="交付日期" width="110">
              <template slot-scope="scope">
                <span :class="{ 'text-muted': !scope.row.deliveryDate }">
                  {{ scope.row.deliveryDate || '-' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip>
              <template slot-scope="scope">
                <span :class="{ 'text-muted': !scope.row.remark }">
                  {{ scope.row.remark || '-' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="添加方式" width="90" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.isManual" type="success" size="small">手动</el-tag>
                <el-tag v-else type="info" size="small">接口</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="removeContract(scope.row.orderId)" style="color: #f56c6c;">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="所有合同" v-loading="allLoading" name="all">
          <div class="search-bar">
            <el-input v-model="searchKeyword" placeholder="搜索合同编号 / 名称 / 客户" @input="handleSearch" clearable
              size="small" class="search-input">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>

          <div v-if="allContracts.length === 0" class="empty-state">
            <i class="el-icon-folder-opened"></i>
            <p>暂无合同数据</p>
          </div>
          <el-table v-else :data="allContracts" size="small" stripe height="calc(100vh - 320px)">
            <el-table-column prop="contractCode" label="合同编号" width="160" />
            <el-table-column prop="contractName" label="合同名称" min-width="180" show-overflow-tooltip />
            <el-table-column prop="customer" label="客户" width="140" />
            <el-table-column prop="salesman" label="销售人员" width="100" />
            <el-table-column prop="deliveryDate" label="交付日期" width="110">
              <template slot-scope="scope">
                <span :class="{ 'text-muted': !scope.row.deliveryDate }">
                  {{ scope.row.deliveryDate || '-' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="140" show-overflow-tooltip>
              <template slot-scope="scope">
                <span :class="{ 'text-muted': !scope.row.remark }">
                  {{ scope.row.remark || '-' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="80" align="center">
              <template slot-scope="scope">
                <el-tag v-if="isContractInList(scope.row.orderId)" type="success" size="small">已添加</el-tag>
                <el-tag v-else type="info" size="small">未添加</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button v-if="!isContractInList(scope.row.orderId)" type="primary" size="mini"
                  @click="addContract(scope.row)" plain>
                  添加
                </el-button>
                <el-button v-else type="text" size="small" @click="removeContract(scope.row.orderId)"
                  style="color: #f56c6c;">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div v-if="allContracts.length > 0" class="table-footer">
            共 {{ allContracts.length }} 条记录
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { listOrder, listTodayOrder } from '@/api/crm/order';

export default {
  name: "SelectConfig",
  data() {
    return {
      contractList: [],
      configLoading: false,
      searchKeyword: '',
      allContracts: [],
      allLoading: false,
      activeTab: 'configured',
    }
  },
  mounted() {
    this.loadFromLocalStorage();
  },
  methods: {
    handleTabClick(tab) {
      if (tab.name === 'all' && this.allContracts.length === 0) {
        this.loadAllContracts();
      }
    },
    loadFromLocalStorage() {
      try {
        const storedContracts = localStorage.getItem('todayContracts');
        if (storedContracts) {
          this.contractList = JSON.parse(storedContracts);
        }
        this.loadContractList();
      } catch (error) {
        console.error('Failed to load contracts from localStorage:', error);
        this.loadContractList();
      }
    },

    saveToLocalStorage() {
      try {
        localStorage.setItem('todayContracts', JSON.stringify(this.contractList));
      } catch (error) {
        console.error('Failed to save contracts to localStorage:', error);
      }
    },

    async loadContractList() {
      this.configLoading = true;
      try {
        const res = await listTodayOrder();
        const existingManualContracts = this.contractList.filter(item => item.isManual);
        const apiContracts = (res.data || []).map(item => ({
          ...item,
          isManual: false
        }));
        this.contractList = [...apiContracts, ...existingManualContracts];
        this.contractList = this.contractList.filter((item, index, self) =>
          index === self.findIndex(t => t.orderId === item.orderId)
        );
        this.saveToLocalStorage();
      } finally {
        this.configLoading = false;
      }
    },

    async loadAllContracts() {
      this.allLoading = true;
      try {
        const res = await listOrder({
          pageNum: 1,
          pageSize: 10000,
          keyword: this.searchKeyword || undefined,
        });
        const existingContracts = this.contractList;
        this.allContracts = [...(res.rows || []), ...existingContracts].filter((item, index, self) =>
          index === self.findIndex(t => t.orderId === item.orderId)
        );
      } catch (error) {
        console.error('Failed to load all contracts:', error);
        this.allContracts = [];
      } finally {
        this.allLoading = false;
      }
    },

    handleSearch() {
      this.loadAllContracts();
    },

    isContractInList(orderId) {
      return this.contractList.some(item => item.orderId === orderId);
    },

    addContract(contract) {
      if (!this.isContractInList(contract.orderId)) {
        this.contractList.push({
          ...contract,
          isManual: true
        });
        this.saveToLocalStorage();
      }
    },

    removeContract(orderId) {
      this.contractList = this.contractList.filter(item => item.orderId !== orderId);
      this.saveToLocalStorage();
    },
  }
}
</script>

<style scoped>
.select-config-page {
  padding: 16px;
  min-height: 100%;
  background: #f5f7fa;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ebeef5;
}

.page-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.header-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-label {
  font-size: 13px;
  color: #909399;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.stat-value.manual {
  color: #67c23a;
}

.stat-value.api {
  color: #909399;
}

.content-card {
  background: #fff;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  padding: 0 16px 16px;
}

.content-card ::v-deep .el-tabs__header {
  margin-bottom: 16px;
}

.search-bar {
  margin-bottom: 16px;
}

.search-input {
  width: 320px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #c0c4cc;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-state p {
  margin: 0 0 8px;
  font-size: 14px;
  color: #909399;
}

.empty-state span {
  font-size: 12px;
  color: #c0c4cc;
}

.text-muted {
  color: #c0c4cc;
}

.table-footer {
  text-align: center;
  padding: 12px;
  font-size: 13px;
  color: #909399;
}
</style>
