<template>
  <!--说明-->
  <div class="explain">
    <navbar :name="name" />
    <div class="box">
      <div v-if="name == '使用教程'">
        <div class="content">
          使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程使用教程
        </div>
      </div>
      <div v-if="name == '打印价格'" class="flex-center">
        <!-- <div class="content">A4纸[文件打印、扫描复印、身份证打印] :单面+黑白: 0.5元/张单面+彩色: 1.0元/张双面+黑白: 0.8元/张双面+彩色: 1.8元/张</div>
        <div class="content">6寸相纸/热升华相纸 [照片、 证件照打印]:证件照: XXX 元/ 张(版)照 片: XXX元/张</div> -->
        <!-- 整个表格内容 -->
        <table
          border="1"
          width="500"
          height="100%"
          align="center"
          cellpadding="10"
          cellspacing="0"
        >
          <!-- 表格中一行的内容 -->
          <tr>
            <!-- 表格中单个单元格内容 -->
            <td>打印类型&格式</td>
            <td>单价</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.type }}</td>
            <td>{{ item.price }}</td>
          </tr>
        </table>
      </div>
      <div v-if="name == '客服助手'">
        <div class="content">
          尊敬的会员朋友，您在使用自助打印软件过程中遇到任何问题或困难，欢迎随时拨打国内客服电话
          400 -12345678，我们将为您提供耐心解答和及时帮助，谢谢。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/nav";
import axios from "axios";

export default {
  name: "explain",
  components: {
    navbar,
  },
  provide() {
    return {
      title: this.name,
      type: "",
    };
  },
  data() {
    return {
      name: this.$route.params.name,
      tableData: [
        { type: "A4黑白单面", price: "**元张" },
        { type: "A4黑白双面", price: "**元张" },
        { type: "A4彩色双面", price: "**元张" },
        { type: "扫描复印黑白单面", price: "**元张" },
        { type: "扫描复印黑白双面", price: "**元张" },
        { type: "扫描复印彩色单面", price: "**元张" },
        { type: "扫描复印深色双面", price: "**元张" },
        { type: "证件照", price: "**元张" },
        { type: "照片", price: "**元张" },
        { type: "身份证黑白单面", price: "**元张" },
        { type: "身份证黑户双面", price: "**元张" },
        { type: "身份证彩色单面", price: "**元张" },
        { type: "身份证彩色双面", price: "**元张" },
      ],
    };
  },
  methods: {
    getDate() {
      // 获取数据
      let data = {
        deviceId: "123",
        printType: "DocumentPrinting",
      };

      axios
        .get("/device/getPrintPrice", data)
        .then(function (res) {
          console.log(res);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.getDate();
  },
};
</script>

<style scoped lang="less">
.explain {
  .box {
    width: 114.06rem;
    height: 32rem;
    padding: 6rem 0;
    background: #ffffff;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
    margin: 0 auto;
    > div {
      height: 100%;
      overflow-y: auto;
    }
    .content {
      width: 93.81rem;
      font-size: 2.25rem;
      font-weight: bold;
      color: #323232;
      line-height: 3.1rem;
      margin: 0 auto;
      text-align: left;
    }
  }
}
</style>