<template>

<Poptip

popper-class="fn-view"

transfer

trigger="hover"

width="540"

placement="right">

<slot></slot>

<div slot="content">

<canvas

:id="`cvs${node.id}`"

class="fn-view-canvas"/>

<Form

v-if="node"

:model="node"

:label-width="100"

size="small">

<FormItem label="函数名称：">

<span

:title="node.name"

class="fn-item">{{ node.name }}</span>

</FormItem>

<FormItem label="创建人/部门：">

<span>{{ node.createUser }}</span>

</FormItem>

<FormItem label="修改时间：">

<span>{{ dateFormatter(node.updateTime) }}</span>

</FormItem>

<!--<FormItem label="注册格式：">

<span>{{node.registerFormat}}</span>

</FormItem>-->

<FormItem label="使用格式：">

<span

:title="node.useFormat"

class="fn-item">{{ node.useFormat }}</span>

</FormItem>

<FormItem label="函数描述：">

<span

:title="node.description"

class="fn-item">{{ node.description }}</span>

</FormItem>

</Form>

</div>

</Poptip>

</template>

<script>

import moment from 'moment';

export default {

props: {

node: {

type: Object,

default: () => {},

},

},

data() {

return {

};

},

mounted() {

this.setXY();

},

methods: {

setXY() {

let type = '';

let x = null;

let y = null;

if (this.node.udfType === 0) {

type = '通用';

x = 86;

y = 106;

} else if (this.node.udfType > 2) {

type = '自定义函数';

x = 60;

y = 106;

} else {

type = 'spark';

x = 80;

y = 106;

}

this.drawWaterMark(type, x, y);

},

drawWaterMark(type, x, y) {

// 由于id是唯一的，所以这里canvas的id使用动态的字符串，让每个元素的id都不一样，否则会出现无法渲染的情况

const cvs = document.getElementById(`cvs${this.node.id}`);

const ctx = cvs.getContext('2d');

cvs.height = 140;

cvs.width = 140;

const drawDashRound = (x, y, radius, step = 5) => {

step = (5 / 180) * Math.PI * 2;

for (let b = 0, e = step / 2; e <= 360; b += step, e += step) {

ctx.beginPath();

ctx.arc(x, y, radius, b, e);

ctx.stroke();

ctx.strokeStyle = '#99d7f7';

}

};

drawDashRound(100, 100, 70);

drawDashRound(100, 100, 50);

ctx.font = '16px microsoft yahei';

ctx.fillStyle = '#99d7f7';

ctx.fillText(type, x, y);

},

dateFormatter(date) {

return moment(date).format('YYYY-MM-DD HH:mm:ss');

},

},

};

</script>

<style lang="scss" src="./index.scss">

</style>