<template>
  <div
    :class="{
      fixed: fixed,
      transparent:transparent
    }"
    class="header"
  >
    <image
      @click="onClickLeft"
      class="arrow"
      :src="theme == 'white' ? whiteArrow : blackArrow"
    ></image>
    <text
      :style="{
        color: theme == 'white'?'#fff':'#000',
      }"
      class="title"
      >{{ title }}</text
    >
  </div>
</template>

<script>
import mIcon from "./../m-icon/m-icon.vue";
export default {
  data() {
    return {
      whiteArrow:
        "https://ndata.zzxcx.net/ctjk/mp-wx/beforeMockExam/arrow-left.png",
      blackArrow:
        "https://ndata.zzxcx.net/ctjk/mp-wx/mockExamEnd/arrow-left.png",
    };
  },
  components: {
    mIcon,
  },
  props: {
    fixed: {
      type: Boolean,
      default: false,
    },
    transparent: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    theme: {
      type: String,
      default: "white",
    },
    iconStyle: {
      type: String,
      default: "",
    },
  },
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="less" scoped>
.fixed {
  position: fixed !important;
  top: 0;

}
.transparent{
  background: transparent;
}
.header {
  position: sticky;
  top: 0;
  font-size: 15px;
  padding: 15px;
  z-index: 999;
  width: 750rpx;
  .arrow {
    width: 10px;
    height: 17px;
  }
  

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
}
</style>