<template>
    <div>
        <div class="ub-form">
            <div class="line">
                <div class="label">
                    <span>*</span>
                    名称
                </div>
                <div class="field">
                    <el-input v-model="data.title"></el-input>
                </div>
            </div>
            <div class="line">
                <div class="label">
                    <span>*</span>
                    标识
                </div>
                <div class="field">
                    <el-input v-model="data.name" @focus="doGenerateName"></el-input>
                    <div class="help">
                        数字字母组成，推荐驼峰命名方式，首字母不能是数字
                    </div>
                </div>
            </div>
            <div class="line">
                <div class="label">
                    <span>*</span>
                    类型
                </div>
                <div class="field">
                    <el-select v-model="data.fieldType">
                        <el-option
                                v-for="k in Object.keys(ModelFieldType)"
                                :key="k"
                                :label="ModelFieldType[k].name"
                                :value="ModelFieldType[k].value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="line" v-if="['text','textarea','radio','select','checkbox'].includes(data.fieldType)">
                <div class="label">
                    <span>*</span>
                    字段长度
                </div>
                <div class="field">
                    <el-input-number v-model="data.maxLength"></el-input-number>
                </div>
            </div>
            <div class="line"
                 v-if="[ModelFieldType.RADIO.value,ModelFieldType.SELECT.value,ModelFieldType.CHECKBOX.value].includes(data.fieldType)">
                <div class="label">
                    <span>*</span>
                    选项
                </div>
                <div class="field">
                    <table class="ub-table mini tw-bg-white">
                        <thead>
                        <tr>
                            <th>值</th>
                            <th>&nbsp;</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(option,optionIndex) in data.fieldData.options">
                            <td>
                                <el-input v-model="data.fieldData.options[optionIndex]" placeholder="输入值"></el-input>
                            </td>
                            <td>
                                <a href="javascript:;" class="ub-text-danger"
                                   @click="data.fieldData.options.splice(optionIndex,1)">
                                    <i class="iconfont icon-trash"></i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                        <tbody>
                        <tr>
                            <td colspan="2">
                                <a href="javascript:;" class="ub-text-muted" @click="data.fieldData.options.push('')">
                                    <i class="iconfont icon-plus"></i>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="line">
                <div class="label">
                    输入提示
                </div>
                <div class="field">
                    <el-input v-model="data.placeholder"></el-input>
                </div>
            </div>
            <div class="line">
                <div class="label">
                    是否必填
                </div>
                <div class="field">
                    <el-switch v-model="data.isRequired"></el-switch>
                </div>
            </div>
            <div class="line">
                <div class="label">
                    后台搜索
                </div>
                <div class="field">
                    <el-switch v-model="data.isSearch"></el-switch>
                </div>
            </div>
            <div class="line">
                <div class="label">
                    列表显示
                </div>
                <div class="field">
                    <el-switch v-model="data.isList"></el-switch>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const pinyin = require('pinyin')
    const ModelFieldType = window.__data.ModelFieldType
    export default {
        name: "AdminModelFieldEdit",
        data() {
            return {
                ModelFieldType,
                data: Object.assign({
                    "title": "",
                    "name": "",
                    "fieldType": "text",
                    "fieldData": {},
                    "maxLength": 100,
                    "isRequired": true,
                    "isSearch": true,
                    "isList": true,
                    "placeholder": ""
                }, window.__data.record),
                nameReadOnly: false
            }
        },
        watch: {
            data: {
                handler(n, o) {
                    switch (this.data.fieldType) {
                        case ModelFieldType.RADIO.value:
                        case ModelFieldType.SELECT.value:
                        case ModelFieldType.CHECKBOX.value:
                            if (!('options' in this.data.fieldData)) {
                                this.$set(this.data, 'fieldData', {options: []})
                            }
                            break
                    }
                },
                immediate: true,
                deep: true
            }
        },
        mounted() {
            $('.panel-dialog-foot [data-submit]').show().on('click', () => this.doSubmit());
        },
        methods: {
            capitalizeFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            },
            doGenerateName() {
                if (this.nameReadOnly) {
                    return
                }
                if (!this.data.title) {
                    return
                }
                let value, s, i
                value = pinyin(this.data.title, {
                    style: pinyin.STYLE_NORMAL,
                })
                s = []
                for (i = 0; i < value.length; i++) {
                    if (s.length) {
                        s.push(this.capitalizeFirstLetter(value[i].join('')))
                    } else {
                        s.push(value[i].join(''))
                    }
                }
                s = s.join('')
                if (s.length > 50) {
                    value = pinyin(this.data.title, {
                        style: pinyin.STYLE_INITIALS,
                    })
                    s = []
                    for (i = 0; i < value.length; i++) {
                        if (s.length) {
                            s.push(this.capitalizeFirstLetter(value[i].join('')))
                        } else {
                            s.push(value[i].join(''))
                        }
                    }
                    s = s.join('')
                }
                this.data.name = s
            },
            doSubmit() {
                this.$dialog.loadingOn()
                this.$api.post(window.location.href, {data: JSON.stringify(this.data)}, res => {
                    this.$dialog.loadingOff()
                    parent.__grids.get(0).lister.refresh()
                    parent.layer.closeAll()
                }, res => {
                    this.$dialog.loadingOff()
                })
            }
        }
    }
</script>

