<template>
  <div>
    <el-form-item label="关联开始字段">
      <el-select
        v-if="dateFieldOptions.length"
        v-model="optionModel.limitStartField"
        filterable
        clearable
        placeholder="不能小于该字段值"
      >
        <el-option
          v-for="item in dateFieldOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        v-else
        v-model="optionModel.limitStartField"
        placeholder="请输入开始字段属性名"
        clearable
      ></el-input>
    </el-form-item>
    <el-form-item label="关联结束字段">
      <el-select
        v-if="dateFieldOptions.length"
        v-model="optionModel.limitEndField"
        filterable
        clearable
        placeholder="不能大于该字段值"
      >
        <el-option
          v-for="item in dateFieldOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        v-else
        v-model="optionModel.limitEndField"
        placeholder="请输入结束字段属性名"
        clearable
      ></el-input>
    </el-form-item>
    <el-form-item label="最小日期">
      <el-date-picker
        v-model="optionModel.minDate"
        :type="pickerType"
        :format="optionModel.format"
        :value-format="optionModel.valueFormat"
        style="width: 100%"
        clearable
        placeholder="留空则不限制"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="最大日期">
      <el-date-picker
        v-model="optionModel.maxDate"
        :type="pickerType"
        :format="optionModel.format"
        :value-format="optionModel.valueFormat"
        style="width: 100%"
        clearable
        placeholder="留空则不限制"
      ></el-date-picker>
    </el-form-item>
  </div>
</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n";
import propertyMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/propertyMixin";
import { loopHandleWidget } from "../../../../../../components/xform/utils/util";

export default {
  name: "date-dateLimit-editor",
  mixins: [i18n, propertyMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
    tableColumns: Array,
  },
  computed: {
    pickerType() {
      return this.optionModel.type || "date";
    },
    currentFieldKey() {
      return this.getFieldKeyByOptions(this.optionModel);
    },
    dateFieldOptions() {
      let options = [];
      if (this.tableColumns && this.tableColumns.length) {
        this.collectDateFieldsFromColumns(this.tableColumns, options);
      } else if (this.designer && this.designer.widgetList) {
        loopHandleWidget(this.designer.widgetList, (widget) => {
          if (widget.type !== "date" || widget.id === this.selectedWidget.id) {
            return;
          }
          let fieldKey = this.getFieldKeyByOptions(widget.options);
          if (fieldKey && fieldKey !== this.currentFieldKey) {
            options.push({
              value: fieldKey,
              label: widget.options.label || fieldKey,
            });
          }
        });
      }
      return options;
    },
  },
  methods: {
    getFieldKeyByOptions(options) {
      if (!options) {
        return "";
      }
      return (options.keyNameEnabled && options.keyName) || options.name || "";
    },
    collectDateFieldsFromColumns(columns, options) {
      columns.forEach((col) => {
        if (col.children && col.children.length) {
          this.collectDateFieldsFromColumns(col.children, options);
          return;
        }
        if (!this.isDateColumn(col)) {
          return;
        }
        let fieldKey = col.prop;
        if (col.columnOption) {
          fieldKey = this.getFieldKeyByOptions(col.columnOption) || fieldKey;
        }
        if (col.editColumnOption) {
          fieldKey =
            this.getFieldKeyByOptions(col.editColumnOption) || fieldKey;
        }
        if (fieldKey && fieldKey !== this.currentFieldKey) {
          options.push({
            value: fieldKey,
            label: col.label || fieldKey,
          });
        }
      });
    },
    isDateColumn(col) {
      return (
        col.formatS === "date" ||
        col.formatS === "editDate" ||
        col.editFormatS === "editDate" ||
        col.widget?.type === "date" ||
        col.editWidget?.type === "date"
      );
    },
  },
};
</script>
