<template>
  <div>
    <el-form-item :label="'操作区文本'"><el-input v-model="optionModel.extra" /></el-form-item>
    <el-form-item :label="'一行列数'"><base-input-number v-model="optionModel.column" /></el-form-item>
    <el-form-item :label="'排列方向'">
      <el-select v-model="optionModel.direction" filterable="" clearable="" placeholder="排列方向" size="mini">
        <el-option value="vertical" label="vertical"></el-option>
        <el-option value="horizontal" label="horizontal"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="'列表尺寸'">
      <el-select v-model="optionModel.descriptionsSize" filterable="" clearable="" placeholder="列表尺寸" size="mini">
        <el-option value="medium " label="medium "></el-option>
        <el-option value="small " label="small "></el-option>
        <el-option value="mini " label="mini "></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="'显示冒号'"><el-switch v-model="optionModel.colon"></el-switch></el-form-item>
    <dsEnabledEditor :optionModel="optionModel"></dsEnabledEditor>
    <dsNameEditor :optionModel="optionModel"></dsNameEditor>
    <!-- <el-form-item :label="i18nt('designer.setting.dsEnabled')"><el-switch v-model="optionModel.dsEnabled"></el-switch></el-form-item> -->
    <el-form-item :label="i18nt('designer.setting.tableColEdit')">
      <el-button type="primary" plain="" round="" @click="openSetting">{{ i18nt('designer.setting.editAction') }}</el-button>
    </el-form-item>
    <el-form-item v-show="!optionModel.dsEnabled" :label="i18nt('designer.setting.tableDataEdit')">
      <el-button type="primary" plain="" round="" @click="openTableDataEdit">{{ i18nt('designer.setting.editAction') }}</el-button>
    </el-form-item>
    <el-dialog
      v-if="dialogVisible"
      custom-class="dialog-style list-dialog dialog-checkbox pd_0"
      :title="i18nt('designer.setting.tableColEdit')"
      :visible.sync="dialogVisible"
      :show-close="!0"
      append-to-body=""
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="1220px"
      v-dialog-drag
      v-el-dialog-center
    >
      <div class="cont" style="height: 510px;">
        <el-table
          ref="singleTable"
          width="100%"
          :data="descriptionsItems"
          :cell-style="{
            padding: '1px 0'
          }"
          height="500"
          border=""
          row-key="columnId"
          stripe=""
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <el-table-column label="" width="30"><i class="iconfont icon-drag drag-option"></i></el-table-column>
          <el-table-column :label="i18nt('designer.setting.columnName')" width="150" prop="prop">
            <template slot-scope="scope">
              <el-input v-model="scope.row.prop"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('designer.setting.columnLabel')" width="150" prop="label">
            <template slot-scope="scope">
              <el-input v-model="scope.row.label"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="'列长度'" width="150" prop="span">
            <template slot-scope="scope">
              <el-input v-model="scope.row.span"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('designer.setting.actionColumn')" width="100" align="center">
            <template slot-scope="scope">
              <el-button :title="i18nt('designer.setting.addTableColumn')" size="mini" type="" circle="" icon="el-icon-plus" @click="addCol"></el-button>
              <el-button
                :title="i18nt('designer.setting.deleteTableColumn')"
                size="mini"
                type=""
                circle=""
                icon="el-icon-minus"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain class="button-sty" @click="dialogVisible = !1">
          <i class="el-icon-close el-icon"></i>
          {{ i18nt('designer.hint.cancel') }}
        </el-button>
        <el-button type="primary" @click="colSubmit" class="button-sty">
          <i class="el-icon-check el-icon"></i>
          {{ i18nt('designer.hint.confirm') }}
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-if="dataDialogVisible"
      custom-class="dialog-style list-dialog"
      :title="i18nt('designer.setting.tableDataEdit')"
      :visible.sync="dataDialogVisible"
      :show-close="!0"
      append-to-body=""
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="75%"
      v-dialog-drag
    >
      <template slot="footer">
        <div class="dialog-footer">
          <el-button type="" @click="dataDialogVisible = !1" class="button-sty" icon="el-icon-close">{{ i18nt('designer.hint.cancel') }}</el-button>
          <el-button type="primary" @click="saveTableData" class="button-sty" icon="el-icon-check">{{ i18nt('designer.hint.confirm') }}</el-button>
        </div>
      </template>
      <code-editor mode="json" :readonly="!1" v-model="tableDataOptions"></code-editor>
    </el-dialog>
  </div>
</template>

<script>
import i18n from '../../../../../components/xform/utils/i18n';
import Draggable from 'vuedraggable';
import Sortable from 'sortablejs';
import dsEnabledEditor from './dsEnabled-editor.vue';
import dsNameEditor from './dsName-editor.vue';
import { deepClone } from '../../../../../components/xform/utils/util';
export default {
  name: 'descriptionsItems-editor',
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object
  },
  components: {
    Draggable,
    dsEnabledEditor,
    dsNameEditor
  },
  computed: {
    dataSourceList: function() {
      return this.designer.formConfig && this.designer.formConfig.dataSources ? this.designer.formConfig.dataSources : [];
    }
  },
  data() {
    return {
      dialogVisible: false,
      dataDialogVisible: false,
      tableDataOptions: {},
      descriptionsItems: []
    };
  },
  created() {
    let that = this;
  },
  methods: {
    addOption() {
      let newValue = this.descriptionsItems.length + 1;
      this.descriptionsItems.push({
        number: '',
        txt: ''
      });
    },
    deleteOption(option, index) {
      this.descriptionsItems.splice(index, 1);
    },
    openSetting: function() {
      var e = this;
      (this.descriptionsItems = deepClone(this.optionModel.descriptionsItems)),
        (this.dialogVisible = !0),
        this.$nextTick(function() {
          e.dragSort();
        });
    },
    colSubmit: function() {
      this.optionModel.descriptionsItems = deepClone(this.descriptionsItems);
      this.dialogVisible = !1;
    },
    addCol: function() {
      var e = {
        columnId: new Date().getTime()
      };
      this.descriptionsItems.push(e), this.designer.emitHistoryChange();
    },
    handleDelete: function(e, t) {
      if (1 === this.descriptionsItems.length) return this.$message.warning(this.i18nt('designer.setting.onlyOneColumnCannotBeDeleted')), !1;
      this.descriptionsItems.splice(e, 1);
    },
    dragSort: function() {
      var e = this.$refs.singleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0],
        t = this.descriptionsItems;
      this.sortable = Sortable.create(e, {
        ghostClass: 'sortable-ghost',
        setData: function(e) {
          e.setData('Text', '');
        },
        onEnd: function(e) {
          var i = t.splice(e.oldIndex, 1)[0];
          t.splice(e.newIndex, 0, i);
          t[e.newIndex].id;
          t[e.newIndex - 1] && t[e.newIndex - 1].id, t[e.newIndex + 1] && t[e.newIndex + 1].id;
        }
      });
    },
    openTableDataEdit: function() {
      (this.dataDialogVisible = !0), (this.tableDataOptions = JSON.stringify(this.optionModel.tableData, null, '  '));
    },
    saveTableData: function() {
      try {
        (this.optionModel.tableData = JSON.parse(this.tableDataOptions)), (this.dataDialogVisible = !1);
      } catch (e) {
        this.$message.error(this.i18nt('designer.hint.invalidOptionsData') + e.message);
      }
    }
  }
};
</script>

<style scoped></style>
