/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <svg
    version="1.1"
    id="图层_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="0 0 870 650"
    style="enable-background: new 0 0 870 650"
    xml:space="preserve"
    :width="Width"
    :height="Height"
  >
    <path
      class="st0"
      d="M870,432.6v-18V235.1v-18H563.2L307.7,217H0v18v179.6v18h307.5c0.6,0,1.3,0,1.9,0.1H870V432.6z"
    />
    <g class="st1" v-if="showSidewalk">
      <g>
        <rect x="406.4" y="236.8" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="229" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="221.4" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="244.5" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="252.4" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="260.1" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="267.9" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="275.8" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="283.5" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="291.4" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="299.1" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="306.9" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="314.9" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="322.6" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="330.4" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="338.3" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="346" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="353.9" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="361.6" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="369.4" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="377.3" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="385" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="392.9" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="400.6" class="st2" width="56.3" height="4" />
      </g>
      <g>
        <rect x="406.4" y="408.4" class="st2" width="56.3" height="4" />
        <rect x="406.4" y="416.4" class="st2" width="56.3" height="4" />
        <rect x="406.4" y="424.4" class="st2" width="56.3" height="4" />
      </g>
    </g>
    <g>
      <path class="st3" d="M0,198.4h870l0,0v-1H0" />
    </g>
    <rect y="214.9" class="st4" width="870" height="3" />
    <g>
      <path class="st3" d="M870,451.6H0l0,0v1h870" />
    </g>
    <rect y="432.1" class="st4" width="870" height="3" />
    <polygon
      v-if="showPhaseIcon"
      id="东直行_3_"
      class="st5"
      points="531.7,277.9 507.5,277.9 507.5,274.1 498.4,279.4 507.5,284.5 507.5,280.9
 531.7,280.9 "
    />
    <polygon
      v-if="showPhaseIcon"
      id="东直行_2_"
      class="st5"
      points="337,372.1 361.2,372.1 361.2,375.9 370.3,370.6 361.2,365.4 361.2,369.1 337,369.1
 "
    />
    <g>
      <rect x="0" y="237.3" class="st6" width="387.2" height="2" />
      <g id="XMLID_50_">
        <g>
          <rect x="160.7" y="355.8" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="160.6" y="384.2" class="st6" width="12" height="2" />
      <g id="XMLID_49_">
        <g>
          <rect x="124.7" y="355.8" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="124.7" y="384.2" class="st6" width="12" height="2" />
      <g id="XMLID_48_">
        <g>
          <rect x="88.7" y="355.8" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="88.7" y="384.2" class="st6" width="12" height="2" />
      <g id="XMLID_2_">
        <g>
          <rect x="51.2" y="355.8" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="51.2" y="384.2" class="st6" width="12" height="2" />
      <g id="XMLID_1_">
        <g>
          <rect x="15.2" y="355.8" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="15.2" y="384.2" class="st6" width="12" height="2" />
      <g>
        <g id="XMLID_47_">
          <g>
            <rect x="375.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="375.2" y="297.8" class="st6" width="12" height="2" />
        <g id="XMLID_46_">
          <g>
            <rect x="339.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="339.2" y="297.8" class="st6" width="12" height="2" />
        <g id="XMLID_45_">
          <g>
            <rect x="303.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="303.2" y="297.8" class="st6" width="12" height="2" />
        <g id="XMLID_44_">
          <g>
            <rect x="267.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="267.2" y="297.8" class="st6" width="12" height="2" />
        <g id="XMLID_43_">
          <g>
            <rect x="231.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="231.2" y="297.8" class="st6" width="12" height="2" />
        <g id="XMLID_42_">
          <g>
            <rect x="195.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="195.2" y="297.8" class="st6" width="12" height="2" />
        <g id="XMLID_41_">
          <g>
            <rect x="159.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="159.2" y="297.8" class="st6" width="12" height="2" />
        <g id="XMLID_40_">
          <g>
            <rect x="123.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="123.2" y="297.8" class="st6" width="12" height="2" />
        <g id="XMLID_39_">
          <g>
            <rect x="87.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="87.2" y="297.8" class="st6" width="12" height="2" />
      </g>
      <g>
        <g id="XMLID_9_">
          <g>
            <rect x="51.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="51.2" y="297.8" class="st6" width="12" height="2" />
        <g id="XMLID_8_">
          <g>
            <rect x="15.2" y="267.5" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="15.2" y="297.8" class="st6" width="12" height="2" />
      </g>
      <g>
        <g>
          <rect x="0" y="327.4" class="st4" width="386.3" height="2" />
        </g>
        <rect x="196.6" y="355.8" class="st6" width="189.2" height="2" />
        <rect x="196.6" y="384.2" class="st6" width="189.2" height="2" />
        <rect x="0" y="412.6" class="st6" width="386.6" height="2" />
        <polygon
          class="st6"
          points="385.2,401.9 385.2,399.5 385.2,365.9 385.2,363.4 385.2,327.4 387.2,327.4 387.2,432.2 385.2,432.2
         "
        />
      </g>
    </g>
    <g>
      <rect x="482.7" y="410.8" class="st6" width="387.2" height="2" />
      <g id="XMLID_20_">
        <g>
          <rect x="697.2" y="292.3" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="697.3" y="263.9" class="st6" width="12" height="2" />
      <g id="XMLID_19_">
        <g>
          <rect x="733.2" y="292.3" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="733.3" y="263.9" class="st6" width="12" height="2" />
      <g id="XMLID_18_">
        <g>
          <rect x="769.2" y="292.3" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="769.3" y="263.9" class="st6" width="12" height="2" />
      <g id="XMLID_17_">
        <g>
          <rect x="806.7" y="292.3" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="806.7" y="263.9" class="st6" width="12" height="2" />
      <g id="XMLID_16_">
        <g>
          <rect x="842.7" y="292.3" class="st6" width="12" height="2" />
        </g>
        <g></g>
      </g>
      <rect x="842.7" y="263.9" class="st6" width="12" height="2" />
      <g>
        <g id="XMLID_15_">
          <g>
            <rect x="482.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="482.7" y="350.3" class="st6" width="12" height="2" />
        <g id="XMLID_14_">
          <g>
            <rect x="518.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="518.7" y="350.3" class="st6" width="12" height="2" />
        <g id="XMLID_13_">
          <g>
            <rect x="554.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="554.7" y="350.3" class="st6" width="12" height="2" />
        <g id="XMLID_12_">
          <g>
            <rect x="590.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="590.7" y="350.3" class="st6" width="12" height="2" />
        <g id="XMLID_11_">
          <g>
            <rect x="626.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="626.7" y="350.3" class="st6" width="12" height="2" />
        <g id="XMLID_10_">
          <g>
            <rect x="662.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="662.7" y="350.3" class="st6" width="12" height="2" />
        <g id="XMLID_7_">
          <g>
            <rect x="698.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="698.7" y="350.3" class="st6" width="12" height="2" />
        <g id="XMLID_6_">
          <g>
            <rect x="734.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="734.7" y="350.3" class="st6" width="12" height="2" />
        <g id="XMLID_5_">
          <g>
            <rect x="770.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="770.7" y="350.3" class="st6" width="12" height="2" />
      </g>
      <g>
        <g id="XMLID_4_">
          <g>
            <rect x="806.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="806.7" y="350.3" class="st6" width="12" height="2" />
        <g id="XMLID_3_">
          <g>
            <rect x="842.7" y="380.6" class="st6" width="12" height="2" />
          </g>
          <g></g>
        </g>
        <rect x="842.7" y="350.3" class="st6" width="12" height="2" />
      </g>
      <g>
        <g>
          <rect x="483.7" y="320.7" class="st4" width="386.3" height="2" />
        </g>
        <rect x="484.1" y="292.3" class="st6" width="189.2" height="2" />
        <rect x="484.1" y="263.9" class="st6" width="189.2" height="2" />
        <rect x="483.3" y="235.5" class="st6" width="386.6" height="2" />
        <polygon
          class="st6"
          points="484.7,248.2 484.7,250.6 484.7,284.2 484.7,286.7 484.7,322.7 482.7,322.7 482.7,217.9 484.7,217.9
         "
        />
      </g>
    </g>
  </svg>
</template>
<script>
export default {
  name: 'pedSectionEW',
  data () {
    return {}
  },
  props: {
    Width: {
      type: String,
      default: '870px'
    },
    Height: {
      type: String,
      default: '650px'
    },
    showSidewalk: {
      type: Boolean,
      default: false
    },
    showPhaseIcon: {
      type: Boolean,
      default: false
    }
  },
  methods: {},
  mounted () {}
}
</script>
<style scoped>
.st0 {
  fill: #3d3939;
}
.st1 {
  opacity: 0.9;
}
.st2 {
  fill: #f2f2f2;
}
.st3 {
  fill: #e5e5d8;
}
.st4 {
  fill: #ccb63a;
}
.st5 {
  fill: #ededed;
}
.st6 {
  fill: #dddddd;
}
</style>
