<template>
    <div>
        <div style="display: flex; align-items: center; margin-bottom: 12px;">
            <el-select v-model="selectedValue" placeholder="请选择合同" style="width: 100%">
                <el-option v-for="item in contractList" :key="item.orderId" :value="item.orderId"
                  :label="item.contractCode" />
            </el-select>
            <!-- 编辑按钮：点击打开弹窗 -->
            <el-button v-if="mode == 'today'" @click="openSelectDialog" type="primary" size="small" style="margin-left: 8px; padding: 0 12px;">
                <i class="el-icon-setting"></i>
            </el-button>

            <!-- 刷新时不会移除手动添加的合同 -->
            <el-button @click="handleRefresh" type="info" size="small" style="margin-left: 8px; padding: 0 12px;">
                <i class="el-icon-refresh"></i>
            </el-button>
        </div>

        <!-- 查询所有的合同和当前localstorage中的合同，可以对localstorage中的合同进行新增和删除，手动新增的合同带有手动添加的标记 -->
        <el-dialog title="可选合同配置" :visible.sync="dialogVisible" width="80%" append-to-body>
            <el-tabs v-model="activeTab">
                <!-- 已配置合同tab -->
                <el-tab-pane label="可选合同" name="configured">
                    <div v-if="contractList.length === 0" style="text-align: center; padding: 20px;">
                        暂无已配置合同
                    </div>
                    <el-table v-else :data="contractList" style="width: 100%" size="mini" height="600">
                        <el-table-column prop="contractCode" label="合同编号" width="160" />
                        <el-table-column prop="contractName" label="合同名称" width="180" />
                        <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">
                                {{ scope.row.deliveryDate || '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" show-overflow-tooltip />
                        <el-table-column label="添加方式" width="90">
                            <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="70">
                            <template slot-scope="scope">
                                <el-button type="danger" size="mini" @click="removeContract(scope.row.orderId)" plain>
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                
                <!-- 所有合同tab -->
                <el-tab-pane label="所有合同" name="all">
                    <div style="margin-bottom: 16px;">
                        <el-input v-model="searchKeyword" placeholder="搜索合同" @input="handleSearch" clearable size="small">
                            <el-button slot="append" icon="el-icon-search" size="small"></el-button>
                        </el-input>
                    </div>
                    
                    <el-table :data="allContracts" style="width: 100%" size="mini" height="600">
                        <el-table-column prop="contractCode" label="合同编号" width="160" />
                        <el-table-column prop="contractName" label="合同名称" width="180" />
                        <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">
                                {{ scope.row.deliveryDate || '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" show-overflow-tooltip />
                        <el-table-column label="状态" width="80">
                            <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="100">
                            <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="danger" 
                                    size="mini" 
                                    @click="removeContract(scope.row.orderId)"
                                    plain
                                >
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    
                    <div v-if="allContracts.length === 0" style="text-align: center; padding: 20px;">
                        暂无合同数据
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>

</template>

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

export default {
    name: "ContractSelect",
    props: {
        value: {
            type: String,
            default: ""
        },
        mode: {
            type: String,
            default: "today" // today 或 all
        }
    },
    data() {
        return {
            contractList: [],
            dialogVisible: false,
            searchKeyword: '',
            allContracts: [],
            activeTab: 'configured', // 默认显示已配置合同tab
        }
    },
    computed: {
        selectedValue: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            }
        }
    },
    mounted() {
        if (this.mode == "today") {
            // 从localstorage中获取合同列表
            this.loadFromLocalStorage();
        } else {
            this.loadContractList();
        }
    },
    methods: {
        // 从localStorage中加载合同列表
        loadFromLocalStorage() {
            try {
                const storedContracts = localStorage.getItem('todayContracts');
                if (storedContracts) {
                    this.contractList = JSON.parse(storedContracts);
                } else {
                    // 如果localStorage中没有，从接口获取
                    this.loadContractList();
                }
            } catch (error) {
                console.error('Failed to load contracts from localStorage:', error);
                this.loadContractList();
            }
        },
        
        // 保存合同列表到localStorage
        saveToLocalStorage() {
            try {
                localStorage.setItem('todayContracts', JSON.stringify(this.contractList));
            } catch (error) {
                console.error('Failed to save contracts to localStorage:', error);
            }
        },
        
        // 加载合同列表
        async loadContractList(keyword) {
            if (this.mode == "all") {
                const res = await listOrder({
                    pageNum: 1,
                    pageSize: 1000,
                    keyword: keyword || undefined,
                });
                this.contractList = res.rows || [];
            }
            else if (this.mode == "today") {
                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)
                );
                // 保存到localStorage
                this.saveToLocalStorage();
            }
        },
        // 打开选择弹窗
        async openSelectDialog() {
            this.dialogVisible = true;
            // 加载所有合同供选择
            await this.loadAllContracts();
        },
        
        // 加载所有合同
        async loadAllContracts() {
            try {
                const res = await listOrder({
                    pageNum: 1,
                    pageSize: 1000,
                    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 = [];
            }
        },
        
        // 搜索合同
        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();
        },
        
        // 刷新合同列表
        handleRefresh() {
            this.loadContractList();
        },
    }
}
</script>