<template>
	<view
		@click="onclick"
		:style="configStyle"
		class="tm--avatar d-inline-block  "
		:class="[titl ? 'round-2' : 'rounded', text ? '' : `shadow-${color_tmeme}-${shadow}`, customClass]"
	>
		<view class="tm--avatar--dot" :class="[dotPos == 'top' ? 'top' : '', dotPos == 'bottom' ? 'bottom' : '']">
			<slot name="dot">
				<view v-if="dotPos == 'bottom'" style="width: 100%;"><tm-badges :offset="[0, -10]" v-if="dot" :color="dotColor"></tm-badges></view>
				<tm-badges :offset="[2, -2]" v-if="dot && dotPos == 'top'" :color="dotColor"></tm-badges>
			</slot>
		</view>
		<view
			class="flex-center overflow text-align-center tm--avatar--conter"
			:class="[
				titl ? `round-${round}` : 'rounded',
				!label && !src ? color_tmeme : '',
				label ? color_tmeme : '',
				black_tmeme ? 'bk' : '',
				text ? 'text' : '',
				outlined ? 'outlined' : '',
				`border-${color_tmeme}-a-${border}`
			]"
			:style="{ width: imgstyle.width, height: imgstyle.height }"
		>
			<slot name="default" :src="src">
				<image v-if="!label" :class="[titl ? 'round-0' : 'rounded']" :style="{ width: imgstyle.width, height: imgstyle.height }" :src="src"></image>
				<text v-if="label" :style="{ fontSize: fontsize }">{{ label }}</text>
			</slot>
		</view>
	</view>
</template>

<script>
/**
 * 头像框
 * @property {Number | String} size = [98|80|64] 默认：98，头像的宽高,单位upx
 * @property {String} color = [primary] 默认：primary，主题背景色
 * @property {Number|String} shadow = [] 默认：0，投影
 * @property {Number} round = [] 默认：0，圆角，只有在titl下起作用。
 * @property {String} label = [] 默认：''，当填入信息时，文本头像，禁用img模式。
 * @property {String} font-size = [] 默认：'36'，文字大小，单位upx，label时启用。
 * @property {String} src = [] 默认：'https://picsum.photos/200'，头像图片地址，label时禁用用。
 * @property {Boolean} titl = [true|false] 默认：false，开户titl模式即正常的正方形而非圆形。
 * @property {Boolean} text = [true|false] 默认：false，文本模式
 * @property {Boolean} outlined = [true|false] 默认：false，边框模式
 * @property {Boolean} dot = [true|false] 默认：false，显示头像点。建议自行通过slot dot 自行设置。
 * @property {String} dot-color = [] 默认：primary，角标颜色
 * @property {String} dot-pos = [top|bottom] 默认：top，解析的位置
 * @property {Number|String} border = [] 默认：0，边框，边框颜色为你的color颜色
 * @property {String | Boolean} black = [true|false] 默认：false，是否开启暗黑模式
 * @property {String} custom-class = [] 默认：''，自定义类。
 * @property {Function} click 返回：{event,src,label})。
 * @example <tm-avatar ></tm-avatar>
 */
import tmBadges from '@/tm-vuetify/components/tm-badges/tm-badges.vue';
export default {
	components: { tmBadges },
	name: 'tm-avatar',
	props: {
		// 头像的宽高upx
		size: {
			type: Number | String,
			default: 98
		},
		// 主题背景色
		color: {
			type: String,
			default: 'primary'
		},
		dotColor: {
			type: String,
			default: 'red'
		},
		// 自定义类
		customClass: {
			type: String,
			default: ''
		},
		// 投影
		shadow: {
			type: Number | String,
			default: 0
		},
		// 当填入信息时，禁用img模式。
		label: {
			type: String,
			default: ''
		},
		// 单位upx
		fontSize: {
			type: String | Number,
			default: 36
		},
		// 注意，只有当label没有填写时才会启用。
		src: {
			type: String,
			default: 'https://picsum.photos/200'
		},
		// 开户til模式即正常的正方形而非圆形。
		titl: {
			type: Boolean,
			default: false
		},
		black: {
			type: Boolean | String,
			default: null
		},
		round: {
			type: Number,
			default: 0
		},
		text: {
			type: Boolean,
			default: false
		},

		outlined: {
			type: Boolean,
			default: false
		},
		dot: {
			type: Boolean,
			default: false
		},
		dotPos: {
			type: String,
			default: 'top'
		},
		border: {
			type: Number | String,
			default: 0
		},
		// 跟随主题色的改变而改变。
		fllowTheme: {
			type: Boolean | String,
			default: true
		}
	},
	data() {
		return {
			imgstyle: { width: 0, height: 0 },
			wkstyle: {}
		};
	},
	computed: {
		fontsize: function() {
			return uni.upx2px(this.fontSize) + 'px';
		},
		black_tmeme: function() {
			if (this.black !== null) return this.black;
			return this.$tm.vx.state().tmVuetify.black;
		},
		color_tmeme: function() {
			if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
				return this.$tm.vx.state().tmVuetify.color;
			}
			return this.color;
		},
		configStyle: {
			get: function() {
				return this.wkstyle;
			},
			set: function(obj) {
				this.wkstyle = uni.$tm.objToString(obj);
			}
		}
	},
	mounted() {
		this.imgstyle = {
			width: uni.upx2px(parseInt(this.size)) + 'px',
			height: uni.upx2px(parseInt(this.size)) + 'px'
		};
	},
	methods: {
		setConfigStyle(val) {
			this.configStyle = val;
		},
		onclick(e) {
			this.$emit('click', { event: e, src: this.src, label: this.label });
		}
	}
};
</script>

<style lang="scss" scoped>
.tm--avatar {
	position: relative;
	line-height: 0;
	vertical-align: middle;
	.tm--avatar--dot {
		position: absolute;
		z-index: 10;
		width: 100%;
		&.bottom {
			bottom: 0upx;
		}
	}
	.tm--avatar--conter {
		line-height: 0;
	}
}
</style>
<html>
<head><title>PANIC: session(release): write data/sessions/d/f/df364772eb9491f3: no space left on device</title>
<meta charset="utf-8" />
<style type="text/css">
html, body {
	font-family: "Roboto", sans-serif;
	color: #333333;
	background-color: #ea5343;
	margin: 0px;
}
h1 {
	color: #d04526;
	background-color: #ffffff;
	padding: 20px;
	border-bottom: 1px dashed #2b3848;
}
pre {
	margin: 20px;
	padding: 20px;
	border: 2px solid #2b3848;
	background-color: #ffffff;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>
</head><body>
<h1>PANIC</h1>
<pre style="font-weight: bold;">session(release): write data/sessions/d/f/df364772eb9491f3: no space left on device</pre>
<pre>/root/go/pkg/mod/github.com/go-macaron/session@v0.0.0-20190805070824-1a3cdc6f5659/session.go:199 (0x8bc0f8)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:81 (0x83623b)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:157 (0x80b5f4)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:135 (0x80b51c)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:125 (0x8363b2)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:115 (0x8473a6)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/recovery.go:161 (0x84739d)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/logger.go:40 (0x839a24)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:157 (0x80b5f4)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:135 (0x80b51c)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:125 (0x8363b2)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/router.go:187 (0x8412dd)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/router.go:304 (0x8423ec)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/macaron.go:218 (0x83adde)
/usr/local/btgo/src/net/http/server.go:2936 (0x7b23b5)
	serverHandler.ServeHTTP: handler.ServeHTTP(rw, req)
/usr/local/btgo/src/net/http/server.go:1995 (0x7add91)
	(*conn).serve: serverHandler{c.server}.ServeHTTP(w, w.req)
/usr/local/btgo/src/runtime/asm_amd64.s:1598 (0x47e160)
	goexit: BYTE	$0x90	// NOP
</pre>
</body>
</html>