<template>
  <div class="navigation-name">
    <div style="display: flex;justify-content: space-between;font-weight: 400;font-size: 16px;margin-bottom: 8px">
      <div id="site" style="display: flex;align-items: center;height: 40px">
        <img width="16" height="21" src="../../assets/navigation-name.png" alt="图片加载失败">
        <div style="margin-left: 8px">{{ msg }}</div>
      </div>
      <div v-if="showTime" style="display: flex;align-items: center;">
        <div class="time-icon-wrapper">
          <img width="30" height="31" src="../../assets/time.png" alt="图片加载失败">
        </div>
        <div class="time-text-wrapper">
          系统时间: {{ now }}
        </div>

        <div>
          <slot/>
        </div>

        <div v-if="showOther" style="margin-left: 20px">
          <el-button @click="showDataWindow">数据概览</el-button>
        </div>
      </div>
    </div>
    <div class="jg-divider"/>
    <div
      :style="redLineWidth || activeStyle"
      style="position: absolute;top: 48px;left: 0;height: 4px;background-color: #A20D13;border-radius:2px"
    />
    <data-modal v-if="visible" ref="dataModal" @closeModal="closeModal"/>
  </div>
</template>

<script>
  import moment from 'moment'
  import DataModal from '@/components/DataModal/DataModal'

  export default {
    name: 'NavigationName',
    components: { DataModal },
    props: {
      msg: {
        type: String,
        default: ''
      },
      showTime: {
        type: Boolean,
        default: false
      },
      showOther: {
        type: Boolean,
        default: false
      },
      redLineWidth: {
        type: Object,
        default: () => {}
      },
      tableData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        now: moment().format('YYYY-MM-DD HH:mm:ss'),
        interval: null,
        activeStyle: {
          width: '114px'
        },
        visible: false,
      }
    },
    mounted() {
      // console.log('aaaaaa', this.$route.meta.title)
      this.interval = setInterval(() => {
        this.now = moment().format('YYYY-MM-DD HH:mm:ss')
      }, 1000)
      // var dom1 = document.querySelector('.box1')
      const dom = document.getElementById('site')
      // 包括padding border
      this.activeStyle = {
        width: dom.offsetWidth + 10 + 'px'
      }
    },
    beforeDestroy () {
      if (this.interval) {
        clearInterval(this.interval)
        this.interval = null
      }
    },
    methods: {
      showDataWindow() {
        this.visible = true
        this.$nextTick(() => {
          this.$refs.dataModal.showModal()
        })
      },
      closeModal() {
        this.visible = false
      },
    },
  }
</script>

<style lang="less" scoped>

  .navigation-name {
    position: relative;
    margin: 17px 0;

    .time-icon-wrapper {
      padding: 5px 5px 1px 5px;
      border-radius: 5px;
      box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.1rem -0.1rem 0.1rem #FFFFFF;
      /*box-shadow: 0px 0px 0px 3px #bb0a0a, 0px 0px 0px 6px #2e56bf, 0px 0px 0px 9px #ea982e;*/
    }

    .time-text-wrapper {
      padding: 0 8px 0 8px;
      margin-left: 4px;
      border-radius: 5px;
      height: 40px;
      line-height: 40px;
      box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
    }

    .jg-divider {
      height: 1px;
      /*background-color: #DCDFE6;*/
      border-top: 1px solid #AAA7A7;
      border-bottom: 1px solid #FFFFFF;
    }

    .el-button {
      border: none;
      background-color: #d9d9d9;
      box-shadow: 0.05rem 0.1rem 0.1rem #AAA7A7, -0.05rem -0.1rem 0.1rem #FFFFFF;
      margin: 3px 0;
    }

    .el-button:active {
      border: none;
      background-color: #A20D13;
      box-shadow: inset 0.1rem 0.1rem 0.2rem #6E090C, inset -0.1rem -0.1rem 0.2rem #c7494d;
    }

    .el-button:focus, .el-button:hover {
      color: #FFF;
      border-color: transparent;
      background-color: #A20D13;
    }
  }

</style>
