<template>
  <el-form-item  
      v-if="widget.options.hidden==true?false:true"
      :label="widget.type == 'text'?'':widget.type == 'divider'?'':widget.name" 
      :prop="widget.model"
      :label-width="widget.options.isLabelWidth==true?widget.options.labelWidth +'px':null"
      >



    <template v-if="widget.type == 'input'" >
      <el-input 
        v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
        :type="widget.options.dataType"
        v-model.number="dataModel"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :disabled="widget.options.disabled"
        :readonly="widget.options.readonly"
      ></el-input>
      <el-input 
        v-else
        :type="widget.options.dataType"
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :readonly="widget.options.readonly"
        :clearable="widget.options.clearable"
      ></el-input>
    </template>

    <template v-if="widget.type == 'text'">
      <div :style="{textDecoration:ArrayIndexOfDecoration(widget.options.fontStyle),fontStyle:ArrayIndexOfItalic(widget.options.fontStyle),fontWeight:ArrayIndexOfBold(widget.options.fontStyle),width: widget.options.width,textAlign:widget.options.textAlign,fontSize:widget.options.fontSize+'px',lineHeight:widget.options.lineHeight,color:widget.options.color}">
        <span>{{widget.name}}</span>
      </div>
    </template>

    <template v-if="widget.type == 'divider'">
        <div :style="{margin:MarginToTopBottom(widget.options.margin)}"  >
            <el-divider v-if="widget.options.direction!='placeholder'" :direction="widget.options.direction" :content-position="widget.options.position">{{widget.name}}</el-divider>
        </div>
    </template>

    <template v-if="widget.type == 'textarea'">
      <el-input type="textarea" :rows="5"
        v-model="dataModel"
        :readonly="widget.options.readonly"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
      ></el-input>
    </template>

    <template v-if="widget.type == 'number'">
      <el-input-number 
        v-model="dataModel" 
        :style="{width: widget.options.width}"
        :min="widget.options.min"
        :max="widget.options.max"
        :step="widget.options.step"
        :controls="widget.options.controls"
        :controls-position="widget.options.controlsPosition"
        :disabled="widget.options.disabled"
      ></el-input-number>
    </template>

    <template v-if="widget.type == 'radio'">
      <el-radio-group v-model="dataModel"
        :style="{width: widget.options.width}"
        :disabled="widget.options.disabled"
      >
        <el-radio
          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
        >
          <template v-if="widget.options.remote">{{item.label}}</template>
          <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
        </el-radio>
      </el-radio-group>
    </template>

    <template v-if="widget.type == 'checkbox'">
      <el-checkbox-group v-model="dataModel"
        :style="{width: widget.options.width}"
        :disabled="widget.options.disabled"
      >
        <el-checkbox
          
          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
        >
          <template v-if="widget.options.remote">{{item.label}}</template>
          <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="widget.type == 'time'">
      <el-time-picker 
        v-model="dataModel"
        :is-range="widget.options.isRange"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :readonly="widget.options.readonly"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :arrowControl="widget.options.arrowControl"
        :value-format="widget.options.format"
        :style="{width: widget.options.width}"
      >
      </el-time-picker>
    </template>

    <template v-if="widget.type=='date'">
      <el-date-picker
        v-model="dataModel"
        :type="widget.options.type"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :readonly="widget.options.readonly"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
        :format="widget.options.format"
        :style="{width: widget.options.width}"
      >
      </el-date-picker>
    </template>

    <template v-if="widget.type =='rate'">
      <el-rate v-model="dataModel"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :allow-half="widget.options.allowHalf"
      ></el-rate>
    </template>

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

    <template v-if="widget.type == 'select'">
      <el-select
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :multiple="widget.options.multiple"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :filterable="widget.options.filterable"
      >
        <el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value"></el-option>
      </el-select>
    </template>

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

    <template v-if="widget.type=='slider'">
      <el-slider 
        v-model="dataModel"
        :min="widget.options.min"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :step="widget.options.step"
        :show-input="widget.options.showInput"
        :range="widget.options.range"
        :show-tooltip="widget.options.showTooltip"
        :show-stops="widget.options.showStops"
        :style="{width: widget.options.width}"
      ></el-slider>
    </template>

    <template v-if="widget.type=='imgupload'">
      <fm-upload
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :style="{'width': widget.options.width}"
        :width="widget.options.size.width"
        :height="widget.options.size.height"
        :token="widget.options.token"
        :domain="widget.options.domain"
        :multiple="widget.options.multiple"
        :length="widget.options.length"
        :is-qiniu="widget.options.isQiniu"
        :is-delete="widget.options.isDelete"
        :min="widget.options.min"
        :is-edit="widget.options.isEdit"
        :action="widget.options.action"
      >
      </fm-upload>
    </template>

    <template v-if="widget.type == 'editor'">
      <fm-editor
        v-model="dataModel"
        :width="widget.options.width"
        :height="widget.options.height"
      >

      </fm-editor>
    </template>

    <template v-if="widget.type == 'cascader'">
      <el-cascader
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :options="widget.options.remoteOptions"
      >

      </el-cascader>
    </template>

    
    <template v-if="widget.type == 'usercomponents'">
      <el-input
          @focus="usercomponentsfocus"
          style="cursor: pointer;width:100%;"
          placeholder="点击选择用户"
          :readonly="true"
          v-model="usercomponentsModel">
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
      </el-input>

      <el-dialog
        title="选择用户"
        :visible.sync="usercomponentsVisible"
        append-to-body
        width="1000px"
        top="20vh">

        <el-input
              v-if="widget.options.options.filter(item => item.filterable==true? item.value:'').length==0?false:true"
              v-model="searchUser"
              :placeholder="widget.options.options.filter(item => item.filterable==true? item.value:'').length==0?false:this.widget.options.options.filter(item => item.filterable==true? item.value:'')[0].label+'搜索'">
        </el-input>

         
        <el-table
            border
            ref="multipleTable"
            :data="userComponentsTemp.filter(data => !searchUser || data[(this.widget.options.options.filter(item => item.filterable==true? item.value:'').length==0?false:this.widget.options.options.filter(item => item.filterable==true? item.value:'')[0].value)].toLowerCase().includes(searchUser.toLowerCase()))"
            style="width: 100%;margin-top:20px;"
            tooltip-effect="dark"
            highlight-current-row
            @current-change="handleSelectionChange" 
        >
          <el-table-column
            label="#"
            align="center"
            width="55">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked"></el-checkbox> 
            </template>
          </el-table-column>

          <template v-for="(item,index) in widget.options.options">
            <el-table-column
              v-if="item.show"
              :key="index"
              :label="item.label"
              :width="item.width"
              :prop="item.value">
            </el-table-column>
          </template>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="usercomponentsVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSelectionChangeSubmit">确 定</el-button>
        </span>
      </el-dialog>

    </template>

  </el-form-item>
</template>

<script>
import FmUpload from './Upload'
import FmEditor from './Editor/tinymce'

export default {
  props: ['widget', 'models', 'rules', 'remote'],
  components: {
    FmUpload,
    FmEditor
  },
  data () {
    return {
      searchUser:'',
      userComponentsObj:{},
      usercomponentsModel:'',
      userComponentsTemp:[
        // {
        //   id:1,
        //   account:'jeecg',
        //   username:'jeecg测试',
        //   rolename:'',
        //   sex:'1', 
        //   mobile:'18897923099',
        //   email:'18897923099@163.com',
        //   uniqutId:'e9ca23d68d884d4ebb19d07889727daa',
        // },
        
      ],
      usercomponentsVisible:false,
      dataModel: this.models[this.widget.model]
    }
  },
  created () {
    if (this.widget.type === 'radio' || this.widget.type === 'checkbox' || this.widget.type === 'select') {
      if (this.widget.options.remoteUnique==true&& this.widget.options.remoteUniqueFunc!='') {
         this.$axios.get(this.widget.options.remoteUniqueFunc).then((response)=>{
            const str = this.widget.options.remoteUniqueFuncStr==undefined?'':this.widget.options.remoteUniqueFuncStr
            const ss = str==''?'':str.split(".")
            var responseStr = {}
            if ( ss =='') {
              responseStr = response
            }
            if (ss.length ==1 && ss !='') {
              responseStr = response[ss[0]]
            }
            if (ss.length ==2 && ss !='') {
              responseStr =  (response[ss[0]][ss[1]]);
            }
            if (ss.length ==3 && ss !='') {
              responseStr = (response[ss[0]][ss[1]][ss[2]]);
            }
            if (ss.length ==4 && ss !='') {
              responseStr = (response[ss[0]][ss[1]][ss[2]][ss[3]]);
            }
            if (ss.length ==5 && ss !='') {
              responseStr = (response[ss[0]][ss[1]][ss[2]][ss[3]][ss[4]]);
            }
            if (ss.length ==6 && ss !='') {
              responseStr = (response[ss[0]][ss[1]][ss[2]][ss[3]][ss[4]][ss[5]]);
            }
           //  console.log(this.widget.options.options.filter(item => item.return==true? item.value:'').length==0?false:this.widget.options.options.filter(item => item.return==true? item.value:'')[0].value)
            this.widget.options.remoteOptions = responseStr.map(item => {
                return {
                  value: item[this.widget.options.props.value],
                  label: item[this.widget.options.props.label],
                  children: item[this.widget.options.props.children]
                }
            })
            
        }).catch((err)=>{
          console.log(err);
        })
      }
    }
    
    if (this.widget.type !== 'usercomponents' &&this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
      this.remote[this.widget.options.remoteFunc]((data) => {
        this.widget.options.remoteOptions = data.map(item => {
          return {
            value: item[this.widget.options.props.value],
            label: item[this.widget.options.props.label],
            children: item[this.widget.options.props.children]
          }
        })
      })
    }

    if (this.widget.type !== 'usercomponents' &&this.widget.type === 'imgupload' && this.widget.options.isQiniu) {
      this.remote[this.widget.options.tokenFunc]((data) => {
        this.widget.options.token = data
      })
    }
    
    // 远程方法
    if (this.widget.type === 'usercomponents' && this.remote[this.widget.options.remoteFunc]) {
      this.remote[this.widget.options.remoteFunc]((data) => {
        this.userComponentsTemp = data
      })
    }

    // 远程URL 
    if (this.widget.type === 'usercomponents' && this.widget.options.remoteUniqueFunc != '' ) {
      this.$axios.get(this.widget.options.remoteUniqueFunc).then((response)=>{
        console.log("create response")
        console.log(response)
          
          const str = this.widget.options.remoteUniqueFuncStr==undefined?'':this.widget.options.remoteUniqueFuncStr
          const ss = str==''?'':str.split(".")
          var responseStr = {}
          if ( ss =='') {
            responseStr = response
          }
          if (ss.length ==1 && ss !='') {
            responseStr = response[ss[0]]
          }
          if (ss.length ==2 && ss !='') {
            responseStr =  (response[ss[0]][ss[1]]);
          }
          if (ss.length ==3 && ss !='') {
            responseStr = (response[ss[0]][ss[1]][ss[2]]);
          }
          if (ss.length ==4 && ss !='') {
            responseStr = (response[ss[0]][ss[1]][ss[2]][ss[3]]);
          }
          if (ss.length ==5 && ss !='') {
            responseStr = (response[ss[0]][ss[1]][ss[2]][ss[3]][ss[4]]);
          }
          if (ss.length ==6 && ss !='') {
            responseStr = (response[ss[0]][ss[1]][ss[2]][ss[3]][ss[4]][ss[5]]);
          }
          this.userComponentsTemp =(responseStr)
          
      }).catch((err)=>{
        console.log(err);
      })
    }
  //  console.log("----------------------------")
  //  console.log(this.widget.options.options.filter(item => item.return==true? item.value:'').length==0?false:this.widget.options.options.filter(item => item.return==true? item.value:'')[0].value)
  //  console.log("----------------------------")
    
  },
  methods: {
    handleSelectionChange (row) {
      this.userComponentsTemp.forEach(item => {
        if (item.id !== row.id) {
          item.checked = false
        }
        if (item.id === row.id) {
          item.checked = true
        }
      })
      this.userComponentsObj = row
    },
    handleSelectionChangeSubmit(){
      const item = this.userComponentsObj 
      this.usercomponentsModel = item[(this.widget.options.options.filter(item => item.display==true? item.value:'').length==0?false:this.widget.options.options.filter(item => item.display==true? item.value:'')[0].value)]
      this.dataModel = item[(this.widget.options.options.filter(item => item.return==true? item.value:'').length==0?false:this.widget.options.options.filter(item => item.return==true? item.value:'')[0].value)]
      this.usercomponentsVisible = false
      
    },
    usercomponentsfocus(){
       this.usercomponentsVisible = true
       const selectAcount = this.usercomponentsModel
      this.userComponentsTemp.forEach(item => {
        if (item.username !== selectAcount) {
          item.checked = false
        }
        if (item.username ===selectAcount) {
          item.checked = true
        }
      })

    },
    MarginToTopBottom(value){
      if (value!=null) {
        return value +'px 0px'
      }
    },
    ArrayIndexOfBold(array){
      if (array.indexOf('bold') > -1) {
        return 'bold'
      }
    },
    ArrayIndexOfItalic(array){
      if (array.indexOf('italic') > -1) {
        return 'italic'
      }
    },
    ArrayIndexOfDecoration(array){
      if (array.indexOf('underline') > -1) {
        return 'underline'
      }
      if (array.indexOf('line-through') > -1) {
        return 'line-through'
      }
      if (array.indexOf('underline') > -1 && array.indexOf('line-through') > -1) {
        return 'underline line-through'
      }
    },
  },
  watch: {
    dataModel: {
      deep: true,
      handler (val) {
        this.models[this.widget.model] = val
        this.$emit('update:models', {
          ...this.models,
          [this.widget.model]: val
        })
        this.$emit('input-change', val, this.widget.model)
      }
    },
    models: {
      deep: true,
      handler (val) {
        this.dataModel = val[this.widget.model]
      }
    }
  },
  filters:{
    sexFilter(value){
      if (value=='1') {
        return '女'
      }
      if (value=='2') {
        return '男'
      }
    }
  }
}
</script>
