<template>
  <div class="container">
    <basic-crumb></basic-crumb>
    <div class="pageTitle">订单管理</div>
    <!-- 搜索表单区域 -->
    <div class="english_box">
      <el-form :model="searchForm" class="search-form" @submit.prevent>
        <el-row gutter="15">
          <el-col :span="6">
            <el-form-item label="订单编号" label-width="140px" prop="code">
              <el-input
                v-model="searchForm.code"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单名称" label-width="140px" prop="name">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="客户名称"
              label-width="140px"
              prop="customerName"
            >
              <el-select
                v-model="searchForm.customerName"
                filterable
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in customerList"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.companyName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" label-width="140px" prop="status">
              <el-select
                v-model="searchForm.status"
                placeholder="请选择"
                style="width: 100%"
              >
                <!-- 1-草稿 2-审批中 3-通过 4-驳回 5-完成 6-关闭 -->
                <el-option label="全部" value="" />
                <el-option
                  v-for="item in statusList"
                  :key="item.id"
                  :label="item.dictValue"
                  :value="item.dictKey"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item
              label="交货日期"
              label-width="140px"
              prop="deliveryDate"
            >
              <el-date-picker
                v-model="searchForm.deliveryDate"
                type="date"
                placeholder="年/月/日"
                format="yyyy/MM/dd"
                label-width="100px"
                value-format="yyyy/MM/dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="18" style="display: flex; justify-content: flex-end">
            <el-button size="small" type="primary" @click="handleSearch" class="el-button--big"
              >搜索</el-button
            >
            <el-button size="small" @click="handleReset" class="el-button--big" style="margin:0 40px">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 功能按钮区域 -->
    <div class="function-btns">
      <el-row>
        <el-col :span="18">
          <!-- <el-button type="primary" size="mini" @click="handleGenerateContract">
        生成合同
      </el-button>
      <el-button
        type="primary"
        size="mini"
        style="background-color: #409eff; border-color: #409eff"
        @click="handleGenerateStockList"
      >
        生成备货明细表
      </el-button>
      <el-button
        type="primary"
        size="mini"
        style="background-color: #e6a23c; border-color: #e6a23c"
        @click="handleGenerateDeliveryList"
      >
        生成发货明细表
      </el-button> -->
        </el-col>
        <el-col :span="6" style="display: flex; justify-content: flex-end">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddOrder"
            class="el-button--big"
            style="margin:0 20px"
          >
            新增订单
          </el-button>
        </el-col>
      </el-row>
    </div>
 <!-- :row-class-name="tableRowClassName" -->
    <!-- 订单表格区域 -->
     <div class="table-wrapper">
    <el-table
      :data="orderTableData"
      height="100%"
  border
  :style="{ width: '100%'}"
  :loading="isLoading"
  :header-cell-style="{ 'text-align': 'center' }"
  :cell-style="{ 'text-align': 'center' }"
      @selection-change="selectionChange"

    >
      <el-table-column label="订单编号" prop="code"  width="200"/>
      <el-table-column label="订单名称" prop="name"  width="180" />
      <el-table-column label="客户公司名称" prop="customerName" width="220" />
      <el-table-column label="交货日期" prop="deliveryDate" width="160" />
      <el-table-column label="销售价（元）" prop="sellingPrice"   width="180"/>
      <el-table-column label="分成金额（元）" prop="splitPrice"   width="180"/>
       <el-table-column label="合同价" prop="contractPrice"   width="150"/>
      <el-table-column label="已汇金额" prop="remittedAmount"  width="150" />
      <el-table-column label="待汇金额" prop="unremittedAmount"  width="150"/>
    <el-table-column label="货币单位" width="160">
  <template slot-scope="scope">
    <!-- 调用方法，传入编码获取名称 -->
    {{ getMonetaryUnitText(scope.row.monetaryUnit) }}
  </template>
</el-table-column>
      <el-table-column label="订单日期" prop="orderDate" width="170" />
      <el-table-column label="状态" prop="status" width="160">
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row.status)" class="tag">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="300" fixed="right">
        <template slot-scope="scope">
          <!-- 1-草稿 2-审批中 3-通过 4-驳回 5-完成 6-关闭 -->
          <!-- 草稿状态操作 -->
          <template v-if="scope.row.status == '1'">

            <el-link type="primary" @click="handleEditOrder(scope.row)"
              >修改</el-link
            >
               <el-link type="primary" @click="handleViewOrderDetail(scope.row)"
              >订单详情</el-link
            >
            <el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
              >修改记录</el-link
            >
            <el-link type="primary" @click="handleSubmitReview(scope.row)"
              >提交审批</el-link
            >


          </template>
          <!-- 审批中状态操作 -->
          <template v-else-if="scope.row.status == '2'">
                  <el-link type="primary" @click="handleViewOrderDetail(scope.row)"
              >订单详情</el-link
            >
           <el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
              >修改记录</el-link
            >
          </template>
          <!-- 审批通过状态操作 -->
          <template v-else-if="scope.row.status == '3'">
             <el-link type="primary" @click="handleViewOrderDetail(scope.row)"
              >订单详情</el-link
            >
           <el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
              >修改记录</el-link
            >

            <el-link type="primary" @click="handleFinish(scope.row)"
              >订单完成</el-link
            >
              <el-link type="primary" @click="openUploadDialog(scope.row)"
              >上传水单</el-link
            >
             <el-link type="primary" @click="handleViewReceipt(scope.row)" v-if="scope.row.isWaterBill == 1"
              >查看水单</el-link
            >
          </template>
          <!-- 被驳回状态操作 -->
          <template v-else-if="scope.row.status == '4'">

            <el-link type="primary" @click="handleEditOrder(scope.row)"
              >修改</el-link
            >
                   <el-link type="primary" @click="handleViewOrderDetail(scope.row)"
              >订单详情</el-link
            >
                   <el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
              >修改记录</el-link
            >
            <el-link type="primary" @click="handleCloseOrder(scope.row)"
              >关闭</el-link
            >
            <el-link type="primary" @click="handleResubmitReview(scope.row)"
              >重新提交</el-link
            >


          </template>
          <template v-else-if="scope.row.status == '5'">
                <el-link type="primary" @click="handleViewOrderDetail(scope.row)"
              >订单详情</el-link
            >
       <el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
              >修改记录</el-link
            >

             <el-link type="primary" @click="handleViewReceipt(scope.row)" v-if="scope.row.isWaterBill == 1"
              >查看水单</el-link
            >
          </template>
          <!-- 关闭状态操作 -->
          <template v-else-if="scope.row.status == '6'">
                <el-link type="primary" @click="handleViewOrderDetail(scope.row)"
              >订单详情</el-link
            >
       <el-link type="primary" @click="handleViewChangeLog(scope.row)" v-if="isSuperAdmin"
              >修改记录</el-link
            >


          </template>
        </template>
      </el-table-column>
    </el-table>
</div>
    <!-- 分页区域 -->
    <el-pagination
      style="display: flex; justify-content: flex-end; margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 上传水单弹窗 -->
    <el-dialog
      title="上传水单"
      :visible.sync="uploadDialogVisible"
      width="500px"
      append-to-body
    >
      <el-form
        ref="uploadFormRef"
        :model="uploadForm"
        :rules="uploadFormRules"
        label-width="140px"
      >
        <el-form-item label="名称:" prop="name">
          <el-input
            v-model="uploadForm.name"
            placeholder="请输入名称"
            maxlength="20"
            show-word-limit
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="上传文件:" prop="url" style="width: 300px">
          <el-upload
           class="avatar-uploader"
            ref="upload"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-remove="handleRemoveFile"
            :before-upload="beforeUpload"
            :on-exceed="handleExceed"
            accept=".jpg,.jpeg,.png"
            :limit="1"
            :show-file-list="false"
          >
             <!-- 有图片时显示图片 + 删除按钮 -->
      <div v-if="uploadForm.url" class="avatar-container">
        <img :src="uploadForm.url" class="avatar" />
        <!-- 删除按钮：悬浮显示 -->
        <div class="avatar-delete" @click.stop="handleRemoveFile()">
          <i class="el-icon-delete"></i>
        </div>
      </div>
      <!-- 无图片时显示加号 -->
      <div v-else class="upload-icon-container">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </div>
          </el-upload>
          <!-- <div style="font-size: 12px; color: #999; margin-top: 5px">
            提示：仅支持jpg/jpeg/png格式，文件大小不超过2MB
          </div> -->
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
        class="el-button--big"
          @click="
            uploadDialogVisible = false;
            resetUpload;
          "
          >取消</el-button
        >
        <el-button type="primary" @click="confirmUpload" class="el-button--big" style="margin-left:0 20px"> 确认上传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import basicCrumb from "@/components/basic-crumb/main";
import {
  getCurrencyList,
} from "@/api/order/orderAddEdit";
import { mapGetters } from "vuex";
import website from "@/config/website";
import { getToken } from "@/util/auth";
import { Base64 } from "js-base64";
import {
  getCustomerList,
  fetchOrderList,
  finishOrder,
  saveWaterBill,
  getOrderStatus,
  updateOrder,
} from "@/api/order/orderList";

export default {
  name: "OrderManagement",
  components: {
    basicCrumb,
  },
  data() {
    return {
      // 搜索表单
      searchForm: {},
      // 客户列表（下拉选项）
      customerList: [],
      // 订单表格数据
      orderTableData: [],
      // 分页信息
      total: 0,
      current: 1,
      size: 10,
      // 加载状态
      isLoading: false,
      uploadDialogVisible: false,
      uploadUrl: "/api/blade-resource/oss/endpoint/put-file-attach",
      uploadHeaders: {
        authorization: `Basic ${Base64.encode(
          `${website.clientId}:${website.clientSecret}`
        )}`,
        "blade-auth": "bearer " + getToken(),
      },
      fileList: [],
      currentOrder: null,
      uploadForm: {
        name: "",
        url: "",
      },
      uploadFormRules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "名称长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        url: [{ required: true, message: "请上传水单文件", trigger: "change" }],
      },
      // 状态映射常量（统一管理） 1-草稿 2-审批中 3-通过 4-驳回 5-完成 6-关闭
      statusConfig: {
        1: { text: "草稿", tagType: "info" },
        2: { text: "审批中", tagType: "warning" },
        3: { text: "进行中", tagType: "processing" },
        4: { text: "驳回", tagType: "danger" },
        5: { text: "完成", tagType: "success" },
        6: { text: "关闭", tagType: "gray" },
      },
      monetaryUnitList:[]
    };
  },
  created() {},
  mounted() {
    this.loadCurrencyList();
    // 初始化页面：加载客户列表 + 订单列表
    this.loadCustomerList();
    this.loadOrderList();
    // console.log("this.$route--------订单管理-", this.$route);
    // console.log("this.routeData---------订单管理", this.routeData);
    let arr = [{ name: "工作台", url: "/wel" }];
    this.$store.commit("SET_ROUTE_DATA", arr);
    this.loadStatusList();
  },
 computed: {
    ...mapGetters(["routeData","userInfo"]),
       isSuperAdmin() {
         // 将角色字符串按逗号分割成数组
       const userRoles = this.userInfo.role_name.split(',').map(role => role.trim())
       // 允许的角色列表
       const allowedRoles = ['administrator', 'jinchao']
       // 检查用户角色是否包含允许的角色
       return userRoles.some(role => allowedRoles.includes(role))
  }

  },
  methods: {
      // 加载货币单位列表
    async loadCurrencyList() {
      try {
        const res = await getCurrencyList();
        if (res.data.code === 200) {
          this.monetaryUnitList = res.data.data || [];
        }
      } catch (err) {
        this.$message.error("网络异常，无法加载货币单位列表");
      }
    },
    getMonetaryUnitText(code) {

    if (!code) return "-";
    const unitItem = this.monetaryUnitList.find(item => item.dictKey === code);
    // 匹配到返回名称，未匹配到返回原编码（避免显示空白）
    return unitItem ? unitItem.dictValue : code;
  },

    // 加载订单列表
    async loadOrderList() {
      this.isLoading = true;
      try {
        // 构造请求参数
        const params = {
          ...this.searchForm,
          current: this.current,
          size: this.size,
        };
        const res = await fetchOrderList(params);
        // console.log("res1111", res);
        // console.log("code", res.data.code);

        if (res.data.code === 200) {
          const records = res.data.data.records || [];
          this.orderTableData = records.map((item) => ({
            ...item,
            status: item.status,
            statusText: this.getStatusText(item.status),
          }));
          // 更新分页信息
          this.total = res.data.data.total;
          console.log("orderTableData", this.orderTableData);
        }
      } catch (err) {
        console.log("err", err);
      } finally {
        this.isLoading = false;
      }
    },
    async loadStatusList() {
      try {
        this.statusLoading = true;
        // 调用获取状态列表的接口（可根据需求传参）
        const res = await getOrderStatus();
        if (res.data.code === 200) {
          this.statusList = res.data.data || [];
        } else {
          this.$message.warning("获取订单状态列表失败：" + res.data.msg);
          this.statusList = [];
        }
      } catch (err) {
        console.error("获取订单状态列表异常：", err);
        this.$message.error("获取订单状态列表失败，请重试");
      } finally {
      }
    },

    // 搜索订单
    handleSearch() {
      this.current = 1;
      this.size = 10;
      this.loadOrderList();
    },

    // 清空搜索条件
    handleReset() {
      this.searchForm = {};
      this.current = 1;
      this.size = 10;
      this.loadOrderList();
    },
    tableRowClassName({ row, rowIndex }) {
      // 偶数行添加 alternate-row 类名
      if (rowIndex % 2 === 1) {
        return "alternate-row";
      }
      return "";
    },
    loadCustomerList() {
      getCustomerList({
        current: 1,
        size: 10000000,
      }).then((res) => {
        // this.tableData = res.data.data.records
        this.customerList = res.data.data.records || [];
      });
    },
    async handleFinish(row) {
      try {
        // 点击完成的时候如果待汇不是0 需要提醒一下待汇不为0，是否完成此订单  如果待汇是0 提醒是否完成此订单
        const unremittedAmount = Number(row.unremittedAmount) || 0;
        // 2. 不同场景的确认提示
        let confirmMessage = "";
        if (unremittedAmount !== 0) {
          confirmMessage = `当前订单待汇金额不为0，是否确认完成此订单？`;
        } else {
          confirmMessage = "是否确认完成此订单？";
        }
        // 3. 确认框
        await this.$confirm(confirmMessage, "订单完成确认", {
          type: "warning",
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        });
        // 4. 调用完成订单接口
        const res = await finishOrder({ id: row.id, status: 5 });
        if (res.data.code === 200) {
          this.$message.success("操作成功！");
          this.loadOrderList(); // 刷新列表
        } else {
          this.$message.error(res.data.msg || "订单完成失败");
        }
      } catch (err) {
        console.log('err',err)
      }
    },
    // 打开上传水单弹窗
    openUploadDialog(row) {
      this.currentOrder = row;
      this.uploadDialogVisible = true;
      // 重置表单和文件
      this.resetUpload();
    },
    // 上传前校验
    beforeUpload(file) {
      const isImageOrPdf =
        file.type === "image/jpeg" ||
        file.type === "image/png"
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImageOrPdf) {
        this.$message.error("只能上传图片！");
      }
      if (!isLt2M) {
        this.$message.error("文件大小不能超过2MB！");
      }
      return isImageOrPdf && isLt2M;
    },
    // 新增：文件超出数量限制
    handleExceed(files, fileList) {
      // this.$message.warning(`最多只能上传1个文件`);
    },
    // 上传成功
    handleUploadSuccess(response, file, fileList) {
      console.log("response", response, file, fileList);
      if (response.code === 200) {
        // this.$message.success("文件上传成功");
        // 保存文件链接
        this.uploadForm.url = response.data.link;
      } else {
        this.$message.error(response.msg || "文件上传失败");
      }
    },
    // 上传失败
    handleUploadError(err, file, fileList) {
      this.$message.error("网络异常，上传失败");
    },
    // 移除文件
 handleRemoveFile(file, fileList) {
  // 清空上传表单的url
  this.uploadForm.url = "";
  // 清空fileList
  this.fileList = [];
  // 手动清空上传组件的文件列表
  if (this.$refs.upload) {
    this.$refs.upload.clearFiles();
  }
  // 提示（可选）
  // this.$message.info("已移除上传的文件");
},
    // 重置上传表单和文件
   resetUpload() {
  if (this.$refs.uploadFormRef) {
    this.$refs.uploadFormRef.resetFields();
  }
  if (this.$refs.upload) {
    this.$refs.upload.clearFiles();
  }
  this.fileList = [];
  this.uploadForm = {
    name: "",
    url: "",
  };
},
    // 确认上传
    async confirmUpload() {
      try {
        await this.$refs.uploadFormRef.validate();

        if (!this.uploadForm.url) {
          this.$message.warning("文件上传失败，请重新上传");
          return;
        }
        // 第三步：调用接口保存文件
        const res = await saveWaterBill({
          orderId: this.currentOrder.id,
          name: this.uploadForm.name,
          url: this.uploadForm.url, //
        });

        if (res.data.code === 200) {
          this.$message.success("水单上传成功");
          this.uploadDialogVisible = false;
          this.resetUpload();
          this.loadOrderList(); // 刷新列表
        } else {
          this.$message.error(res.msg || "保存失败");
        }
      } catch (error) {
        // 表单校验失败
        console.error("表单校验失败：", error);
        this.$message.warning("请填写完整的表单信息");
      }
    },

    // 生成合同
    handleGenerateContract() {
      this.$message.info("生成合同功能待实现");
    },

    // 生成备货明细表
    handleGenerateStockList() {
      this.$message.info("生成备货明细表功能待实现");
    },

    // 生成发货明细表
    handleGenerateDeliveryList() {
      this.$message.info("生成发货明细表功能待实现");
    },

    // 新增订单
    handleAddOrder() {
      this.$router.push({
        path: "/order/addEdit",
        query: {
           mode: "add"
        }
       }); // 跳转到新增页面

      let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
      this.$store.commit("SET_ROUTE_DATA", arr);
    },

    // 编辑订单
    handleEditOrder(row) {
      this.$router.push({
        path: `/order/addEdit`, // 带订单ID跳转到编辑页面
        query: {
          id: row.id,
          mode: "edit",
          see:true
        },
      });
      let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
      this.$store.commit("SET_ROUTE_DATA", arr);
    },

    // 查看修改记录
    handleViewChangeLog(row) {
      this.$router.push({
        path: "/order/orderChangeLog",
        query: { code: row.code },
         see:true
      });
      let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
      this.$store.commit("SET_ROUTE_DATA", arr);
    },

    // 提交审核
    async handleSubmitReview(row) {
        try {
        await this.$confirm("确定将订单提交审批吗？", "提示", {
          type: "danger",
        });
        const res = await updateOrder({
          id: row.id,
          status: 2,
        });
        if (res.data.code === 200) {
          this.$message.success("订单提交审批成功");
          this.loadOrderList(); // 刷新订单列表
        } else {
          this.$message.error("订单提交审批失败");
        }
      } catch (err) {}
    },

    // 关闭订单
    async handleCloseOrder(row) {
      try {
        await this.$confirm("确定关闭该订单吗？关闭后将无法继续操作", "警告", {
          type: "danger",
        });
        const res = await updateOrder({
          id: row.id,
          status: 6,
        });
        if (res.data.code === 200) {
          this.$message.success("订单关闭成功");
          this.loadOrderList(); // 刷新订单列表
        } else {
          this.$message.error("关闭订单失败");
        }
      } catch (err) {}
    },

    // 重新提交审核
    async handleResubmitReview(row) {
           try {
        await this.$confirm("确定将订单重新提交吗？", "提示", {
          type: "danger",
        });
        const res = await updateOrder({
          id: row.id,
          status: 2,
        });
        if (res.data.code === 200) {
          this.$message.success("订单重新提交成功");
          this.loadOrderList(); // 刷新订单列表
        } else {
          this.$message.error("订单重新提交失败");
        }
      } catch (err) {}
    },

    // 查看水单
    handleViewReceipt(row) {
      let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
      this.$store.commit("SET_ROUTE_DATA", arr);
      this.$router.push({
        path: "/order/bankReceiptDetail",
        query: { id: row.id },
      });
    },

    // 查看订单详情
    handleViewOrderDetail(row) {
      let arr = [...this.routeData, { name: "订单管理", url: "/order" }];
      this.$store.commit("SET_ROUTE_DATA", arr);
      this.$router.push({
        path: `/order/addEdit`, // 带订单ID跳转到详情页面
        query: {
          id: row.id,
          mode: "view",
          see:true
        },
      });
    },

    // 根据状态编码获取状态文本（统一使用statusConfig）
    getStatusText(status) {
      return this.statusConfig[status] && this.statusConfig[status].text
        ? this.statusConfig[status].text
        : "未知状态";
    },

    // 根据状态获取标签类型（统一使用statusConfig）
    getStatusTagType(status) {
      return this.statusConfig[status] && this.statusConfig[status].tagType
        ? this.statusConfig[status].tagType
        : "gray";
    },

    // 分页：每页条数变更
    handleSizeChange(val) {
      this.size = val;
      this.loadOrderList();
    },
    // 分页：当前页变更
    handleCurrentChange(val) {
      this.current = val;
      this.loadOrderList();
    },
  },
};
</script>
<style scoped lang="scss">
@import '@/styles/variables.scss';
.container {
  width: 100%;
  height:calc(100% - 8px);
  background: rgb(255, 255, 255);
  // margin: 0 auto;
  margin-top: 8px;
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;


  // 页面标题
   .pageTitle{
        // font-size: 26px;
        font-size:$font-size-title;
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }
  .table-wrapper {
    flex: 1;
    // max-height: 600px;
    overflow: auto;

  }
  .english_box {
    width: 98%;
    padding: 10px 10px 0 10px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 10px;

    &.info_box {
      margin-top: 10px;
    }

    .top_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;

      &.info_top {
        border: none;
      }

      &.info_top {
        border: none;
      }

      .top_left {
        // font-size: 26px;
        font-size: 1.4vw;
      }
    }

    .top_bottom {
      margin-top: 10px;

      .el-col {
        margin-bottom: 0px;
      }
    }
  }



  // 功能按钮
  .function-btns {
    margin: 8px 0;

    .el-button {
      margin-right: 10px;
    }
  }

  ::v-deep .el-link {
    margin-right: 8px;
    font-size: 23px;
  }

  ::v-deep .alternate-row {
    background-color: #f2f2f2;
  }

    ::v-deep .el-tag  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size-24 !important;
    // width: 8vw;
    // height: 2.6vw;
    padding: 20px !important;
    // color: #ccc;
    border-radius: 4px;
  }

}
</style>
<style lang="scss">
// 上传水单样式
.avatar-uploader-wrap {
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #fbfdff;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.upload-icon-container {
  width: 178px;
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
.avatar-container {
  width: 178px;
  height: 178px;
  position: relative; // 新增：为删除按钮定位
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
  // object-fit: cover; // 图片自适应
}
// 新增：删除按钮样式
.avatar-delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  display: none; // 默认隐藏
  border-radius: 0 6px 0 0;
}
.avatar-container:hover .avatar-delete {
  display: block; // 悬浮显示
}
</style>
