<template>
  <div class="techy-analysis-header">
    <template v-if="type === 'special'">
      <div
        style="background: #ccc0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
      >
        <div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>

        <div style="flex: 1; white-space: nowrap; overflow: hidden;">
          <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 class="legend" style="background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));">
          <div class="legend-item pla" style="margin-right: calc(8px * var(--beilv));">产线A</div>
          <div class="legend-item plb">产线B</div>
        </div>
      </div>
    </template>

    <template v-else>
      <span v-if="showTopIcon" 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 v-if="showTopIcon" 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>
    </template>
  </div>
</template>

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

<style scoped>
.techy-analysis-header {
  text-align: center;
  margin-bottom: calc(16px * var(--beilv));
}

.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));
}

.legend-item {
  font-size: calc(10px * var(--beilv));
  line-height: 1.5;
  color: #dff1fe;
  display: inline-block;
}

.legend-item::before {
  content: '';
  display: inline-block;
  width: calc(8px * var(--beilv));
  height: calc(8px * var(--beilv));
  background: #fffc;
  margin-right: calc(8px * var(--beilv));
}

.pla::before {
  background: linear-gradient(to top, #49fbd6, transparent);
}
.plb::before {
  background: linear-gradient(to top, #49b2ff, transparent);
}
</style>
