<template>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
      <g>
        <path fill="#E2E5E7" d="m129,0c-17.6,0 -32,14.4 -32,32l0,448c0,17.6 14.4,32 32,32l320,0c17.6,0 32,-14.4 32,-32l0,-352l-128,-128l-224,0z" />
        <path fill="#B0B7BD" d="m384,128l96,0l-128,-128l0,96c0,17.6 14.4,32 32,32z" style="fill:#B0B7BD;" />
        <polygon fill="#CAD1D8" points="480,224 384,128 480,128 " style="fill:#CAD1D8;" />
        <path :style="{fill:getRandomColor(value)}" d="m416,416c0,8.8 -7.2,16 -16,16l-352,0c-8.8,0 -16,-7.2 -16,-16l0,-160c0,-8.8 7.2,-16 16,-16l352,0c8.8,0 16,7.2 16,16l0,160z" style="fill:#f00" />
        <path fill="#CAD1D8" d="m400,432l-304,0l0,16l304,0c8.8,0 16,-7.2 16,-16l0,-16c0,8.8 -7.2,16 -16,16z" style="fill:#CAD1D8;" />
        <path v-if="type===2" fill="#000000" fill-opacity="0.18" p-id="14722" d="m358.678722,204.927171q-1.307107,-0.18673 -2.33412,-1.867296t-1.587202,-6.162077q-0.933648,-7.282454 -4.761605,-10.736952t-11.857329,-4.948334q-8.402832,-1.680566 -14.845003,-6.81563t-10.736952,-9.616574q-4.108051,-3.921321 -6.348806,-2.800944t-2.240755,4.108051l0,8.029373l0,17.552582q0,10.456857 -0.093365,22.594281t-0.093365,22.96774l0,19.046419l0,10.643587q0.18673,4.48151 -1.400472,9.990033t-5.975347,10.363493t-11.6706,8.309467t-18.112771,4.014686q-11.017046,0.560189 -19.886702,-3.921321t-13.724625,-11.29714t-4.761605,-14.938368t7.00236,-15.218462t14.938368,-9.896669t15.498556,-3.081038t13.351166,1.027013t8.682926,2.427485l0,-52.844475q0,-22.034092 0.18673,-49.670072q0,-5.415158 2.800944,-8.869656t7.469184,-4.014686q3.921321,-0.560189 6.442171,1.587202t5.135064,5.975347t6.442171,8.682926t10.363493,9.523209q5.601888,4.294781 9.803304,6.162077t7.842643,3.454498t7.189089,3.827957t7.842643,7.282454q4.294781,4.854969 5.228429,10.083398t0.093365,9.523209t-2.707579,7.00236t-3.174403,2.52085z" />
        <path v-if="type===3" stroke="null" p-id="5208" fill-opacity="0.18" fill="#000000" d="m296.500008,108.999985c46.11601,0 83.500008,37.383997 83.500008,83.500008s-37.383997,83.500008 -83.500008,83.500008s-83.500008,-37.383997 -83.500008,-83.500008s37.383997,-83.500008 83.500008,-83.500008zm-16.239708,45.643192a3.976166,3.976166 0 0 0 -3.976166,3.975644l0,69.520019a3.976166,3.976166 0 0 0 6.18161,3.308688l52.140536,-34.760009a3.976688,3.976688 0 0 0 0,-6.617376l-52.140536,-34.759488a3.976688,3.976688 0 0 0 -2.205444,-0.668l0,0.000522z" />
        <g>
          <text x="-1" y="0">
            <tspan x="220" y="380" text-anchor="middle" fill="white" font-family="Verdana, Helvetica, Arial, sans-serif" font-size="124">{{ value }}</tspan>
          </text>
        </g>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'FileIcon',
  props: {
    value: {
      default: '文件',
      type: String
    },
    type: {
      default: 0,
      type: [Number, String]
    }
  },
  data() {
    return {}
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    // 根据value值获取随机颜色
    getRandomColor(value) {
      const colorList = [
        '#0ca0ff',
        '#16a806',
        '#f44336',
        '#ff374e',
        '#ccc',
        '#32CD32',
        '#867aff',
        '#9a978f',
        '#ffd5b2',
        '#FFAA33',
        '#6082B6'
      ]
      const index = value.charCodeAt(0) % colorList.length
      return colorList[index]
    }
  }
}
</script>

<style scoped lang="scss">

</style>
