<template>
  <div class='header'>
    <span class='title'>生产驾驶舱</span>
    <span class='time'>刷新时间：{{time}}</span>
    <svg-icon icon-class="refresh" class='refresh-btn' @click='refreshData'/>
    <el-button type="text" class="screen-btn" @click="changeFullScreen">
			<svg-icon v-if="isFullScreen" icon-class="unFullscreen" />
			<svg-icon v-else icon-class="fullscreen" />
		</el-button>
  </div>
</template>
<script>
import moment from 'moment/moment';
export default {
  props: {
		isFullScreen: false
	},
  data() {
    return {
      time: moment().format('HH:mm:ss YYYY.MM.DD')
    }
  },
  methods: {
    changeFullScreen() {
      this.$emit('screenfullChange');
    },
    refreshData() {
      this.time = moment().format('HH:mm:ss YYYY.MM.DD')
    }
  }
}
</script>
<style lang='scss' scoped>
.header {
  position: relative;
  .title {
    font-size: 28px;
    color:'#000';
    letter-spacing: 2px;
    margin-right: 10px;
  }
  .time {
    font-size: 14px;
    color:'#000';
    margin-right: 8px;
  }
  .refresh-btn {
    font-size: 16px;
    cursor: pointer;
  }
  .screen-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
  }
}

</style>