<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-01-16 17:26:39
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-01-16 18:21:05
 * @FilePath: /stu_h5/src/components/ReturnHead.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="returnHead">
    <div style="width: 46px">
      <img
        style="width: 9px; height: 15px"
        src="../assets/image/return.png"
        @click="returnclick"
      />
    </div>
    <div class="text">{{ text }}</div>
    <div class="publish" v-if="showpublish" @click="publishClick">
      <img
        style="width: 13px; height: 12px"
        src="../assets/image/publish.png"
      />
      <div style="margin-left: 5px; color: #2478ff">发布</div>
    </div>
    <div class="publish" v-else></div>
  </div>
</template>
<script >
import { useRouter } from "vue-router";
export default {
  name: "ReturnHead",
  props: {
    text: String,
    showpublish: {
      type: Boolean,
      default: false,
    },
    publishWork: {
      type: Function,
      default: null,
    },
  },
  setup(props, ctx) {
    const router = useRouter();
    const returnclick = () => {
      router.back();
    };
    const publishClick = () => {
      props.publishWork && props.publishWork();
    };
    return {
      returnclick,
      publishClick,
    };
  },
};
</script>
<style scoped lang="scss">
.returnHead {
  width: 95%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  background-color: #ffffff;
  padding-left: 2.5%;
  padding-right: 2.5%;
  .text {
    font-size: 18px;
    font-weight: 600;
    color: #323233;
    line-height: 12px;
    margin-left: 11px;
  }
  .publish {
    width: 46px;
    display: flex;
    align-items: center;
  }
}
</style>
