<template>
  <div class="entryWrap t_qtck">
    <div class="entryItem" v-if="product.id && station.id">
      <div class="choose">
        <div class="row">
          <p
            class="options"
            v-for="(v, i) in checktypeList"
            @click="checktypechange(i)"
            :class="{ active: e == i }"
          >
            {{ v.name }}
          </p>
        </div>
        <div class="row1" v-if="checktype.id == 7">
          <div class="number row1">
            <p class="inputlabel">原因：</p>
          </div>
          <input class="erweima" v-model="reason" />
        </div>
      </div>
    </div>
    <div class="entryItem" v-if="product.id && station.id">
      <div class="choose">
        <div :class="{ collection_table: table_scrollx }">
          <template style="overflow-x: scroll; overflow-y: hidden">
            <Table
              :columns="columns"
              :data="tableData"
              v-if="detailshow"
              class="Manual_inspection_table"
              :max-height="400"
              ref="detailTable"
            >
              <template slot-scope="{ row, index }" slot="xuhao">
                <span>{{ row.xuhao }}</span>
              </template>
              <template slot-scope="{ row, index }" slot="item">
                <span>{{ row.item }}</span>
              </template>
              <template slot-scope="{ row, index }" slot="standard">
                <span>{{ row.standard }}</span>
              </template>
              <template slot-scope="{ row, index }" slot="min_value">
                <span>{{ row.min_value }}</span>
              </template>
              <template slot-scope="{ row, index }" slot="max_value">
                <span>{{ row.max_value }}</span>
              </template>
              <template slot-scope="{ row, index }" slot="range">
                <span>{{ row.range }}</span>
              </template>
              <template
                v-for="(item, i) in resultData.number"
                slot-scope="{ row, index }"
                :slot="'min_value' + (i + 1)"
              >
                <span
                  v-if="
                    tableData[index].checktype == 2 &&
                    tableData[index].valuecategory == 2
                  "
                >
                  <InputNumber
                    class="publicinput"
                    :class="{
                      active_class: tableData[index]['min_value' + (i + 1)]
                        ? tableData[index]['min_value' + (i + 1)] <
                            row.min_value ||
                          tableData[index]['min_value' + (i + 1)] >
                            row.max_value
                        : false,
                    }"
                    v-model="tableData[index]['min_value' + (i + 1)]"
                    style="width: 100px"
                    @blur.native.capture="getrange(index, i + 1)"
                  />
                </span>
              </template>
              <template
                v-for="(item, i) in resultData.number"
                slot-scope="{ row, index }"
                :slot="'max_value' + (i + 1)"
              >
                <span
                  v-if="
                    tableData[index].checktype == 2 &&
                    tableData[index].valuecategory == 2
                  "
                >
                  <InputNumber
                    class="publicinput"
                    v-model="tableData[index]['max_value' + (i + 1)]"
                    :class="{
                      active_class: tableData[index]['max_value' + (i + 1)]
                        ? tableData[index]['max_value' + (i + 1)] <
                            row.min_value ||
                          tableData[index]['max_value' + (i + 1)] >
                            row.max_value
                        : false,
                    }"
                    style="width: 100px"
                    @blur.native.capture="getrange(index, i + 1)"
                  />
                </span>
              </template>
              <template
                v-for="(item, i) in resultData.number"
                slot-scope="{ row, index }"
                :slot="'value' + (i + 1)"
              >
                <span v-if="tableData[index].checktype == 1">
                  <RadioGroup v-model="tableData[index]['value' + (i + 1)]">
                    <Radio label="OK" style="width: 30px">OK</Radio>
                    <Radio label="NG" style="width: 30px">NG</Radio>
                  </RadioGroup>
                </span>
                <span v-else-if="tableData[index].checktype == 2">
                  <InputNumber
                    :disabled="
                      tableData[index].checktype == 2 &&
                      tableData[index].valuecategory == 2
                    "
                    :class="{
                      active_class: tableData[index]['value' + (i + 1)]
                        ? tableData[index]['value' + (i + 1)] < row.min_value ||
                          tableData[index]['value' + (i + 1)] > row.max_value
                        : false,
                    }"
                    class="publicinput"
                    v-model="tableData[index]['value' + (i + 1)]"
                    style="width: 100px"
                  />
                </span>
                <span v-else-if="tableData[index].checktype == 0">
                  <input
                    class="publicinput"
                    v-model="tableData[index]['value' + (i + 1)]"
                    style="width: 100px"
                  />
                </span>
              </template>
              <template
                v-for="(item, i) in resultData.number"
                slot-scope="{ row, index }"
                :slot="'range' + (i + 1)"
              >
                <span
                  v-if="
                    tableData[index].checktype == 2 &&
                    tableData[index].valuecategory == 2
                  "
                >
                  <InputNumber
                    :disabled="true"
                    class="publicinput"
                    v-model="tableData[index]['range' + (i + 1)]"
                    :class="{
                      active_class: tableData[index]['range' + (i + 1)]
                        ? tableData[index]['range' + (i + 1)] >
                          tableData[index]['range']
                        : false,
                    }"
                    style="width: 100px; font-color: black"
                  />
                </span>
              </template>
            </Table>
          </template>
        </div>
      </div>
    </div>
    <div class="entryItem pr" v-if="product.id && station.id">
      <span class="tip">{{ message }}</span>
      <Button :loading="loading" @click="savedata()" class="save">
        <span v-if="!loading">提交</span>
        <span v-else></span>
      </Button>
    </div>
    <div class="empty h100" v-else></div>
    <Modal v-model="ngmodal" title="确认检验结果" :width="900">
      <div class="modal_body">
        <div class="divboder">
          <div class="modal_body_table">
            <Table
              :columns="ngcolumns"
              :data="ngtableData"
              :height="400"
            ></Table>
          </div>
        </div>
      </div>
      <div slot="footer">
        <template>
          <Poptip placement="left" :width="415">
            <Button type="primary" size="large" :loading="loading2">
              <span v-if="!loading2">偏差放行</span>
              <span v-else>偏差放行</span>
            </Button>
            <div class="api" slot="content">
              <div class="filter">
                <label> <i> * </i>请输入偏差放行的数量： </label>
                <InputNumber class="publicinput" v-model="quantity" />
              </div>
              <Button type="primary" :loading="loading2" @click="saveresult1">
                <span v-if="!loading2">保存</span>
                <span v-else>保存</span>
              </Button>
            </div>
          </Poptip>
        </template>
        <Button
          type="primary"
          size="large"
          :loading="loading3"
          @click="saveresult2()"
          style="margin-left: 14px"
        >
          <span v-if="!loading3">NG</span>
          <span v-else>NG</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from "@/libs/api.request";

export default {
  name: "t_qtck",
  inject: ["reload"],
  props: {
    curLevel: {
      type: Array,
    },
    levelNums: {
      type: Number,
    },
    signDetail: {
      type: Object,
    },
  },
  data() {
    return {
      table_scrollx: false,
      checktypeList: [],
      station: {},
      product: {},
      material: {},
      checktype: {},
      item: {},
      number: 0,
      qrcode: "",
      e: -1,
      tableData: [],
      columns: [
        {
          title: "序号",
          slot: "xuhao",
          render: (h, params) => {
            return h("span", params.index + 1);
          },
          width: 70,
          align: "center",
        },
        {
          title: "检验项目",
          slot: "item",
          align: "center",
        },
        {
          title: "标准",
          slot: "standard",
          align: "center",
        },
        {
          title: "下限",
          slot: "min_value",
          align: "center",
        },
        {
          title: "上限",
          slot: "max_value",
          align: "center",
        },
        {
          title: "值",
          slot: "result_value",
          align: "center",
        },
      ],
      detailshow: true,
      loading: false,
      loading2: false,
      loading3: false,
      resultData: {},
      ngcolumns: [
        {
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h("span", params.index + 1);
          },
          width: 70,
          align: "center",
        },
        {
          title: this.$t("901048"),
          key: "item",
          align: "center",
        },
        {
          title: this.$t("950245"),
          key: "standard",
          align: "center",
        },
        {
          title: this.$t("200060"),
          key: "min_value",
          align: "center",
        },
        {
          title: this.$t("200059"),
          key: "max_value",
          align: "center",
        },
        {
          title: this.$t("1950619"),
          key: "range",
        },
        {
          title: this.$t("800195"),
          key: "result",
          align: "center",
        },
        {
          title: this.$t("8000030"),
          key: "lowerlimit",
        },
        {
          title: this.$t("8000031"),
          key: "upperlimit",
        },
        {
          title: this.$t("1950610"),
          key: "value",
          align: "center",
        },
        {
          title: this.$t("1950620"),
          key: "actual_range",
        },
      ],
      ngtableData: [],
      ngmodal: false,
      message: "",
      quantity: 1,
      reason: "",
    };
  },
  mounted() {
    const _this = this;
    // 若当前页面不是从签到签出页面跳转过来的，就返回签到签出页面
    if (!_this.curLevel.length) {
      _this.$router.replace({
        name: "t_sign",
      });
      return false;
    }
    // 根据工位 ID 查询该工位下是否有已绑定的工单
    _this.getWkodBySection();
    // 获取检验类型列表
    _this.getCheckTypeList();
  },
  methods: {
    // 根据工位 ID 查询该工位下是否有已绑定的工单
    getWkodBySection() {
      const _this = this;
      let params = {
        sectionId: _this.curLevel[_this.curLevel.length - 1],
      };
      _this.axios
        .request({
          url: "/CNC/ProductPlanDispatch/WebScanMachine",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            let productId = data.product_id;
            if (productId) {
              _this.$set(_this.product, "id", productId);
              _this.$set(
                _this.station,
                "id",
                _this.curLevel[_this.curLevel.length - 1]
              );
            }
          }
        });
    },
    // 获取检验类型列表
    getCheckTypeList() {
      const _this = this;
      _this.axios
        .request({
          url: "/acc/AppAssemb/GetInspectionType",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.checktypeList = [];
            if (data && Array.isArray(data) && data.length) {
              _this.checktypeList = data.map((v) => {
                v.id = v.type_code;
                v.name = v.type_name;
                return v;
              });
            }
          }
        });
    },
    // 监听最小值和最大值变化自动计算差值和均值
    getrange(index, i) {
      let maxValue = this.tableData[index]["max_value" + i];
      let minValue = this.tableData[index]["min_value" + i];
      if (maxValue && minValue) {
        this.tableData[index]["range" + i] =
          Math.round(
            (this.tableData[index]["max_value" + i] -
              this.tableData[index]["min_value" + i]) *
              10000
          ) / 10000;
        this.tableData[index]["value" + i] =
          Math.round(
            ((this.tableData[index]["max_value" + i] +
              this.tableData[index]["min_value" + i]) /
              2) *
              10000
          ) / 10000;
      } else {
        this.tableData[index]["range" + i] = "";
      }
    },
    // 监听检验类型变化
    checktypechange(i) {
      this.checktype = this.checktypeList[i];
      this.e = i;
      if (this.product.id && this.station.id && this.checktype.id) {
        this.inititems();
      }
    },
    // 根据工位，产品，检验类型来初始化表格字段
    inititems() {
      this.quantity = 1;
      this.reason = "";
      this.columns = [
        {
          type: "index",
          title: this.$t("1008"),
          slot: "xuhao",
          width: 70,
          // fixed: "left",
        },
        {
          title: this.$t("901048"),
          slot: "item",
          minWidth: 200,
          // fixed: "left",
        },
        {
          title: this.$t("950245"),
          slot: "standard",
          minWidth: 200,
          // fixed: "left",
        },
        {
          title: this.$t("500082"),
          slot: "min_value",
          minWidth: 100,
          // fixed: "left",
        },
        {
          title: this.$t("500081"),
          slot: "max_value",
          minWidth: 100,
          // fixed: "left",
        },
        {
          title: this.$t("8000032"),
          slot: "range",
          minWidth: 80,
          // fixed: "left",
        },
      ];
      this.tableData = [];
      let data = {
        productid: this.product.id,
        sectionid: this.station.id,
        checktype: this.checktype.id,
      };
      if (data.productid && data.sectionid && data.checktype) {
        axios
          .request({
            url:
              "/qms/InspectStandard/GetDetails?productid=" +
              data.productid +
              "&sectionid=" +
              data.sectionid +
              "&checktype=" +
              data.checktype,
            method: "get",
          })
          .then((res) => {
            let tablelist = res.data.data.details;
            let isMaxMin = false;
            tablelist.forEach((v) => {
              if (v.checktype == 2 && v.valuecategory == 2) {
                isMaxMin = true;
              }
            });
            let cloumnLength = res.data.data.quantity;
            this.resultData.number = cloumnLength;
            for (let i = 1; i <= cloumnLength; i++) {
              this.columns.push({
                title: "NO." + i,
                key: "NO." + i,
                slot: "NO." + i,
                align: "center",
                children: isMaxMin
                  ? [
                      {
                        title: this.$t("500082"), // 最小值
                        key: "min_value" + i,
                        slot: "min_value" + i,
                        align: "center",
                        minWidth: 120,
                      },
                      {
                        title: this.$t("500081"), // 最大值
                        key: "max_value" + i,
                        slot: "max_value" + i,
                        align: "center",
                        minWidth: 120,
                      },
                      {
                        title: this.$t("1950610"), // 单值
                        key: "value" + i,
                        slot: "value" + i,
                        align: "center",
                        minWidth: 120,
                      },
                      {
                        title: this.$t("8000032"), // 极差
                        key: "range" + i,
                        slot: "range" + i,
                        align: "center",
                        minWidth: 120,
                      },
                    ]
                  : [
                      {
                        title: this.$t("1950610"), // 单值
                        key: "value" + i,
                        slot: "value" + i,
                        align: "center",
                        minWidth: 120,
                      },
                    ],
              });
            }
            tablelist.forEach((item, i) => {
              if (item) {
                let data = {
                  itemid: item.itemid,
                  item: item.item,
                  standard: item.standard,
                  min_value:
                    item.checktype == 2
                      ? item.min_value == -999999999
                        ? ""
                        : item.min_value
                      : "",
                  max_value:
                    item.checktype == 2
                      ? item.max_value == 999999999
                        ? ""
                        : item.max_value
                      : "",
                  checktype: item.checktype,
                  result: item.result,
                  value: item.value,
                  valuecategory: item.valuecategory,
                  range:
                    item.checktype == 2 && item.valuecategory == 2
                      ? item.range
                      : "",
                };
                if (item.checktype == 2) {
                  for (let j = 1; j <= cloumnLength; j++) {
                    data["min_value" + j] = null;
                    data["max_value" + j] = null;
                    data["value" + j] = null;
                    data["range" + j] = null;
                  }
                } else {
                  for (let j = 1; j <= cloumnLength; j++) {
                    data["value" + j] = "OK";
                  }
                }
                this.tableData.push(data);
              }
            });
            // 处理滚动条样式bug
            setTimeout(() => {
              // let scrollx = this.$refs.detailTable.$refs.body.classList.contains(
              //   "ivu-table-overflowX"
              // );
              // if (scrollx) {
              //   this.table_scrollx = true;
              // } else {
              //   this.table_scrollx = false;
              // }
              this.table_scrollx = true;
            }, 500);
          });
      }
      this.detailshow = false;
      this.$nextTick(() => {
        this.detailshow = true;
      });
    },
    // 提交数据
    savedata() {
      this.resultData.details = [];
      this.resultData.productid = this.product.id;
      this.resultData.materialid = this.material.id;
      this.resultData.sectionid = this.station.id;
      this.resultData.sn = this.qrcode;
      this.resultData.checktype = this.checktype.id;
      this.resultData.result = "OK";
      let ngList = [];
      let isMaxMin = false;
      if (this.tableData && this.tableData.length) {
        let spcCheck = false;
        let details = this.tableData;
        for (let i = 1; i <= this.resultData.number; i++) {
          details.forEach((ele, index) => {
            let detail = {
              index: i,
              itemid: ele.itemid,
              checktype: ele.checktype,
            };
            if (ele.checktype == 2) {
              detail.value = ele["value" + i];
              detail.lowerlimit = ele["min_value" + i];
              detail.upperlimit = ele["max_value" + i];
              detail.result = "";
              if (ele.valuecategory === 1) {
                if (this.resultData.checktype == 6 && !detail.value) {
                  spcCheck = true;
                }
                if (
                  (detail.value > ele.max_value && ele.max_value) ||
                  (detail.value < ele.min_value && ele.min_value)
                ) {
                  if (detail.value) {
                    ngList.push({
                      item: ele.item,
                      standard: ele.standard,
                      checktype: ele.checktype,
                      min_value: ele.min_value,
                      max_value: ele.max_value,
                      result: "NG",
                      value: detail.value,
                      upperlimit: "",
                      lowerlimit: "",
                      range: "",
                      actual_range: "",
                    });
                  }
                }
              } else if (ele.valuecategory === 2) {
                isMaxMin = true;
                if (
                  this.resultData.checktype == 6 &&
                  (!detail.value || !detail.upperlimit || !detail.lowerlimit)
                ) {
                  spcCheck = true;
                }
                if (
                  (detail.upperlimit > ele.max_value ||
                    detail.lowerlimit < ele.min_value ||
                    detail.upperlimit - detail.lowerlimit > ele.range ||
                    detail.upperlimit < ele.min_value ||
                    detail.lowerlimit > ele.max_value ||
                    (detail.value > ele.max_value && ele.max_value) ||
                    (detail.value < ele.min_value && ele.min_value)) &&
                  detail.upperlimit &&
                  detail.lowerlimit
                ) {
                  ngList.push({
                    item: ele.item,
                    standard: ele.standard,
                    checktype: ele.checktype,
                    min_value: ele.min_value,
                    max_value: ele.max_value,
                    result: "NG",
                    value: detail.value,
                    range: ele.range,
                    upperlimit: detail.upperlimit,
                    lowerlimit: detail.lowerlimit,
                    range: ele.range,
                    actual_range: ele["range" + i],
                  });
                }
              }
            } else if (ele.checktype == 1) {
              detail.value = null;
              detail.result = ele["value" + i];
              if (detail.result) {
                if (detail.result.toUpperCase() == "NG") {
                  ngList.push({
                    item: ele.item,
                    standard: ele.standard,
                    checktype: ele.checktype,
                    min_value: ele.min_value,
                    max_value: ele.max_value,
                    result: "NG",
                    value: detail.value,
                    upperlimit: "",
                    lowerlimit: "",
                    range: "",
                    actual_range: "",
                  });
                }
              }
            }
            this.resultData.details.push(detail);
          });
        }
        if (spcCheck) {
          this.message = this.$t(930046) + this.$t(1950628);
          return;
        }
      }
      if (ngList.length) {
        if (!isMaxMin) {
          this.ngcolumns = [
            {
              title: this.$t("1008"),
              render: (h, params) => {
                return h("span", params.index + 1);
              },
              width: 70,
              align: "center",
            },
            {
              title: this.$t("901048"),
              key: "item",
              align: "center",
            },
            {
              title: this.$t("950245"),
              key: "standard",
              align: "center",
            },
            {
              title: this.$t("200060"),
              key: "min_value",
              align: "center",
            },
            {
              title: this.$t("200059"),
              key: "max_value",
              align: "center",
            },
            {
              title: this.$t("1950610"),
              key: "value",
              align: "center",
            },
            {
              title: this.$t("800195"),
              key: "result",
              align: "center",
            },
          ];
        } else {
          this.ngcolumns = [
            {
              title: this.$t("1008"),
              render: (h, params) => {
                return h("span", params.index + 1);
              },
              width: 70,
              align: "center",
            },
            {
              title: this.$t("901048"),
              key: "item",
              align: "center",
            },
            {
              title: this.$t("950245"),
              key: "standard",
              align: "center",
            },
            {
              title: this.$t("200060"),
              key: "min_value",
              align: "center",
            },
            {
              title: this.$t("200059"),
              key: "max_value",
              align: "center",
            },
            {
              title: this.$t("1950619"),
              key: "range",
            },
            {
              title: this.$t("800195"),
              key: "result",
              align: "center",
            },
            {
              title: this.$t("8000030"),
              key: "lowerlimit",
            },
            {
              title: this.$t("8000031"),
              key: "upperlimit",
            },
            {
              title: this.$t("1950610"),
              key: "value",
              align: "center",
            },
            {
              title: this.$t("1950620"),
              key: "actual_range",
            },
          ];
        }
        this.showNg(ngList);
        return;
      }
      this.saveresult();
    },
    saveresult() {
      let data = this.resultData;
      data.quantity = this.quantity;
      data.reason = this.reason;
      this.loading = true;
      this.loading2 = true;
      this.loading3 = true;
      axios
        .request({
          url: "/qms/ManualCollection/Add",
          data,
          method: "post",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            this.number++;
            this.message = this.$t(930045);
            this.inititems();
            this.qrcode = "";
            this.resultData.qrcode = "";
            this.detailshow = false;
            this.detailshow = true;
            this.ngmodal = false;
            this.reason = "";
          } else {
            this.message = this.$t(930046) + this.$t(`${res.data.msg}`);
          }
          this.loading = false;
          this.loading2 = false;
          this.loading3 = false;
        });
    },
    saveresult1() {
      this.resultData.result = "2";
      this.saveresult();
    },
    saveresult2() {
      this.resultData.result = "NG";
      this.saveresult();
    },
    showNg(ngList) {
      this.ngmodal = true;
      this.ngtableData = [];
      ngList.forEach((item) => {
        this.ngtableData.push({
          item: item.item,
          standard: item.standard,
          min_value:
            item.checktype == 2
              ? item.min_value == -999999999
                ? ""
                : item.min_value
              : "",
          max_value:
            item.checktype == 2
              ? item.max_value == 999999999
                ? ""
                : item.max_value
              : "",
          result: "NG",
          value: item.value,
          upperlimit: item.upperlimit,
          lowerlimit: item.lowerlimit,
          range: item.range,
          actual_range: item.actual_range,
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.t_qtck {
  height: 100%;
  background-color: #f5f7f9;
  .h100 {
    height: 100%;
  }
  .empty {
    background: url("../../static/images/empty.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  .options {
    font-size: 20px;
    padding: 6px 15px;
    text-align: center;
    border-radius: 8px;
    background-color: #f2f2f2;
    margin-right: 14px;
    cursor: pointer;
  }
  .active {
    background-color: #2d8cf0;
    color: #fff;
  }
}
.entryWrap {
  position: relative;
  .entryItem {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 14px;
  }
}
.pr {
  position: relative;
  height: 80px;
  .tip {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
  }
  .save {
    width: 100px;
    height: 40px;
    line-height: 20px;
    background-color: #2d8cf0;
    color: #fff;
    text-align: center;
    font-size: 20px;
    outline: none;
    border: none;
    border-radius: 8px;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.active_class {
  border: red 1px solid;
}
.row1 {
  display: flex;
  .number {
    margin: 10px 12px 10px 0;
  }
  .erweima {
    display: block;
    outline: none;
    width: 100%;
    height: 42px;
    line-height: 42px;
    font-size: 20px;
    color: #000;
    text-align: center;
    border: 1px solid #d8d8d8;
    background-color: #f4f7f9;
    margin: 10px 0;
  }
  .inputlabel {
    width: 75px;
    height: 42px;
    line-height: 42px;
    font-size: 20px;
    text-align: center;
  }
}
.api {
  .filter {
    label {
      width: 190px;
      font-size: 16px;
      font-weight: bold;
      i {
        color: red;
        margin-left: 5px !important;
        margin-top: -5px !important;
      }
    }
    .publicinput {
      width: 80px;
    }
  }
}
</style>
<style lang="less">
.collection_table {
  // .ivu-table-fixed-body {
  //   height: auto !important;
  //   max-height: 411px !important;
  // }
  .ivu-table-overflowX::-webkit-scrollbar {
    display: none;
  }
  .ivu-table-overflowY::-webkit-scrollbar {
    display: none;
  }
}
.modal_body_table {
  .ivu-table {
    font-size: 14px !important;
  }
}
</style>
