<template>
  <div>
    <ul class="bx-steps-demo-ul">
      <li class="bx-steps-demo-li">
        <p>基础用法</p>
        <bxs-steps :active="active">
          <bxs-step>基本信息</bxs-step>
          <bxs-step>银行卡信息</bxs-step>
          <bxs-step>阅读代理协议阅读代理协议</bxs-step>
          <bxs-step>阅读代理协议阅读代理协议</bxs-step>
        </bxs-steps>
        <span @click="active = (active + 1) % 4">
          下一步
        </span>
      </li>
      <li class="bx-steps-demo-li">
        <p>步骤带描述、状态</p>
        <bxs-steps :active="active2">
          <bxs-step description="平均2个工作日平均2个工作日">
            基本信息
          </bxs-step>
          <bxs-step :status="status">
            银行卡信息
          </bxs-step>
          <bxs-step description="平均4个工作日">
            阅读代理协议阅读代理协议
          </bxs-step>
        </bxs-steps>
        <span @click="active2 = (active2 + 1) % 4">
          下一步
        </span>
      </li>
      <li class="bx-steps-demo-li">
        <p>自定义颜色</p>
        <bxs-steps 
          :active="active3" 
          :active-color="activeColor"
          >
          <bxs-step>基本信息</bxs-step>
          <bxs-step>银行卡信息</bxs-step>
          <bxs-step>阅读代理协议</bxs-step>
        </bxs-steps>
        <span @click="active3 = (active3 + 1) % 4">
          下一步
        </span>
      </li>
      <li class="bx-steps-demo-li">
        <p>燕尾型</p>
        <bxs-steps 
          type="tail" 
          :active="active4"
          >
          <bxs-step>步骤一</bxs-step>
          <bxs-step>步骤二</bxs-step>
          <bxs-step>步骤三</bxs-step>
          <bxs-step>最多五字</bxs-step>
        </bxs-steps>
        <span @click="active4 = (active4 + 1) % 4">
          下一步
        </span>
      </li>
      <li class="bx-steps-demo-li">
        <p>燕尾型-自定义颜色</p>
        <bxs-steps 
          type="tail" 
          :active="active5" 
          active-color="#fff" 
          :active-bg-color="activeBgColor"
          >
          <bxs-step>步骤一</bxs-step>
          <bxs-step>步骤二</bxs-step>
          <bxs-step>步骤三</bxs-step>
          <bxs-step>步骤四</bxs-step>
          <bxs-step>最多四字最多四字</bxs-step>
        </bxs-steps>
        <span @click="active5 = (active5 + 1) % 5">
          下一步
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: 'horizontal',
      active: 0,
      active2: 1,
      active3: 1,
      active4: 2,
      active5: 3,
      activeColor: '#08d5dd',
      activeBgColor: '#08d5dd',
      status: 'error',
    }
  },
}
</script>
<style>
.bx-steps-demo-ul {
  width: 100%;
  overflow: hidden;
  & .bx-steps-demo-li {
    padding: 15px 0;
    margin-bottom: 10px;
    background: #fff;
    text-align: center;
    & p {
      margin-bottom: 15px;
      text-align: center;
      font-size: 13px;
    }
    & span {
      display: inline-block;
      margin-top: 10px;
      padding: 5px 10px;
      border: 1px solid #508cee;
      font-size: 13px;
      color: #508cee;
      border-radius: 2px;
    }
  }
}
</style>
