<template>
  <!-- 计费公式页面 -->
  <div id="expression">
    <!-- 计算公式 -->
    <div>
      <img src="@/assets/img/min.png" alt="" />
      <span>水运费计算公式</span>
    </div>
    <hr />
    <table>
      <!-- <tr v-for="(item, i) in shipFeesFormula" :key="i"> -->
        <td class="left">{{ shipFeesFormula.formula_name }} :</td>
        <td>
          <span>{{ shipFeesFormula.formula_string }}</span>
        </td>
      <!-- </tr> -->
    </table>
        <!-- 计算公式 -->
    <div>
      <img src="@/assets/img/min.png" alt="" />
      <span>水分检测费计算公式</span>
    </div>
    <hr />
    <table>
      <!-- <tr v-for="(item, i) in waterFeesFormula" :key="i"> -->
        <td class="left">{{ waterFeesFormula.formula_name }} :</td>
        <td>
          <span>{{ waterFeesFormula.formula_string }}</span>
        </td>
      <!-- </tr> -->
    </table>
        <!-- 计算公式 -->
    <div>
      <img src="@/assets/img/min.png" alt="" />
      <span>途损费计算公式</span>
    </div>
    <hr />
    <table>
      <!-- <tr v-for="(item, i) in lossFeesFormula" :key="i"> -->
        <td class="left">{{ lossFeesFormula.formula_name }} :</td>
        <td>
          <span>{{ lossFeesFormula.formula_string }}</span>
        </td>
      <!-- </tr> -->
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shipFeesFormula: {},
      lossFeesFormula: {},
      waterFeesFormula: {},
    };
  },
  created() {
    // 获取水运费计算公式
    this.axios
      .post("/api/v1/bms/getShipFeesFormula")
      .then((res) => {
        this.shipFeesFormula = res.data.data;
        console.log(this.shipFeesFormula);
      });
    // 获取油价
    this.axios
      .post("/api/v1/bms/getLossFeesFormula")
      .then((res) => {
        this.lossFeesFormula = res.data.data;
        console.log(this.lossFeesFormula);
      });
      // 获取油价
    this.axios
      .post("/api/v1/bms/getWaterFeesFormula")
      .then((res) => {
        this.waterFeesFormula = res.data.data;
        console.log(this.waterFeesFormula);
      });
  },
};
</script>

<style scoped>
#expression {
  margin-top: 4.375rem;
  margin-left: 1.875rem;
}
#oilPrice {
  margin-top: 4.375rem;
}
img {
  width: 1rem;
}
span {
  margin-left: 0.625rem;
}
hr {
  margin: -0.5rem 1.875rem 0 7.5rem;
  background-color: rgb(220, 223, 231);
  height: 0.0625rem;
  border: none;
}
table {
  margin-top: 3.125rem;
  margin-left: 3.125rem;
  width: 93.75rem;
  border: 0.0625rem solid rgb(220, 223, 231);
  border-collapse: collapse;
}
.left {
  width: 10.25rem;
  background: #f0f7ff;
  text-align: center;
}
.right {
  text-align: left;
}
tr {
  height: 2.875rem;
}
td {
  height: 6.25rem ; text-align:initial; border: 0.0625rem solid rgb(220, 223, 231);
}
.el-input {
  width: 6.25rem;
  text-align: center;
}
.oil {
  margin-left: 0.625rem;
}
</style>