<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="div" class="draggable-box" :list="optionModel.censusItems"
               v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.el-icon-s-operation' }">
      <ul v-for="(option, idx) in optionModel.censusItems" :key="idx">
        <li style="padding-right:62px;">
          <i class="el-icon-s-operation"></i>
          <el-input v-model="option.txt" size="mini" placeholder="描述"></el-input>
          <el-input v-if="!optionModel.formScriptEnabled" v-model="option.number" size="mini"
                    placeholder="数量"></el-input>
          <el-input v-if="optionModel.formScriptEnabled" v-model="option.field" size="mini"
                    placeholder="字段"></el-input>
          <el-button circle plain size="mini" type="primary" @click="addDetailOption(idx)" icon="el-icon-plus"
                     class="col-delete-button" style="right: 32px;"></el-button>
          <el-button circle plain size="mini" type="danger" @click="deleteOption(option, idx)" icon="el-icon-minus"
                     class="col-delete-button"></el-button>
        </li>
        <draggable tag="ol" :list="option.detailItems"
                   v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.el-icon-s-operation' }"
                   v-if="option.detailItems.length != 0">
          <li v-for="(detailoption, index) in option.detailItems" :key="index">
            <i class="el-icon-s-operation"></i>
            <el-input v-model="detailoption.txt" size="mini" placeholder="描述"></el-input>
            <!-- <el-input size="mini" placeholder="数量" v-model="detailoption.number"></el-input> -->
            <el-input v-if="!optionModel.formScriptEnabled" v-model="detailoption.number" size="mini"
                      placeholder="数量"></el-input>
            <el-input v-if="optionModel.formScriptEnabled" v-model="detailoption.field" size="mini"
                      placeholder="字段"></el-input>
            <el-button circle plain size="mini" type="danger" @click="deleteDetailOption(detailoption, index,idx)"
                       icon="el-icon-minus" class="col-delete-button"></el-button>
          </li>
        </draggable>
      </ul>

    </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';

export default {
  name: 'censusItems-editor',
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object
  },
  inject: ['getReportTemplate'],
  components: {
    Draggable,
  },
  computed: {
    dataSourceList: function () {
      return this.designer.formConfig && this.designer.formConfig.dataSources ? this.designer.formConfig.dataSources : [];
    },
    reportTemplate: function () {
      return this.getReportTemplate();
    },
  },
  data() {
    return {
      showRequestaccessDialog: false,
    }
  },
  created() {
    let that = this;
  },
  methods: {
    addOption() {
      let newValue = this.optionModel.censusItems.length + 1;
      this.optionModel.censusItems.push({
        number: '',
        txt: '',
        detailItems: []
      });
    },
    addDetailOption(idx) {
      let newValue = this.optionModel.censusItems[idx].detailItems.length + 1;
      this.optionModel.censusItems[idx].detailItems.push({
        number: '',
        txt: ''
      });
    },
    deleteOption(option, index) {
      this.optionModel.censusItems.splice(index, 1);
    },
    deleteDetailOption(option, index, pIndex) {
      this.optionModel.censusItems[pIndex].detailItems.splice(index, 1);
    },
    confirmInsertRequestaccess(rows) {
      if (rows.length) {
        let row = rows[0];
        this.optionModel.accessName = row.accessName;
        this.optionModel.accessCode = row.accessCode;
      }
    }
  }
};
</script>

<style scoped></style>
