<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">选项设置</el-divider>
    </el-form-item>
    <el-form-item label="选项值类型">
      <el-radio-group v-model="optionModel.optionItemValueType" @change="changeValueType">
        <el-radio :label="0">文本</el-radio>
        <el-radio :label="1">数值</el-radio>
        <el-radio :label="2">布尔值</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="默认值">
        <el-input v-model="optionModel.defaultValue" size="mini" style="width: 100px" v-if="!optionModel.optionItemValueType"></el-input>
        <base-input-number v-model="optionModel.defaultValue" size="mini" style="width: 100%" v-if="optionModel.optionItemValueType==1" />
        <el-select v-model="optionModel.defaultValue" style="width: 100%" v-if="optionModel.optionItemValueType===2" clearable @clear="optionModel.defaultValue=null">
          <el-option :value="true" label="true"></el-option>
          <el-option :value="false" label="false"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item :label="i18nt('显示字段')" v-if="optionModel.commonAttributeEnabled || optionModel.formScriptEnabled">
      <el-input type="text" v-model="optionModel.labelKey" placeholder="默认label" :disabled="optionModel.commonAttributeEnabled"></el-input>
    </el-form-item>
    <el-form-item :label="i18nt('关联字段')" v-if="optionModel.commonAttributeEnabled || optionModel.formScriptEnabled">
      <el-input type="text" v-model="optionModel.valueKey" placeholder="默认value" :disabled="optionModel.commonAttributeEnabled"></el-input>
    </el-form-item>
    <el-form-item label="状态配置">
      <a href="javascript:void(0);" class="a-link link-oneLind" @click="openDialog">
        <span>{{ optionModel.statusParam.length ? "已维护" : "" }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-dialog
      custom-class="dialog-style list-dialog"
      title="状态配置"
      :visible.sync="showDialog"
      :modal="false"
      :show-close="!0"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="800px"
      top="0px"
      v-dialog-drag
      @closed="closeHandle"
    >
      <div class="cont">
        <el-table
          ref="singleTable"
          width="100%"
          :data="tableData"
          height="500"
          border=""
          row-key="columnId"
          stripe=""
          :tree-props="{ children: 'children' }"
          default-expand-all
        >
          <el-table-column label="" width="70" fixed="left">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="" width="35"><i class="el-icon-s-operation drag-option"></i>
          </el-table-column>
          <el-table-column label="显示名称" 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="value">
            <template slot-scope="scope">
              <el-input v-model="scope.row.value" v-if="optionModel.optionItemValueType===0"></el-input>
              <base-input-number v-model="scope.row.value" v-if="optionModel.optionItemValueType===1"></base-input-number>
              <template v-if="optionModel.optionItemValueType===2">{{ scope.row.value }}</template>
            </template>
          </el-table-column>
          <el-table-column label="状态颜色" width="100" prop="type">
            <template slot-scope="scope">
              <el-select v-model="scope.row.type">
                <el-option value="warning" label="橙"></el-option>
                <el-option value="" label="蓝"></el-option>
                <el-option value="success" label="绿"></el-option>
                <el-option value="info" label="灰"></el-option>
                <el-option value="danger" label="红"></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="150" fixed="right" v-if="optionItemValueType!==2">
            <template slot="header">
              <el-tooltip
                :hide-after="500"
                class="item"
                effect="dark"
                content="添加"
                placement="top"
              >
                <el-button
                  size="mini" type="" circle=""
                  icon="el-icon-plus"
                  @click="addItem"
                />
              </el-tooltip>
            </template>
            <template #default="{ row, $index }">
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button
                  size="mini" type="" circle=""
                  icon="el-icon-delete"
                  @click="deleteItem($index)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="closeHandle" class="button-sty" icon="el-icon-close">
          {{ i18nt('designer.hint.cancel') }}
        </el-button>
        <el-button type="primary" @click="confirmDialog" class="button-sty" icon="el-icon-check">
          {{ i18nt('designer.hint.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n"
import Sortable from "sortablejs";

export default {
  name: "field-status-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      showDialog: false,
      tableData: [],
      optionItemValueType: 0,
      defaultValue: null
    }
  },
  methods: {
    dragSort: function () {
      var e = this.$refs.singleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0],
        t = this.tableData;
      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);
        }
      });
    },
    closeHandle() {
      this.showDialog = false;
    },
    openDialog() {
      this.optionItemValueType = this.optionModel.optionItemValueType
      this.defaultValue = this.optionModel.defaultValue == null ? undefined : null
      this.tableData = this.$baseLodash.cloneDeep(this.optionModel.statusParam);
      this.showDialog = true;
      this.$nextTick(function () {
        this.dragSort();
      });
    },
    addItem() {
      this.tableData.push({
        value: null,
        label: null,
        type: null
      })
    },
    confirmDialog() {
      // this.optionModel.optionItemValueType = this.optionItemValueType;
      // this.optionModel.defaultValue = (this.defaultValue === "" || this.defaultValue === undefined) ? null : this.defaultValue;
      this.optionModel.statusParam = this.$baseLodash.cloneDeep(this.tableData);
      this.showDialog = false;
      this.$nextTick(() => {
        let fieldWidget = this.designer.formWidget.getWidgetRef(this.optionModel.name);
        fieldWidget.refreshWidget();
      })

    },
    deleteItem(rowIndex) {
      this.tableData.splice(rowIndex, 1);
    },
    changeValueType(val) {
      // this.tableData = this.$baseLodash.cloneDeep(this.optionModel.statusParam);
      this.optionModel.statusParam = [];
      if (val == 2) {
        this.optionModel.statusParam.push({
          label: "是",
          value: true,
          type: "success"
        });
        this.optionModel.statusParam.push({
          label: "否",
          value: false,
          type: "danger"
        });
      }
      if (val == 1) {
        this.optionModel.defaultValue = undefined
      } else {
        this.optionModel.defaultValue = null
      }

    }
  }
}
</script>

<style scoped>

</style>
