<template>
  <div class="agreement">
    <!-- <img src="../../assets/images/call.png"> -->
    <div class="agreement_tab">
      <div class="static_main">
        <router-link to="/about-rule">{{$t('cms.exchangerule')}}</router-link>
        <router-link to="/about-protocol">{{$t('cms.useprotocol')}}</router-link>
        <router-link to="/about-fee" class="cur">{{$t('cms.feenote')}}</router-link>
        <router-link to="/about-merchant">{{$t('cms.merchantprocotol')}}</router-link>
      </div>
    </div>
    <div v-if="lang==='简体中文'" class="content">
      <p>
        Ztuo2.0网每日都会将前一日用户所产生的交易手续费，100%折算成BHB返还给用户(详情请见【关于Ztuo2.0“交易即挖矿”机制的说明】)。另外，随着新币种逐渐开放交易，交易手续费、限价以及市价订单指标将会持续更新，请继续关注最新公告！
      </p>
      <h1>交易手续费:</h1>
      <Table :columns="columns1" :data="data1" border></Table>
      <h1>限价订单指标：</h1>
      <Table :columns="columns2" :data="data2" border></Table>
      <h1>市价订单指标：</h1>
      <Table :columns="columns3" :data="data3" border></Table>
    </div>
    <div v-else class="content">
      <p>Ztuo2.0 will convert the transaction fees generated by the previous day to BHB and return it to the user. (For details, please refer to 【Notes on Ztuo2.0 "Transaction is Mining" Mechanism】). In addition, as the new currency gradually opens up trading, transaction fees, limit orders and market order indicators will continue to be updated, please continue to pay attention to the latest announcement! </p>
      <h1>Transaction Fees:</h1>
      <Table :columns="columns1en" :data="data1" border></Table>
      <h1>Limit order indicator:</h1>
      <Table :columns="columns2en" :data="data2" border></Table>
      <h1>Market order indicator:</h1>
      <Table :columns="columns3en" :data="data3" border></Table>
    </div>
  </div>
</template>
<style scoped>
.agreement {
  background: #fff;
  padding-bottom: 20px;
  overflow-x: hidden;
}

.agreement_tab {
  height: 49px;
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.agreement_tab a {
  padding: 0 4px 16px;
  margin: 0 32px;
  color: #666;
  font-size: 14px;
  line-height: 48px;
}

.agreement_tab a.cur {
  color: #3399ff;
  font-weight: bold;
  border-bottom: 2px solid #3399ff;
}
.content {
  padding: 20px;
}
.content p {
  font-size: 16px;
  color: #000;
}
.content h1 {
  margin: 20px;
  margin-left: 0;
}
</style>
<script>
export default {
  data() {
    return {
      columns1: [
        {
          title: "交易对",
          key: "name"
        },
        {
          title: "Taker",
          key: "age"
        },
        {
          title: "Maker",
          key: "address"
        }
      ],
      columns1en: [
        {
          title: "Transaction pair",
          key: "name"
        },
        {
          title: "Taker",
          key: "age"
        },
        {
          title: "Maker",
          key: "address"
        }
      ],
      columns2en: [
        {
          title: "Transaction pair",
          key: "name"
        },
        {
          title:
            "The ratio of that the selling price cannot be lower than the latest price",
          key: "age"
        },
        {
          title:
            "The ratio of that the purchase price cannot be higher than the latest price",
          key: "address"
        },
        {
          title: "Minimum order quantity",
          key: "min"
        },
        {
          title: "Maximum order quantity",
          key: "max"
        }
      ],
      columns2: [
        {
          title: "交易对",
          key: "name"
        },
        {
          title: "卖出不能低于最新价格的比率",
          key: "age"
        },
        {
          title: "买入不能高于最新价格的比率",
          key: "address"
        },
        {
          title: "订单最小数量",
          key: "min"
        },
        {
          title: "订单最大数量",
          key: "max"
        }
      ],
      columns3: [
        {
          title: "交易对",
          key: "name"
        },
        {
          title: "买入最小金额",
          key: "age"
        },
        {
          title: "买入最大金额",
          key: "address"
        },
        {
          title: "卖出最小数量",
          key: "min"
        },
        {
          title: "买入最大数量",
          key: "max"
        }
      ],
      columns3en: [
        {
          title: "Transaction pair",
          key: "name"
        },
        {
          title: "The lowest price purchased",
          key: "age"
        },
        {
          title: "The highest price purchased",
          key: "address"
        },
        {
          title: "Minimum sales",
          key: "min"
        },
        {
          title: "Maximum sales",
          key: "max"
        }
      ],
      data1: [
        {
          name: "BTC/USDT",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "ETH/USDT",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "BNB/USDT",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "HT/USDT",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "USDT/BTC",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "ETH/BTC",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "BNB/BTC",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "HT/BTC",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "USDT/ETH",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "BTC/ETH",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "BNB/ETHT",
          age: "0.10%",
          address: "0.10%"
        },
        {
          name: "HT/ETH",
          age: "0.10%",
          address: "0.10%"
        }
      ],
      data2: [
        {
          name: "BTC/USDT",
          age: "0.9",
          address: "1.1",
          min: "0.001",
          max: "1000"
        },
        {
          name: "ETH/USDT",
          age: "0.9",
          address: "1.1",
          min: "0.001",
          max: "10000"
        },
        {
          name: "BNB/USDT",
          age: "0.9",
          address: "1.1",
          min: "0.1",
          max: "400000"
        },
        {
          name: "HT/USDT",
          age: "0.9",
          address: "1.1",
          min: "1",
          max: "1000000"
        },
        {
          name: "USDT/BTC",
          age: "0.9",
          address: "1.1",
          min: "1",
          max: "300000"
        },
        {
          name: "ETH/BTC",
          age: "0.9",
          address: "1.1",
          min: "0.001",
          max: "10000"
        },
        {
          name: "BNB/BTC",
          age: "0.9",
          address: "1.1",
          min: "0.1",
          max: "400000"
        },
        {
          name: "HT/BTC",
          age: "0.9",
          address: "1.1",
          min: "1",
          max: "1000000"
        },
        {
          name: "USDT/ETH",
          age: "0.9",
          address: "1.1",
          min: "1",
          max: "300000"
        },
        {
          name: "BTC/ETH",
          age: "0.9",
          address: "1.1",
          min: "0.001",
          max: "1000"
        },
        {
          name: "BNB/ETH",
          age: "0.9",
          address: "1.1",
          min: "0.1",
          max: "400000"
        },
        {
          name: "HT/ETH",
          age: "0.9",
          address: "1.1",
          min: "1",
          max: "1000000"
        }
      ],
      data3: [
        {
          name: "BTC/USDT",
          age: "5",
          address: "30000",
          min: "0.001",
          max: "5"
        },
        {
          name: "ETH/USDT",
          age: "5",
          address: "30000",
          min: "0.001",
          max: "50"
        },
        {
          name: "BNB/USDT",
          age: "5",
          address: "30000",
          min: "0.001",
          max: "20000"
        },
        {
          name: "HT/USDT",
          age: "5",
          address: "30000",
          min: "0.001",
          max: "200000"
        },
        {
          name: "USDT/BTC",
          age: "0.001",
          address: "3",
          min: "3",
          max: "600000"
        },
        {
          name: "ETH/BTC",
          age: "0.001",
          address: "3",
          min: "0.001",
          max: "200"
        },
        {
          name: "BNB/BTC",
          age: "0.001",
          address: "3",
          min: "0.2",
          max: "20000"
        },
        {
          name: "HT/BTC",
          age: "0.001",
          address: "3",
          min: "3",
          max: "200000"
        },
        {
          name: "USDT/ETH",
          age: "0.005",
          address: "2000",
          min: "3",
          max: "600000"
        },
        {
          name: "BTC/ETH",
          age: "0.005",
          address: "2000",
          min: "0.001",
          max: "5"
        },
        {
          name: "BNB/ETH",
          age: "0.005",
          address: "2000",
          min: "0.2",
          max: "20000"
        },
        {
          name: "HT/ETH",
          age: "0.005",
          address: "2000",
          min: "3",
          max: "200000"
        }
      ]
    };
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    }
  }
};
</script>
