<template>
  <div id="linkFile">
    <div
      style="display: flex; margin-bottom: 12px"
      v-for="(v, i) in linkFileList"
      :key="i"
    >
      <el-input
        style="margin-right: 12px"
        v-model="v.title"
        @click.native="showRules(i)"
      />
      <el-input
        v-model="v.systemChapter && v.systemChapter.length  && v.systemChapter[0].content "
        @click.native="showChapter(i)"
        :disabled="v.systemChapter && v.systemChapter.length === 0"
      />
      <el-button @click="addRules"> + </el-button>
      <el-button v-if='linkFileList.length > 1' @click="delRules(v, i)"> - </el-button>
    </div>
    <selectRules v-model="rulesVisible" @confirm="selectRulesConfirm" />
    <selectChapter v-model="chapterVisible" @confirm="selectChapterConfirm" />
  </div>
</template>
<script>
import selectChapter from './selectChapter.vue'
import selectRules from './selectRules.vue'
// import basFlow from '../../../../../jsComponents/page/basFlow'

export default {
  components:{
    selectChapter,
    selectRules
  },
  // props:{
  //   control:{
  //     type: Object
  //   }
  // },
  data() {
    return {
      chapterVisible: false,
      rulesVisible: false,
      linkFileList: [{
        title: "",
        docId: "",
        systemChapter: [{
          "dmid": "",
          "content": "",
          "docId": ""
        }]
      }],
      current: ''
    };
  },
  mounted() {
    if(this.$root.control.systemDocumentChapter && this.$root.control.systemDocumentChapter.length > 0) {
      this.linkFileList = this.$root.control.systemDocumentChapter;
    }
  },
  watch:{
    '$root.control':{
      handler(val){
        console.log(val);
      },
      deep: true

    }
  },
  methods: {
    showRules(index) {
      this.rulesVisible = true;
      this.current = index;
    },
    showChapter(index) {
      this.chapterVisible = true;
      this.current = index;
    },
    /**
     * 选择章节
     * @date 2021-10-12
     * @param {any} data
     * @returns {any}
     */
    selectChapterConfirm(data) {
      console.log('data',data,this.current,this.control)
      this.$set(this.linkFileList, this.current, {
        title: data.dm,
        docId: data.dmid|| data.docId,
        systemChapter: [{
          "dmid": data.id,
          "content": data.content,
          "docId": data.dmid|| data.docId
        }]
      })
      window.basFlow.controls[this.$root.control.id] = {
        ...window.basFlow.controls[this.$root.control.id],
        systemDocumentChapter: this.linkFileList
      }      // this.$root.control.systemDocumentChapter = this.linkFileList
      window.relatedEleIcon();
    },
    /**
     * 选择制度
     * @date 2021-10-12
     * @param {any} data
     * @returns {any}
     */
    selectRulesConfirm(data) {
      console.log('ruledata',data,this.current,this.control)
      this.$set(this.linkFileList, this.current, {
        title:data.title,
        docId:data.id,
        systemChapter: [],
        dmid: data.docId
      })
      window.basFlow.controls[this.$root.control.id] = {
        ...window.basFlow.controls[this.$root.control.id],
        systemDocumentChapter: this.linkFileList
      }
      window.relatedEleIcon();
    },
    addRules(){
      const length = this.linkFileList.length;
      this.linkFileList.push({
        title: "",
        docId: "",
        systemChapter: [{
          "dmid": "",
          "content": "",
          "docId": ""
        }]
      })
    },
    delRules(val,index){
      console.log(index,this.linkFileList)
      this.linkFileList.splice(index, 1)
      this.$set(this.linkFileList,this.linkFileList)
      console.log('f',this.linkFileList)
    }
  },
};
</script>
