<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 10px;
    "
  >
    <div style="display: flex; align-items: center; margin-bottom: 10px">
      <el-input placeholder="请输入内容" v-model="input4">
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div
        style="
          height: 36px;
          width: 36px;
          background: #3464ccff;
          margin-left: 10px;
        "
        class="iconadd"
      >
        <img
          src="../assets/iconadd.png"
          style="width: 100%; height: 100%"
          alt=""
        />
      </div>
    </div>
    <div>
      <div
        style="
          display: flex;
          color: #333333ff;
          font-size: 16px;
          margin-bottom: 10px;
        "
      >
        任务类型
      </div>
      <div>
        <el-checkbox-group v-model="checkList">
          <div class="itemlist">
            <div
              style="
                background: #3464ccff;
                border-radius: 10px;
                height: 20px;
                width: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 10px;
              "
            >
              <img
                style="width: 80%; height: 80%"
                src="../assets/iconzhineng.png"
                alt=""
              />
            </div>

            <div style="width: 100%">
              <el-checkbox label="常规巡视"></el-checkbox>
            </div>
          </div>
          <div class="itemlist">
            <div
              style="
                background: #3464ccff;
                border-radius: 10px;
                height: 20px;
                width: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 10px;
              "
            >
              <img
                style="width: 80%; height: 80%"
                src="../assets/iconzhineng.png"
                alt=""
              />
            </div>

            <div style="width: 100%">
              <el-checkbox label="远程智巡"></el-checkbox>
            </div>
          </div>
          <div class="itemlist">
            <div
              style="
                background: #3464ccff;
                border-radius: 10px;
                height: 20px;
                width: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 10px;
              "
            >
              <img
                style="width: 80%; height: 80%"
                src="../assets/iconzhineng.png"
                alt=""
              />
            </div>

            <div style="width: 100%">
              <el-checkbox label="特殊巡视"></el-checkbox>
            </div>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <div>
      <div
        style="
          display: flex;
          color: #333333ff;
          font-size: 16px;
          margin-bottom: 10px;
          margin-top: 10px;
        "
      >
        设备查询
      </div>
      <div>
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps"
        >
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "listFullcalendar",
  data() {
    return {
      checkList: [],
      input4: "",
      data: [
        {
          id: 1,
          label: "市供电公司",
          children: [
            {
              id: 4,
              label: "110kV东山口线",
              children: [
                {
                  id: 9,
                  label: "110kV东山I线",
                },
                {
                  id: 10,
                  label: "110kV东山口支线",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "110kV西山口站",
          children: [
            {
              id: 5,
              label: "110kV炭猫站",
            },
            {
              id: 6,
              label: "110kV布顺Ⅱ线",
            },
          ],
        },
        {
          id: 3,
          label: "区县供电公司",
          children: [
            {
              id: 7,
              label: "110kV磴牵站",
            },
            {
              id: 8,
              label: "110kV厂蒙站",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>

<style scoped>
.itemlist {
  width: 345px;
  height: 40px;
  background: #f4f4f4;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  display: flex;
  align-items: center;
  margin-top: 5px;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
}
/deep/ .el-checkbox {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
</style>
