<template>
    <div class="form-body">
        <el-form ref="form" :model="form" :label-width="options.labelWidth" size="mini" :rules="rules"
                 :validate-on-rule-change="options.validateOnRuleChange"
                 :style="{width:options.width,maxWidth:options.maxWidth}" >
            <el-row>
                <el-col  v-for="(item,index) in items" :span="item.columnCount*columnSize" :key="item.code">
                    <template v-if="item.type=='content'||item.type=='section'">
                        <div v-html="item.content" :class="[item.type,item.style]">
                        </div>
                    </template>
                    <template v-else>
                        <el-form-item :label="$_i18n(item.name)" :prop="item.code" v-show="checkVisible(item)" :class="item.type">
                            <template v-if="item.type=='text'||item.type=='hidden'||item.type=='password'">
                                <el-input v-model="form[item.code]" :disabled="checkDisable(item)" clearable
                                          @change="changed($event,item)"
                                          :title="setControlTitle(item)" :show-password="item.type=='password'"
                                          :placeholder="placeholderAdapter(item)"  :class="item.style"/>
                            </template>
                            <template v-else-if="item.type=='select'||item.type=='dropdownchecklist'
                                ||item.type=='autocomplete'||item.type=='autocomplete_remote'">
                                <el-select v-model="form[item.code]" :placeholder="placeholderAdapter(item)"
                                           value-key="id" :ref="item.code" @change="changed($event,item)" :loading="item.loading"
                                           :filterable="item.type=='autocomplete'||item.type=='autocomplete_remote'"
                                           :default-first-option="item.type=='autocomplete'||item.type=='autocomplete_remote'"
                                           :multiple="item.type=='dropdownchecklist'" :disabled="checkDisable(item)"
                                           :clearable="item.type!='select'"  :size="$store.state.settings.Size"
                                           :remote="item.type=='autocomplete_remote'" :title="setControlTitle(item)"
                                           :remote-method="($event)=>handleRemote($event,item)" :class="item.style">
                                    <el-option v-for="dataItem in item.options" :key="dataItem.id"
                                               :label="dataItem.name" :value="dataItem.id">
                                    </el-option>
                                </el-select>
                            </template>
                            <template v-else-if="item.type=='radio'">
                                <el-radio-group v-model="form[item.code]" @change="changed($event,item)"
                                                :title="setControlTitle(item)" :disabled="checkDisable(item)">
                                    <el-radio v-for="(data,index) in item.options" :key="data.id"
                                              :label="data.id" :ref="item.code">{{$_i18n(data.name)}}</el-radio>
                                </el-radio-group>
                            </template>
                            <!--级联-->
                            <template v-else-if="item.type=='cascader'">
                                <el-cascader v-model="form[item.code]" :placeholder="placeholderAdapter(item)"
                                             value-key="id" :ref="item.code" :title="setControlTitle(item)"
                                             :filterable="item.config&&item.config.showFilter"
                                             :disabled="checkDisable(item)" @change="changed($event,item)"
                                             clearable  :size="$store.state.settings.Size" :class="item.style"  :props="item.config"
                                             :show-all-levels="false"  :options="item.options">
                                </el-cascader>
                            </template>
                            <!--穿梭-->
                            <template v-else-if="item.type=='transfer'||(item.type=='stepusers'&&item.disable!==true)">
                                <el-transfer v-model="form[item.code]"  :ref="item.code"
                                             :filterable="item.config&&item.config.showFilter" :title="setControlTitle(item)"
                                             :filter-placeholder="placeholderAdapter(item)"
                                             @change="changed($event,item)"
                                             :disabled="checkDisable(item)" :size="$store.state.settings.Size"
                                             :titles="['可选', '已选择']" :data="item.options" :props="item.config"
                                             :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}">
                                </el-transfer>
                            </template>
                            <template v-else-if="item.type=='stepusers'&&item.disable===true">
                                <span v-if="item.values.length===0">未正确配置流程，步骤不允许更换审批人，但未配置默认审批人</span>
                                <span v-else v-for="(username,index) in item.values">
                                        <span v-if="index!=0">、</span>
                                        <span>{{username.name}}</span>
                                    </span>
                            </template>
                            <template v-else-if="item.type=='editor'">
                                <RichEditor :id="item.code" v-model="form[item.code]" :options="item.config"
                                            :disabled="checkDisable(item)" :ref="item.code"
                                            @change="changed($event,item)"
                                            :title="setControlTitle(item)"></RichEditor>
                            </template>
                            <template v-else-if="item.type=='choose'" style="display: inline-block;">

                                <el-table class="file-table" v-if="item.linkageRule.listType==='custom'"
                                          :data="form[item.code]" border stripe >
                                    <el-table-column prop="name" label="文件名称"></el-table-column>
                                    <el-table-column prop="userName" label="上传人" width="100px"></el-table-column>
                                    <el-table-column prop="time" label="上传时间" width="170px"></el-table-column>
                                    <el-table-column label="操作" width="150px">
                                        <template slot-scope="scope">
                                            <el-button v-if="item.linkageRule.perview" :size="$store.state.settings.Size" type="text">
                                                <a :href="perview(item.linkageRule.perview,scope.row)"
                                                   target="_blank">预览</a>
                                            </el-button>
                                            <el-button :size="$store.state.settings.Size" type="text">
                                                <a :href="scope.row.url" target="_blank">下载</a>
                                            </el-button>
                                            <el-button :size="$store.state.settings.Size" type="text"
                                                       @click="removeItem(item,scope.$index)">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                            <template v-else-if="item.type=='file'" style="display: inline-block;">
                                <el-upload :action="adapterUrl(item.url)" :file-list="form[item.code]"
                                           :disabled="checkDisable(item)" :data="item.linkageRule.data"
                                           :accept="item.linkageRule.accept" :limit="item.linkageRule.limit"
                                           :on-change="(...event)=>handleFileChanged(event[0],event[1],item)"
                                           :before-upload="($event)=>beforeUpload($event,item)" list-type="text"
                                           :on-exceed="(...event)=>handleExceed(event[0],event[1],item)"
                                           :before-remove="(...event)=>beforeRemove(event[0],event[1],item)"
                                           :on-remove="(...event)=>handleUploadRemove(event[0],event[1],item)"
                                           :on-success="(...event)=>handleUploadSuccess(event[0],event[1],event[2],item)"
                                           :on-error="(...event)=>handleUploadError(event[0],event[1],event[2],item)"
                                           :title="setControlTitle(item)" :show-file-list="item.linkageRule.listType!=='custom'">
                                    <el-button size="small" type="primary" slot="trigger">{{'点击上传'}}</el-button>
                                    <div slot="tip" class="el-upload__tip" >{{item.remark||item.linkageRule.desc}}</div>
                                </el-upload>
                                <el-table class="file-table" v-if="item.linkageRule.listType==='custom'"
                                          :data="form[item.code]" border stripe >
                                    <el-table-column prop="name" label="文件名称"></el-table-column>
                                    <el-table-column prop="userName" label="上传人" width="100px"></el-table-column>
                                    <el-table-column prop="time" label="上传时间" width="170px"></el-table-column>
                                    <el-table-column label="操作" width="150px">
                                        <template slot-scope="scope">
                                            <el-button v-if="item.linkageRule.perview" :size="$store.state.settings.Size" type="text">
                                                <a :href="perview(item.linkageRule.perview,scope.row)"
                                                   target="_blank">预览</a>
                                            </el-button>
                                            <el-button :size="$store.state.settings.Size" type="text">
                                                <a :href="scope.row.url||scope.row.src" target="_blank">下载</a>
                                            </el-button>
                                            <el-button :size="$store.state.settings.Size" type="text"
                                                       @click="removeItem(item,scope.$index)">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                            <template v-else-if="item.type=='image'">
                                <el-upload :action="adapterUrl(item.url)" :file-list="form[item.code]" :disabled="checkDisable(item)"
                                           :class="{'hide-add':form[item.code].length>=item.linkageRule.limit}"
                                           :on-change="(...event)=>handleFileChanged(event[0],event[1],item)"
                                           :data="item.linkageRule.data"
                                           :accept="item.linkageRule.accept" :limit="item.linkageRule.limit"
                                           :before-upload="($event)=>beforeUpload($event,item)" list-type="picture-card"
                                           :on-exceed="(...event)=>handleExceed(event[0],event[1],item)"
                                           :before-remove="(...event)=>beforeRemove(event[0],event[1],item)"
                                           :on-remove="(...event)=>handleUploadRemove(event[0],event[1],item)"
                                           :on-success="(...event)=>handleUploadSuccess(event[0],event[1],event[2],item)"
                                           :on-error="(...event)=>handleUploadError(event[0],event[1],event[2],item)"

                                           >
                                    <i class="el-icon-plus" :title="setControlTitle(item)"></i>
                                    <template slot="file" slot-scope="{file}" title="点击删除">
                                        <video v-if="file.type=='video'" style="width: 100%;height: 100%"
                                               :src="adapterUrl(file.url||file.src)"></video>
                                        <img v-else class="el-upload-list__item-thumbnail"
                                             :src="adapterUrl(file.url||file.src)" alt="" />
                                        <a class="el-upload-list__item-name">
                                            <i class="el-icon-document"></i>{{file.name}}
                                        </a>
                                        <label class="el-upload-list__item-status-label">
                                            <i class="el-icon-upload-success el-icon-check"></i>
                                        </label>
                                        <div class="el-upload-list__item-actions" @click="removeFile(item,file)">
                                            <i class="el-icon-delete" ></i>
                                        </div>
                                    </template>
                                    <div slot="tip" v-if="checkDisable(item)" class="el-upload__tip">
                                        {{item.remark||item.linkageRule.desc}}</div>
                                </el-upload>
                            </template>
                            <template v-else-if="item.type=='switch'">
                                <el-switch v-model="form[item.code]" @change="changed($event,item)"
                                           :title="setControlTitle(item)" :disabled="checkDisable(item)"/>
                            </template>
                            <template v-else-if="item.type=='checkbox'">
                                <el-checkbox-group v-model="form[item.code]" :title="setControlTitle(item)"
                                                   @change="changed($event,item)"
                                                   :disabled="checkDisable(item)">
                                    <el-checkbox v-for="dataItem in item.options" :label="$_i18n(dataItem.name)"
                                                 :key="dataItem.id" :name="item.code" />
                                </el-checkbox-group>
                            </template>
                            <template v-else-if="item.type=='date'||item.type=='datetime'">
                                <el-date-picker :value-format="item.formatString" :format="item.formatString"
                                                v-model="form[item.code]" :type="item.type" :name="item.code"
                                                :ref="item.code" :disabled="checkDisable(item)"
                                                :title="setControlTitle(item)" :clearable="clearable(item)"
                                                :picker-options="{shortcuts:[{text:'当前时间',onClick(picker){picker.$emit('pick',new Date());}}]}"
                                                :placeholder="$_i18n(item.remark||item.name)" :editable="false"
                                                @change="changed($event,item)">
                                </el-date-picker>
                            </template>
                            <template v-else-if="item.type=='textarea'">
                                <el-input v-model="form[item.code]" type="textarea" @change="changed($event,item)"
                                          :rows="item.linkageRule&&item.linkageRule.rows||4"
                                          :title="setControlTitle(item)"
                                          :disabled="checkDisable(item)" clearable
                                          :placeholder="placeholderAdapter(item)"/>
                            </template>
                            <template v-else-if="item.type=='sql'||item.type=='json'||item.type=='xml'||item.type=='html'">
                                <CodeEditor v-model="form[item.code]" @change="changed($event,item)"
                                          :title="setControlTitle(item)" :ref="item.code" :language="item.type"
                                          :disabled="checkDisable(item)"  :css-class="item.style"
                                          :placeholder="placeholderAdapter(item)"/>
                            </template>
                            <template v-else-if="item.type=='steplist'">
                                <el-select v-model="form[item.code]" :placeholder="placeholderAdapter(item)"
                                           value-key="id" :ref="item.code" :title="setControlTitle(item)"
                                           :disabled="checkDisable(item)" @change="changed($event,item)"
                                           :size="$store.state.settings.Size" :class="item.style">
                                    <el-option v-for="dataItem in item.options" :key="dataItem.id"  :label="dataItem.name" :value="dataItem.id">
                                    </el-option>
                                </el-select>
                            </template>
                            <template v-else-if="item.type=='processlist'">
                                <template v-if="options.type=='workflow'">
                                    <span class="danger">必须在流程业务表单中选择流程，不允许在流程过程中选择流程！！！</span>
                                </template>
                                <el-select v-else v-model="form[item.code]" :placeholder="placeholderAdapter(item)" value-key="id"
                                           :ref="item.code" :title="setControlTitle(item)"
                                           :disabled="checkDisable(item)" @change="changed($event,item)"
                                           :size="$store.state.settings.Size" :class="item.style" >
                                    <el-option v-for="dataItem in item.options" :key="dataItem.id"  :label="dataItem.name" :value="dataItem.id">
                                    </el-option>
                                </el-select>
                            </template>
                            <template v-else>
                                未定义-请联系产品研发==>{{item.type}}
                            </template>
                            <span class="unit">{{item.unit}}</span>
                            <span v-if="!checkDisable(item)&&item.linkageRule&&item.linkageRule.button"
                                  class="iconfont iconfont-btn"
                                  :class="item.linkageRule.button.style"
                                  @click="$page_toolbar_clickHandler($event,item.linkageRule.button)"
                                  :title="$_i18n(item.linkageRule.button.remark)">
                            </span>
                        </el-form-item>
                    </template>
                </el-col>
            </el-row>
            <el-row v-if="options.desc">
                <el-col :span="24" v-html="options.desc">
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import resize from '../../utils/mixins/resize'
    import form from './form'
    import CodeEditor from "./CodeEditor";

    export default {
        name: "DynamicForm",
        mixins: [resize,form], //监听外部框架的大小改变事件
        components: {
            CodeEditor
        },
        props:{
          options:{
              type:Object,
              default(){
                  return {
                      type:"form",//业务领域模式   form  workflow
                      desc:"",
                      validateOnRuleChange:false,
                      idKey: "id",
                      columnCount: 2, //表单列数计算范围
                      width: "100%",  //表单内容占表单总允许宽度
                      labelWidth: "100px" //标题的宽度
                  }
              }
          }
        },data() {
            return {
            }
        },computed:{
            // checkLimit(item){
            //     this.$d.debug().log("计算属性",item);
            //     return true;
            // }
        },methods:{
            // adapterUrl(url){
            //     return this.$d.adapterUrl(url);
            // }
        // },dataAdapter(data){
        //     if(typeof  data=="object"){
        //         return JSON.stringify(data);
        //     }
        //     return data;
        }
    }
</script>
