<template>
  <el-steps
    v-if="permission != 'n'"
    :class="{
      'mobile-step': isMobile,
      'adr-step': isAndroid,
      'ios-step': isiOS,
    }"
    :active="inputVal"
    :direction="direction"
    space="33.33%"
    align-center
    finish-status="success"
  >
    <el-step
      v-for="item in stepList"
      :key="item.title"
      :title="item.title"
      :description="item.description"
    ></el-step>
  </el-steps>
</template>
<script>
  import permission from '@/mixins/permission.js'
  import inputName from '@/mixins/inputName.js'
  import form from '@/mixins/form.js'
  import mobileMode from '@/mixins/mobileMode.js'

  export default {
    name: 'HtMilepost',
    mixins: [permission, inputName, form, mobileMode],
    props: {
      value: [Number, String],
      direction: {
        type: String,
      },
      content: String,
    },
    computed: {
      inputVal: function() {
        if (this.value === null || this.value === undefined) {
          return 1
        }
        const valNum = Number(this.value)
        return isNaN(valNum) ? 1 : valNum
      },
      stepList() {
        return JSON.parse(this.content)
      },
      isAndroid() {
        return (
          navigator.userAgent.indexOf('Android') > -1 ||
          navigator.userAgent.indexOf('Adr') > -1
        )
      },
      isiOS() {
        return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .mobile-step {
    padding: 24px 0;
    border-bottom: 10px solid #f6f6f6;
    overflow: auto;
    ::v-deep {
      .el-step {
        flex-shrink: 0;
      }
      .el-step__line-inner {
        height: 0px;
        border-top: none;
        border-left: none;
        border-right: none;
      }
      .el-step.is-horizontal .el-step__line {
        height: 1px;
      }
      .el-step__icon {
        border: 1px solid #747474;
      }
      .el-step.is-center .el-step__line {
        left: 66%;
        right: -34%;
      }
      .el-step__head {
        display: flex;
        justify-content: center;
        flex-shrink: 0;
        .el-step__icon {
          width: 16px;
          height: 16px;
          .el-step__icon-inner {
            transform: scale(0.6);
            line-height: 16px;
            margin-left: -1px;
          }
        }
        .el-step__line {
          top: 20px;
          bottom: 3px;
        }
      }

      .el-step__head.is-process {
        color: #409eff;
        .el-step__icon.is-text {
          border-color: #409eff;
          .el-step__icon-inner {
            display: none;
          }
        }
      }
      .el-step__head.is-success {
        color: #fff;
        border-color: #409eff;
        .el-step__icon {
          background: #409eff;
          border-color: #409eff;
        }
        .el-step__line {
          background: #acd5ff;
        }
      }
      .el-step__main {
        .el-step__title {
          line-height: 20px;
          padding-bottom: 0px;
        }
        .el-step__description {
          line-height: 17px;
          margin-top: 4px;
        }
        .el-step__title.is-success {
          color: #409eff;
        }
        .el-step__title.is-process {
          color: #262626;
          font-size: 14px;
          font-weight: 400;
        }
        .el-step__description.is-success,
        .el-step__description.is-process,
        .el-step__description.is-wait {
          font-size: 12px;
          color: #8c8c8c;
        }
        .el-step__title.is-wait {
          font-size: 14px;
          color: #8c8c8c;
        }
      }
      .el-step__head.is-wait {
        .el-step__icon-inner {
          display: none;
        }
      }
    }
    //隐藏滚动条
    &::-webkit-scrollbar {
      width: 0;
      background-color: transparent;
    }
    /*火狐下隐藏滚动条*/
    scrollbar-width: none;
  }
  .adr-step {
    ::v-deep {
      .el-step.is-horizontal .el-step__line {
        top: 50%;
        transform: translate(0, -50%);
      }
    }
  }
  .ios-step {
    ::v-deep {
      .el-step.is-horizontal .el-step__line {
        top: 50%;
        transform: translate(0, -50%);
      }
    }
  }
  .el-steps--vertical {
    line-height: initial;
  }
  ::v-deep .is-vertical {
    border: none;
    margin-bottom: 0;
  }
</style>
