<template>
  <div class="ignore_com-top" id="header" :style="{ background: color }">
    <div class="header" :style="{ background: color }">
      <div class="header-return" @click="goBack">
        <VanIcon name="arrow-left" />
      </div>
      <div class="header-title">选择所属公司</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { Icon } from "vant";
import { useRouter } from "vue-router";

export default defineComponent({
  props: {
    color: String,
    default: () => "#fff",
  },
  components: {
    VanIcon: Icon,
  },
  setup(props) {
    const router = useRouter();

    const proxyData = reactive({
      goBack() {
        router.back();
      },
    });
    onMounted(() => {
      console.log(props);
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>

<style lang="scss" scoped>
.header {
  box-sizing: border-box;
  padding: 5px 10px;
  width: 100%;
  height: 100%;
}

.header-return {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  //background: rgba(0, 0, 0, 0.15);
  //border: 0.5px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
  //border-radius: 25px;
  font-size: 24px;
  color: #000;
  vertical-align: middle;
}
.header-title {
  display: inline-block;
  padding-left: 20px;
  line-height: 26px;
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  vertical-align: middle;
}
</style>
