import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Propertiy } from 'src/app/interface/propertiy-interface';

@Component({
    selector: 'app-section',
    templateUrl: './text-demo.component.html',
    styleUrls: ['./text-demo.component.scss']
})
export class TextDemoComponent implements OnInit {
    properties: Array<Propertiy> = [
        {
            name: 'value',
            value: 'string || boolean || number || date...',
            type: '@Input()',
            description: '组件数据源'
        },
        {
            name: 'isTextArea',
            value: 'true || false',
            type: '@Input()',
            description: '组件是否多行文本显示，默认是false'
        },
        {
            name: 'type',
            value: 'string || date || number || enum || boolean',
            type: '@Input()',
            description: '组件类型，即要将数据以何种类型转换'
        },
        {
            name: 'format',
            value: 'string字符串',
            type: '@Input()',
            description: '组件类型转换格式，主要针对date类型和number类型'
        },
        {
            name: 'data',
            value: 'any[]',
            type: '@Input()',
            description: '组件类型转换格式用到的数据，主要针对enum类型'
        },
        {
            name: 'thousand',
            value: '. || 、|| ，...',
            type: '@Input()',
            description: '千分位符号'
        },
        {
            name: 'decimal',
            value: '. || 、|| ，...',
            type: '@Input()',
            description: '小数点处符号'
        },
        {
            name: 'expression',
            value: '匹配正则%s%v',
            type: '@Input()',
            description: '货币符号及值展现形式,默认是%s%v'
        },
        {
            name: 'filledSymbol',
            value: '0',
            type: '@Input()',
            description: '十进制前面填充的符号,默认是0'
        },
        {
            name: 'showTitle',
            value: 'true || false',
            type: '@Input()',
            description: '是否显示title，默认是false'
        },

    ];
    formGroup = new FormGroup({
        name: new FormControl("Sam"),
        age: new FormControl(12),
        gender: new FormControl("male"),
        married: new FormControl("yes"),
        address: new FormControl("山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市山东青州市"),
        dates: new FormControl('2019-08-20T00:00:00'),
        newdates: new FormControl(new Date()),
        stringdate: new FormControl('2020年1月2日'),
        stringdatetime: new FormControl('2020年01月`02日 14小时6分24秒'),
        sizes: new FormControl(true),
        numbers: new FormControl(123456789),
        numbers2: new FormControl(0.23451111),
        numbers3: new FormControl(0.56789),
        numbers4: new FormControl(123456789.98765),
        numbers5: new FormControl(555),
        numbers6: new FormControl(0.555),
        dateweek: new FormControl('2019-08-20~2020-08-27')
    })
    
    longTextarea="";

    numberOption = {
        type:'number',
        useThousands: true,
        precision: 4,
        formatter: null
    }

    format(val: number) {
        return Number(val).toFixed(2) + '%';
    }
    numberOption2 = {
        type:"number",
        useThousands: true,
        precision: 4,
        formatter: this.format
    }

    currentLanguage = 'zh-CHS'
    name = {
        'en': 'ameng'
    }
    age = ''
    married = {
        'zh-CHS': '已婚',
        'en': 'married'
    }
    birthday = {
        'zh-CHS': '2019-08-28 10:00:00',
        'en': '2019-08-28 10:00:00'
    }
    hasChildren = {
        'zh-CHS': '1',
        'en': '0'
    }

    textOne

    constructor() { }

    ngOnInit() {
    }

}