<template>
  <el-dialog append-to-body :title="title" :visible.sync="visible_" :close-on-click-modal="false" :before-close="close_before" width="1000px" top="5%">
    <div class="flex-box" style="border-bottom: 1px solid #f1f1f1;">
      <div class="left scroll-bar">
        <el-tree node-key="id"  ref="tree" :data="rule_tree" :props="defaultProps" @node-click="dept_click" highlight-current class="cate-tree"></el-tree>
      </div>

      <div class="right scroll-bar">
        <div class="flex-box-end">
            <el-input type="text" prefix-icon="el-icon-search" class="search"  style="width: 250px;margin-bottom: 10px;" placeholder="输入关键字搜索" v-model.trim="keyword"/>
        </div>
        <div style="height: 430px;overflow-y: scroll;" class="scroll-bar">
          <div class="flex-box-ce" style="background-color: #ECF5FF;padding: 10px 0;border-bottom: 1px solid #EBEEF5;width:660px">
            <div style="width: 40px;"></div>
            <div class="flex-5">内容</div>
            <div class="flex-1">分值</div>
          </div>
          <div class="flex-box-ce itemBox" v-for="(item, index) in list" :key="index" v-show="item.remark.indexOf(keyword) >= 0" style="width:660px" @click="handleSelectionChange(item.checked, item)">
            <div style="width: 40px;text-align: center;position: relative;">
              <el-checkbox :key="item.id" v-model="item.checked"></el-checkbox>
              <div style="width: 40px;height: 40px;position: absolute;top: -10px;z-index: 999;"></div>
            </div>
            <div class="flex-5 ">
              <el-tooltip v-if="item.remark.length>100" class="item" effect="dark" :content="item.remark" placement="bottom">
                <div class="content">{{ item.remark }}</div>
              </el-tooltip>
              <div class="content" v-else>{{ item.remark }}</div>
            </div>
            <div class="flex-1">
              <div v-if="item.range_type == 1">
                <span :class="item.min_point > 0 ? 'red' : 'green'">{{ item.min_point }}</span>
                {{ item.pt_id == 3 ? 'B分' : 'A分' }}
              </div>
              <div v-if="item.range_type == 2">
                <span :class="item.min_point > 0 ? 'red' : 'green'">{{ item.min_point }}</span>
                至
                <span :class="item.max_point > 0 ? 'red' : 'green'">{{ item.max_point }}</span>
                {{ item.pt_id == 3 ? 'B分' : 'A分' }}
              </div>
            </div>
          </div>
          <noData content="暂无数据" v-if="list.length==0"></noData>
        </div>
      </div>
    </div>

    <div slot="footer" class="flex-box-ce">
      <el-button type="danger" plain @click="empty">清空选择</el-button>
      <div class="flex-1"></div>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      // 标题
      type: String,
      default: '选择规则'
    },
    visible: {
      // 是否显示组件
      type: Boolean,
      default: false
    },
    ptId: {
      type: Number,
      default: 3
    },
    selectItems: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  name: 'SelectRule',
  data() {
    return {
      keyword:'',
      visible_: false,
      rule_tree: [],
      item_list: [],
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      list: [],
      item_all:[],
      selectArrItem: []
    };
  },
  watch: {
    visible(val) {
      this.visible_ = JSON.parse(JSON.stringify(val));
      if (val) {
        this.selectArrItem = JSON.parse(JSON.stringify(this.selectItems));
        this.get_department_list();
      }
    },
    keyword(val){
      this.$nextTick(()=>{
        this.$refs.tree.setCurrentKey(null);
        this.list = this.item_all;
      })
    },
  },
  methods: {
    empty() {
      this.list.forEach(item => {
        item.checked = false;
      });
      this.list = JSON.parse(JSON.stringify(this.list));
    },

    handleSelectionChange(val, item) {
      this.list.forEach(obj => {
        obj.checked = false;
        if(!val&&obj.id==item.id){
          obj.checked = true;
        }
      });
      this.list = JSON.parse(JSON.stringify(this.list));
    },
    dept_click(item) {
      let ruleIds = [item.id];
      this.parse_tree(item.child, ruleIds);
      this.list = this.get_item_list(ruleIds);
    },
    parse_tree(child, ruleIds) {
      for (let i in child) {
        ruleIds.push(child[i].id);
        if (child[i].child) {
          this.parse_tree(child[i].child, ruleIds);
        }
      }
    },
    get_item_list(trees) {
      let item_list = [];
      trees.map(e => {
        if (this.item_list['rule_' + e]) {
          item_list.push(...this.item_list['rule_' + e]);
        }
      });
      item_list.forEach(item => {
          item.checked = false;
      });
      return item_list;
    },
    getTreeData2(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].child.length < 1) {
          data[i].child = undefined;
        } else {
          this.getTreeData2(data[i].child);
        }
      }
      return data;
    },
    get_department_list() {
      let data = {
        cycle_type: '1',
        // keyword: this.keyword,
        pt_id: this.ptId
      };
      this.$http('get', '/api/integral/rule/trees', data).then(res => {
        this.rule_tree = this.getTreeData2(res.data.data.rule_tree);
        this.item_list = res.data.data.item_list;
        this.list = [];
        let item_list = [];
        for (let i in this.item_list) {
          for (let k in this.item_list[i]) {
            item_list.push(this.item_list[i][k]);
          }
        }
        item_list.forEach(item => {
          item.checked = false;
          this.selectArrItem.forEach((e, index) => {
            if (e.id == item.id) {
              item.checked = true;
            }
          });
        });

        this.item_all=item_list;
        this.list = item_list;
      });
    },
    close_before(done) {
      this.close();
      done();
    },
    close() {
      this.$emit('update:visible', false);
    },
    confirm() {
      let obj='';
      this.list.forEach(item=>{
        if(item.checked){
          obj=item
        }
      })
      if(!obj){
        this.$message.error("请选择规则");
        return false
      }
      this.$emit('confirm',obj);
      this.close();
    }
  },
  created() {}
};
</script>

<style scoped lang="scss">
.itemBox {
  padding: 12px 0;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;

  cursor: pointer;
}
/deep/ .el-dialog__body {
  padding: 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.option-box {
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
}

.option-box button {
  margin-right: 16px;
}
.content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.5rem;
}
.left {
  padding: 0px 10px;
  width: 260px;
  height: 480px;
  overflow: scroll;
  border-right: 1px solid #f1f1f1;
}
.left {
  /deep/ .el-tree-node {
    border-bottom: 1px #f8f8f8 solid;
  }
  /deep/ .el-tree-node__content {
    height: 56px;
    line-height: 56px;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  /deep/ .is-current .el-tree-node__content .el-icon-caret-right {
    // color: #409EFF !important;
  }
  /deep/ .is-current .el-tree-node__content .el-tree-node__label {
    color: #409EFF !important;
  }
  /deep/ .is-current .el-tree-node__children .el-icon-caret-right {
    color: #c0c4cc !important;
  }
  /deep/ .is-current .el-tree-node__children .el-tree-node__label {
    color: #606266 !important;
  }
}
</style>
