<template>
  <span>
    <template v-if="element.type == 'input'">
      <el-input
          v-model="element.options.defaultValue"
          :maxlength="element.options.length"
          show-word-limit
          :style="{width: isTable ? '100%' : element.options.width}"
          :placeholder="element.options.placeholder"
          :disabled="element.options.disabled"
          :show-password="element.options.showPassword"
      ></el-input>
    </template>

    <template v-if="element.type == 'textarea'">
      <el-input type="textarea" :rows="5"
                v-model="element.options.defaultValue"
                :style="{width: isTable ? '100%' : element.options.width}"
                :disabled="element.options.disabled"
                :placeholder="element.options.placeholder"
      ></el-input>
    </template>

    <template v-if="element.type == 'number'">
      <el-input-number
          v-model="element.options.defaultValue"
          :disabled="element.options.disabled"
          :controls-position="element.options.controlsPosition"
          :precision="element.options.precision"
          :controls="element.options.controls"
          :style="{width: isTable ? '100%' : element.options.width}"
      ></el-input-number>
    </template>

    <template v-if="element.type == 'radio'">
      <el-radio-group v-model="element.options.defaultValue"
                      :style="{width: isTable ? '100%' : element.options.width}"
                      :disabled="element.options.disabled">
            <el-radio
                v-if="element.options.datasourceType == 'dict_data'"
                :style="{display: element.options.inline ? 'inline-block' : 'block'}"
                :label="item.label" v-for="(item, index) in element.options.dictOptions" :key="item.value + index">
                {{ item.label }}
            </el-radio>
            <el-radio
                v-if="element.options.datasourceType == 'static_data'"
                :style="{display: element.options.inline ? 'inline-block' : 'block'}"
                :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index">
                {{ element.options.showLabel ? item.label : item.value }}
            </el-radio>
            <el-radio
                v-if="element.options.datasourceType == 'remote_data'"
                :style="{display: element.options.inline ? 'inline-block' : 'block'}"
                :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index">
                {{ element.options.showLabel ? item.label : item.value }}
            </el-radio>
      </el-radio-group>
    </template>

    <template v-if="element.type == 'checkbox'">
      <el-checkbox-group v-model="element.options.defaultValue"
                         :style="{width: isTable ? '100%' : element.options.width}"
                         :disabled="element.options.disabled">
        <el-checkbox
            v-if="element.options.datasourceType == 'dict_data'"
            :style="{display: element.options.inline ? 'inline-block' : 'block'}"
            :label="item.label" v-for="(item, index) in element.options.dictOptions" :key="item.value + index">
                {{ item.label }}
        </el-checkbox>
        <el-checkbox
            v-if="element.options.datasourceType == 'static_data'"
            :style="{display: element.options.inline ? 'inline-block' : 'block'}"
            :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index">
          {{ element.options.showLabel ? item.label : item.value }}
        </el-checkbox>
        <el-checkbox
            v-if="element.options.datasourceType == 'remote_data'"
            :style="{display: element.options.inline ? 'inline-block' : 'block'}"
            :label="item.value" v-for="(item, index) in element.options.options" :key="item.value + index">
          {{ element.options.showLabel ? item.label : item.value }}
        </el-checkbox>
      </el-checkbox-group>
    </template>
    
    <template v-if="element.type == 'time'">
      <el-time-picker
          :key="elementKey"
          :default-value="element.options.defaultValue"
          v-model="element.options.defaultValue"
          :placeholder="element.options.placeholder"
          :readonly="element.options.readonly"
          :disabled="element.options.disabled"
          :editable="element.options.editable"
          :clearable="element.options.clearable"
          :style="{width: isTable ? '100%' : element.options.width}"
          :value-format="element.options.format">
      </el-time-picker>
    </template>

    <template v-if="element.type == 'timerange'">
      <el-time-picker
          :key="elementKey"
          :default-value="element.options.defaultValue"
          v-model="element.options.defaultValue"
          :is-range="element.options.isRange"
          :placeholder="element.options.placeholder"
          :start-placeholder="element.options.placeholderMin"
          :end-placeholder="element.options.placeholderMax"
          :readonly="element.options.readonly"
          :disabled="element.options.disabled"
          :editable="element.options.editable"
          :clearable="element.options.clearable"
          :style="{width: isTable ? '100%' : element.options.width}"
          :value-format="element.options.format"
      >
      </el-time-picker>
    </template>

    <template v-if="element.type == 'date'">
      <el-date-picker
          :key="elementKey"
          v-model="element.options.defaultValue"
          :type="element.options.type"
          :placeholder="element.options.placeholder"
          :start-placeholder="element.options.placeholderMin"
          :end-placeholder="element.options.placeholderMax"
          :readonly="element.options.readonly"
          :disabled="element.options.disabled"
          :editable="element.options.editable"
          :clearable="element.options.clearable"
          :value-format="element.options.timestamp ? 'timestamp' : element.options.format"
          :format="element.options.format"
          :style="{width: isTable ? '100%' : element.options.width}"
      >
      </el-date-picker>
    </template>

    <template v-if="element.type == 'daterange'">
      <el-date-picker
          :key="elementKey"
          v-model="element.options.defaultValue"
          :type="element.options.type"
          :is-range="element.options.isRange"
          :placeholder="element.options.placeholder"
          :start-placeholder="element.options.placeholderMin"
          :end-placeholder="element.options.placeholderMax"
          :readonly="element.options.readonly"
          :disabled="element.options.disabled"
          :editable="element.options.editable"
          :clearable="element.options.clearable"
          :value-format="element.options.type == 'daterange'? element.options.format : element.options.datetimeRangeFormat"
          :format="element.options.type == 'daterange'? element.options.format : element.options.datetimeRangeFormat"
          :style="{width: isTable ? '100%' : element.options.width}"
      >
      </el-date-picker>
    </template>

    <template v-if="element.type == 'rate'">
      <el-rate v-model="element.options.defaultValue"
               :max="element.options.max"
               :disabled="element.options.disabled"
               :allow-half="element.options.allowHalf"
               :show-score="element.options.showScore"
      ></el-rate>
    </template>

    <template v-if="element.type == 'color'">
      <el-color-picker
          v-model="element.options.defaultValue"
          :disabled="element.options.disabled"
          :show-alpha="element.options.showAlpha"
      ></el-color-picker>
    </template>

    <template v-if="element.type == 'select'">
      <el-select
          v-model="element.options.defaultValue"
          :disabled="element.options.disabled"
          :multiple="element.options.multiple"
          :clearable="element.options.clearable"
          :placeholder="element.options.placeholder"
          :style="{width: isTable ? '100%' : element.options.width}"
      >
        <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value"></el-option>
      </el-select>
    </template>

    <template v-if="element.type=='switch'">
      <el-switch
          v-model="element.options.defaultValue"
          :disabled="element.options.disabled"
      >
      </el-switch>
    </template>

    <template v-if="element.type=='slider'">
      <el-slider
          v-model="element.options.defaultValue"
          :min="element.options.min"
          :max="element.options.max"
          :disabled="element.options.disabled"
          :step="element.options.step"
          :show-input="element.options.showInput"
          :range="element.options.range"
          :style="{width: isTable ? '100%' : element.options.width}"></el-slider>
    </template>

    <template v-if="element.type=='imgupload'">
      <fm-upload
          v-model="element.options.defaultValue"
          :disabled="element.options.disabled"
          :style="{'width': isTable ? '100%' : element.options.width}"
          :width="element.options.size.width"
          :height="element.options.size.height"
          token="xxx"
          domain="xxx">
      </fm-upload>
    </template>

    <template v-if="element.type == 'cascader'">
        <el-cascader
            v-if="element.options.datasourceType == 'dict_data'"
            v-model="element.options.defaultValue"
            :disabled="element.options.disabled"
            :clearable="element.options.clearable"
            :placeholder="element.options.placeholder"
            :style="{width: isTable ? '100%' : element.options.width}"
            :options="element.options.dictOptions"
            :props="{multiple: element.options.multiple, checkStrictly: element.options.checkStrictly}">
      </el-cascader>
      <el-cascader
          v-if="element.options.datasourceType == 'static_data'"
          v-model="element.options.defaultValue"
          :disabled="element.options.disabled"
          :clearable="element.options.clearable"
          :placeholder="element.options.placeholder"
          :style="{width: isTable ? '100%' : element.options.width}"
          :options="element.options.remote ? [] : element.options.options"
          :props="{multiple: element.options.multiple, checkStrictly: element.options.checkStrictly}">
      </el-cascader>
      <el-cascader
          v-if="element.options.datasourceType == 'remote_data'"
          v-model="element.options.defaultValue"
          :disabled="element.options.disabled"
          :clearable="element.options.clearable"
          :placeholder="element.options.placeholder"
          :style="{width: isTable ? '100%' : element.options.width}"
          :options="element.options.remote ? [] : element.options.options"
          :props="{multiple: element.options.multiple, checkStrictly: element.options.checkStrictly}">
      </el-cascader>
    </template>

    <template v-if="element.type == 'editor'">
      <vue-editor
          v-model="element.options.defaultValue"
          :style="{width: isTable ? '100%' : element.options.width, cursor: element.options.disabled ? 'no-drop' : '', backgroundColor: element.options.disabled ? '#F5F7FA' : ''}"
          :editor-toolbar="element.options.customToolbar"
          class="fm-editor"
          :disabled="element.options.disabled"
      >
      </vue-editor>
    </template>

    <template v-if="element.type=='blank'">
      <div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">{{ element.model }}</div>
      
    </template>

    <template v-if="element.type == 'component'">
      <component :is="`component-${element.key}`" :key="key" v-model="element.options.defaultValue"></component>
    </template>

    <template v-if="element.type == 'custom'">
      <component
          :is="element.el"
          v-model="element.options.defaultValue"
          :width="element.options.width"
          :height="element.options.height"
          :placeholder="element.options.placeholder"
          :readonly="element.options.readonly"
          :disabled="element.options.disabled"
          :editable="element.options.editable"
          :clearable="element.options.clearable"
      ></component>
    </template>

    <template v-if="element.type == 'text'">
      <span>{{ element.options.defaultValue }}</span>
    </template>

    <template v-if="element.type == 'html'">
      <span v-html="element.options.defaultValue"></span>
    </template>

    <template v-if="element.type == 'fileupload'">
      <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          :style="{width: isTable ? '100%' : element.options.width}"
          :disabled="element.options.disabled"
          :limit="element.options.limit"
      >
        <el-button size="small" type="primary">{{ $t('fm.actions.upload') }}</el-button>
        <div v-if="element.options.tip" class="el-upload__tip" slot="tip">{{ element.options.tip }}</div>
      </el-upload>
    </template>

    <template v-if="element.type == 'button'">
      <el-button
          :disabled="element.options.disabled"
          :size="element.options.buttonSize"
          :type="element.options.buttonType"
          :plain="element.options.buttonPlain"
          :round="element.options.buttonRound"
          :circle="element.options.buttonCircle"
          :style="{width: element.options.width}"
      >
        {{ element.options.buttonName }}
      </el-button>
    </template>

    <template v-if="element.type == 'link'">
      <el-link
          :disabled="element.options.disabled"
          :type="element.options.linkType"
          :underline="element.options.underline"
      >
        {{ element.options.linkName }}
      </el-link>
    </template>
  </span>
</template>

<script>
import FmUpload from './Upload'
import Vue from 'vue'

export default {
    components: {
        FmUpload
    },
    props: ['element', 'isTable'],
    data() {
        return {
            key: Math.random().toString(36).slice(-8),
            elementKey: Math.random().toString(36).slice(-8),
            dictDataList: [
                {
                    type: 'key1',
                    description: '这是key1字典的描述',
                    list: [
                        {"id": "id1", "label": "是", "value": "1", labelType: "primary", "sort": 1, children: []},
                        {"id": "id2", "label": "否", "value": "2", labelType: "warning", "sort": 2, children: []}
                    ]
                },
                {
                    type: 'key2',
                    description: '这是key2字典的描述',
                    list: [
                        {"id": "id3", "label": "口头指示", "value": "oral", "labelType": "primary", "sort": 1, children: []},
                        {"id": "id4", "label": "文件批示", "value": "file", "labelType": "primary", "sort": 2, children: []}
                    ]
                }
            ]
        }
    },
    created() {
        console.log('---***', this.element)
        console.log(this.element)
        if (this.element.type == 'component') {
            Vue.component(`component-${this.element.key}`, {
                template: `<span>${this.element.options.template}</span>`,
                props: ['dataModel']
            })
        }
    },
    watch: {
        'element.options.template': function (val) {
            Vue.component(`component-${this.element.key}`, {
                template: `<span>${val}</span>`,
                props: ['dataModel']
            })
            
            this.key = Math.random().toString(36).slice(-8)
        },
        'element.options.defaultValue': function (val) {
            console.log(val)
            this.elementKey = Math.random().toString(36).slice(-8)
            
        },
        'element.options.dictDataSource': function (val) {
            var length = this.dictDataList.length
            for (var i = 0; i < length; i++) {
                if (this.dictDataList[i].type.indexOf(val) >= 0) {
                    this.element.options.dictOptions = this.dictDataList[i].list
                }
            }
        }
    }
}
</script>
