<template>
    <div :style="`width:${width}px;height:${height}px`">
      <img :src="imgSrc" v-if="!isGray||!isIE11">
      <div v-else>
        <svg overflow="hidden" preserveAspectRatio="none slice" :width="width" :height="height">
         <image overflow="visible" preserveAspectRatio="none slice" x='0' y='0' :width="width" :height="height" :xlink:href="imgSrc" filter="url(#grayscle)"></image>

        </svg>
      </div>
    </div>
</template>

<script>
    export default {
        name:"grayImg",
        props:{
            imgSrc:{
                type:String,
                default:""
            },
            width:{
                type:[Number,String],
                default:150
            },
            height:{
                type:[Number,String],
                default:90
            }
        },
        computed: {
            isGray() {
                return window.sessionStorage.getItem('skin')=='default';
            },
            isIE11(){
                return navigator.userAgent.indexOf('Trident')!==-1;
            }
        },
        
    }
</script>

<style lang="scss" scoped>
img{
    height:100%;
    width:100%;
}
</style>



// <template>
//    <svg xmlns=" http://www.w3.org/2000/svg" style="display:none">
//      <filter  id="grayscale">
//        <feColorMatrix type="matrix"values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
//      </filter>
//    </svg>
// </template>

// <script>
//     export default {
//         name:"grayscale"
//     }
// </script>