<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>
        <el-button type="primary" :disabled="!form.desItem" @click="editSingle('ruleForm')" size="mini">修改</el-button>
        <el-button type="primary" :disabled="!form.desItem" @click="editAll('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="偏移量：" prop="offset">
            <el-input-number v-model="formTwo.offset" label="描述文字"></el-input-number>
          </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",
        offset: 0,
        archive_no: "",
        maintitle: "",
        beforeVal: "",
        afterVal: "",
      },
      interfaceShow: [],
      // tableKey: 0,
      selectList: [],
      rangeList: [
        { value: "all", label: "全部" },
        { value: "up", label: "向上" },
        { value: "down", label: "向下" },
      ],
      isSelect: false, // 替换为类型
      pieceNum: 0,
      total: 0,
      enableField: "piece_no",
    };
  },
  computed: {
    desList() {
      return this.interfaceShow.map((item) => ({
        ...item,
        disabled: this.enableField !== item.fieldName,
      }));
    },
  },
  watch: {
    "formTwo.offset": {
      handler(newVal, val) {
        if (this.formTwo.beforeVal && !isNaN(this.formTwo.beforeVal)) {
          this.formTwo.afterVal = this.formTwo.beforeVal * 1 + newVal;
        } else {
          this.formTwo.afterVal = this.formTwo.beforeVal;
        }
      },
      deep: true,
    },
  },
  methods: {
    changeField(val) {
      this.form.offset = 0;
      this.setBeforeVal(val);
    },
    // 原内容赋值
    setBeforeVal(val) {
      this.formTwo.beforeVal = this.formTwo[val];
    },
    editAll() {
      let range = {
        page: this.pieceNum,
        limit: this.total,
      };
      if (this.formTwo.rangeType === "all") {
        range.page = 0;
      }
      if (this.formTwo.rangeType === "up") {
        range.page = 0;
        range.limit = this.pieceNum;
      }
      this.$emit("updateAllObject", this.form, this.formTwo, range);
    },
    editSingle() {
      let range = {
        page: this.pieceNum,
        limit: 1,
      };
      this.$emit("updateAllObject", this.form, this.formTwo, range);
    },
    onNext() {
      this.$emit("onNext", this.formTwo, "diaEditBatch");
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

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