<template>
  <header class="app-header">
    <div class="header-bar">
      <app-menu />
      <div>
        <el-button @click="visible = true" style="height: fit-content;" type="primary" v-if="showCaseSelect">切换案例</el-button>
        <el-button @click="drawerVisible = true" style="height: fit-content;" type="primary" v-if="showCaseDetails">查看案例</el-button>
      </div>
    </div>
    <case-select v-model="visible"></case-select>
    <el-drawer title="" size="640px" :visible.sync="drawerVisible">
      <embed class="embed" width="100%" height="100%" :src="cases.pdf_uris[0]" />
    </el-drawer>
  </header>
</template>

<script>
import AppMenu from '../base/AppMenu.vue'
import CaseSelect from '@/components/caseSelect/Index.vue'
export default {
  name: 'AppHeader',
  components: { AppMenu, CaseSelect },
  computed: {
    path() {
      return this.$route.path
    },
    showCaseSelect() {
      if (this.path !== '/home' && !this.path.includes('/works-show')) return true
      else return false
    },
    showCaseDetails() {
      if (this.path.includes('/user-study') || this.path.includes('/market-tools')) return true
      else return false
    },
    cases() {
      return this.$store.state.case
    }
  },
  data() {
    return {
      visible: false,
      drawerVisible: false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-header{
  // width:1360px;
  padding:30px 33px 0;
}
.header-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* element-ui drawer reset */
.app-header ::v-deep .el-drawer__header{
  padding:6px 16px;
  margin:0;
  border-bottom:1px solid #DCDFE6;
}
.app-header ::v-deep .el-drawer__header>h5{
  font-size:16px;
  color:#666;
  font-weight:600;
}
.app-header ::v-deep .el-drawer__body{
  height:calc(100% - 82px);
  overflow-y: auto;
}
</style>
