<template>
  <div>
    <div class="header">
      <el-form label-width="120px">
        <div style="display: flex; padding: 10px">
          <el-form-item label="任务名称：">
            <el-input
              v-model="form.taskName"
              placeholder="请输入任务名称"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="任务组名：">
            <el-select
              v-model="form.taskGroupName"
              placeholder="请输入任务组名"
              style="width: 200px"
            >
              <el-option
                v-for="item in taskGroupOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务状态：">
            <el-select
              v-model="form.taskStatus"
              placeholder="请选择任务状态"
              style="width: 200px"
            >
              <el-option
                v-for="item in taskStatusOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button class="reset-btn" @click="resetEvent">重置</el-button>
          <el-button class="search-btn" @click="searchEvent">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="content-inner">
        <el-button class="blue-btn" @click="addEvent">新增</el-button>
        <el-button class="blue-btn" @click="batchActivate">批量激活</el-button>
        <el-button class="delete-btn" @click="batchDelete">批量删除</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        style="width: 100%"
        height="350"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column prop="taskID" label="任务编号"> </el-table-column>
        <el-table-column prop="taskName" label="任务名称"> </el-table-column>
        <el-table-column prop="taskGroupName" label="任务组名">
        </el-table-column>
        <el-table-column prop="taskString" label="使用目标字符串">
        </el-table-column>
        <el-table-column prop="cron" label="cron 执行表达式"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button
              v-show="scope.row.taskID == null ? false : true"
              size="mini"
              type="text"
              >查看</el-button
            >
            <el-button
              v-show="scope.row.taskID == null ? false : true"
              size="mini"
              type="text"
              @click="alterTask"
              >编辑</el-button
            >
            <el-button
              v-show="scope.row.taskID == null ? false : true"
              size="mini"
              type="text"
              @click="deleteEvent(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <!-- <div style="width: 100%; height: 100%; position: absolute">
        <el-button
          class="check-cancel"
          size="mini"
          type="text"
          @click="cancleChecked"
          >取消</el-button
        >
      </div>
      <div class="bottom_button" v-show="show">
        <el-button class="delete" type="text">批量删除</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button class="disabled" type="text">批量激活</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button class="export" type="text">导出数据</el-button>
      </div> -->
      <page class="page" :paginationData="paginationData"></page>
    </div>
    <alterTask ref="altertask"></alterTask>
  </div>
</template>

<script>
import checkbox from "@/components/Checkbox/index";
import page from "@/components/pagination/index";
import alterTask from "../messageDialog/alterTask";
import publicFunc from "@/utils/publicFunc";
export default {
  components: { checkbox, page, alterTask },
  data() {
    return {
      input: "",
      show: true,
      form: {
        taskName: "",
        taskGroupName: "0",
        taskStatus: "0",
      },
      tableData: [
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskString: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "true",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "默认",
          taskString: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "true",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskString: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskString: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskString: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskString: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskString: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskString: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
      ],
      taskStatusOptions: [
        {
          value: "0",
          label: "不限",
        },
        {
          value: "1",
          label: "开启",
        },
        {
          value: "2",
          label: "关闭",
        },
      ],
      taskGroupOptions: [
        {
          value: "0",
          label: "不限",
        },
        {
          value: "1",
          label: "系统",
        },
        {
          value: "2",
          label: "默认",
        },
      ],
      multipleSelection: [],
      currentPageSize: 10,
      currentPage: 1,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 30,
        currentChange: (val) => {
          this.getTableData(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getTableData(1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    cancleChecked() {
      this.$refs.multipleTable.clearSelection();
    },
    alterTask() {
      this.$refs.altertask.dialogVisible = true;
    },
    resetEvent() {
      // this.form.
    },
    searchEvent() {
      console.log(this.form);
      this.getTableData(1);
    },
    getTableData(val) {},
    handleSizeChange() {},
    deleteEvent(data) {
      this.tableData = this.tableData.filter((v) => {
        return v.id !== data.id;
      });
    },
    addEvent() {},
    batchActivate() {},
    batchDelete() {},
  },
};
</script>

<style lang="less" scoped>
.header {
  margin: 0 2.5%;
  height: 60px;
  background-color: #fafafa;
  position: relative;
  .reset-btn,
  .search-btn {
    height: 30px;
    width: 80px;
    position: absolute;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .reset-btn {
    top: 10px;
    background-color: #b3b3b3;
    right: 130px;
  }
  .search-btn {
    top: 10px;
    background-color: #2ea8e6;
    right: 25px;
  }

  .el-form-item {
    margin-bottom: 0 !important;
    margin-right: 60px !important;

    /deep/.el-form-item {
      margin-right: 50px;
      margin-bottom: 0;
    }

    /deep/.el-form-item__content {
      margin-left: 120px;
    }
  }
}

.content {
  width: 95%;
  position: absolute;
  margin-top: 30px;
  margin-left: 2.5%;
  margin-right: 2.5%;
  height: 400px;
  &-inner {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    .blue-btn,
    .delete-btn {
      width: 80px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      color: #fff;
      border-radius: 3px;
    }
    .blue-btn {
      background-color: #2ea8e6;
    }
    .delete-btn {
      background: #b3b3b3;
    }
  }

  .el-table {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: calc(100% - 30px);
    border: 1px solid #f0f2f2;
    margin-top: 10px;
    font-size: 0.95rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #b2b2b2;
    background: rgba(255, 255, 255, 0.8);

    /deep/th {
      background: #f7fbff;
    }
    /deep/.el-checkbox {
      color: #b2b2b2;
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #2ea8e6;
      }

      .el-checkbox__input.is-checked .el-checkbox__inner::after {
        width: 70%;
        height: 70%;
        background: #2ea8e6;
        border-radius: 0;
        transform: rotate(0deg) scaleY(1);
        position: static;
        // border: 1px solid #8DD9FF;
      }

      .el-checkbox__inner {
        border: 1px solid #8dd9ff;
        background: rgba(0, 170, 255, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        &::after {
          transition: 0ms;
        }
      }

      .el-checkbox__label {
        padding-left: 0;
        font-size: 15px;
        position: absolute;
        top: 1px;
        left: 25px;
      }
    }
  }
}

.el-select {
  width: 80px;
  margin-right: 20px;
}

.bottom {
  position: absolute;
  bottom: 10px;
  left: 50px;
  height: 50px;
  width: 95%;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  text-align: center;

  .checkbox {
    position: absolute;
    left: 29px;
    top: 15px;
    font-size: 14px;
  }

  .check-cancel {
    position: absolute;
    // line-height: 20px;
    font-size: 14px;
    text-align: center;
    left: 140px;
    top: 10px;
  }

  /deep/.el-checkbox {
    color: #b2b2b2;
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #2ea8e6;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner::after {
      width: 70%;
      height: 70%;
      background: #2ea8e6;
      border-radius: 0;
      transform: rotate(0deg) scaleY(1);
      position: static;
      // border: 1px solid #8DD9FF;
    }

    .el-checkbox__inner {
      border: 1px solid #8dd9ff;
      background: rgba(0, 170, 255, 0);
      display: flex;
      align-items: center;
      justify-content: center;
      position: static;
      &::after {
        transition: 0ms;
      }
    }

    .el-checkbox__label {
      padding-left: 0;
      font-size: 15px;
      position: absolute;
      top: 1px;
      left: 25px;
    }
  }

  .bottom_button {
    position: absolute;
    left: 200px;
    margin-top: 15px;

    .delete {
      font-size: 14px;
      text-align: center;
      padding: 1px;
      color: #2ea8e6;
    }

    .disabled {
      font-size: 14px;
      text-align: center;
      padding: 1px;
      color: #2ea8e6;
    }

    .export {
      font-size: 14px;
      text-align: center;
      padding: 1px;
      color: #2ea8e6;
    }
  }
}
</style>
