<template>
  <section class="fengduHead">
    <div class="content flex">
      <ai-area class="fill" v-model="current" :mask="false">
        <template slot-scope="{areaname}">
          <el-input class="areaPicker" :value="areaname" readonly suffix-icon="el-icon-arrow-down"/>
        </template>
      </ai-area>
      <div class="headerTitle" v-text="title"/>
      <div class="rightPane fill" flex>
        <div class="item" v-text="currentTime"/>
        <div class="item setting mar-l24" @click.stop="$emit('setting',true)"/>
        <div class="item fullscreen mar-l14" @click.stop="$emit('fullscreen')"/>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "fengduHead",
  model: {
    prop: "active",
    event: "change"
  },
  props: {
    title: String,
    views: {default: () => []},
    active: String,
    currentTime: {default: null}
  },
  computed: {
    tabs: v => [
      ...v.views,
    ]
  },
  data() {
    return {
      current: ""
    }
  },
  watch: {
    active: {
      immediate: true,
      handler(v) {
        if (v != this.current) this.current = this.$copy(this.active)
      }
    }
  },
  methods: {
    getWeather() {
      this.$request.post("/app/weather/queryWeather").then(res => {
        if (res?.data) {

        }
      })
    }
  },
  created() {
    // this.getWeather()
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: YouSheBiaoTiHei;
  src: url("https://cdn.cunwuyun.cn/fonts/YouSheBiaoTiHei-2.ttf");
}

.fengduHead {
  width: 100%;
  height: 96px;
  padding: 0 24px;
  box-sizing: border-box;
  color: #fff;
  position: relative;
  background-repeat: no-repeat;
  background-image: url("../assets/bg-lighting.png");
  background-position:top center;

  .content {
    height: 100%;
    background-repeat: no-repeat;
    background-position: left bottom, right bottom;
    font-family: PingFang-SC;

    .headerTitle {
      font-family: YouSheBiaoTiHei;
      font-size: 44px;
      letter-spacing: 4px;
      line-height: 48px;
      background-image: linear-gradient(to bottom, #fff, rgba(122, 232, 254, 1));
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-clip: text;
      color: transparent;
    }

    :deep(.areaPicker) {
      max-width: 300px;

      input {
        background: rgba(0, 54, 82, 0.9);
        border: 1px solid rgba(42, 122, 146, 0.7);
        border-radius: 2.2px;
        color: #B3DDE5;
        cursor: pointer;
      }

      .el-input__suffix {
        color: #B3DDE5;
      }
    }
  }

  .rightPane {
    padding: 0 11px 0 0;
    justify-content: flex-end;

    .item {
      padding-left: 30px;
      height: 30px;
      line-height: 30px;
      background-image: url("../assets/timeIcon.png");
      background-repeat: no-repeat;
      background-position: left center;

      &.setting {
        background-image: url("../assets/settingIcon.png") !important;
      }

      &.fullscreen {
        background-image: url("../assets/fullscreenIcon.png") !important;
      }
    }
  }
}
</style>
