<template>
  <el-dialog title="批量替换" top="10px" :visible.sync="visible" width="50%" v-dialogDrag :close-on-click-modal="false"
    :before-close="cancel">
    <el-form :model="form" ref="ruleForm" size="mini" label-width="120px">
      <el-form-item label="著录项目：" prop="desItem">
        <el-select v-model="form.desItem" placeholder="请选择" style="width: 100%" @change="changeField">
          <el-option v-for="item in desList" :key="item.fieldName" :label="item.fieldNameZh" :value="item.fieldName"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查找内容：" prop="findWhat">
        <el-input v-model="form.findWhat" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="替换为：" prop="replaceTo">
        <el-select v-if="isSelect" v-model="form.replaceTo" placeholder="请选择" style="width: 100%">
          <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
        <el-input v-if="!isSelect" v-model="form.replaceTo" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="!(form.desItem  && form.replaceTo)" @click="replaceSingle" size="mini">替换
        </el-button>
        <el-button type="primary" :disabled="!(form.desItem  && form.replaceTo)" @click="replaceAll('ruleForm')"
          size="mini">全部替换</el-button>
        <el-button type="primary" @click="onNext" size="mini">{{formTwo.rangeType === 'up' ? '查找上一个':'查找下一个'}}
        </el-button>
        <el-button @click="cancel" size="mini">关闭</el-button>
      </el-form-item>
    </el-form>
    <el-form :model="formTwo" ref="ruleFormTwo" size="mini" label-width="120px">
      <el-form-item label="搜索选项">
        <el-divider />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="搜索范围：" prop="rangeType">
            <el-select v-model="formTwo.rangeType" placeholder="请选择" style="width: 200px">
              <el-option v-for="item in rangeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="70px" prop="matchCase">
            <el-checkbox v-model="formTwo.matchCase">区分大小写</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="当前替换条目">
        <el-divider />
      </el-form-item>
      <el-form-item label="档号：" prop="archive_no">
        <el-input v-model="formTwo.archive_no" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="题名：" prop="maintitle">
        <el-input v-model="formTwo.maintitle" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="原内容：" prop="beforeVal">
        <el-input v-model="formTwo.beforeVal" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="替换后：" prop="afterVal">
        <el-input v-model="formTwo.afterVal" :disabled="true"></el-input>
      </el-form-item>
      <div style="text-align: right;">第{{pieceNum}}条/共{{total}}条</div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      form: {
        desItem: "",
        findWhat: "",
        replaceTo: "",
      },
      formTwo: {
        rangeType: "down",
        matchCase: false,
        archive_no: "",
        maintitle: "",
        beforeVal: "",
        afterVal: "",
      },
      interfaceShow: [],
      selectList: [],
      rangeList: [
        { value: "all", label: "全部" },
        { value: "up", label: "向上" },
        { value: "down", label: "向下" },
      ],
      isSelect: false, // 替换为类型
      pieceNum: 0,
      total: 0,
      disableArr: [
        "archive_no",
        "piece_no",
        "folder_no",
        "year_folder_no",
        "item_id",
        "quantity",
        "js",
        "created_date",
        "retention",
        "pigeonhole_date",
      ],
    };
  },
  computed: {
    desList() {
      return this.interfaceShow.map((item) => ({
        ...item,
        disabled: this.disableArr.includes(item.fieldName),
      }));
    },
  },
  watch: {
    "form.findWhat": {
      handler(newVal, val) {
        if (!newVal && !this.formTwo.beforeVal) {
          this.formTwo.afterVal = this.form.replaceTo;
        } else if (!this.form.findWhat || !this.form.beforeVal) {
          this.formTwo.afterVal = this.formTwo.beforeVal;
        } else {
          this.formTwo.afterVal = this.formTwo.beforeVal.replace(
            this.form.findWhat,
            this.form.replaceTo
          );
        }
      },
      deep: true,
    },
    "form.replaceTo": {
      handler(newVal, val) {
        if (!this.form.findWhat && !this.formTwo.beforeVal) {
          this.formTwo.afterVal = newVal;
        } else if (!this.form.findWhat || !this.form.beforeVal) {
          this.formTwo.afterVal = this.formTwo.beforeVal;
        } else {
          this.formTwo.afterVal = this.formTwo.beforeVal.replace(
            this.form.findWhat,
            newVal
          );
        }
      },
      deep: true,
    },
    "formTwo.beforeVal": {
      handler(newVal, val) {
        if (!this.form.findWhat && !newVal) {
          this.formTwo.afterVal = this.form.replaceTo;
        } else if (!this.form.findWhat || !this.form.beforeVal) {
          this.formTwo.afterVal = newVal;
        } else {
          this.formTwo.afterVal = newVal.replace(
            this.form.findWhat,
            this.form.replaceTo
          );
        }
      },
      deep: true,
    },
  },
  methods: {
    changeField(val) {
      this.form.replaceTo = "";
      const field = this.desList.filter((item) => item.fieldName === val)[0];
      if (field && field.ctype === "select" && field.fieldName !== "fonds_no") {
        this.isSelect = true;
        this.selectList = field.note.note;
        this.$nextTick(() => {
          this.form.replaceTo = field.note.note[0].label;
        });
      } else {
        this.isSelect = false;
      }
      this.setBeforeVal(val);
    },
    // 原内容赋值
    setBeforeVal(val) {
      this.formTwo.beforeVal = this.formTwo[val];
    },
    replaceAll() {
      let range = {
        page: this.pieceNum,
        limit: this.total,
      };
      if (this.formTwo.rangeType === "all") {
        range.page = 0;
      }
      if (this.formTwo.rangeType === "up") {
        console.log("向上", this.pieceNum);
        range.page = 0;
        range.limit = this.pieceNum;
      }
      this.$emit("replaceObject", this.form, this.formTwo, range);
    },
    replaceSingle() {
      let range = {
        page: this.pieceNum,
        limit: 1,
      };
      this.$emit("replaceObject", this.form, this.formTwo, range);
    },
    onNext() {
      this.$emit("onNext", this.formTwo, "diaBatch");
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-divider--horizontal {
    margin: 13px 0;
  }
}
</style>
