<template>
    <el-dialog :title="title" v-draggable v-shake="{shake:shake}" custom-class="shakeDialog" :visible.sync="visible" width="500px" :before-close="close" :modal="false" :close-on-click-modal="false" :modal-append-to-body="false">
        <div>
            <template v-if="type == 1">
                <el-select clearable  v-model="data.value" placeholder="请选择" style="width:100%">
                    <el-option
                        v-for="(item,index) in data.options"
                        :key="index"
                        :label="(typeof prop.label == 'string')? item[prop.label] : prop.label(item)"
                        :value="(typeof prop.value == 'string')? item[prop.value] : prop.value(item)"
                    >
                    </el-option>
                </el-select>
            </template>
            <template v-if="type == 2">
                <my-RichText :autoFocus="true" v-model="data.value"></my-RichText>
            </template>
            <template v-if="type == 3">
                <div v-for="(item,index1) in data.value" :key="index1" style="display:flex;align-items:center;margin-bottom:10px">
                    <div style="width:120px">
                        <el-select v-model="item.evidence.id" multiple placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="(item,index) in data.options"
                                :key="index"
                                :label="(typeof prop.label == 'string')? item[prop.label] : prop.label(item)"
                                :value="(typeof prop.value == 'string')? item[prop.value] : prop.value(item)"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div style="width:100%;margin:0 10px">
                        <my-RichText :autoFocus="false" v-model="item.description" placeholder="请输入"></my-RichText>
                    </div>
                    <div style="width:100px;display:flex;align-items:center;">
                        <el-button icon="el-icon-plus" size="small" circle @click="add(index1)"></el-button>
                        <el-button icon="el-icon-delete" size="small" circle @click="del(index1)"></el-button>
                    </div>
                </div>
            </template>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" :loading="btnLoading" @click="submit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    shake:{
        type:Boolean,
        default:false
    }
  },
  data() {
    return {
        title:'',
        type:'',//1是选择框，2是输入框，3是数组
        prop:{
            label:'label',
            value:'value'
        },
        data:{
            options:[],
            value:''
        },
        visible:false,
        btnLoading:false
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(title,type,data,prop){
        this.title = title
        this.type = type || 1
        this.data = data || {
            options:[],
            value:''
        }
        this.prop = prop || {label:'label',value:'value'}

        if(type == 3){
            if(!data.value || data.value.length==0){
                data.value = []
                this.add(-1)
            }
        }
        this.visible = true
    },
    close(){
        this.visible = false
        this.$emit('close',true)
    },
    closeDialog(){
        this.btnLoading = false
        this.visible = false
    },
    submit(){
        this.btnLoading = true
        this.$emit('submit',this.data.value)
    },
    add(index){
        var obj = {
            evidence:{
            },
            description:''
        }
        if(index==-1){
            this.data.value.push(obj)    
            return  
        }
        this.data.value.splice(index+1,0,obj)
    },
    del(index){
        this.data.value.splice(index,1)
    }
  },
};
</script>
<style lang="scss" scoped>
</style>