<template>
  <div class="techy-analysis-header">
    <div class="special-wrapper">
      <div class="special-wrapper__left"></div>
      <div class="special-wrapper__middle">
        <div class="special-wrapper__middle--inner">
          <div style="transform: translateX(4%)">
            <span class="top-icon">
              <svg
                width="100%"
                height="100%"
                viewBox="0 0 56 13"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <title>left</title>
                <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
                    <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
                      <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
                        <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
                          <g
                            id="编组-2备份"
                            transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
                          >
                            <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
                            <polygon
                              id="路径-11备份"
                              opacity="0.8"
                              points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
                            ></polygon>
                            <polygon
                              id="路径-11备份-3"
                              opacity="0.4"
                              points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
                            ></polygon>
                            <polygon
                              id="路径-11备份-2"
                              opacity="0.601434"
                              points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
                            ></polygon>
                            <polygon
                              id="路径-11备份-4"
                              opacity="0.201434"
                              points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
                            ></polygon>
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
            </span>
            <span class="techy-analysis-header__title">
              <slot />
            </span>
            <span class="top-icon">
              <svg
                width="100%"
                height="100%"
                viewBox="0 0 56 13"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <title>right</title>
                <g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
                    <g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
                      <g id="编组-20备份" transform="translate(24.000000, 277.000000)">
                        <g id="编组-13备份" transform="translate(35.000000, 16.000000)">
                          <g
                            id="编组-2备份-2"
                            transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
                          >
                            <polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
                            <polygon
                              id="路径-11备份"
                              opacity="0.8"
                              points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
                            ></polygon>
                            <polygon
                              id="路径-11备份-3"
                              opacity="0.4"
                              points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
                            ></polygon>
                            <polygon
                              id="路径-11备份-2"
                              opacity="0.601434"
                              points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
                            ></polygon>
                            <polygon
                              id="路径-11备份-4"
                              opacity="0.201434"
                              points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
                            ></polygon>
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
            </span>
          </div>
        </div>
      </div>

      <div class="special-wrapper__right">
        <div class="special-wrapper__right--inner">
          <span
            :class="{ 'date-select__active': dateMode === 'day' }"
            @click="
              dateMode = 'day'
              $emit('update-data', { str: '' + Math.random(), mode: dateMode })
            "
          >
            日
          </span>
          <span
            :class="{ 'date-select__active': dateMode === 'month' }"
            @click="
              dateMode = 'month'
              $emit('update-data', { str: '' + Math.random(), mode: dateMode })
            "
          >
            月
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TechyAnalysisHeader',
  props: {
    type: {
      type: String,
      default: 'dafault-type'
    },
    showTopIcon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dateMode: 'day'
    }
  }
}
</script>

<style scoped>
.techy-analysis-header {
  text-align: center;
  margin-bottom: calc(16px * var(--beilv));
  position: relative;
  white-space: nowrap;
  z-index: 1;
}

.techy-analysis-header__title {
  color: #01cfcc;
  font-size: calc(15px * var(--beilv));
  line-height: calc(18px * var(--beilv));
}

.top-icon {
  display: inline-block;
  width: calc(56px * var(--beilv));
  height: calc(12px * var(--beilv));
  margin-bottom: calc(2px * var(--beilv));
}

.special-wrapper {
  position: absolute;
  top: calc(12px * var(--beilv));
  left: 0;
  transform: skewX(35deg);
  background: #fff0;
  width: 100%;
  height: calc(22px * var(--beilv));
  display: flex;
  justify-content: center;
  align-items: center;
}

.special-wrapper__left {
  flex: 1;
  min-width: calc(56px * var(--beilv));
}

.special-wrapper__middle {
  overflow: hidden;
}

.special-wrapper__middle--inner {
  transform: skewX(-35deg);
  white-space: nowrap;
  display: flex;
  height: 100%;
  align-items: center;
}

.special-wrapper__right {
  width: calc(100px * var(--beilv));
  padding-left: calc(8px * var(--beilv));
  padding-right: calc(8px * var(--beilv));
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.special-wrapper__right--inner {
  transform: skewX(-35deg);
  border-radius: calc(2px * var(--beilv));
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
}

.special-wrapper__right--inner > span {
  display: inline-block;
  width: calc(40px * var(--beilv));
  text-align: center;
  font-size: calc(12px * var(--beilv));
  line-height: calc(18px * var(--beilv));
  color: white;
  background-color: #31878c94;
}

.special-wrapper__right--inner span.pl-select__active,
.special-wrapper__right--inner span.date-select__active {
  background-color: #42bbb7;
}
</style>
