<template>
  <div class="app-container demo">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">测试页面</p>
      <p class="page-top-title-add-p" @click="leftSetCheckedKeys">勾选</p>
      <p class="page-top-title-add-p" @click="leftGetCheckedKeys">获取当前选中</p>
      <p class="page-top-title-add-p" @click="leftDelCheckedKeys">清空</p>
    </div>
    <div class="tree-max-big-box">
      <div class="tree-title-box">
        <div class="tree-title-check-box">
          <p class="check-p el-icon-check" v-if="leftTreeCheckType"></p>
          <p class="no-check-p" v-if="!leftTreeCheckType"></p>
          <p class="tree-title-p">序号</p>
        </div>
        <p class="tree-title-name-p">检查项目</p>
      </div>
      <el-tree
        class="tree-check-box"
        :data="leftTreeData"
        show-checkbox
        ref="leftTree"
        node-key="id"
        :render-content="renderContent"
        :props="defaultProps">
      </el-tree>
    </div>
  </div>
</template>
<script>
  import { iotCameraFindByCondition } from '@/api/basicsModules/index'
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'

  export default {
    label: 'demo',
    components: {
      H5PlayerVideo
    },
    data() {
      return {
        pageType: true,
        defaultProps: {
          children: 'children',
          label: 'code'
        },
        leftTreeCheckType:false,
        leftTreeData: [
          {
          "id": "1824338606101749761",
          "name": "一级检查项",
          "mainPoint": "",
          "hazardLevel": null,
          "hazardLevelName": null,
          "code": "1",
          "parentId": "0",
          "type": 1,
          "level": 1,
          "hazardReid": null,
          "children": [{
            "id": "1824338656248848386",
            "name": "二级检查项",
            "mainPoint": "",
            "hazardLevel": null,
            "hazardLevelName": null,
            "code": "1.1",
            "parentId": "1824338606101749761",
            "type": 1,
            "level": 2,
            "hazardReid": null,
            "children": [{
              "id": "1824338716034457602",
              "name": "三级检查项",
              "mainPoint": "一般印花",
              "hazardLevel": null,
              "hazardLevelName": null,
              "code": "1.1.1",
              "parentId": "1824338656248848386",
              "type": 1,
              "level": 3,
              "hazardReid": null,
              "children": []
            },{
              "id": "1824338716034457602",
              "name": "三级检查项",
              "mainPoint": "一般印花",
              "hazardLevel": null,
              "hazardLevelName": null,
              "code": "1.1.1",
              "parentId": "1824338656248848386",
              "type": 1,
              "level": 3,
              "hazardReid": null,
              "children": []
            }]
          }]
        },{
          "id": "1824338606101749761",
          "name": "一级检查项",
          "mainPoint": "",
          "hazardLevel": null,
          "hazardLevelName": null,
          "code": "1",
          "parentId": "0",
          "type": 1,
          "level": 1,
          "hazardReid": null,
          "children": [{
            "id": "1824338656248848386",
            "name": "二级检查项",
            "mainPoint": "",
            "hazardLevel": null,
            "hazardLevelName": null,
            "code": "1.1",
            "parentId": "1824338606101749761",
            "type": 1,
            "level": 2,
            "hazardReid": null,
            "children": [{
              "id": "1824338716034457602",
              "name": "三级检查项",
              "mainPoint": "一般印花",
              "hazardLevel": null,
              "hazardLevelName": null,
              "code": "1.1.1",
              "parentId": "1824338656248848386",
              "type": 1,
              "level": 3,
              "hazardReid": null,
              "children": []
            }]
          }]
        },{
          "id": "1824338606101749761",
          "name": "一级检查项",
          "mainPoint": "",
          "hazardLevel": null,
          "hazardLevelName": null,
          "code": "1",
          "parentId": "0",
          "type": 1,
          "level": 1,
          "hazardReid": null,
          "children": [{
            "id": "1824338656248848386",
            "name": "二级检查项",
            "mainPoint": "",
            "hazardLevel": null,
            "hazardLevelName": null,
            "code": "1.1",
            "parentId": "1824338606101749761",
            "type": 1,
            "level": 2,
            "hazardReid": null,
            "children": [{
              "id": "1824338716034457602",
              "name": "三级检查项",
              "mainPoint": "一般印花",
              "hazardLevel": null,
              "hazardLevelName": null,
              "code": "1.1.1",
              "parentId": "1824338656248848386",
              "type": 1,
              "level": 3,
              "hazardReid": null,
              "children": []
            }]
          }]
        },{
          "id": "1824338606101749761",
          "name": "一级检查项",
          "mainPoint": "",
          "hazardLevel": null,
          "hazardLevelName": null,
          "code": "1",
          "parentId": "0",
          "type": 1,
          "level": 1,
          "hazardReid": null,
          "children": [{
            "id": "1824338656248848386",
            "name": "二级检查项",
            "mainPoint": "",
            "hazardLevel": null,
            "hazardLevelName": null,
            "code": "1.1",
            "parentId": "1824338606101749761",
            "type": 1,
            "level": 2,
            "hazardReid": null,
            "children": [{
              "id": "1824338716034457602",
              "name": "三级检查项",
              "mainPoint": "一般印花",
              "hazardLevel": null,
              "hazardLevelName": null,
              "code": "1.1.1",
              "parentId": "1824338656248848386",
              "type": 1,
              "level": 3,
              "hazardReid": null,
              "children": []
            }]
          }]
        }


        ]
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      //左侧获取选中
      leftGetCheckedKeys(){
        const checkedNodes = this.$refs.leftTree.getCheckedKeys();
        console.log(checkedNodes);
      },
      //左侧勾选
      leftSetCheckedKeys(){
        this.$refs.leftTree.setCheckedKeys([5,7,5]);
      },
      leftDelCheckedKeys(){
        this.$refs.leftTree.setCheckedKeys([]);
      },
      renderContent(h, { node, data, store }) {
        console.log('node',node)
        console.log('data',data)
        console.log('store',store)
        return (
          <span class="custom-tree-node">
            <span class='custom-tree-node-code'>{data.code}</span>
            <span class='custom-tree-node-name'>{data.name}</span>
          </span>
        )
      }
    }
  }
</script>
<style scoped lang="scss">
  .demo {
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .tree-max-big-box{
      width:610px;
      margin:40px;



      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .tree-title-box{
        height:40px;
        display: flex;
        flex-direction: row;
        border:1px solid #E0E0E0;
        background-color: #f5f5f5;
        .tree-title-check-box{
          width:190px;
          display: flex;
          border-right:1px solid #E0E0E0;
          .check-p{
            background-color: #0183FA;
            border-radius:2px;
            color:#fff;
            text-align: center;
            line-height:14px;
            width:14px;
            height:14px;
            font-size:12px;
            margin:13px 15px 13px 13px;
            cursor: pointer;
          }
          .no-check-p{
            border:1px solid #E0E0E0;
            border-radius:2px;
            background-color: #fff;
            color:#fff;
            text-align: center;
            line-height:14px;
            width:14px;
            height:14px;
            margin:13px 15px 13px 13px;
            cursor: pointer;
          }
          .no-check-p:hover{
            border:1px solid #0183FA;
          }
          .tree-title-p{
            font-size:16px;
            color: #333;
            line-height:40px;
          }
        }
        .tree-title-name-p{
          width:420px;
          text-align: center;
          font-size:16px;
          color: #333;
          line-height:40px;
        }
      }
      //表格滚动条样式
      .tree-check-box::-webkit-scrollbar{
        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 6px;
      }
      .tree-check-box::-webkit-scrollbar-thumb{
        border-radius: 5px;
        background: #D3D7D4;
      }
      .tree-check-box::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 5px #FFFFFF;
        border-radius: 0;
        background: #FFFFFF;
      }
      .tree-check-box{
        height:400px;
        overflow-y: scroll;
        border:1px solid #E0E0E0;
        border-top:none;
        ::v-deep .el-tree-node__content{
          border-bottom:1px solid #E0E0E0;
          height:40px;
          .el-tree-node__label{
            display: inline-block;
            height:40px;
            line-height:40px;
            border-left:1px solid #E0E0E0;
            padding-left:24px;
          }
          .el-tree-node__expand-icon{
            margin-left:18px;
          }
          .el-tree-node__label{
            margin-left:40px;
          }
          .custom-tree-node-code{
            display: inline-block;
            width:125px;
            height:40px;
            line-height:40px;
            border-right:1px solid #E0E0E0;
          }
          .custom-tree-node-name{
            padding-left:24px;
          }
        }
        ::v-deep .el-tree-node__children{
          .el-tree-node__content{
            .custom-tree-node-code{
              display: inline-block;
              width:107px;
              height:40px;
              line-height:40px;
              border-right:1px solid #E0E0E0;
            }
          }
          .el-tree-node__children{
            .el-tree-node__content{
              .custom-tree-node-code{
                display: inline-block;
                width:89px;
                height:40px;
                line-height:40px;
                border-right:1px solid #E0E0E0;
              }
            }
          }
        }
      }
    }
  }
</style>
