<!-- 编辑服务计划弹窗 -->
<template>
  <el-dialog
    title="编辑服务计划"
    :visible.sync="visible"
    width="90%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleDialogClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="服务单号" prop="orderNo">
            <el-input v-model="form.orderNo" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单人" prop="createId">
            <el-select
              v-model="form.createId"
              placeholder="请选择下单人"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in installerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单时间" prop="orderTime">
            <el-date-picker
              v-model="form.orderTime"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 100%"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="服务人员" prop="serviceStaffIds">
            <el-select
              v-model="form.serviceStaffIds"
              multiple
              filterable
              clearable
              placeholder="请选择服务人员"
              @change="handleServiceStaffChange"
              style="width: 100%"
            >
              <el-option
                v-for="item in installerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="预计完成时间" prop="estimatedCompleteTime">
            <el-date-picker
              v-model="form.estimatedCompleteTime"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              clearable
              :picker-options="{
                disabledDate: (time) => {
                  const todayStart = new Date();
                  todayStart.setHours(0, 0, 0, 0); // 获取当天 00:00:00.000
                  return time.getTime() < todayStart.getTime();
                },
              }"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发货单号" prop="deliveryNo">
            <el-input v-model="form.deliveryNo" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同" prop="contractNo">
            <el-input v-model="form.contractNo" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="客户" prop="customer">
            <el-input
              v-model="form.customerName"
              disabled
              placeholder="客户名称"
              style="width: 400px !important"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          v-model="form.remark"
          :rows="2"
          placeholder="请输入备注信息"
        />
      </el-form-item>

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="选择货品">
            <el-select
              v-model="selectedProduct"
              filterable
              remote
              reserve-keyword
              placeholder="请输入货品名称搜索"
              :loading="productLoading"
              style="width: 600px !important"
              :remote-method="handleProductInput"
              @change="handleProductChange"
              @focus="handleProductInput('')"
            >
              <el-option
                v-for="item in productOptions"
                :key="item.id"
                :value="item.id"
              >
                <template>
                  <div class="product-option">
                    <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.goodsName"
                        placement="top"
                        :disabled="item.goodsName.length <= 10"
                        effect="light"
                      >
                        <span class="value">{{ item.goodsName }}</span>
                      </el-tooltip>
                    </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 class="option-item">
                      <span class="label">型号</span>
                      <el-tooltip
                        :content="item.goodsModel"
                        placement="top"
                        :disabled="
                          !item.goodsModel || item.goodsModel.length <= 5
                        "
                        effect="light"
                      >
                        <span class="value">{{ item.goodsModel || "-" }}</span>
                      </el-tooltip>
                    </div>
                    <div class="option-item">
                      <span class="label">单位</span>
                      <span class="value">{{ item.goodsUnit || "-" }}</span>
                    </div>
                    <div class="option-item">
                      <span class="label">库存</span>
                      <span class="value">{{ item.stock || 0 }}</span>
                    </div>
                  </div>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label-width="120px">
        <el-table :data="form.products" border style="width: calc(100% - 20px)">
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          />
          <el-table-column label="服务项目" align="center" width="200">
            <template slot-scope="scope">
              <el-tooltip
                :content="
                  projectOptions.find((p) => p.id === scope.row.projectId)
                    ?.name || ''
                "
                placement="top"
                :disabled="
                  !scope.row.projectId ||
                  projectOptions.find((p) => p.id === scope.row.projectId)?.name
                    ?.length <= 8
                "
                effect="light"
              >
                <el-select
                  v-model="scope.row.projectId"
                  placeholder="请选择服务项目"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in projectOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                    <el-tooltip
                      :content="item.name"
                      placement="right"
                      :disabled="item.name.length <= 8"
                      effect="light"
                    >
                      <span class="ellipsis-text">{{ item.name }}</span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsCode"
            label="货品编号"
            align="center"
            width="100"
          />
          <el-table-column
            prop="goodsName"
            label="货品名称"
            align="center"
            width="150"
          />

          <el-table-column
            prop="stock"
            label="现有库存"
            align="center"
            width="60"
          />
          <el-table-column
            prop="orderQuantity"
            label="计划总量"
            align="center"
            width="110"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.orderQuantity"
                size="mini"
                style="width: 70px"
                @input="handleOrderQuantityInput($event, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="shippedQuantity"
            label="已完成量"
            align="center"
            width="70"
          />
          <el-table-column
            prop="unshippedQuantity"
            label="未完成量"
            align="center"
            width="70"
          />
          <el-table-column
            prop="goodsSpecification"
            label="货品规格"
            align="center"
            width="100"
          />
          <el-table-column
            prop="goodsImagePath"
            label="货品图片"
            align="center"
          >
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.goodsImagePath"
                :src="baseApi + scope.row.goodsImagePath"
                style="width: 50px; height: 50px"
                :preview-src-list="[baseApi + scope.row.goodsImagePath]"
                fit="contain"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <div
                v-else
                class="image-slot"
                style="
                  width: 50px;
                  height: 50px;
                  display: inline-flex;
                  justify-content: center;
                  align-items: center;
                  background: #f5f7fa;
                  border-radius: 4px;
                "
              >
                <i
                  class="el-icon-picture-outline"
                  style="font-size: 20px; color: #909399"
                ></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsUnit"
            label="计量单位"
            align="center"
            width="50"
          />
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                size="mini"
                placeholder="备注"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                plain
                @click="handleRemoveProduct(scope.$index)"
                style="padding: 4px 8px; border-radius: 4px"
              >
                <i class="el-icon-delete" style="margin-right: 2px" />
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">保存并关闭</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { GetDataByName, GetDataByNames, ExecDataByConfig } from "@/api/common";

export default {
  name: "EditDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    installerOptions: {
      type: Array,
      default: () => [],
    },
    projectOptions: {
      type: Array,
      default: () => [],
    },
    currentUser: {
      type: Object,
      default: () => ({
        id: "",
        name: "",
      }),
    },
    rowData: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    baseApi() {
      return process.env.VUE_APP_BASE_API;
    },
  },
  watch: {
    visible(val) {
      if (val) {
        // 弹窗打开时初始化数据
        this.$nextTick(async () => {
          await this.getOrderData();
          this.getInitialData();
          // 设置默认选中的服务人员
          if (this.rowData.serviceStaffIds) {
            this.form.serviceStaffIds = this.rowData.serviceStaffIds
              .split(",")
              .map((id) => parseInt(id.trim()));
            this.previousServiceStaffIds = [...this.form.serviceStaffIds]; // 保存初始状态
          }
        });
      }
    },
  },
  data() {
    return {
      form: {
        orderNo: "",
        orderTime: "",
        createId: "",
        createName: "",
        serviceStaffIds: [],
        estimatedCompleteTime: "",
        deliveryNo: "",
        contractNo: "",
        customerName: "",
        remark: "",
        products: [],
      },
      previousServiceStaffIds: [], // 上一次选择的服务人员
      customerOptions: [], // 客户选项
      loading: false, // 客户加载状态
      selectedProduct: "", // 当前选中的货品
      productOptions: [], // 货品选项
      productLoading: false, // 货品加载状态

      // 表单校验规则
      rules: {
        createId: [
          { required: true, message: "请选择下单人", trigger: "change" },
        ],
        serviceStaffIds: [
          { required: true, message: "请选择服务人员", trigger: "change" },
        ],
        estimatedCompleteTime: [
          { required: true, message: "请选择预计完成时间", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    async handleServiceStaffChange(newValue) {
      // 找出被删除的 ID（只会有一个）
      const removedId = this.previousServiceStaffIds.find(
        (id) => !newValue.includes(id)
      );

      // 如果有被删除的 ID
      if (removedId) {
        // 获取被删除人员的名称
        const removedStaff = this.installerOptions.find(
          (item) => item.value === removedId
        );

        const params = {
          name: "checkIsDoOrderByUserId",
          returntype: "Map",
          parammaps: {
            orderId: this.rowData.id,
            userId: removedId,
          },
        };

        try {
          const response = await GetDataByName(params);
          if (!response) {
            throw new Error("接口返回数据为空");
          }
          if (response.data.list && response.data.list[0].result === "1") {
            this.$message.warning(
              `不能移除， ${removedStaff?.label || "当前服务人员"} 已开始服务`
            );
            // 恢复选中状态
            this.$nextTick(() => {
              this.form.serviceStaffIds = [...this.previousServiceStaffIds];
            });
            return;
          }
        } catch (error) {
          console.error("数据处理失败:", error);
        }
      }

      // 如果检查通过，更新上一次的选择状态
      this.previousServiceStaffIds = [...newValue];
    },
    // 获取订单数据
    async getOrderData() {
      try {
        const params = [
          {
            name: "getInstallationOrderById",
            returntype: "Map",
            parammaps: {
              id: this.rowData.id,
            },
          },
          {
            name: "getInstallationOrderDetail",
            returntype: "Map",
            parammaps: {
              orderId: this.rowData.id,
            },
          },
        ];

        const response = await GetDataByNames(params);
        if (response.msg === "ok") {
          const mainData = response.data.getInstallationOrderById.list[0] || {};
          const detailData =
            response.data.getInstallationOrderDetail.list || [];

          this.form = {
            orderNo: mainData.orderNo || "",
            orderTime: mainData.orderTime ? new Date(mainData.orderTime) : "",
            createId: parseInt(mainData.createId) || null,
            createName: mainData.createName || "",
            serviceStaffIds: mainData.serviceStaffIds
              ? mainData.serviceStaffIds.split(",").map((id) => parseInt(id))
              : [],
            estimatedCompleteTime: mainData.estimatedCompleteTime || "",
            deliveryNo: mainData.deliveryNo || "",
            contractNo: mainData.contractNo || "",
            customerName: mainData.customerName || "",
            remark: mainData.remark || "",
            products: detailData.map((item) => ({
              goodsId: item.goodsId,
              goodsCode: item.goodsCode || "",
              goodsName: item.goodsName || "",
              goodsSpecification: item.goodsSpecification || "",
              goodsImagePath: item.goodsImagePath || "",
              goodsUnit: item.goodsUnit || "",
              stock: item.stock || 0,
              orderQuantity: item.orderQuantity || 0,
              shippedQuantity: item.shippedQuantity || 0,
              unshippedQuantity: item.unshippedQuantity || 0,
              remark: item.remark || "",
              projectId: parseInt(item.projectId) || "",
              projectName: item.projectName || "",
            })),
          };
        } else {
          this.$message.error("获取数据失败");
        }
      } catch (error) {
        console.error("获取数据失败:", error);
        this.$message.error("获取数据失败");
      }
    },

    // 获取客户信息
    handleCustomerInput(value) {},

    // 关闭弹窗
    handleDialogClose() {
      this.$emit("update:visible", false);
      this.$refs.form && this.$refs.form.resetFields();
      this.form.products = [];
      this.previousServiceStaffIds = []; // 重置上一次的选择状态
    },

    // 取消
    handleCancel() {
      this.handleDialogClose();
    },

    getInitialData() {
      // 获取客户信息
      this.handleCustomerInput("");
    },

    // 移除货品
    handleRemoveProduct(index) {
      // TO DO 验证该货品是否开始服务，如果有服务则不能删除
      this.form.products.splice(index, 1);
    },

    // 处理货品输入搜索
    handleProductInput(value) {
      this.productLoading = true;
      const send_select_list = {
        name: "getGoodsListByCode",
        returntype: "Map",
        parammaps: {
          goodsCode: value || "",
        },
      };

      GetDataByName(send_select_list)
        .then((response) => {
          this.productOptions = response.data.list || [];
        })
        .catch((error) => {
          console.error("搜索货品失败:", error);
          this.$message.error("搜索货品失败");
        })
        .finally(() => {
          this.productLoading = false;
        });
    },

    // 处理货品选择变化
    handleProductChange(value) {
      const selectedProduct = this.productOptions.find(
        (item) => item.goodsId === value
      );
      if (selectedProduct) {
        // 检查是否已经添加过该货品
        // const existingProduct = this.form.products.find(
        //   (item) => item.goodsId === selectedProduct.goodsId
        // );
        // if (existingProduct) {
        //   this.$message.warning("该货品已经添加过了");
        //   this.selectedProduct = "";
        //   return;
        // }

        // 添加新货品到表格
        this.form.products.push({
          goodsId: selectedProduct.goodsId,
          goodsCode: selectedProduct.goodsCode,
          goodsName: selectedProduct.goodsName,
          goodsSpecification: selectedProduct.goodsSpecification,
          goodsImagePath: selectedProduct.goodsImagePath || "",
          goodsUnit: selectedProduct.goodsUnit,
          stock: selectedProduct.stock || 0,
          orderQuantity: 1,
          shippedQuantity: 0,
          unshippedQuantity: 0,
          remark: "",
          projectId: "",
          projectName: "",
        });
      }
      this.selectedProduct = ""; // 清空选择
    },

    // 处理订单数量输入
    handleOrderQuantityInput(value, row) {
      // 只允许输入正整数
      value = value.replace(/[^\d]/g, "");
      if (value === "") {
        row.orderQuantity = 1;
      } else {
        const num = parseInt(value);
        row.orderQuantity = num || 1;
      }
    },

    // 提交表单
    async handleSubmit() {
      this.$refs.form.validate(async (valid, errorFields) => {
        if (valid) {
          try {
            // 检查是否添加了货品
            if (this.form.products.length === 0) {
              this.$message.warning("请至少添加一个货品");
              return;
            }

            // 检查每个货品的必填项
            const invalidProducts = this.form.products.filter(
              (item) =>
                !item.orderQuantity ||
                parseInt(item.orderQuantity) <= 0 ||
                !item.projectId
            );

            if (invalidProducts.length > 0) {
              this.$message.warning(
                "请确保所有货品都已填写服务项目和订单数量（且数量大于0）"
              );
              return;
            }

            // 检查服务项目+货品名称的唯一性
            const duplicateCheck = new Map();
            const duplicateItems = [];

            this.form.products.forEach((item) => {
              const key = `${item.projectId}_${item.goodsName}`;
              if (duplicateCheck.has(key)) {
                duplicateItems.push({
                  goodsName: item.goodsName,
                  projectName:
                    this.projectOptions.find((p) => p.id === item.projectId)
                      ?.name || "",
                });
              } else {
                duplicateCheck.set(key, true);
              }
            });

            if (duplicateItems.length > 0) {
              const duplicateInfo = duplicateItems
                .map((item) => `【${item.projectName} - ${item.goodsName}】`)
                .join("、");
              this.$message.warning(
                `以下服务项目和货品组合重复，请检查：${duplicateInfo}`
              );
              return;
            }

            // 构建保存参数
            const params = {
              common: {
                returnmap: "0",
              },
              data: [
                {
                  name: "updateInstallationOrder",
                  type: "e",
                  parammaps: {
                    id: this.rowData.id,
                    totalQuantity: this.form.products.reduce(
                      (sum, item) => sum + parseInt(item.orderQuantity || 0),
                      0
                    ),
                    uninstalledQuantity: this.form.products.reduce(
                      (sum, item) => sum + parseInt(item.orderQuantity || 0),
                      0
                    ),
                    createId: this.form.createId,
                    createName:
                      this.installerOptions.find(
                        (item) => item.value === this.form.createId
                      )?.label || "",
                    serviceStaffNames: this.installerOptions
                      .filter((item) =>
                        this.form.serviceStaffIds.includes(item.value)
                      )
                      .map((item) => item.label)
                      .join(","),
                    serviceStaffIds: this.form.serviceStaffIds.join(","),
                    estimatedCompleteTime:
                      this.form.estimatedCompleteTime || "",
                    remark: this.form.remark || "",
                  },
                },
                {
                  name: "deleteInstallationOrderDetailByOrderId",
                  type: "e",
                  parammaps: {
                    orderId: this.rowData.id,
                  },
                },
                {
                  name: "insertInstallationOrderDetail",
                  resultmaps: {
                    list: this.form.products.map((item) => ({
                      projectId: item.projectId,
                      goodsId: item.goodsId,
                      goodsName: item.goodsName,
                      orderQuantity: parseInt(item.orderQuantity || 0),
                      shippedQuantity: 0,
                      unshippedQuantity: parseInt(item.orderQuantity || 0),
                      remark: item.remark || "",
                    })),
                  },
                  children: [
                    {
                      name: "insertInstallationOrderDetail",
                      type: "e",
                      parammaps: {
                        projectId: "@insertInstallationOrderDetail.projectId",
                        goodsId: "@insertInstallationOrderDetail.goodsId",
                        goodsName: "@insertInstallationOrderDetail.goodsName",
                        orderQuantity:
                          "@insertInstallationOrderDetail.orderQuantity",
                        remark: "@insertInstallationOrderDetail.remark",
                        shippedQuantity:
                          "@insertInstallationOrderDetail.shippedQuantity",
                        unshippedQuantity:
                          "@insertInstallationOrderDetail.unshippedQuantity",
                        orderId: this.rowData.id,
                      },
                    },
                  ],
                },
                {
                  name: "refreshInstallationOrderDetailQuantity",
                  type: "e",
                  parammaps: {
                    orderId: this.rowData.id,
                  },
                },
                {
                  name: "refreshInstallationOrderProcessByOrderId",
                  type: "e",
                  parammaps: {
                    orderId: this.rowData.id,
                  },
                },
                {
                  name: "insertInstallationOrderProcessLog",
                  type: "e",
                  parammaps: {
                    orderId: this.rowData.id,
                    operationType: "edit",
                    operationUserId: this.currentUser.id,
                    operationUserName: this.currentUser.name,
                    beforeStatus: this.rowData.statusName,
                    afterStatus: "未接单",
                    operationContent: "编辑服务工单",
                  },
                },
              ],
            };

            // 调用保存接口
            const response = await ExecDataByConfig(params);
            if (response.msg === "ok") {
              this.$message.success("保存成功");
              this.handleDialogClose();
              this.$emit("success");
            } else {
              this.$message.error(response.data || "保存失败");
            }
          } catch (error) {
            console.error("保存失败:", error);
            this.$message.error("保存失败");
          }
        } else {
          // 收集并显示验证错误信息
          const errorMessages = [];
          for (const field in errorFields) {
            const errors = errorFields[field];
            errors.forEach((error) => {
              errorMessages.push(error.message);
            });
          }
          this.$message.error(`表单验证失败：${errorMessages.join("、")}`);
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  border-radius: 8px;

  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
    margin-right: 0;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .el-dialog__body {
    padding: 20px;

    .el-form {
      .el-form-item {
        margin-bottom: 18px;

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

      .el-textarea {
        width: 100%;
      }

      .el-table {
        margin-top: 8px;

        th {
          background-color: #f5f7fa;
          color: #333;
          font-weight: 500;
          padding: 8px 0;
        }

        td {
          padding: 8px 0;
        }
      }
    }
  }

  .el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
    text-align: right;

    .el-button {
      padding: 9px 20px;
      font-size: 13px;
      border-radius: 4px;

      & + .el-button {
        margin-left: 10px;
      }
    }
  }
}

.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: 120px;
    } // 编号
    &:nth-child(2) {
      width: 250px;
    } // 名称
    &: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;
    }
  }
}

:deep(.el-tooltip__popper) {
  max-width: 300px;
  line-height: 1.4;
  padding: 8px 12px;
  font-size: 12px;
  word-break: break-all;
  white-space: pre-wrap;

  &.is-light {
    border: 1px solid #e4e7ed;
    color: #606266;
  }
}

.ellipsis-text {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

:deep(.el-select-dropdown__item) {
  padding: 0 8px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 12px;
}

:deep(.el-select) {
  .el-input__inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
}
</style>
