query.vue

<template>
  <div class="app-container shipping-detail">
    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="22">
        <div style="display: flex; justify-content: space-between;align-items: flex-end;">
          <h2>{{$t('出货详情')}}</h2>
          <div>
            <!-- <el-button size="small" @click="handleCommand('edit')">{{$t('编辑')}}</el-button> -->
            <el-button size="small" v-hasPermi="['shipment:box:action:sea']" @click="handleCommand('router')">{{$t('操作')}}</el-button>
            <el-button type="primary" v-hasPermi="['shipment:box:action:error']" size="small" @click="handleCommand('error')">{{$t('异常登记')}}</el-button>
            <el-button type="primary" v-hasPermi="['shipment:box:action:cost']" size="small" @click="handleCommand('cost')">{{$t('费用登记')}}</el-button>
            <!-- <el-button type="danger" size="small" @click="handleCommand('delete')">{{$t('删除')}}</el-button> -->
          </div>
        </div>
        <el-card style="margin-top: 15px">
          <el-descriptions :column="4" border>
            <el-descriptions-item :label="$t('自编号')">
              {{shipmentObj.selfNo}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('运输方式')">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />
            </el-descriptions-item>
            <!-- <el-descriptions-item :label="$t('出货渠道')">
              {{getShipChannelName(shipmentObj.shippingChannelId)}}
            </el-descriptions-item> -->
            <el-descriptions-item :label="$t('柜型')">
              {{getCabinetLabel(shipmentObj.cabinetId)}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('状态')">
              {{shipmentObj.shipmentStatusText}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('总计')">
              {{getBoxSum(shipmentObj.boxStatistics)}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('始发地')">
              {{getCityName(shipmentObj.startWarehouseId)}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('目的地')">
              {{getCityName(shipmentObj.destWarehouseId)}}
            </el-descriptions-item>
            <el-descriptions-item label="SO NO">
              {{shipmentObj.bookSeaInfo ? shipmentObj.bookSeaInfo.sono : '' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-tabs style="margin-top: 15px" type="border-card" value="detail">
          <el-tab-pane :label="$t('明细')" name="detail">
            <div class="detail-pane">
              <div>{{$t('当前部分')}}：</div>
              <el-select :placeholder="$t('请选择')" v-model="sectionId" @change="sectionChange">
                <el-option key="0" :label="$t('全部')" value="0"></el-option>
                <el-option v-for="item in sectionList" :key="item.id" :label="item.title" :value="item.id"></el-option>
              </el-select>
              <p class="box-weight">
                {{getSectionInfo}}
              </p>
              <div style="margin-left:30px;">
                <el-button type="primary" v-hasPermi="['shipment:box:order:select']" size="small" @click="()=>updateStatus('selected')">{{$t('更新所选订单状态')}}</el-button>
                <el-button type="primary" v-hasPermi="['shipment:box:order:all']" size="small" @click="()=>updateStatus('all')">{{$t('更新全部订单状态')}}</el-button>
              </div>
              <div class="document-status">
                <p>{{$t('单证状态')}}：</p>
                <template v-for="(item, index) in getDocStatus(sectionObj.sectionOrderList)">
                  <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="item" :key="index" />
                </template>
              </div>
            </div>
            <el-table :data="sectionObj.sectionOrderList" style="width: 100%" border @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="50" :selectable="selectable"></el-table-column>>
              <el-table-column align="center" :label="$t('序号')" width="50" prop="tidanNum" />
              <el-table-column prop="orderNo" :label="$t('订单号')" align="center">
                <template v-slot="scope">
                  <a href="javascript:void(0)" @click="jumpOrderDetail(scope.row)">{{ scope.row.orderNo }}</a>
                </template>
              </el-table-column>
              <el-table-column prop="goodsList" :label="$t('货物信息')" width="230px" align="center">
                <template v-slot="{row}">
                  <section>
                    <div v-for="(item, index) in row.goodsList" :key="index">
                      {{index+1}}：{{item.prodTitleZh}}
                    </div>
                  </section>
                </template>
              </el-table-column>
              <el-table-column prop="num" :label="$t('计划箱数')" align="center"></el-table-column>
              <el-table-column prop="installNum" :label="$t('实装箱数')" align="center"></el-table-column>
              <el-table-column prop="unloadNum" :label="$t('卸柜箱数')" align="center"></el-table-column>
              <el-table-column prop="destWarehouseName" :label="$t('提货点')" align="center"></el-table-column>
              <el-table-column prop="volume" :label="$t('体积')" align="center"></el-table-column>
              <el-table-column prop="weight" :label="$t('重量')" align="center"></el-table-column>
              <el-table-column prop="totalWorth" :label="$t('货值')" align="center"></el-table-column>
              <el-table-column prop="customsType" :label="$t('报关方式')" align="center">
                <template slot-scope="scope">
                  <div :class="scope.row.customsType !== 1 ? 'customsType-red' : ''">
                    <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="scope.row.customsType" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="customsFee" :label="$t('报关费用')" align="center"></el-table-column>
              <el-table-column prop="" :label="$t('操作')" align="center" width="120px">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" :disabled="scope.row.abnormalDealStatus === 1" @click="()=>updateStatus('single', scope.row)">{{$t('更新状态')}}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('状态')" name="status">
            <div v-for="(item, index) in logList" :key="item.id" :class="`shipping-status ${index === 0 ? 'curr-status' : '' }`">
              <div class="status-line"></div>
              <div class="status-number">{{logList.length - index}}</div>
              <div class="status-info">
                <div>{{$l(item, 'title')}}</div>
                <div>
                  <p>{{formatDate(item.createTime)}}</p>
                  <p>{{item.operator}}</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('费用')" name="fee">
            <el-table :data="costList" style="width: 100%" border>
              <el-table-column type="index" align="center" :label="$t('序号')" width="50" />
              <el-table-column prop="costType" :label="$t('费用类型')" align="center">
                <template slot-scope="scope">
                  <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="scope.row.costType" />
                </template>
              </el-table-column>
              <el-table-column prop="supplierId" :label="$t('供应商')" align="center">
                <template slot-scope="scope">
                  {{getSupplier(scope.row.supplierId)}}
                </template>
              </el-table-column>
              <el-table-column prop="price" :label="$t('金额')" align="center"></el-table-column>
              <el-table-column prop="payPrice" :label="$t('实付金额')" align="center"></el-table-column>
              <el-table-column prop="payTime" :label="$t('实付日期')" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.payTime">{{formatDate(scope.row.payTime)}}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('操作')" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="editCostClick(scope.row)" style="marginRight:10px;" v-hasPermi="['ecw:box-cost:update']">{{$t('编辑')}}</el-button>
                  <el-popconfirm :title="$t('确定是否删除')" @confirm="deleteCostClick(scope.row)">
                    <el-button type="danger" size="small" slot="reference" v-hasPermi="['ecw:box-cost:delete']">{{$t('删除')}}</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('异常')" name="error">
            <el-table :data="errorList" style="width: 100%" border>
              <el-table-column type="index" align="center" :label="$t('序号')" width="50" />
              <el-table-column prop="opStep" :label="$t('操作')" align="center">
                <template slot-scope="scope">
                  <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PROCESS" :value="scope.row.opStep" />
                </template>
              </el-table-column>
              <el-table-column prop="billAbnId" :label="$t('异常')" align="center">
                <template slot-scope="scope">
                  <dict-tag :type="DICT_TYPE.BOX_SHIPPING_TICKET_EXCEPTION" :value="scope.row.billAbnId" />
                </template>
              </el-table-column>
              <el-table-column prop="abnDetail" :label="$t('异常描述')" align="center" width="300"></el-table-column>
              <el-table-column prop="delayDays" :label="$t('异常延迟天数')" align="center"></el-table-column>
              <el-table-column prop="" :label="$t('异常时间')" align="center" width="200">
                <template slot-scope="scope">
                  <span v-if="scope.row.abnStartTime">{{formatDate(scope.row.abnStartTime)}} - </span>
                  <span v-if="scope.row.abnEndTime">{{formatDate(scope.row.abnEndTime)}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('表单')" name="download">
            <el-table :data="downloadList" style="width: 50%">
              <el-table-column prop="title" :label="$t('文件类型')"></el-table-column>
              <el-table-column prop="" :label="$t('下载链接')">
                <template slot-scope="scope">
                  <a v-if="scope.row.serviceName" href="javascript:void(0)" @click="downloadDetailFile(scope.row)" v-hasPermi="[`${scope.row.hasPermi}`]">{{$t('下载')}}</a>
                  <div v-else>{{$t('未完成')}}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogConfig.title" :visible.sync="dialogConfig.visible" :width="dialogConfig.width" append-to-body class="shippingSea-dialog">
      <template v-if="dialogConfig.type === 'edit'">
        <editForm v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :warehouseList="warehouseList" :transportTypes="transportTypes" :cabinetList="cabinetList" />
      </template>
      <template v-if="dialogConfig.type === 'cost'">
        <costForm v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :costDetail="costDetail" />
      </template>
      <template v-if="dialogConfig.type === 'error'">
        <regError v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :allUsers="allUsers" />
      </template>
      <template v-if="dialogConfig.type === 'updateError'">
        <updateError v-if="dialogConfig.visible" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :errorInfo="errorInfo" />
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getbox,
  getLogList,
  getCostList,
  getAbnormalList,
  deleteCost,
  deletebox,
} from "@/api/ecw/box";
import { getChannelList } from "@/api/ecw/channel";
import { getCabinetPage } from "@/api/ecw/cabinet";
import { getWarehouseList } from "@/api/ecw/warehouse";
import {
  getTotlContent,
  formatDate,
  serviceMsg,
  downloadFile,
  downloadFileByUrl,
} from "./shippingSea/utils";
import { getSectionList, boxGoodsDetail } from "@/api/ecw/boxSea";
import { getSupplierPage } from "@/api/ecw/supplier";
import costForm from "./costForm.vue";
import regError from "./regError.vue";
import editForm from "./editForm.vue";
import updateError from "./updateError.vue";
import { listUser } from "@/api/system/user";

export default {
  name: "boxDetail",
  props: {
    shipmentId: String,
  },
  components: {
    costForm,
    regError,
    editForm,
    updateError,
  },
  created() {
    this.transportTypes = this.getDictDatas(
      this.DICT_TYPE.ECW_TRANSPORT_TYPE
    ).filter((item) => item.value == "1" || item.value == "2");
    this.initData();
    this.queryAllData();
    // 用户
    listUser({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allUsers = data.list ?? [];
    });
  },
  data() {
    return {
      // 出货对象
      shipmentObj: {},
      // 渠道
      channelList: [],
      // 柜型
      cabinetList: [],
      // 仓库
      warehouseList: [],
      // 供应商
      allSupplier: [],
      allUsers: [],
      // 部分list
      sectionList: [],
      // 单证数组
      docStatus: [],
      // 操作日志
      logList: [],
      // 费用
      costList: [],
      // 异常
      errorList: [],
      // 部分订单商品
      sectionObj: {
        secStatistics: {},
        sectionOrderList: [],
        totalStatistics: {},
      },
      // 部分ID
      sectionId: "0",
      // 弹窗配置
      dialogConfig: {
        visible: false,
        title: "",
        width: "600px",
        type: "",
      },
      // 运输方式
      transportTypes: [],
      // 费用详情
      costDetail: {},
      // 下载
      downloadList: [
        { title: this.$t("预装单"), serviceName: "downloadPreloadGoodsList", hasPermi: "shipment:box:download:downloadPreloadGoodsList" },
        { title: this.$t("已装单"), serviceName: "downloadLoadGoodsList", hasPermi: "shipment:box:download:downloadLoadGoodsList" },
        { title: this.$t("应收汇总表"), serviceName: "downloadReceivableList", hasPermi: "shipment:box:download:downloadReceivableList" },
        {
          title: this.$t("提货单"),
          serviceName: "zipDownload",
          fileFormat: "zip",
          hasPermi: "shipment:box:download:zipDownload"
        },
        {
          title: "agent list",
          serviceName: "downloadAgentListFiles",
          type: "url",
          hasPermi: "shipment:box:download:downloadAgentListFiles"
        },
        { title: "soncap", serviceName: "downloadSoncapFiles", type: "url", hasPermi: "shipment:box:download:downloadSoncapFiles" },
        {
          title: this.$t("提单Copy"),
          serviceName: "downloadLadingCopy",
          type: "url",
          hasPermi: "shipment:box:download:downloadLadingCopy"
        },
      ],
      // 选中行
      selectedRows: [],
      // 修改异常
      errorInfo: {
        orderList: [],
        errorType: "",
        operate: "",
      },
    };
  },
  methods: {
    selectable(row, index) {
      if (row.abnormalDealStatus === 1) return false;
      return true;
    },
    /* 全选 */
    handleSelectionChange(selected) {
      this.selectedRows = selected;
    },
    /* 更新状态 */
    updateStatus(type, row) {
      let orders = [];
      if (type === "selected") {
        if (!this.selectedRows.length) {
          this.$message.error("请选择需要更新的订单");
          return;
        }
        orders = this.selectedRows;
      } else if (type === "all") {
        // 筛选未处理的订单
        orders = this.sectionObj.sectionOrderList.filter(
          (item) => item.abnormalDealStatus === 0
        );
        if (!orders.length) {
          this.$message.error("没有订单需要更新");
          return;
        }
      } else if (type === "single") {
        orders = [row];
      }
      this.getErrorType();
      this.$set(this.errorInfo, "orderList", orders);
      this.$set(this.errorInfo, "operate", type);
      // 判断异常类型
      this.handleCommand("updateError");
    },
    getErrorType() {
      for (const [key, value] of Object.entries(this.shipmentObj)) {
        // 报关异常 customsHasAbnormal
        if (key === "customsHasAbnormal" && value) {
          this.$set(this.errorInfo, "errorType", "customs");
          this.$set(this.dialogConfig, "title", this.$t("更新报关异常状态"));
        }
        // 起运异常 shippingHasAbnormal
        if (key === "shippingHasAbnormal" && value) {
          this.$set(this.errorInfo, "errorType", "shipping");
          this.$set(this.dialogConfig, "title", this.$t("更新起运异常状态"));
        }
        // 到港异常 arrivalHasAbnormal
        if (key === "arrivalHasAbnormal" && value) {
          this.$set(this.errorInfo, "errorType", "arrival");
          this.$set(this.dialogConfig, "title", this.$t("更新到港异常状态"));
        }
      }
    },
    // 初始化字典数据
    initData() {
      // 查询渠道
      getChannelList().then((res) => (this.channelList = res.data));
      // 查询柜型
      getCabinetPage(null).then(
        (response) => (this.cabinetList = response.data.list)
      );
      // 仓库
      getWarehouseList().then((r) => {
        this.warehouseList = r.data;
      });
      // 供应商
      getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
        const { data } = res;
        this.allSupplier = data.list;
      });
    },
    // 查询详情页所有数据
    queryAllData() {
      let param = { shipmentId: this.shipmentId };
      // 查询出货信息
      this.getBoxDetail();
      // 部分
      getSectionList(param).then((res) => {
        this.sectionList = res.data.map((item, index) => {
          return {
            ...item,
            title: this.$t("第{index}部分", { index: index + 1 }),
          };
        });
      });
      // 明细
      this.getBoxGoodsDetail();
      // 状态
      getLogList(param).then((res) => {
        this.logList = res.data;
      });
      // 费用
      this.getCost();
      // 异常
      getAbnormalList(param).then((res) => {
        this.errorList = res.data;
      });
      //表单
    },
    // 出货信息
    getBoxDetail() {
      getbox(this.shipmentId).then((res) => {
        const { data } = res;
        this.shipmentObj = data ?? {};
      });
    },
    // 获取费用
    getCost() {
      getCostList({ shipmentId: this.shipmentId }).then((res) => {
        this.costList = res.data;
      });
    },
    // 部分切换
    sectionChange() {
      this.getBoxGoodsDetail();
    },
    // 获取部分详情以及物品
    getBoxGoodsDetail() {
      boxGoodsDetail({
        shipmentId: this.shipmentId,
        secId: this.sectionId,
      }).then((res) => {
        this.sectionObj = res.data;
      });
    },
    // 供应商
    getSupplier(id) {
      let arr = this.allSupplier.find((item) => item.id == id) ?? {};
      return this.$l(arr, "company");
    },
    editCostClick(row) {
      this.costDetail = row;
      this.handleCommand("cost");
    },
    deleteCostClick(row) {
      deleteCost(row.id).then((res) => {
        serviceMsg(res, this).then((res) => {
          this.getCost();
        });
      });
    },
    /* 跳转订单详情 */
    jumpOrderDetail(row) {
      this.$router.push({
        path: "/order/detail",
        query: { orderId: row.orderId },
      });
    },
    // 事件执行
    handleCommand(type) {
      switch (type) {
        case "edit":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "title", this.$t("修改出货"));
          this.$set(this.dialogConfig, "type", "edit");
          break;

        case "router":
          this.$router.push("/boxSea/shippingSea/" + this.shipmentId);
          break;

        case "cost":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "title", this.$t("费用登记"));
          this.$set(this.dialogConfig, "type", "cost");
          break;

        case "error":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "title", this.$t("异常登记"));
          this.$set(this.dialogConfig, "type", "error");
          break;

        case "delete":
          this.$modal
            .confirm(
              this.$t("是否确认删除出货编号为 {no} 的数据项?", {
                no: this.shipmentObj.selfNo,
              })
            )
            .then(() => {
              return deletebox(this.shipmentId);
            })
            .then((res) => {
              serviceMsg(res, this).then((res) => {
                // 获取当前path
                const currPath = this.$router.currentRoute.path;
                // 根据path获取view
                const view = this.visitedViews.find(
                  (item) => item.path === currPath
                );
                if (view) {
                  this.$store.dispatch("tagsView/delView", view);
                  this.$router.push("/shipment/boxSea");
                }
              });
            })
            .catch(() => {});
          break;

        case "updateError":
          this.$set(this.dialogConfig, "visible", true);
          this.$set(this.dialogConfig, "type", "updateError");
          break;
      }
    },
    // 关闭弹框
    closeDialog(type) {
      this.$set(this.dialogConfig, "visible", false);
      if (type === "edit") {
        this.getBoxDetail();
      }
      if (type === "cost") {
        this.getCost();
      }
      if (type === "error") {
        getAbnormalList({ shipmentId: this.shipmentId }).then((res) => {
          this.errorList = res.data;
        });
      }
      if (type === "detail") {
        this.getBoxGoodsDetail();
      }
    },
    formatDate,
    downloadDetailFile(row) {
      const { fileFormat, type } = row;
      if (type === "url") {
        downloadFileByUrl(row.serviceName, { shipmentId: this.shipmentId });
      } else {
        let fileName = `${row.title}(${this.shipmentObj.selfNo}).${
          fileFormat ?? "xlsx"
        }`;
        downloadFile(
          row.serviceName,
          { shipmentId: this.shipmentId },
          fileName,
          fileFormat ?? "xlsx"
        );
      }
    },
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews;
    },
    // 单证状态
    getDocStatus() {
      return (list = []) => {
        // 获取类型
        let customsTypes = list.map((item) => item.customsType);
        // 去重
        return Array.from(new Set(customsTypes));
      };
    },
    /* 渠道 */
    getShipChannelName() {
      return (shippingChannelId) => {
        for (const channelItem of this.channelList) {
          if (channelItem.channelId == shippingChannelId) {
            return this.$l(channelItem, "name");
          }
        }
      };
    },
    /* 获取柜型 */
    getCabinetLabel() {
      return (cabinetId) => {
        for (const cabinetItem of this.cabinetList) {
          if (cabinetItem.id == cabinetId) {
            return cabinetItem.name;
          }
        }
      };
    },
    /* 总计 */
    getBoxSum() {
      return (boxStatistics) => {
        if (boxStatistics) {
          return this.$t("{num}箱 {volume}m³ {weight}kg", {
            num: boxStatistics.num ?? 0,
            volume: boxStatistics.volume ?? 0,
            weight: boxStatistics.weight ?? 0,
          });
        }
        return;
      };
    },
    /* 获取仓库 */
    getCityName() {
      return (id) => {
        let arr = this.warehouseList.filter((item) => item.id == id);
        return arr.length > 0 ? this.$l(arr[0], "title") : this.$t("无");
      };
    },
    // 部分信息
    getSectionInfo() {
      const { totalStatistics, secStatistics } = this.sectionObj;
      if (!this.sectionId) {
        return getTotlContent(totalStatistics);
      } else {
        return getTotlContent(secStatistics);
      }
    },
  },
};
</script>

<style lang="scss">
.shipping-detail {
  .detail-pane {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    .box-weight {
      margin-left: 10px;
    }
    .document-status {
      flex: 1;
      justify-content: flex-end;
      display: flex;
      align-items: center;
      > span {
        margin-right: 10px;
      }
    }
  }
  .el-table__body {
    .customsType-red {
      color: red;
    }
  }
  .shipping-status {
    position: relative;
    display: flex;
    .status-line {
      width: 1px;
      height: calc(100% - 35px);
      background-color: #e8eaec;
      position: absolute;
      left: 13px;
      top: 30px;
    }
    .status-number {
      width: 26px;
      height: 26px;
      border: 1px solid #ccc;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .status-info {
      color: #999;
      margin-left: 20px;
      > :first-child {
        font-size: 14px;
        font-weight: bolder;
        line-height: 26px;
      }
      > :last-child {
        line-height: 26px;
        display: flex;
        > p {
          margin: 0;
          margin-right: 10px;
        }
      }
    }

    &.curr-status {
      .status-number {
        color: #fff;
        background-color: #2d8cf0;
        border-color: #2d8cf0;
      }
      .status-info {
        color: #666;
      }
    }
  }
}
</style>