<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div class="header-title">
        <span class="title">已安装统计</span>
        <span class="update-time">{{ updateTime }}</span>
      </div>
      <div class="filter-container">
        <el-form :inline="true" class="filter-section" size="mini">
          <el-form-item>
            <el-input
              v-model="queryParams.orderNo"
              placeholder="服务单号"
              clearable
              style="width: 140px"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryParams.goodsId"
              filterable
              placeholder="货品名称"
              style="width: 140px !important"
              :filter-method="filterProduct"
            >
              <el-option
                v-for="item in filteredProductOptions"
                :key="item.id"
                :label="item.goodsName"
                :value="item.id"
              >
                <template>
                  <div class="product-option">
                    <div class="option-item">
                      <span class="label">名称</span>
                      <el-tooltip
                        :content="item.goodsName"
                        placement="top"
                        effect="light"
                      >
                        <span class="value">{{ item.goodsName }}</span>
                      </el-tooltip>
                    </div>
                    <div class="option-item">
                      <span class="label">编号</span>
                      <span class="value">{{ item.goodsCode }}</span>
                    </div>

                    <div class="option-item">
                      <span class="label">规格</span>
                      <el-tooltip
                        :content="item.goodsSpecification"
                        placement="top"
                        :disabled="
                          !item.goodsSpecification ||
                          item.goodsSpecification.length <= 5
                        "
                        effect="light"
                      >
                        <span class="value">{{
                          item.goodsSpecification || "-"
                        }}</span>
                      </el-tooltip>
                    </div>
                  </div>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryParams.installUserId"
              filterable
              remote
              reserve-keyword
              placeholder="服务人员"
              :loading="loading"
              style="width: 100px !important"
            >
              <el-option
                v-for="item in personnelOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryParams.customerId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入客户名称搜索"
              :loading="loading"
              style="width: 160px !important"
              :remote-method="handleCustomerInput"
            >
              <el-option
                v-for="item in customerOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="dateRange"
              class="input-datetime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 220px"
            />
          </el-form-item>
          <el-form-item>
            <div class="button-group">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-search"
                @click="handleQuery"
                >查询</el-button
              >
              <el-button
                type="info"
                size="mini"
                icon="el-icon-refresh"
                @click="handleReset"
                >重置</el-button
              >
              <el-button
                type="success"
                size="mini"
                icon="el-icon-download"
                @click="handleExport"
                >导出</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      :data="displayData"
      style="width: 100%"
      border
      size="small"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        prop="orderNo"
        label="服务单号"
        min-width="80"
        align="center"
      >
        <template slot-scope="scope">
          <span class="order-no-text" @click="handleView(scope.row)">
            {{ scope.row.orderNo }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="customerName"
        label="客户名称"
        min-width="80"
        align="center"
      />
      <el-table-column
        prop="acceptTime"
        label="接单时间"
        min-width="70"
        align="center"
      />
      <el-table-column
        prop="actualCompleteTime"
        label="完成时间"
        min-width="70"
        align="center"
      />
      <el-table-column prop="totalQuantity" min-width="50" align="center">
        <template slot="header">
          <span>总计划量</span>
          <el-tooltip
            content="当前工单所有货品数量的总和"
            placement="top"
            effect="light"
          >
            <i
              class="el-icon-question"
              style="margin-left: 4px; color: #909399; cursor: help"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="installedQuantity" min-width="50" align="center">
        <template slot="header">
          <span>总完成量</span>
          <el-tooltip
            content="当前工单所有完成的货品数量的总和"
            placement="top"
            effect="light"
          >
            <i
              class="el-icon-question"
              style="margin-left: 4px; color: #909399; cursor: help"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        prop="plannedTimes"
        label="计划总工时/天"
        min-width="50"
        align="center"
      />

      <el-table-column
        prop="installUserNames"
        label="分配人员"
        min-width="60"
        align="center"
      >
        <template slot-scope="scope">
          <div class="staff-tags">
            <template v-if="scope.row.serviceStaffNames">
              <el-tag
                v-for="(item, index) in scope.row.serviceStaffNames.split(',')"
                :key="index"
                size="mini"
                :type="['primary', 'success', 'warning', 'danger'][index % 4]"
                effect="light"
                :class="{ 'long-text': item.length > 10 }"
              >
                {{ item }}
              </el-tag>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="货品名称"
        min-width="60"
        align="center"
      />
      <el-table-column
        prop="projectName"
        label="项目名称"
        min-width="60"
        align="center"
      />

      <el-table-column prop="goodQuantity" min-width="50" align="center">
        <template slot="header">
          <span>计划数量</span>
          <el-tooltip
            content="当前货品需要服务的数量"
            placement="top"
            effect="light"
          >
            <i
              class="el-icon-question"
              style="margin-left: 4px; color: #909399; cursor: help"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="goodInstallQuantity" min-width="50" align="center">
        <template slot="header">
          <span>完成数量</span>
          <el-tooltip
            content="当前货品服务完成的数量"
            placement="top"
            effect="light"
          >
            <i
              class="el-icon-question"
              style="margin-left: 4px; color: #909399; cursor: help"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="installUserName"
        min-width="50"
        label="服务人员"
        align="center"
      />
      <el-table-column
        prop="serverInstallQuantity"
        min-width="50"
        label="服务数量"
        align="center"
      >
        <template slot="header">
          <span>服务数量</span>
          <el-tooltip
            content="当前服务人员服务完成当前货品的数量"
            placement="top"
            effect="light"
          >
            <i
              class="el-icon-question"
              style="margin-left: 4px; color: #909399; cursor: help"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="serverWorkedTimes" min-width="50" align="center">
        <template slot="header">
          <span>服务工时/天</span>
          <el-tooltip
            content="当前服务人员服务完成当前货品所用的时间"
            placement="top"
            effect="light"
          >
            <i
              class="el-icon-question"
              style="margin-left: 4px; color: #909399; cursor: help"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="completionRate" align="center">
        <template slot="header">
          <span>完成效率</span>
          <el-tooltip
            content="完成效率=服务数量/计划数量*100%"
            placement="top"
            effect="light"
          >
            <i
              class="el-icon-question"
              style="margin-left: 4px; color: #909399; cursor: help"
            ></i>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span :style="{ color: getCompletionRateColor(scope.row) }"
            >{{ scope.row.completionRate }}%</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="productivity" align="center">
        <template slot="header">
          <span>人效</span>
          <el-tooltip
            content="人效=服务数量/服务工时"
            placement="top"
            effect="light"
          >
            <i
              class="el-icon-question"
              style="margin-left: 4px; color: #909399; cursor: help"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 使用服务工单的查看弹窗组件 -->
    <view-dialog
      :visible.sync="dialogVisible"
      :row-data="currentRow"
      :installer-options="personnelOptions"
      :project-options="projectOptions"
      :check-button-permission="() => false"
      :is-current-user-in-service-staff="() => false"
    />
  </el-card>
</template>

<script>
import { GetDataByName, GetDataByNames } from "@/api/common";
import ViewDialog from "@/views/productManagement/installationOrder/components/ViewDialog.vue";
import XLSX from "xlsx";

export default {
  name: "InstallationStatistics",
  components: {
    ViewDialog,
  },
  props: {
    updateTime: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isExpanded: false,
      productOptions: [],
      filteredProductOptions: [],
      productSearchKeyword: "",
      personnelOptions: [],
      customerOptions: [],
      loading: false,
      tableData: [],
      dateRange: [],
      // 查询参数
      queryParams: {
        goodsId: "",
        installUserId: "",
        customerId: "",
        beginDate: "",
        endDate: "",
        orderNo: "",
      },
      spanArr: [], // 第一级合并：服务工单级别
      subSpanArr: [], // 第二级合并：货品级别
      thirdSpanArr: [], // 第三级合并：项目级别
      pos: 0,
      subPos: 0,
      thirdPos: 0,
      dialogVisible: false,
      currentRow: null,
      projectOptions: [], // 添加项目选项数据
    };
  },
  computed: {
    displayData() {
      return this.tableData;
    },
  },
  watch: {
    productOptions: {
      immediate: true,
      handler(val) {
        this.filteredProductOptions = val;
      },
    },
  },
  created() {
    this.initFilterOptions();
    this.initProjectOptions(); // 添加初始化项目选项
    this.getTableData();
  },
  methods: {
    getTableData() {
      console.log("queryParams", this.queryParams);
      const send_select_list = {
        name: "getServicesSummaryList",
        returntype: "Map",
        parammaps: this.queryParams,
      };

      return GetDataByName(send_select_list)
        .then((response) => {
          this.tableData = response.data.list || [];
          this.handleSpanData(); // 处理合并信息
          this.updateTimeHandler(); // 更新时间
        })
        .catch((error) => {
          console.error("获取数据失败:", error);
          this.$message.error("获取数据失败");
          throw error;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    initFilterOptions() {
      const send_select_list = [
        {
          name: "getGoodsListByCode",
          returntype: "Map",
          parammaps: {
            goodsCode: "",
          },
        },
        {
          name: "getEmployeesSelect",
          returntype: "Map",
          parammaps: {},
        },
      ];

      GetDataByNames(send_select_list)
        .then((response) => {
          this.productOptions = response.data.getGoodsListByCode.list || [];
          this.filteredProductOptions = this.productOptions;
          this.personnelOptions = response.data.getEmployeesSelect.list || [];
        })
        .catch((error) => {
          console.error("获取货品和人员选项失败:", error);
          this.$message.error("获取货品和人员选项失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 格式化日期为yyyy-MM-dd
     * @param {Date} date - 日期对象
     * @returns {string} 格式化后的日期字符串
     */
    formatDate(date) {
      if (!date) return "";
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0");
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    getCompletionRateColor(row) {
      if (row.completionRate < 100) {
        return "#F56C6C"; // 红色
      } else if (row.completionRate > 100) {
        return "#67C23A"; // 绿色
      }
      return "#409EFF"; // 蓝色
    },
    handleCustomerInput(value) {
      if (!value) {
        this.customerOptions = [];
        return;
      }
      this.loading = true;
      const send_select_list = {
        name: "getCustomerNameFuzzy",
        returntype: "Map",
        parammaps: {
          inputvalue: value || "",
        },
      };

      GetDataByName(send_select_list)
        .then((response) => {
          this.customerOptions = response.data.list || [];
        })
        .catch((error) => {
          console.error("搜索客户失败:", error);
          this.$message.error("搜索客户失败");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    filterProduct(query) {
      if (query !== "") {
        this.filteredProductOptions = this.productOptions.filter((item) => {
          return item.goodsName.toLowerCase().includes(query.toLowerCase());
        });
      } else {
        this.filteredProductOptions = this.productOptions;
      }
    },
    // 查询按钮点击事件
    handleQuery() {
      this.queryParams.beginDate = this.dateRange?.[0]
        ? this.formatDate(this.dateRange[0])
        : "";
      this.queryParams.endDate = this.dateRange[1]
        ? this.formatDate(this.dateRange[1])
        : "";
      this.getTableData();
    },
    // 重置按钮点击事件
    handleReset() {
      this.queryParams = {
        goodsId: "",
        installUserId: "",
        customerId: "",
        beginDate: "",
        endDate: "",
        orderNo: "",
      };
      this.dateRange = [];
      this.getTableData();
    },
    // 导出功能
    async handleExport() {
      try {
        let excelData = [];
        const params = {
          name: "getServicesSummaryList",
          returntype: "Map",
          parammaps: {},
        };

        const response = await GetDataByName(params);
        if (response && response.data) {
          excelData = response.data.list || [];
        }

        if (excelData.length === 0) {
          this.$message.warning("暂无数据可导出");
          return;
        }

        // 定义表头
        const headers = [
          "序号",
          "服务单号",
          "客户名称",
          "接单时间",
          "完成时间",
          "总计划量",
          "总完成量",
          "计划总工时/天",
          "分配人员",
          "货品名称",
          "项目名称",
          "计划数量",
          "完成数量",
          "服务人员",
          "服务数量",
          "服务工时/天",
          "完成效率",
          "人效",
        ];

        // 格式化数据
        const rows = excelData.map((item, index) => [
          index + 1,
          item.orderNo || "",
          item.customerName || "",
          item.acceptTime || "",
          item.actualCompleteTime || "",
          item.totalQuantity || 0,
          item.installedQuantity || 0,
          item.plannedTimes || 0,
          item.serviceStaffNames || "",
          item.goodsName || "",
          item.projectName || "",
          item.goodQuantity || 0,
          item.goodInstallQuantity || 0,
          item.installUserName || "",
          item.serverInstallQuantity || 0,
          item.serverWorkedTimes || 0,
          item.completionRate ? item.completionRate + "%" : "0%",
          item.productivity || 0,
        ]);

        // 创建工作簿
        const wb = XLSX.utils.book_new();

        // 组合表头和数据
        const wsData = [headers, ...rows];

        // 创建工作表
        const ws = XLSX.utils.aoa_to_sheet(wsData);

        // 设置列宽
        const colWidths = [
          { wch: 8 }, // 序号
          { wch: 15 }, // 服务单号
          { wch: 20 }, // 客户名称
          { wch: 20 }, // 接单时间
          { wch: 20 }, // 完成时间
          { wch: 10 }, // 总计划量
          { wch: 10 }, // 总完成量
          { wch: 15 }, // 计划总工时/天
          { wch: 20 }, // 分配人员
          { wch: 20 }, // 货品名称
          { wch: 20 }, // 项目名称
          { wch: 10 }, // 计划数量
          { wch: 10 }, // 完成数量
          { wch: 15 }, // 服务人员
          { wch: 10 }, // 服务数量
          { wch: 15 }, // 服务工时/天
          { wch: 10 }, // 完成效率
          { wch: 10 }, // 人效
        ];
        ws["!cols"] = colWidths;

        // 添加工作表到工作簿
        XLSX.utils.book_append_sheet(wb, ws, "已安装统计");

        // 生成文件名
        const fileName = `已安装统计_${this.getFormattedDateTime()}.xlsx`;

        // 导出文件
        XLSX.writeFile(wb, fileName);

        this.$message.success("导出成功");
      } catch (error) {
        console.error("导出失败:", error);
        this.$message.error("导出失败");
      }
    },
    // 获取格式化的日期时间
    getFormattedDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}${month}${day}${hours}${minutes}${seconds}`;
    },
    // 处理合并信息
    handleSpanData() {
      this.spanArr = []; // 第一级合并：服务工单级别
      this.subSpanArr = []; // 第二级合并：货品级别
      this.thirdSpanArr = []; // 第三级合并：项目级别
      this.pos = 0;
      this.subPos = 0;
      this.thirdPos = 0;

      const data = this.tableData;

      // 第一级合并计算（服务工单级别）
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前行与上一行是否相同
          if (
            data[i].orderNo === data[i - 1].orderNo &&
            data[i].customerName === data[i - 1].customerName
          ) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }

      // 第二级合并计算（货品级别）
      let lastOrderNo = ""; // 记录上一个工单号
      let lastGoodsName = ""; // 记录上一个货品名称

      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.subSpanArr.push(1);
          lastOrderNo = data[i].orderNo;
          lastGoodsName = data[i].goodsName;
          this.subPos = 0;
        } else {
          // 如果是同一个工单内
          if (data[i].orderNo === lastOrderNo) {
            // 判断当前行与上一行的货品信息是否相同
            if (data[i].goodsName === lastGoodsName) {
              this.subSpanArr[this.subPos] += 1;
              this.subSpanArr.push(0);
            } else {
              this.subSpanArr.push(1);
              this.subPos = i;
              lastGoodsName = data[i].goodsName;
            }
          } else {
            // 新的工单开始
            this.subSpanArr.push(1);
            this.subPos = i;
            lastOrderNo = data[i].orderNo;
            lastGoodsName = data[i].goodsName;
          }
        }
      }

      // 第三级合并计算（项目级别）
      lastOrderNo = "";
      lastGoodsName = "";
      let lastProjectName = "";

      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.thirdSpanArr.push(1);
          lastOrderNo = data[i].orderNo;
          lastGoodsName = data[i].goodsName;
          lastProjectName = data[i].projectName;
          this.thirdPos = 0;
        } else {
          // 如果是同一个工单和货品内
          if (
            data[i].orderNo === lastOrderNo &&
            data[i].goodsName === lastGoodsName
          ) {
            // 判断当前行与上一行的项目信息是否相同
            if (
              data[i].projectName === lastProjectName &&
              data[i].goodQuantity === data[i - 1].goodQuantity &&
              data[i].goodInstallQuantity === data[i - 1].goodInstallQuantity
            ) {
              this.thirdSpanArr[this.thirdPos] += 1;
              this.thirdSpanArr.push(0);
            } else {
              this.thirdSpanArr.push(1);
              this.thirdPos = i;
              lastProjectName = data[i].projectName;
            }
          } else {
            // 新的工单或货品开始
            this.thirdSpanArr.push(1);
            this.thirdPos = i;
            lastOrderNo = data[i].orderNo;
            lastGoodsName = data[i].goodsName;
            lastProjectName = data[i].projectName;
          }
        }
      }
    },

    // 合并单元格方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 第一级合并：服务工单、客户名称、接单时间等
      if (columnIndex <= 7) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      // 第二级合并：货品名称
      else if (columnIndex === 8) {
        const _row = this.subSpanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      // 第三级合并：项目名称、计划数量、完成数量
      else if (columnIndex === 9 || columnIndex === 10 || columnIndex === 11) {
        const _row = this.thirdSpanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 修改查看详情方法
    async handleView(row) {
      // 直接使用当前行数据
      this.currentRow = {
        id: row.id,
        orderNo: row.orderNo,
        customerName: row.customerName,
        projectName: row.projectName,
        acceptTime: row.acceptTime,
        actualCompleteTime: row.actualCompleteTime,
        totalQuantity: row.totalQuantity,
        installedQuantity: row.installedQuantity,
        uninstalledQuantity: row.uninstalledQuantity,
        progress: row.progress,
        serviceStaffNames: row.installUserName,
        // 其他需要的字段...
      };
      this.dialogVisible = true;

      // 获取完整工单信息
      const send_select_list = [
        {
          name: "getInstallationOrderById",
          returntype: "Map",
          parammaps: {
            orderNo: row.orderNo,
          },
        },
        {
          name: "getInstallationOrderDetail",
          returntype: "Map",
          parammaps: {
            orderNo: row.orderNo,
          },
        },
        {
          name: "getInstallationOrderProcessLogByOrderNo",
          returntype: "Map",
          parammaps: {
            orderNo: row.orderNo,
          },
        },
      ];

      try {
        const response = await GetDataByNames(send_select_list);
        if (response.data) {
          // 获取主表数据
          const mainData =
            response.data.getInstallationOrderById.list?.[0] || {};
          // 获取明细表数据
          const detailData =
            response.data.getInstallationOrderDetail.list || [];
          // 获取流程数据
          const processData =
            response.data.getInstallationOrderProcessLogByOrderNo.list || [];

          // 更新当前行数据
          this.currentRow = {
            ...this.currentRow,
            ...mainData,
            products: detailData,
            processData: processData,
          };
        }
      } catch (error) {
        console.error("获取工单详情失败:", error);
        this.$message.error("获取工单详情失败");
      }
    },
    // 初始化项目选项
    async initProjectOptions() {
      const send_select_list = {
        name: "getProjectSelect",
        returntype: "Map",
        parammaps: {},
      };

      try {
        const response = await GetDataByName(send_select_list);
        if (response.data && response.data.list) {
          this.projectOptions = response.data.list.map((item) => ({
            value: item.id,
            label: item.name,
          }));
        }
      } catch (error) {
        console.error("获取项目选项失败:", error);
      }
    },
    // 添加刷新处理方法
    async handleRefresh() {
      try {
        this.loading = true;
        await this.getTableData();
        this.$message.success("刷新成功");
      } catch (error) {
        console.error("刷新失败:", error);
        this.$message.error("刷新失败");
      } finally {
        this.loading = false;
      }
    },

    // 更新时间处理方法
    async getUpdateTime() {
      const now = new Date();
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const seconds = now.getSeconds().toString().padStart(2, "0");
      return `${month}/${day} ${hours}:${minutes}:${seconds}更新`;
    },

    // 修改更新时间的方法
    async updateTimeHandler() {
      const newUpdateTime = await this.getUpdateTime();
      this.$emit("update:updateTime", newUpdateTime);
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;

  .header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;

    .title {
      font-size: 14px;
      font-weight: 500;
    }

    .update-time {
      font-size: 12px;
      color: #999;
      margin-right: 8px;
    }
  }

  .filter-container {
    width: 100%;

    .filter-section {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin: 0;
      gap: 8px;

      .el-form-item {
        margin: 0;

        .button-group {
          display: flex;
          gap: 8px;

          .el-button {
            height: 28px;
            line-height: 26px;
            padding: 0 15px;

            [class^="el-icon-"] {
              margin-right: 5px;
              font-size: 14px;
            }
          }
        }
      }

      .el-select {
        width: 120px;

        &.el-select--medium {
          width: 200px;
        }
      }
    }

    .input-datetime {
      width: 220px;
    }
  }
}

.expand-button {
  text-align: center;
  border-top: 1px solid #ebeef5;
  margin-top: -1px;

  .el-button {
    font-size: 13px;
    color: #909399;
    padding: 8px;

    .button-content {
      display: inline-flex;
      align-items: center;
      position: relative;

      i {
        font-size: 12px;
        color: #c0c4cc;
        transition: all 0.3s;
      }

      .expand-text {
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: all 0.3s ease-in-out;
        opacity: 0;
      }
    }

    &:hover {
      color: #409eff;

      .button-content {
        i {
          color: #409eff;
          margin-right: 4px;
        }

        .expand-text {
          max-width: 100px;
          opacity: 1;
        }
      }
    }
  }
}

:deep(.el-table) {
  font-size: 12px;

  .el-table__header th {
    padding: 8px 0;
    background-color: #f5f7fa;
  }

  .el-table__body td {
    padding: 8px 0;
    background-color: #fff;
  }

  // 添加表格行的hover效果
  .el-table__body tr:hover > td {
    background-color: #f5f7fa !important;
  }
}

// 添加表格内容的过渡效果
:deep(.el-table__body-wrapper) {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-option {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  transition: all 0.25s ease;
  border-radius: 4px;
  margin: 1px;
  position: relative;
  border: 1px solid transparent;
  min-height: 32px;
  box-sizing: border-box;
  z-index: 1;

  &:hover {
    background-color: #f9fafc;
    border-color: #e4e7ed;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    z-index: 2;
  }

  .option-item {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 4px;
    box-sizing: border-box;

    &:not(:last-child) {
      padding-right: 16px;
      margin-right: 4px;

      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        height: 14px;
        width: 1px;
        background-color: #dcdfe6;
        transform: translateY(-50%);
      }
    }
    &:nth-child(1) {
      width: 250px;
    } // 名称
    &:nth-child(2) {
      width: 120px;
    } // 编号

    &:nth-child(3) {
      width: 120px;
    } // 规格
    &:nth-child(4) {
      width: 120px;
    } // 型号
    &:nth-child(5) {
      width: 80px;
    } // 单位
    &:nth-child(6) {
      width: 80px;
    } // 库存

    .label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      color: #409eff;
      background: rgba(64, 158, 255, 0.08);
      padding: 1px 6px;
      border-radius: 3px;
      margin-right: 6px;
      font-size: 12px;
      min-width: 32px;
      height: 18px;
      border: 1px solid rgba(64, 158, 255, 0.2);
      user-select: none;
      white-space: nowrap;
    }

    .value {
      color: #606266;
      font-size: 12px;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
      padding: 0 2px;
      min-width: 0;
    }
  }
}

.order-no-text {
  color: #409eff;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: #66b1ff;
  }
}

.order-detail {
  padding: 20px;

  .detail-section {
    margin-bottom: 24px;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 16px;
      padding-left: 8px;
      border-left: 4px solid #409eff;
    }
  }
}

:deep(.el-dialog__body) {
  padding: 10px 20px;
}

:deep(.el-descriptions) {
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .el-descriptions-item__label {
    background-color: #fafafa;
    padding: 12px 16px;
    margin-right: -1px;
    font-weight: 500;
  }

  .el-descriptions-item__content {
    padding: 12px 16px;
  }
}
</style>
