<template>
  <div class="patent-articles-patent-field">
    <el-container>
      
      <el-main class="patent-tree-filter-main">
        <template v-if="treeList.length ">
          <el-form label-position="top" class="custom-field-form">
            <template v-for="(item, index) in treeList">
              <el-form-item >
          <!-- <el-collapse v-model="activeNames" @change="handleChange"  > -->
            <!-- <template> -->
              <!-- <el-collapse-item  v-for="(item, index) in treeList" :title="item.name" class="name" > -->
                <template slot="label">
                  <span :title="item.name" class="name">{{ item.name }}</span>
                </template>
                <template v-if="item.type === 0 || item.type === 2 || item.type === 1">
                  <div v-for="(val, i) in selected[item.id]" class="custom-input">
                    <el-date-picker v-if="item.type === 1" v-model="val.label" value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期" class="width_100" @change="onChange(item, val)"></el-date-picker>
                    <el-input v-else type="textarea"  v-model="val.label" placeholder="请输入内容" size="small" @blur="onChange(item, val)"></el-input>
                  </div>
                </template>
                <template v-if="item.type === 4">
                  <el-radio-group v-model="selected[item.id]" @change="onChange( item)">
                    <div v-for="option in item.option">
                      <el-radio class="custom-radio" :label="option.id">{{ option.name }}</el-radio>
                    </div>
                  </el-radio-group>
                </template>
                <template v-if="item.type === 5 && isReloaData">
                  <el-checkbox-group v-model="selected[item.id]"  @change="onChange(item)">
                      <el-checkbox class="custom-checkbox" v-for="option in item.option" :label="option.id">{{ option.name }}</el-checkbox>
                  </el-checkbox-group>
                </template>
                <template v-if="item.type === 6 && isReloaData" >
                  <div>
                    <el-tree
                        @check-change="onChange(item)"
                        :ref="item.id"
                        :data="item.option"
                        check-strictly
                        :default-checked-keys="selected[item.id]"
                        show-checkbox
                        node-key="id"
                        default-expand-all
                        :props="defaultProps"
                    ></el-tree>
                  </div>
                </template>
              <!-- </el-collapse-item> -->
            <!-- </template> -->
          <!-- </el-collapse> -->
          </el-form-item>
            </template>
        </el-form>
        </template>
        
        <template v-else>
        <!-- <template > -->
          <div class="no-data">暂无数据</div>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { patentQueryMixins } from "@/views/task/components/mixins";
// import { getTreeLastChildren, getTreeDataList } from "@/utils";

export default {
  mixins: [patentQueryMixins],
  props:["reportId","patentNo",'taskId',"patentNo1"],
  data() {
    return {
      treeList: [],
      activeNames: [],
      hasSource: [],
      sourceQuery: {},
      queryParams: {
        reportId: this.reportId,
        folder: null,
        // fieldId: "",
        patentFiledID:this.selected,
        patentNo:this.patentNo?this.patentNo:this.patentNo1,
        // type:6,
        // taskId: this.taskId,
        current: 1,
        size: 10,
        total: 0,
      },
      sourceData: {},
      switchType: false,
      // refresh: true,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      onChanges: [],
      selected: {},
      isReloaData: true,
      look:true,
    }
  },
watch: {
    closeFieldDrawer() {
      this.getPatentQueryTree()
    },
    submitIndexSetting() {
      this.activeNames = []
      this.hasSource = []
    },
    async patentNo1(val) {
      this.queryParams.patentNo = val
      console.log(this.queryParams.patentNo,val);
     await this.getPatentIndexSetting()
      this.reloaData()
      
    }
  },
  mounted() {
    console.log(this.reportId, this.patentNo1);
    this.getPatentIndexSetting()
  },
  methods: {
    reloaData() {
      console.log("局不刷新");
      this.isReloaData = false;
      this.$nextTick(() => {
        this.isReloaData=true
      })
    },
    getCount(key, node) {
      if (!this.sourceData[key]) {
        return 0;
      }
      const data = this.sourceData[key].find(item => parseInt(item.value) === node)
      if (data) {
        return data.count
      }
      return 0
    },
    loadData() {
      // this.getPatentQueryTree()
      this.getPatentQueryTreeSource()
    },
    // 获取树数据来源
   async getPatentQueryTree(key) {
      let a = {
        reportId: this.reportId,
        fieldId: this.treeList[key].id,
        type:this.treeList[key].type,
      }
      console.log(this.treeList,key)
     await this.$api.listPatentFieldOption(a).then(response => {
        if (response.code == 200) {
          console.log(this.treeList);
          // this.treeList[key].option = response.data
          this.$set(this.treeList[key],"option",response.data)
        }
      })
    },
    // async getPatentQueryTree(value) {
    //   let a = {
    //     reportId: this.reportId,
    //     fieldId: value.id,
    //     type:value.type,
    //   }

    //   value.option = await this.$api.listPatentFieldOption(a)
    //   // console.log(option)
    //   this.treeList.push(value)
    //   console.log(this.treeList)
    // //  return option
    //   // this.$api.listPatentFieldOption(a).then(response => {
    //   //   if (response.code == 200) {
    //   //     this.$set(this.treeList[key],"option",response.data)
    //   //   }
    //   // })
    // },
    //专利查询获取自定义字段,通过报告id
   async getPatentQueryTreeSource(key) {//获取全部自定义字段

 
      this.treeList = []
      let params = {
        reportId:this.reportId,
      }
     await this.$api.listPatentField(params).then(response => {
        console.log(response.data)
        this.treeList = response.data
        for (let i = 0; i < this.treeList.length; i++){
          switch (this.treeList[i].type) {
              case 0:
              case 1:
              case 2:
                this.$set(this.selected, this.treeList[i].id, [])
                break
              case 3:
              case 4:
                this.$set(this.selected, this.treeList[i].id, null)
                break
              case 5:
              case 6:
                  this.$set(this.selected, this.treeList[i].id, [])
                break
            }
          this.getPatentQueryTree(i);
        }
        
      }).catch(error => {
        // this.sourceQuery[key].loading = false
      })
    },
    // 每一行事件
    handleChange(data) {
      const val = data[data.length - 1];
      if (val && this.hasSource.indexOf(val) === -1) {
        this.hasSource.push(val)
      }
    },
    // 获取已保存
   async getPatentIndexSetting() {
      // this.selected = {}
      console.log("已获取");
      this.look=true
      let data = {
        reportId: this.queryParams.reportId,
        patentNos: this.queryParams.patentNo,
      }
      console.log(data);
     await this.$api.settingAllCompareFiles(data).then(response => {
        console.log(response.data);
        if (response.code == 200) {
          console.log(this.selected);
          // this.selected=res.data.list

          for (let value of response.data) {
            console.log(value);
            switch (value.type) {
              case 0:
              case 1:
              case 2:
                let selected = []
                if (value.selected.length) {
                  selected.push(...value.selected)
                } else {
                  selected.push({
                    label: '',
                    value: -1,
                  })
                }
                this.$set(this.selected, value.id, selected)
                break
              case 3:
              case 4:
                this.$set(this.selected, value.id, value.selected.length === 0 ? null : value.selected[0].value)
                break
              case 5:
              case 6:
                console.log(value.selected.map(item => item.value));
                  this.$set(this.selected, value.id, value.selected.map(item => item.value))
               
                console.log(this.selected);
                break
            }
          }
        }
        this.$nextTick(() => {
          this.look=false
        })
      })
    },
    //标引事件
    onChange(val, input) {
      console.log("操作");
      // console.log(val, input);
      if (!this.$permission('/workspace/details/indexing')) {
        return false
      }
      if (this.look) {
        return false
      }
      let data = {
        patentNo:this.queryParams.patentNo,
        fieldId:val.id,
        reportId:this.queryParams.reportId,
        type: val.type,
        selected: [],
      }
      console.log(data);
      switch (val.type) {
        case 0:
        case 1:
        case 2:
          data.selected = this.selected[val.id].map(item => {
            return {
              label: item.label
            }
          })
          break
        case 3:
        case 4:
          data.selected = [{
            value: this.selected[val.id]
          }]
          break
        case 5:
          data.selected = this.selected[val.id].map(item => {
            return {
              value: item
            }
          })
          break
        case 6:
          const keys = this.$refs[val.id][0].getCheckedNodes();
          data.selected = keys.map(item => {
            return {
              value: item.id
            }
          })
          break
      }
      
      this.settingCompareFiles(data) 
    },
    settingCompareFiles(data) {//更新
      console.log(this.taskId,data)
      if(this.taskId){
        data.taskID = this.taskId
      }
      this.$api.settingCompareFiles(data).then(res => {
        console.log(res);
        this.$message.success('操作成功')
        this.$emit('status','1')
      })
    },
    
    // delete(id) {
    //   this.$api.deleteCompareFiles({id:id}).then(res => {
    //     console.log("已取消");
    //     // this.missage("已取消")
    //   })
    // },
  }
}
</script>

<style lang="scss">

.patent-tree-filter {
  height: 100%;
  .patent-tree-filter-main {
    height: 100%;
    padding: 10px 0;
    .no-data {
      text-align: center;
      color: #6b6868;
    }
  }
  .change-show-type {
    font-size: 13px;
    .change-show-type-info {
      color: #6b6868;
      padding-left: 10px;
    }
    .el-form-item__label{
      padding: 0 !important;
      line-height: 20px;
    }
    .el-form-item__content {
      height: 30px;
      line-height: 30px;
    }
  }
}

.patent-articles-patent-field {
  .custom-field-form {
    .name {
      display: block;
      width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .option {
      position: absolute;
      right: 0;
      top: -50px;
      color: #1e9fff;
      i {
        cursor: pointer;
      }
    }
    .el-form-item {
      margin-bottom: 0 !important;
      .el-form-item__label {
        font-size: 16px;
        border-bottom: 1px solid #d2d2d2;
        margin-bottom: 10px;
        color: #EE6666;
      }
    }
    .custom-input {
      margin-bottom: 10px;
      .el-input {
      }
      .el-button {
        float: right;
        margin-top: 5px;
      }
    }
    .custom-checkbox, .custom-radio {
      width: 100%;
      margin-right: 0 !important;
      line-height: 30px;
    }
    .el-form-item__label {
      width: 100%;
      padding: 0 !important;
    }
  }
}
</style>