<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form
      :inline="true"
      label-width="80px"
      label-position="right"
      size="small"
      ref="searchFormRef"
      :model="searchParams"
    >
      <el-card class="search-box">
        <!-- 关键修改：使用 flex 布局实现自适应换行 -->
        <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;">
          <el-form-item prop="pro_name" label="工具专业" style="margin-bottom: 0; width: 320px">
            <el-input
              clearable
              placeholder="请输入"
              v-model="searchParams.fourthParentName"
              style="width: 100%; min-width: 200px;"
            />
          </el-form-item>

          <el-form-item prop="pro_name" label="施工类型" style="margin-bottom: 0; width: 320px">
            <el-input
              clearable
              placeholder="请输入"
              v-model="searchParams.greatGrandparentName"
              style="width: 100%; min-width: 200px;"
            />
          </el-form-item>

          <el-form-item prop="pro_name" label="工具名称" style="margin-bottom: 0; width: 320px">
            <el-input
              clearable
              placeholder="请输入"
              v-model="searchParams.parentTypeName"
              style="width: 100%; min-width: 200px;"
            />
          </el-form-item>

          <el-form-item prop="pro_name" label="规格型号" style="margin-bottom: 0; width: 320px">
            <el-input
              clearable
              placeholder="请输入"
              v-model="searchParams.typeName"
              style="width: 100%; min-width: 200px;"
            />
          </el-form-item>


          <!-- 按钮区域 -->
          <div style="display: flex; gap: 10px; margin-left: auto;">
            <el-button @click="getListTool" size="mini" icon="el-icon-search" type="primary"
                       class="primary-lease">
              查询
            </el-button>
            <el-button @click="onReset" icon="el-icon-refresh" size="mini" class="primary-lease">重置</el-button>
          </div>
        </div>


        <el-row>

        </el-row>
      </el-card>
    </el-form>

    <!-- 数据列表 -->
    <el-card class="content-box">
      <el-row style="margin-bottom: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 10px;">

        <el-button
          size="mini"
          type="danger"
          class="primary-lease"
          @click="handleBatchDown"
          :disabled="selectedRows.length === 0"
        >
          批量下架
        </el-button>

        <el-button
          size="mini"
          @click="numberTool"
          type="primary"
          class="primary-lease"
        >
          上架数量工具
        </el-button>

        <el-button
          size="mini"
          @click="codeTool"
          type="primary"
          class="primary-lease"
        >
          上架编码工具
        </el-button>

      </el-row>


      <div class="table-container">
        <el-table
          :data="toolList"
          show-overflow-tooltip
          border stripe
          @selection-change="handleSelectionChange"
        >
          <!-- 修复后的表格列代码 -->
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column align="center" label="序号" type="index" width="80"/>
          <el-table-column align="center" label="工具专业" prop="fourthParentName"/>
          <el-table-column align="center" label="施工类型" prop="greatGrandparentName"/>
          <el-table-column align="center" label="工具类型" prop="grandparentTypeName"/>
          <el-table-column align="center" label="工具名称" prop="parentTypeName"/>
          <el-table-column align="center" label="规格型号" prop="typeName"/>
          <el-table-column align="center" label="工具编码" prop="toolCode"/>
          <el-table-column align="center" label="数量" prop="totalNum"/>


          <el-table-column align="center" label="操作" :width="220">
            <template slot-scope="scope">


              <!-- 下架按钮：移除 v-if 条件，直接显示 -->
              <el-popconfirm
                width="220"
                icon="el-icon-info"
                icon-color="#626AEF"
                title="确定下架该工具吗？"
                @confirm="handleDown(scope.row.id)"
              >
                <template slot="reference">
                  <el-button size="mini" type="text" icon="el-icon-delete" style="margin-left: 8px;color: red">
                    下架
                  </el-button>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="total,sizes,prev, pager, next"
          :total="total"
          :page-size="searchParams.pageSize"
          :current-page="searchParams.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 上架数量工具 -->
    <el-dialog
      width="1600px"
      @close="handleNumberDialogClose"
      destroy-on-close
      :title="dialogTitleByNumber"
      :visible.sync="numberDialogVisible"
      custom-class="simple-dialog"

    >
      <!-- 搜索区域 -->
      <el-form :inline="true" :model="numberSearchParams" style="width: 100%; margin-bottom: 10px;">
        <el-row style="display: flex; justify-content: center; gap: 10px;">
          <el-form-item label="工具专业" prop="fourthParentName">
            <el-input
              v-model="numberSearchParams.fourthParentName"
              placeholder="请输入工具专业"
              clearable
              style="width: 220px;"
            />
          </el-form-item>
          <el-form-item label="施工类型" prop="greatGrandparentName">
            <el-input
              v-model="numberSearchParams.greatGrandparentName"
              placeholder="请输入施工类型"
              clearable
              style="width: 220px;"
            />
          </el-form-item>
          <el-form-item label="工具名称" prop="parentTypeName">
            <el-input
              v-model="numberSearchParams.parentTypeName"
              placeholder="请输入工具名称"
              clearable
              style="width: 220px;"
            />
          </el-form-item>
          <el-form-item label="规格型号" prop="typeName">
            <el-input
              v-model="numberSearchParams.typeName"
              placeholder="请输入规格型号"
              clearable
              style="width: 220px;"
            />
          </el-form-item>
          <el-form-item style="text-align: right;">
          <el-button size="small" type="primary" @click="getListNumberTool">查询</el-button>
          <el-button size="small" @click="handleNumberReset">重置</el-button>

            <el-button
              size="mini"
              type="danger"
              class="primary-lease"
              @click="handleBatchUpNum"
              :disabled="selectedNumberRows.length === 0"
            >
              批量上架
            </el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <!-- 表格区域 -->
      <div class="table-container">
        <el-table
          :data="numberToolList"
          show-overflow-tooltip
          border stripe
          @selection-change="handleNumberSelectionChange"
        >
          <!--复选列-->
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column align="center" label="序号" type="index" width="80"/>
          <el-table-column align="center" label="工具专业" prop="fourthParentName"/>
          <el-table-column align="center" label="施工类型" prop="greatGrandparentName"/>
          <el-table-column align="center" label="工具类型" prop="grandparentTypeName"/>
          <el-table-column align="center" label="工具名称" prop="parentTypeName"/>
          <el-table-column align="center" label="规格型号" prop="typeName"/>
          <el-table-column align="center" label="数量" prop="totalNum"/>
        </el-table>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="numberTotal"
          :page-size="numberSearchParams.pageSize"
          :current-page="numberSearchParams.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          @size-change="handleNumberSizeChange"
          @current-change="handleNumberCurrentChange"
        />
      </div>
    </el-dialog>

    <!-- 上架编码工具 -->
    <el-dialog
      width="1600px"
      @close="handleCodeDialogClose"
      destroy-on-close
      :title="dialogTitleByCode"
      :visible.sync="codeDialogVisible"
      custom-class="simple-dialog"
    >
      <!-- 搜索区域 -->
      <el-form inline :model="codeSearchParams" label-width="auto">
        <el-row >
          <el-form-item label="工具专业" prop="fourthParentName" style="width: 300px;">
            <el-input
              v-model="codeSearchParams.fourthParentName"
              placeholder="请输入工具专业"
              clearable
              style="width: 220px;"
            />
          </el-form-item>
          <el-form-item label="施工类型" prop="greatGrandparentName" style="width: 300px;">
            <el-input
              v-model="codeSearchParams.greatGrandparentName"
              placeholder="请输入施工类型"
              clearable
              style="width: 220px;"
            />
          </el-form-item>
          <el-form-item label="工具名称" prop="parentTypeName" style="width: 300px;">
            <el-input
              v-model="codeSearchParams.parentTypeName"
              placeholder="请输入工具名称"
              clearable
              style="width: 220px;"
            />
          </el-form-item>
          <el-form-item label="规格型号" prop="typeName" style="width: 300px;">
            <el-input
              v-model="codeSearchParams.typeName"
              placeholder="请输入规格型号"
              clearable
              style="width: 220px;"
            />
          </el-form-item>
          <el-form-item label="工具编码" prop="toolCode" style="width: 300px;">
            <el-input
              v-model="codeSearchParams.toolCode"
              placeholder="请输入工具编码"
              clearable
              style="width: 220px;"
            />
          </el-form-item>

          <el-form-item style="float: right; width: 220px;">
          <el-button size="small" type="primary" @click="getListCodeTool">查询</el-button>
          <el-button size="small" @click="handleCodeReset">重置</el-button>
            <el-button
              size="mini"
              type="danger"
              class="primary-lease"
              @click="handleBatchUpCode"
              :disabled="selectedCodeRows.length === 0"
            >
              批量上架
            </el-button>

          </el-form-item>
        </el-row>
      </el-form>

      <!-- 表格区域 -->
      <div class="table-container">
        <el-table
          :data="codeToolList"
          show-overflow-tooltip
          border stripe
          @selection-change="handleCodeSelectionChange"
        >
          <!-- 复选列 -->
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column align="center" label="序号" type="index" width="80"/>
          <el-table-column align="center" label="工具专业" prop="fourthParentName"/>
          <el-table-column align="center" label="施工类型" prop="greatGrandparentName"/>
          <el-table-column align="center" label="工具类型" prop="grandparentTypeName"/>
          <el-table-column align="center" label="工具名称" prop="parentTypeName"/>
          <el-table-column align="center" label="规格型号" prop="typeName"/>
          <el-table-column align="center" label="计量单位" prop="unitName"/>
          <el-table-column align="center" label="工具编码" prop="toolCode"/>
          <el-table-column align="center" label="下次检验时间" prop="nextCheckDate"/>
          <el-table-column align="center" label="生产厂家" prop="supplierName"/>
          <el-table-column align="center" label="生产日期" prop="productionDate"/>
          <el-table-column align="center" label="资产原值" prop="originCost"/>
          <el-table-column align="center" label="原始编码" prop="originalCode"/>
        </el-table>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="codeTotal"
          :page-size="codeSearchParams.pageSize"
          :current-page="codeSearchParams.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          @size-change="handleCodeSizeChange"
          @current-change="handleCodeCurrentChange"
        />
      </div>
    </el-dialog>



  </div>
</template>


<script>
import {
  listTool,
  listNumberTool,
  upToolByNumber,
  listCodeTool,
  downTool,
  batchDownTool,
  batchUpTool, upToolByCode
} from '@/api/EquipmentUpOrDown/tool'
import {Message} from 'element-ui'



export default {
  name: 'ProjectManagement',
  data() {
    return {
      total: 0,
      numberTotal: 0,
      codeTotal: 0,

      toolList: [],     //工具列表
      codeToolList: [], //编码工具列表
      numberToolList: [],//数量工具列表

      selectedRows: [],   // 存储选中的表格行
      selectedNumberRows: [], // 存储数量工具选中行
      selectedCodeRows: [], // 存储编码工具选中行

      dialogTitleByNumber: '上架数量工具',
      dialogTitleByCode: '上架编码工具',
      codeDialogVisible: false,
      numberDialogVisible: false,

      submitLoading: false,
      isAdd: true,
      isView: false,


      //
      dialogSearchParams: {
        toolCategory: ''
      },

      // 搜索参数
      searchParams: {
        fourthParentName: '',
        greatGrandparentName: '',
        parentTypeName:'',
        typeName:'',
        pageSize: 10,
        pageNum: 1
      },

      // 数量工具搜索参数
      numberSearchParams: {
        fourthParentName: '',
        greatGrandparentName: '',
        parentTypeName: '',
        typeName: '',
        pageSize: 10,
        pageNum: 1
      },

      // 编码工具搜索参数
      codeSearchParams: {
        fourthParentName: '',
        greatGrandparentName: '',
        parentTypeName: '',
        typeName: '',
        toolCode: '',
        pageSize: 10,
        pageNum: 1
      }

    }
  },

  mounted() {
    this.getListTool()
  },

  methods: {



    // 获取工具列表
    async getListTool() {
      try {
        const res = await listTool(this.searchParams)
        if (res.code === 200) {
          this.toolList = res.rows || []
          this.total = res.total || 0
        } else {
          Message.error(res.message || '获取工程列表失败')
        }
      } catch (error) {
        Message.error('网络错误，获取工程列表失败')
      }
    },


    // 获取数量工具列表
    async getListNumberTool() {
      try {
        const res = await listNumberTool(this.numberSearchParams)
        if (res.code === 200) {
          this.numberToolList = res.rows || []
          this.numberTotal = res.total || 0
        } else {
          Message.error(res.message || '获取工程列表失败')
        }
      } catch (error) {
        Message.error('网络错误，获取工程列表失败')
      }
    },


    // 获取编码工具列表
    async getListCodeTool() {
      try {
        const res = await listCodeTool(this.codeSearchParams)
        if (res.code === 200) {
          this.codeToolList = res.rows || []
          this.codeTotal = res.total || 0
        } else {
          Message.error(res.message || '获取工程列表失败')
        }
      } catch (error) {
        Message.error('网络错误，获取工程列表失败')
      }
    },



    // 重置搜索
    onReset() {
      this.searchParams = {
        fourthParentName: '',
        greatGrandparentName: '',
        parentTypeName:'',
        typeName:'',
        pageSize: 10,
        pageNum: 1
      }
      this.$refs.searchFormRef?.clearValidate()
      this.getListTool()
    },

    // 数量工具重置搜索
    handleNumberReset() {
      this.numberSearchParams = {
        fourthParentName: '',
        greatGrandparentName: '',
        parentTypeName: '',
        typeName: '',
        pageSize: 10,
        pageNum: 1
      }
      this.getListNumberTool()
    },


    // 编码工具重置搜索
    handleCodeReset() {
      this.codeSearchParams = {
        fourthParentName: '',
        greatGrandparentName: '',
        parentTypeName: '',
        typeName: '',
        toolCode: '',
        pageSize: 10,
        pageNum: 1
      }
      this.getListCodeTool()
    },


    // 表格选择变化
    handleSelectionChange(selection) {
      this.selectedRows = selection
    },

    // 数量工具表格选择变化
    handleNumberSelectionChange(selection) {
      this.selectedNumberRows = selection
    },

    // 编码工具表格选择变化
    handleCodeSelectionChange(selection) {
      this.selectedCodeRows = selection
    },



    // 编码工具
    codeTool() {
      this.isAdd = true
      this.isView = false
      this.dialogTitle = '上架编码工具'
      this.$refs.addOrEditFormRef?.clearValidate()
      this.codeDialogVisible = true
      this.getListCodeTool()
    },


    // 数量工具
    numberTool() {
      this.isAdd = true
      this.isView = false
      this.dialogTitle = '上架数量工具'
      this.$refs.addOrEditFormRef?.clearValidate()
      this.numberDialogVisible = true
      this.getListNumberTool()
    },



    // 下架工具
    async handleDown(id) {
      try {
        const res = await downTool(id) // 替换为下架接口
        if (res.code === 200) {
          Message.success('工具下架成功') // 提示文案适配功能
          this.getListTool() // 修正为正确的列表查询方法名
        } else {
          Message.error(res.message || '工具下架失败')
        }
      } catch (error) {
        Message.error('网络错误，工具下架失败')
      }
    },

    //上架工具
    async handleUp(id) {
      try {
        const res = await upToolByCode(id) // 替换为上架接口
        if (res.code === 200) {
          Message.success('工具上架成功') // 提示文案适配功能
          this.getListTool() // 修正为正确的列表查询方法名
        } else {
          Message.error(res.message || '工具上架失败')
        }
      } catch (error) {
        Message.error('网络错误，工具上架失败')
      }
    },


    // 批量下架
    async handleBatchDown() {
      if (this.selectedRows.length === 0) {
        Message.warning('请选择要下架的工具')
        return
      }

      try {
        await this.$confirm(
          `确定下架选中的 ${this.selectedRows.length} 个工具吗？`,
          '提示',
          {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }
        )

        const ids = this.selectedRows.map(row => row.id)
        // 假设批量下架接口为 downToolBatch
        const res = await batchDownTool(ids)

        if (res.code === 200) {
          Message.success(`成功下架 ${this.selectedRows.length} 个工具`)
          // 刷新工具列表
          this.getListTool()
          // 清空选中状态
          this.selectedRows = []
        } else {
          Message.error(res.message || '批量下架失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          Message.error('网络错误，批量下架失败')
        }
      }
    },

    // 数量工具批量上架
    async handleBatchUpNum() {
      if (this.selectedNumberRows.length === 0) {
        Message.warning('请选择要上架的工具')
        return
      }

      try {
        await this.$confirm(
          `确定上架选中的 ${this.selectedNumberRows.length} 个工具吗？`,
          '提示',
          {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }
        )

        const ids = this.selectedNumberRows.map(row => row.id)

        const res = await batchUpTool(ids)

        if (res.code === 200) {
          Message.success(`成功上架 ${this.selectedNumberRows.length} 个工具`)
          // 刷新数量工具列表
          this.getListNumberTool()
          //工具列表
          this.getListTool()
          // 清空选中状态
          this.selectedNumberRows = []
        } else {
          Message.error(res.message || '批量上架失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          Message.error('网络错误，批量上架失败')
        }
      }
    },

    // 编码工具批量上架
    async handleBatchUpCode() {
      if (this.selectedCodeRows.length === 0) {
        Message.warning('请选择要上架的工具')
        return
      }

      try {
        await this.$confirm(
          `确定上架选中的 ${this.selectedCodeRows.length} 个工具吗？`,
          '提示',
          {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }
        )

        const ids = this.selectedCodeRows.map(row => row.id)

        const res = await batchUpTool(ids)

        if (res.code === 200) {
          Message.success(`成功上架 ${this.selectedCodeRows.length} 个工具`)
          // 刷新编码工具列表
          this.getListCodeTool()
          //工具列表
          this.getListTool()
          // 清空选中状态
          this.selectedCodeRows = []
        } else {
          Message.error(res.message || '批量上架失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          Message.error('网络错误，批量上架失败')
        }
      }
    },



    // 关闭数量工具对话框
    handleNumberDialogClose() {
      this.numberDialogVisible = false
      this.selectedNumberRows = []
      this.numberSearchParams = {
        fourthParentName: '',
        greatGrandparentName: '',
        parentTypeName: '',
        typeName: '',
        pageSize: 10,
        pageNum: 1
      }
    },

    // 关闭编码工具对话框
    handleCodeDialogClose() {
      this.codeDialogVisible = false
      this.selectedCodeRows = []
      this.codeSearchParams = {
        fourthParentName: '',
        greatGrandparentName: '',
        parentTypeName: '',
        typeName: '',
        toolCode: '',
        pageSize: 10,
        pageNum: 1
      }
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.searchParams.pageSize = val
      this.getListTool()
    },

    // 当前页码改变
    handleCurrentChange(val) {
      this.searchParams.pageNum = val
      this.getListTool()
    },

    // 数量工具分页大小改变
    handleNumberSizeChange(val) {
      this.numberSearchParams.pageSize = val
      this.getListNumberTool()
    },

    // 数量工具当前页码改变
    handleNumberCurrentChange(val) {
      this.numberSearchParams.pageNum = val
      this.getListNumberTool()
    },

    // 编码工具分页大小改变
    handleCodeSizeChange(val) {
      this.codeSearchParams.pageSize = val
      this.getListCodeTool()
    },

    // 编码工具当前页码改变
    handleCodeCurrentChange(val) {
      this.codeSearchParams.pageNum = val
      this.getListCodeTool()
    }
  }
}
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
::v-deep .upload-tip .el-form-item__label {
  color: transparent;
}

.el-pagination {
  justify-content: flex-end;
  padding: 5px 0;
}

::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: #3cb4a6;
}

::v-deep .el-form--inline .el-form-item {
  margin-right: 6px;
  width: 95%;
}

.img-list {
  display: flex;
  align-items: center;

  .img-items {
    width: 100px;
    height: 100px;
    margin-right: 8px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .mask-img {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
      opacity: 0.5;
      display: flex;
      align-items: center;
      justify-content: center;

      .delete-icon {
        font-size: 20px;
        cursor: pointer;
        z-index: 9;
        color: #fff;
      }
    }
  }

  .img-items:hover .mask-img {
    visibility: visible;
  }
}

.app-container-content {
  ::v-deep .el-dialog {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 100vh !important;

    .el-dialog__body {
      flex: 1;
      overflow-y: scroll !important;
      padding: 20px 40px;
    }

    .dialog-content {
      padding: 20px;
    }
  }
}

.search-box {
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 0;

  ::v-deep .el-card__body {
    padding: 20px !important;
  }
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

.content-box {
  border-radius: 8px;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  ::v-deep .el-card__body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 20px;
  }

  .el-row:first-child {
    margin-bottom: 16px;
    flex-shrink: 0;

    .el-col {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
  }

  .table-container {

    overflow: hidden;
    margin-bottom: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .pagination-wrapper {
    flex-shrink: 0;
    padding-top: 6px;
    margin-top: auto;
    text-align: right;

    ::v-deep .pagination-container {
      padding: 0px 20px !important;
      margin-bottom: 30px;
    }
  }

  ::v-deep .el-table {
    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important;
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 50px;
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
      background-color: #CCF1E9 !important;
    }
  }
}

.dialog-table {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  ::v-deep .el-table {
    border-radius: 6px;
    overflow: hidden;

    &.el-table--striped .el-table__body {
      tr.el-table__row--striped td {
        background-color: #F6FBFA !important;
      }
    }

    .el-table__header {
      background: #E9F0EE;

      th {
        background: #E9F0EE !important;
        color: #606266;
        font-weight: 600;
        height: 45px;
        font-size: 14px;
        border-bottom: 2px solid #e4e7ed;
      }
    }

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

        &:hover {
          background-color: #f8f9fa;
        }

        td {
          padding: 12px 8px;
          font-size: 13px;
          border-bottom: 1px solid #f0f2f5;
        }
      }
    }

    &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
      background-color: #CCF1E9 !important;
    }

    &::before {
      display: none;
    }

    &::after {
      display: none;
    }
  }
}

.simple-dialog {
  .el-dialog__header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    padding: 10px 20px;
    border-top: 1px solid #eee;
    text-align: right;
  }
}

.simple-form {
  .el-form-item {
    margin-bottom: 15px;

    .el-form-item__label {
      color: #333;
      padding-right: 10px;

      &::before {
        content: '*';
        color: #ff4d4f;
        margin-right: 4px;
      }

      &.no-required::before {
        content: '';
        margin-right: 0;
      }
    }
  }

  .el-input, .el-select, .el-date-picker {
    width: 100%;
  }

  .el-textarea {
    width: 100%;

    &:focus {
      border-color: #1890ff;
    }
  }
}

.dialog-footer {
  .cancel-btn {
    margin-right: 10px;
  }

  .confirm-btn {
    background-color: #1890ff;
    border-color: #1890ff;
  }
}
</style>



