<template>
  <div id="fliedRecord">
    <div
      style="display: flex; margin-bottom: 12px"
      v-for="(v, i) in recordList"
      :key="i"
    >
      <el-input
        style="margin-right: 12px"
        v-model="v.name"
        @click.native="showRules(i)"
      />
      <el-button v-if='recordList.length > 1' @click="delRules(v, i)"> - </el-button>
    </div>
    <selectRules v-model="rulesVisible" @confirm="selectConfirm" />
  </div>
</template>
<script>
import selectRules from "./selectRecord.vue";

export default {
  components: {
    selectRules,
  },
  data() {
    return {
      rulesVisible: false,
      recordList: [{ index: 0 }],
      current: "",
    };
  },
  mounted() {
    if (this.$root.control?.recordList?.length > 0) {
      this.recordList = this.$root.control.recordList;
    }
  },
  watch: {
    "$root.control": {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
  },
  methods: {
    showRules(index) {
      this.rulesVisible = true;
      this.current = index;
    },
    selectConfirm(data) {
      console.log("selectedData", data, this.current);
      this.recordList = [];
      data.map((v, i) => {
        this.$set(this.recordList, i, {
          name: v.recordName,
          file: v.recordFormworkFileName,
          fileLink: v.recordFormworkFile
        });
      });
      window.basFlow.controls[this.$root.control.id] = {
        ...window.basFlow.controls[this.$root.control.id],
        recordList: this.recordList,
      };
    },
    delRules(val, index) {
      this.recordList.splice(index, 1);
      this.$set(this.recordList, this.recordList);
    },
  },
};
</script>
