<template>
  <div id="activities">
    <div class="activities-header">
      <div class="activities-header-buttons">
        <div class="activities-header-child-buttons">
          <el-button class="header-buttons" round @click="showVisible"
            ><span style="font-size: 20px">+ </span> Task</el-button
          >
          <el-button class="header-buttons" round
            ><span style="font-size: 20px">+ </span> Event</el-button
          >
          <el-button class="header-buttons" round
            ><span style="font-size: 20px">+ </span> Call</el-button
          >
        </div>
      </div>
      <div class="activities-tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="Tasks" name="first">
            <ActivitiesTaskTab
              :showModal="showModal"
              @closeSubChildModal="closeSubChildModal"
              @closeModal="closeModal"
            />
          </el-tab-pane>
          <el-tab-pane label="Events" name="second">
            <ActivitiesEventTab />
          </el-tab-pane>
          <el-tab-pane label="Calls" name="Third">
            <ActivitiesCallTab />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import ActivitySearch from "@/components/SearchBar/Filters/ActivitySearch";
import ActivitiesTaskTab from "~/components/Activities/ActivitiesTaskTab/ActivitiesTaskTab.vue";
import ActivitiesEventTab from "~/components/Activities/ActivitiesEventTab/ActivitiesEventTab.vue";
import ActivitiesCallTab from "~/components/Activities/ActivitiesCallTab/ActivitiesCallTab.vue";
import {
  Tabs,
  TabPane,
  Button,
  Select,
  Option,
  Table,
  TableColumn,
  Image,
} from "element-ui";
export default {
  components: {
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,

    [Button.name]: Button,
    [Select.name]: Select,
    [Option.name]: Option,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Image.name]: Image,
    ActivitySearch,
    ActivitiesTaskTab,
    ActivitiesEventTab,
    ActivitiesCallTab,
  },

  data() {
    return {
      activeName: "first",
      value: "",
      visible: false,
      showModal: false,
      url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",

      multipleSelection: [],
    };
  },
  methods: {
    showVisible() {
      this.showModal = true;
      console.log((this.showModal = true));
    },
    filterbar() {
      this.visible = !this.visible;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleChange({ column, prop, order }) {
      console.log(column, prop, order, "checking");
    },
    closeSubChildModal() {
      this.showModal = false;
    },
    closeModal() {
      this.showModal = false;
    },
  },
};
</script>
<style lang="scss">
#activities {
  .activities-header {
    // background: #41c9c7;
    .activities-header-buttons {
      margin-bottom: 5px;
      z-index: 1;
      // background: #41c9c7;
      position: relative;
      .activities-header-child-buttons {
        position: absolute;
        right: 0px;
        // height: 2px;
        padding: 10px 15px 9px 0px;

        .header-buttons {
          background: #41c9c7;
        }
        .el-button {
          border-radius: 20px;
          padding: 6px 20px;
          font-size: 14px;
          span {
            font-size: 17px;
            color: white;
          }
        }
      }
    }
    .activities-tabs {
      width: 100%;
      z-index: 0;
      position: relative;
      .el-tabs__nav-scroll {
        margin-top: 10px;
        padding-left: 15px;
        // background: red;
        // z-index: -1;
        // position: relative;
        .el-tabs__item {
          color: black;
          font-weight: 400;
        }
        .el-tabs__item.is-active {
          color: black;
          font-weight: 600;
        }
        .content-loading {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #2dce89;
          left: 0px;
          background: rgba(255, 255, 255, 0.7);
          top: 0;
          z-index: 9999999;
          &:before {
            content: "";
            height: 50px;
            width: 50px;
            background-repeat: no-repeat;
            background-image: url("~assets/svg/loader.svg");
          }
        }
      }
      .content-loading {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2dce89;
        left: 0px;
        background: rgba(255, 255, 255, 0.7);
        top: 0;
        z-index: 9999999;
        &:before {
          content: "";
          height: 50px;
          width: 50px;
          background-repeat: no-repeat;
          background-image: url("~assets/svg/loader.svg");
        }
      }
      .activities-task-tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 13px;
        padding: 0px 13px;
        .filter-icon {
          width: 35px;
          height: 35px;
          background: #e4e7ed;
          border-radius: 50%;
          padding: 6px 7px;
          color: #0d9c66;
          margin-right: 15px;
          cursor: pointer;
          .Heading {
            width: 25px;
            height: 25px;
          }
        }
        .el-input {
          position: relative;
          font-size: 14px;
          display: inline-block;
          width: 90%;
          height: 30%; // margin-left: 15px;
          .el-input__inner {
            border-radius: 100px;
            font-weight: 600;
            color: black;
            height: calc(0.9rem + 1.25rem + 2px);
          }
        }
        .more-icon {
          width: 35px;
          height: 35px;
          background: #e4e7ed;
          border-radius: 50%;
          padding: 6px 9px;
          // color: #0d9c66;
        }
        .el-dialog {
          position: relative;
          // margin: 0 auto 50px;
          background: #fff;
          border-radius: 2px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
          box-sizing: border-box;
          width: 50%;
          .el-dialog__header {
            border-bottom: 1px solid #dcdbdb;
            background: #fcfdfd;

            .el-dialog__title {
              line-height: 24px;
              font-size: 23px;
              color: #303133;
              font-weight: 500;
            }
          }
          .el-dialog__body {
            border-bottom: 1px solid #dcdbdb;
          }
        }
        .el-dialog__footer {
          background: #fcfdfd;
          .el-button {
            border-radius: 50px;
          }
        }

        .tasks-inputs {
          .el-input__inner {
            border-radius: 3px;
            font-weight: 600;
            color: black;
            height: 45px;
            border-left: 3px solid #ff6a6a;
          }
        }
      }
    }
    .task-lists {
      .el-table th {
        background: #f8fbfc;
        padding-left: 15px;
      }
      th.el-table_1_column_8.is-leaf {
        background: white;
      }
      .el-table td {
        // background: #f8fbfc;
        padding-left: 15px;
      }
      .cell {
        display: flex;
        align-items: center;

        .avatar-name {
          padding-left: 10px;
        }
        .el-table-column--selection {
          margin-left: 20px;
        }
      }
    }
  }
}
.el-drawer {
  .el-drawer__header {
    padding-left: 5.5%;
    background: #f9fbfd;
    border-bottom: 1px solid lightgrey;
    margin-bottom: 0px;
  }
  .task-modal-body {
    overflow: auto;
    padding-top: 5%;
    height: 79.5vh;
    .heading {
      h3 {
        margin-left: 6%;
      }
    }
    .field-rows {
      display: flex;
      margin: 10px 0px;

      .input-label {
        width: 17%;
        margin: 9px 6px 10px 13%;
      }
      .tasks-inputs {
        width: 64%;
      }
      .tasks-inputs-inner {
        .el-input__inner {
          border-radius: 3px;
          font-weight: 600;
          color: black;
          height: 45px;
          // width: 50px;
          border-left: 3px solid #ff6a6a;
        }
      }
      .el-input {
        width: 100%;
      }
      .el-input__inner {
        border-radius: 3px;
        font-weight: 600;
        color: black;
        height: 45px;
        // width: 50px;
      }
      .el-input__inner:focus {
        border-top: 2px solid #1dd59d;
        border-right: 2px solid #1dd59d;
        border-bottom: 1px solid #1dd59d;
      }
    }
    .check-box-rows {
      margin-left: 31%;
      .el-select {
        width: 92.5%;
        .el-input__inner {
          border: none;
          padding-left: 12px;
          border-bottom: 1px solid lightgray;
        }
      }
      .block {
        margin: 10px 0px;
        .el-input {
          width: 92%;
          .el-input__inner {
            border: none;
            // padding-left: 6px;
            border-bottom: 1px solid lightgray;
          }
        }
      }
    }
  }
  .drawer-footer {
    // position: absolute;
    // bottom: 10px;
    width: 100%;
    padding: 3% 5% 1% 0%;
    background: #f9fbfd;
    border-top: 1px solid lightgrey;
    .dialog-footer {
      display: flex;
      justify-content: end;
    }
  }
}
body {
  background: white;
}
</style>
