<template>
    <view class="img-wrap">
        <image
            :src="item.originUrl || item.imgUrl"
            mode="widthFix"
            class="img"
        />
        <view
            v-if="item.isLoading"
            class="img-mask"
            @tap.stop
        >
            <view class="img-loading-wrap">
                <view class="img-loading"/>
                <c-icon
                    name="baidu-logo"
                    class="img-icon"
                />
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file im-图片预览
* @author haoyan
* @categories 业务组件
* @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        // 数据对象
        item: {
            'type': Object,
            'default': {}
        }
    },
    data() {
        return {
        };
    },
    lifetimes: {
        attached() {}
    },
    methods: {}
};
</script>

<style lang="less" scoped>
@-webkit-keyframes m-loading-rotation {
  from {
      -webkit-transform: rotate(1deg);
  }
  to {
      -webkit-transform: rotate(360deg);
  }
}

.img-wrap {
    position: relative;
    border-radius: 8px;
}
.img {
    margin-bottom: -.1rem;
    width: 100%;
}
.img-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .6);
}
.img-loading-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -.27rem;
    margin-left: -.27rem;
}
.img-loading {
    position: absolute;
    display: block;
    width: .5rem;
    height: .5rem;
    margin: auto;
    border: .02rem solid #f3f3f3;
    box-sizing: content-box;
    border-top-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    transform-origin: 50% 50%;
    transform: rotate(90deg);
    animation: m-loading-rotation 1s ease 0s infinite normal;
}
.img-icon {
    position: relative;
    display: block;
    width: .54rem;
    height: .54rem;
    margin: auto;
    font-size: .3rem;
    line-height: .5rem;
    color: #f3f3f3;
    text-align: center;
}
</style>
