<template>
  <div class="patent-tree-filter">
    <el-container>
      <el-header class="patent-query-filter-header"></el-header>
      <el-main class="patent-tree-filter-main">
        <template v-if="field.length > 0">
          <div v-for="item in field" :key="item.id" style="width: 100%;">
            <el-collapse>
              <el-collapse-item>
                <template slot="title">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox :label="item.id" @change="handleChange(item)">{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                </template>
                <!-- 单选 -->
                <div v-if="item.type == 4" style="padding-left: 15px;">
                  <div v-for="radio in item.options" :key="radio.id" style="width: 100%;">
                    <span>{{ radio.name }}</span>
                  </div>
                </div>
                <!-- 多选 -->
                <div v-if="item.type == 5" style="padding-left: 15px;">
                  <div class="source-checkbox">
                    <div v-for="source in item.options" :key="source.id">
                      <span class="source-checkbox-label">{{ source.name }}</span>
                    </div>
                  </div>
                </div>
                <!-- 树类型 -->
                <el-tree v-if="item.type == 6" @check-change="onChangeTree($event, item.id)" :ref="item.id"
                  :data="item.child" show-checkbox node-key="id" check-strictly default-expand-all
                  :props="{ children: 'child', label: 'name' }">
                  <div class="custom-filter-tree-node" slot-scope="{ node, data }">
                    <span class="name">{{ data.name }}</span>
                  </div>
                </el-tree>
              </el-collapse-item>
            </el-collapse>


          </div>

        </template>

        <template v-else>
          <div class="no-data">暂无数据</div>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>

export default {
  props: {
    projectId: {
      default: 0
    },
    // 是否显示栏位
    isShowCustom: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      activeNames: '',//展示哪一个面板
      // 面板的loading
      loading: false,
      // 分页信息
      queryParams: {
        current: 1,
        size: 10,

      },
      total: 0,
      // 自定义栏位
      field: [],
      // 处理数据
      valObj: {
        treeArr: [],
        check: [],
        radio: '',
        description: '',
      },
      // 总数据
      customFields: [],
      checkList: [],
      markedFields: [],
    }
  },
  watch: {

  },
  mounted() {
    this.getList()
  },
  methods: {
    // 
    handleChange(val) {
      let obj = {
        filedId: val.id,
        filedType: val.type
      }
      if (this.markedFields.length > 0) {
        let index = this.markedFields.findIndex(item => {
          return item.filedId == val.id
        })
        if (index != -1) {
          this.markedFields.splice(index, 1)
        } else {
          this.markedFields.push(obj)
        }
      } else {
        this.markedFields.push(obj)
      }
      this.$emit('markedFields', this.markedFields)

    },
    // 查询自定义栏位数据
    getList() {
      var params = {
        ...this.queryParams,
        searchQuery: `projectId=${this.projectId}`,
        orderDTOList: [],
      }
      this.loading = true
      this.$api.queryCustomField(params).then(response => {
        if (response.code == 200) {
          let data = response.data.data
          this.handleFiled(data)
          this.loading = false
        }
      }).catch(error => {
        this.loading = false
      })
    },
    handleFiled(data) {
      data.forEach(item => {
        this.queryCustomOption(item)
      })
    },
    // 查询自定义栏位选项数据
    queryCustomOption(row) {

      let params = {
        customFieldId: row.id,
      }
      this.$api.queryCustomOption(params).then(response => {
        if (response.code == 200) {
          if (row.type == 6) {//树类型
            row.child = response.data.data
          } else if (row.type == 5) {
            row.options = response.data.data
          } else if (row.type == 4) {
            row.options = response.data.data
          }
          this.field.push(row)
        }
      }).catch(error => {

      })
    },

    // 点击节点发生的变化
    onChangeTree(filed, filedId) {//当前节点的数据，当前栏位的数据
      let obj = {
        filedId: filedId,
        filedType: 6,
        values: [filed.id],
      }
      let index = this.checkList.findIndex(item => {
        return item == filedId
      })
      if (index == -1) {
        this.checkList.push(filedId)
      }
      this.markedFields.push(obj)
      this.$emit('markedFields', this.markedFields)
    },
  }
}
</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-query-filter-search {
  display: flex;
}

.patent-query-filter-search-input {
  margin-right: 5px;
}

.patent-query-filter-search-bottom {
  text-align: center;
  margin-top: 10px;
}

.year-data-picker {
  width: 200px;
  display: flex;
  justify-content: space-between;

  .el-input__prefix {
    display: none;
  }

  .el-input__inner {
    padding: 10px;
    text-align: center;
  }
}

.year-data-input {
  width: 100px;
}

.source-checkbox {
  margin-top: 10px;

  span {
    display: inline-block;
    font-size: 13px;
  }

  .el-checkbox {
    display: block;
  }

  .el-checkbox__label {
    position: relative;
    top: 5px;
  }

  .source-checkbox-count {
    color: #409EFF;
    position: relative;
    top: -4px;
    left: 10px;
  }

  .source-checkbox-label {
    max-width: 190px;
    padding-left: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.query-read-status {
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  background: #dcdcdc;
  border-radius: 3px;
  padding: 0 5px;

  span {
    display: inline-block;
  }

  .a {}

  .b {
    text-align: center;
    width: 30px;
  }

  .c {
    padding-left: 5px;
  }
}

.query-read-status_is-active {
  background: #409EFF !important;
  color: #ffffff !important;
}
</style>