<template>
  <el-dialog
    v-dialogDrag
    ref="diaFrom"
    title="高级查询"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="55%"
    top="10px"
    :before-close="cancel"
  >
    <div>
      <p>
        <el-button type="primary" plain @click="addRow">添加条件</el-button>
      </p>
      <el-table
        :data="fieldArr"
        style="width: 100%"
        :max-height="350"
        ref="tabs"
        border
        size="mini"
      >
        <el-table-column prop="tagLabel" label="字段" width="100">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.tagName"
              placeholder="字段"
              style="width: 100%"
            >
              <el-option
                v-for="item in fields"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="条件" width="150">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.condition"
              placeholder="条件"
              style="width: 100%"
            >
              <el-option
                v-for="item in conditions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="值">
          <template slot-scope="scope">
            <el-input
              :disabled="scope.row.condition == 'empty' || scope.row.condition == 'noEmpty'"
              v-if="scope.row.tagName != 'fondsNo'"
              v-model="scope.row.tagValue"
              placeholder="请输入内容"
              clearable
              style="width: 100%"
            ></el-input>
            <el-select
              v-else
              v-model="scope.row.tagValue"
              placeholder="请选择"
              clearable
              :disabled="scope.row.condition == 'empty'|| scope.row.condition == 'noEmpty'"
              style="width: 100%"
            >
              <el-option
                v-for="item in fondsList"
                :key="item.fondscode"
                :label="item.codeName"
                :value="item.fondscode"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="关系" width="150">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.relation"
              placeholder="关系"
              style="width: 100%"
            >
              <el-option
                v-for="item in relations"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="danger"
              plain
              size="mini"
              @click="removeRow(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 10px">
        <el-button @click="submit()" type="primary" size="mini"
          >确定
        </el-button>
        <el-button @click="cancel" type="info" size="mini">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getFindList } from "@/api/system-management/templateSetting";
export default {
  props: {
    visible: {
      type: Boolean,
      default: () => false,
    },
    fondsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      relations: [
        { id: 0, label: "并且", value: "and" },
        { id: 1, label: "或者", value: "or" },
      ],
      conditions: [], // 条件
      fields: [
        { id: 0, label: "题名", value: "maintitle" },
        { id: 1, label: "原文", value: "fileContent" },
        { id: 2, label: "档号", value: "archiveNo" },
        { id: 3, label: "归档年度", value: "filingYear" },
        { id: 4, label: "责任者", value: "responsibleby" },
        { id: 5, label: "全宗号", value: "fondsNo" },
      ],
      fieldArr: [],
    };
  },
  mounted() {
    this.getDictionary();
  },
  methods: {
    removeRow(index, row) {
      const idToRemove = row.id;
      this.fieldArr = this.fieldArr.filter((item) => item.id !== idToRemove);
    },
    // 添加行操作
    addRow() {
      const newId =
        this.fieldArr.length > 0
          ? Math.max(...this.fieldArr.map((f) => f.id)) + 1
          : 0;
      this.fieldArr.push({
        id: newId,
        tagName: "",
        condition: "",
        relation: "",
        tagValue: "",
      });
    },

    getDictionary() {
      getFindList({
        type: "advanced_search",
      }).then((res) => {
        this.conditions = res.body.list;
      });
    },
    submit() {
      if (this.fieldArr.length == 0) {
        message("warning", "请添加查询条件", 3000);
        return;
      }
      let _params = [];
      _params = this.fieldArr.map((item) => {
        return {
          condition: item.condition,
          relation: item.relation,
          tagName: item.tagName,
          tagValue: item.tagValue,
        };
      });

      // Convert fieldArr to { tagName: tagValue } format
      const searchParams = this.fieldArr.reduce((acc, item) => {
        acc[item.tagName] = item.tagValue;
        return acc;
      }, {});

      this.$emit("clickSubmit", _params,searchParams);
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
.formDIa {
  padding: 0 10px;
}
</style>
