<template>
	<div>
		<el-form-item label-width="0">
			<el-divider class="custom-divider-margin-top">{{ i18nt('designer.setting.optionsSetting') }}</el-divider>
		</el-form-item>
    <draggable tag="ul" class="draggable-box" :list="optionModel.listItems" v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.drag-option' }">
      <li v-for="(option, idx) in optionModel.listItems" :key="idx">
        <i class="el-icon-s-operation"></i>
        <el-input v-model="option.t1" size="mini" placeholder="文本一"></el-input>
        <el-input v-model="option.t2" size="mini" placeholder="文本二"></el-input>
        <el-input v-model="option.t2" size="mini" placeholder="链接" class="b"></el-input>
        <el-button circle plain size="mini" type="danger" @click="deleteOption(option, idx)" icon="el-icon-minus" class="col-delete-button"></el-button>
      </li>
    </draggable>
    <el-button type="text" @click="addOption" icon="el-icon-circle-plus-outline" class="add-option">{{ i18nt('designer.setting.addOption') }}</el-button>
	</div>
</template>

<script>
import i18n from '../../../../../components/xform/utils/i18n';
import Draggable from 'vuedraggable';
import OptionItemsSetting from '../../../../../components/xform/form-designer/setting-panel/option-items-setting';
export default {
	name: 'listItems-editor',
	mixins: [i18n],
	props: {
		designer: Object,
		selectedWidget: Object,
		optionModel: Object
	},
	components: {
		OptionItemsSetting,
    Draggable,
	},
	created() {
		let that = this;
	},
  methods:{
    addOption() {
    	let newValue = this.optionModel.listItems.length + 1;
    	this.optionModel.listItems.push({
    		t1: '',
    		t2: ''
    	});
    },
    deleteOption(option, index) {
    	this.optionModel.listItems.splice(index, 1);
    },
  }
};
</script>

<style scoped></style>
