﻿<template>
	<div class="app-container">
		<!-- 页面头部 -->
		<div class="page-header">
			<div class="header-left">
				<h2>门店信息管理</h2>
				<p class="page-desc">管理门店基本信息，包括门店编码、店名、地址、联系方式等</p>
			</div>
			<div class="header-right">
				<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
				<el-button type="success" icon="el-icon-download" @click="exportData()">导出</el-button>
				<el-button type="danger" icon="el-icon-delete" @click="handleBatchRemoveDel()" :disabled="multipleSelection.length === 0">批量删除</el-button>
				<el-button icon="el-icon-refresh" @click="reset()">刷新</el-button>
			</div>
		</div>

		<!-- 搜索区域 -->
		<div class="search-container">
			<el-form :model="query" ref="queryForm" :inline="true" label-width="80px">
				<el-form-item label="单据门店" prop="djmd">
					<el-input v-model="query.djmd" placeholder="请输入单据门店" clearable style="width: 200px" />
				</el-form-item>
				<el-form-item label="店名" prop="dm">
					<el-input v-model="query.dm" placeholder="请输入店名" clearable style="width: 200px" />
				</el-form-item>
				<el-form-item label="城市" prop="cs">
					<el-input v-model="query.cs" placeholder="请输入城市" clearable style="width: 200px" />
				</el-form-item>
				<template v-if="showAll">
					<el-form-item label="姓名" prop="xm">
						<el-input v-model="query.xm" placeholder="请输入姓名" clearable style="width: 200px" />
					</el-form-item>
					<el-form-item label="电话号码" prop="dhhm">
						<el-input v-model="query.dhhm" placeholder="请输入电话号码" clearable style="width: 200px" />
					</el-form-item>
					<el-form-item label="座机" prop="zj">
						<el-input v-model="query.zj" placeholder="请输入座机" clearable style="width: 200px" />
					</el-form-item>
					<el-form-item label="开业时间" prop="kysj">
						<el-date-picker v-model="query.kysj" type="daterange" value-format="timestamp" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px" />
					</el-form-item>
					<el-form-item label="最新状态" prop="zxzt">
						<el-select v-model="query.zxzt" placeholder="请选择最新状态" clearable style="width: 200px">
							<el-option v-for="(item, index) in zxztOptions" :key="index" :label="item.fullName" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="工商名称" prop="gsmc">
						<el-input v-model="query.gsmc" placeholder="请输入工商名称" clearable style="width: 200px" />
					</el-form-item>
					<el-form-item label="法人" prop="fr">
						<el-input v-model="query.fr" placeholder="请输入法人" clearable style="width: 200px" />
					</el-form-item>
					<el-form-item label="有无社保" prop="ywsb">
						<el-select v-model="query.ywsb" placeholder="请选择有无社保" clearable style="width: 200px">
							<el-option v-for="(item, index) in ywsbOptions" :key="index" :label="item.fullName" :value="item.id" />
						</el-select>
					</el-form-item>
				</template>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
					<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
					<el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">展开</el-button>
					<el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>收起</el-button>
				</el-form-item>
			</el-form>
			<!-- 批量操作区域 -->
			<div class="batch-action-container" v-if="multipleSelection.length > 0">
				<span class="selected-count">已选择 {{ multipleSelection.length }} 条记录</span>
				<el-button type="info" icon="el-icon-close" size="small" @click="handleClearSelection">取消选择</el-button>
			</div>
		</div>

		<!-- 数据表格 -->
		<div class="table-container">
                <NCC-table ref="table" v-loading="listLoading" :data="list" has-c height="calc(100vh - 420px)" @selection-change="handleSelectionChange">
					<!-- <el-table-column prop="id" label="主键" align="left" /> -->
					<!-- <el-table-column prop="mdbm" label="门店编码" align="left" />
					<el-table-column prop="djmdbh" label="门店编号" align="left" /> -->
					<el-table-column prop="djmd" label="单据门店" align="left" show-overflow-tooltip />
					<el-table-column prop="dm" label="店名" align="left" show-overflow-tooltip />
					<el-table-column prop="cs" label="城市" align="left" show-overflow-tooltip />
					<!-- <el-table-column prop="dz" label="地址" align="left" /> -->
					<el-table-column prop="xm" label="姓名" align="left" show-overflow-tooltip />
					<el-table-column prop="dhhm" label="电话号码" align="left" show-overflow-tooltip />
					<el-table-column prop="zj" label="座机" align="left" show-overflow-tooltip />
					<el-table-column prop="kysj" width="150" label="开业时间" align="left" :formatter="ncc.tableDateFormat" show-overflow-tooltip />
					<el-table-column prop="zzrs" label="在职人数" align="left" show-overflow-tooltip />
					<el-table-column prop="storeImageCount" label="图片数" width="90" align="left" show-overflow-tooltip />
					<el-table-column prop="storeTagsDisplay" label="门店标签" width="180" align="left" show-overflow-tooltip>
						<template slot-scope="scope">
							{{ scope.row.storeTagsDisplay || '无' }}
						</template>
					</el-table-column>
					<el-table-column prop="storeDescription" label="门店介绍" width="220" align="left" show-overflow-tooltip>
						<template slot-scope="scope">
							{{ scope.row.storeDescription || '无' }}
						</template>
					</el-table-column>
					<el-table-column prop="businessHours" label="营业时间设置" width="220" align="left" show-overflow-tooltip>
						<template slot-scope="scope">
							{{ scope.row.businessHours || '无' }}
						</template>
					</el-table-column>
					<el-table-column prop="trafficTips" label="交通提示" width="220" align="left" show-overflow-tooltip>
						<template slot-scope="scope">
							{{ scope.row.trafficTips || '无' }}
						</template>
					</el-table-column>
					<el-table-column label="最新状态" prop="zxzt" align="left" show-overflow-tooltip>
							<template slot-scope="scope">{{ scope.row.zxzt | dynamicText(zxztOptions) }}</template>
					</el-table-column>
					<el-table-column prop="gsmc" label="工商名称" align="left" show-overflow-tooltip />
					<el-table-column prop="fr" label="法人" align="left" show-overflow-tooltip />
					<!-- <el-table-column label="有无社保" prop="ywsb" align="left">
							<template slot-scope="scope">{{ scope.row.ywsb | dynamicText(ywsbOptions) }}</template>
					</el-table-column> -->
					<el-table-column label="是否新店" prop="isNewStore" align="left" show-overflow-tooltip>
							<template slot-scope="scope">
								<el-tag v-if="scope.row.isNewStore" type="success" size="small">新店</el-tag>
								<el-tag v-else type="info" size="small">老店</el-tag>
							</template>
					</el-table-column>
                    <el-table-column label="阶段" prop="stage" align="left" show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.stage==1 ? '第一阶段' : scope.row.stage==2 ? '第二阶段' : scope.row.stage == 3 ? '第三阶段' : '无' }}
							</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" width="320" show-overflow-tooltip>
							<template slot-scope="scope">
							<span class="operation-buttons">
								<el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
								<el-button type="text" @click="viewNewStoreHandle(scope.row)">查看新店设置</el-button>
								<el-button type="text" @click="setNewStoreHandle(scope.row)">设置新店</el-button>
								<el-button type="text" @click="handleDel(scope.row.id)" class="NCC-table-delBtn">删除</el-button>
							</span>
						</template>
					</el-table-column>
				</NCC-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
		</div>
		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
		<SetNewStoreDialog v-if="setNewStoreVisible" ref="SetNewStoreDialog" @refresh="refresh" />
		<ViewNewStoreDialog v-if="viewNewStoreVisible" ref="ViewNewStoreDialog" />
	</div>
</template>
<script>
    import request from '@/utils/request'
    import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
    import NCCForm from './Form'
    import ExportBox from './ExportBox'
    import SetNewStoreDialog from './SetNewStoreDialog'
    import ViewNewStoreDialog from './ViewNewStoreDialog'
    import { previewDataInterface } from '@/api/systemData/dataInterface'
	export default {
        components: { NCCForm, ExportBox, SetNewStoreDialog, ViewNewStoreDialog },
        data() {
            return {
                showAll: false,
				query: {
                    id:undefined,
                    mdbm:undefined,
                    djmdbh:undefined,
                    djmd:undefined,
                    dm:undefined,
                    cs:undefined,
                    dz:undefined,
                    xm:undefined,
                    dhhm:undefined,
                    zj:undefined,
                    kysj:undefined,
                    zxzt:undefined,
                    gsmc:undefined,
                    fr:undefined,
                    ywsb:undefined,
				},
                list: [],
                listLoading: true,
                multipleSelection: [], total: 0,
                listQuery: {
                    currentPage: 1,
                    pageSize: 20,
					sort: "desc",
                    sidx: "",
                },
                formVisible: false,
                exportBoxVisible: false,
                setNewStoreVisible: false,
                viewNewStoreVisible: false,
                columnList: [
                    { prop: 'id', label: '主键' },
                    { prop: 'mdbm', label: '门店编码' },
                    { prop: 'djmdbh', label: '单据门店编号' },
                    { prop: 'djmd', label: '单据门店' },
                    { prop: 'dm', label: '店名' },
                    { prop: 'cs', label: '城市' },
                    { prop: 'dz', label: '地址' },
                    { prop: 'xm', label: '姓名' },
                    { prop: 'dhhm', label: '电话号码' },
                    { prop: 'zj', label: '座机' },
                    { prop: 'kysj', label: '开业时间' },
                    { prop: 'zxzt', label: '最新状态' },
                    { prop: 'gsmc', label: '工商名称' },
                    { prop: 'fr', label: '法人' },
                    { prop: 'ywsb', label: '有无社保' },
                    { prop: 'zzrs', label: '在职人数' },
                    { prop: 'storeDescription', label: '门店介绍' },
                    { prop: 'businessHours', label: '营业时间设置' },
                    { prop: 'trafficTips', label: '交通提示' },
				],
				zxztOptions:[{"fullName":"开店","id":"开店"},{"fullName":"闭店","id":"闭店"}],
				ywsbOptions:[{"fullName":"有","id":"有"},{"fullName":"无","id":"无"}],
			}
        },
		computed: {},
		created() {
			this.initData()
		},
		methods: {
			initData() {
                this.listLoading = true;
                let _query = {
                    ...this.listQuery,
                    ...this.query
                };
                let query = {}
                for (let key in _query) {
                    if (Array.isArray(_query[key])) {
                        query[key] = _query[key].join()
                    } else {
                        query[key] = _query[key]
                    }
                }
                request({
                    url: `/api/Extend/LqMdxx`,
                    method: 'GET',
                    data: query
                }).then(res => {
                    this.list = (res.data.list || []).map(item => this.normalizeStoreRow(item))
                    this.total = res.data.pagination.total
                    this.listLoading = false
                    
                    // 获取每个门店的新店保护时间状态
                    this.checkNewStoreStatus()
                })
            },
			normalizeStoreRow(row) {
                const storeImages = this.parseJsonArray(row.storeImages)
                const storeTags = this.parseJsonStringArray(row.storeTags)
                return {
                    ...row,
                    storeImages,
                    storeTags,
                    storeImageCount: storeImages.length,
                    storeTagsDisplay: storeTags.length ? storeTags.join('、') : ''
                }
            },
			parseJsonArray(value) {
                if (!value) return []
                if (Array.isArray(value)) return value
                if (typeof value === 'string') {
                    try {
                        const parsed = JSON.parse(value)
                        return Array.isArray(parsed) ? parsed : []
                    } catch (e) {
                        return []
                    }
                }
                return []
            },
			parseJsonStringArray(value) {
                return this.parseJsonArray(value).map(item => (item || '').toString().trim()).filter(Boolean)
            },
			handleDel(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        url: `/api/Extend/LqMdxx/${id}`,
                        method: 'DELETE'
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                                this.initData()
                            }
                        });
                    })
                }).catch(() => {
                });
            },
			handleSelectionChange(val) {
                const res = val.map(item => item.id)
                this.multipleSelection = res
            },
            handleClearSelection() {
                if (this.$refs.table && this.$refs.table.clearSelection) {
                    this.$refs.table.clearSelection()
                }
                this.multipleSelection = []
            },
            handleBatchRemoveDel() {
                if (!this.multipleSelection.length) {
                    this.$message({
                        type: 'error',
                        message: '请选择一条数据',
                        duration: 1500,
                    })
                    return
                }
                const ids = this.multipleSelection
                this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        url: `/api/Extend/LqMdxx/batchRemove`,
                        method: 'POST',
                        data: ids ,
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                                this.initData()
                            }
                        });
                    })
                }).catch(() => { })
            },
			addOrUpdateHandle(id, isDetail) {
                this.formVisible = true
                this.$nextTick(() => {
                    this.$refs.NCCForm.init(id, isDetail)
                })
            },
			exportData() {
                this.exportBoxVisible = true
                this.$nextTick(() => {
                    this.$refs.ExportBox.init(this.columnList)
                })
            },
			setNewStoreHandle(storeData) {
                this.setNewStoreVisible = true
                this.$nextTick(() => {
                    this.$refs.SetNewStoreDialog.init(storeData)
                })
            },
			viewNewStoreHandle(storeData) {
                this.viewNewStoreVisible = true
                this.$nextTick(() => {
                    this.$refs.ViewNewStoreDialog.init(storeData.id)
                })
            },
			checkNewStoreStatus() {
                // 为每个门店检查是否在新店保护期内
                this.list.forEach(store => {
                    request({
                        url: `/api/Extend/LqMdXdbhsj/GetByStoreId/${store.id}`,
                        method: 'GET'
                    }).then(res => {
                        this.$set(store, 'isNewStore', res.data.hasProtection)
                        this.$set(store, 'stage', res.data.data.stage)
                    }).catch(err => {
                        this.$set(store, 'isNewStore', false)
                        this.$set(store, 'stage', 0)
                    })
                })
            },
            download(data) {
                let query = { ...data, ...this.listQuery, ...this.query }
                request({
                    url: `/api/Extend/LqMdxx/Actions/Export`,
                    method: 'GET',
                    data: query
                }).then(res => {
                    if (!res.data.url) return
                    window.location.href = this.define.comUrl + res.data.url
                    this.$refs.ExportBox.visible = false
                    this.exportBoxVisible = false
                })
            },
			search() {
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },
            refresh(isrRefresh) {
                this.formVisible = false
                if (isrRefresh) this.reset()
            },
            reset() {
                for (let key in this.query) {
                    this.query[key] = undefined
                }
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            }
        }
    }
</script>

<style lang="scss" scoped>
.app-container {
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(144, 147, 153, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 50%, #3b82f6 100%);
  }

  .header-left {
    h2 {
      margin: 0 0 8px 0;
      color: #303133;
      font-size: 22px;
      font-weight: 700;
      background: linear-gradient(135deg, #303133 0%, #606266 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .page-desc {
      margin: 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .header-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    .el-button {
      border-radius: 8px;
      padding: 10px 18px;
      font-weight: 500;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      }

      &.el-button--primary {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        }
      }

      &.el-button--success {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        }
      }

      &.el-button--danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        }

        &:disabled {
          background: #e5e7eb;
          color: #9ca3af;
          cursor: not-allowed;
        }
      }

      &:not(.el-button--primary):not(.el-button--success):not(.el-button--danger) {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(144, 147, 153, 0.3);
        color: #606266;

        &:hover {
          background: rgba(255, 255, 255, 1);
          border-color: rgba(144, 147, 153, 0.5);
        }
      }
    }
  }
}

.search-container {
  margin-bottom: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(144, 147, 153, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  ::v-deep .el-form {
    .el-form-item {
      margin-bottom: 16px;
    }

    .el-form-item__label {
      font-weight: 600;
      color: #606266;
    }

    .el-button {
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 500;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      }

      &.el-button--primary {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        border: none;

        &:hover {
          background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        }
      }

      &:not(.el-button--primary) {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(144, 147, 153, 0.3);
        color: #606266;

        &:hover {
          background: rgba(255, 255, 255, 1);
          border-color: rgba(144, 147, 153, 0.5);
        }
      }
    }

    .el-input__inner,
    .el-select .el-input__inner,
    .el-date-editor .el-input__inner {
      border-radius: 8px;
      border: 1px solid rgba(144, 147, 153, 0.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
      }
    }
  }
}

.batch-action-container {
  margin-top: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
  animation: slideDown 0.3s ease;

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .selected-count {
    color: #3b82f6;
    font-weight: 600;
    margin-right: 8px;
    font-size: 14px;
  }

  .el-button {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }
  }
}

.table-container {
  margin-bottom: 20px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(144, 147, 153, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;

  &:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  ::v-deep .NCC-table {
    .el-table {
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(144, 147, 153, 0.2);

      .el-table__header {
        background: linear-gradient(135deg, rgba(248, 249, 250, 0.9) 0%, rgba(240, 242, 245, 0.9) 100%);

        th {
          background: transparent;
          color: #303133;
          font-weight: 600;
          border-bottom: 2px solid rgba(144, 147, 153, 0.2);
          padding: 14px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .el-table__body {
        tr {
          transition: all 0.3s ease;

          &:hover {
            background: linear-gradient(135deg, rgba(239, 246, 255, 0.5) 0%, rgba(219, 234, 254, 0.5) 100%);
            transform: translateX(2px);
          }
        }

        td {
          border-bottom: 1px solid rgba(144, 147, 153, 0.15);
          padding: 12px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .el-table__row--striped {
        td {
          background-color: #fafafa;
        }
      }

      // 操作列特殊处理，确保按钮不换行
      // 操作列特殊处理，确保按钮不换行
      .el-table__body-wrapper,
      .el-table__fixed-body-wrapper,
      .el-table__fixed-right-body-wrapper {
        .operation-buttons {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          white-space: nowrap;
          flex-wrap: nowrap;
          width: 100%;
          justify-content: flex-start;
        }
      }
    }

    .el-button--text {
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.3s ease;
      white-space: nowrap;
      flex-shrink: 0;

      &:hover {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
      }

      &.NCC-table-delBtn {
        &:hover {
          background: rgba(239, 68, 68, 0.1);
          color: #ef4444;
        }
      }
    }
  }
}

// 图标动画
::v-deep .el-icon {
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.1) rotate(5deg);
  }
}
</style>
