<template>
  <div class="person">
    <div class="gw_title">
      <span class="gw_cj">个人任务列表</span>
    </div>
    <div class="person_btn">
      <ul>
        <li v-for="(item, index) in list" :key="item" :class="colorinde == index ? 'colo' : ''" @click="changecolor(index)">{{ item.title }}({{ item.num }})</li>

      </ul>
    </div>
    <div class="person-tableBox">
      <div class="person-tablecnt">
        <el-table :data="tableData" stripe width="100%" height="100%">
          <el-table-column prop="rwlx" label="视频学习" width="80" />
          <el-table-column prop="rwnr" label="任务内容" />
          <el-table-column prop="startdate" label="创建时间" />
          <el-table-column prop="xfbm" label="下发部门" width="120" />
          <el-table-column prop="rwzt" label="任务状态" width="80" />
          <el-table-column prop="enddate" label="完成时间" />
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="per_fy">
        <div class="per_shuju">任务共{{ tableData.length }}条数据,5页</div>
        <!-- <el-pagination small background layout=" pager" :total="50" />
         -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20, 25, 30, 35, 40, 45]" :small="small" :disabled="disabled" :background="false" layout="total, prev, pager, next, sizes, jumper" :total="30" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const currentPage = ref(5)
const pageSize = ref(10)
const list = ref([
  { title: '全部', num: '30' },
  { title: '代办任务', num: '8' },
  { title: '已办任务', num: '22' }
])
const colorinde = ref(0)
function changecolor (val) {
  colorinde.value = val
}
const tableData = [
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },
  {
    rwlx: '视频学习',
    rwnr: '定期开展安全检查周活动',
    startdate: '2016-05-03 12:00:00',
    xfbm: '安全生产部',
    rwzt: '待办任务',
    enddate: '2016-05-03 12:00:00',
  },

]
const handleSizeChange = (val) => {
}
const handleCurrentChange = (val) => {
}
</script>
    
<style lang="scss" scoped>
.person {
  width: 100%;
  height: 100%;
  // background: rgba($color: #1E3A26, $alpha: 0.1);
  background: #ffffff;

  .gw_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);

    .gw_cj {
      margin-left: 40px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #0f3916;
      // line-height: 16px;
      line-height: 24px;
    }
  }

  .person_btn {
    margin: 10px;

    ul {
      display: flex;
      justify-content: flex-start;

      li {
        width: 90px;
        height: 24px;
        background: rgba(186, 186, 186, 0.2);
        border-radius: 4px 4px 4px 4px;
        text-align: center;
        font-weight: 400;
        color: #000;
        line-height: 16px;
        font-size: 12px;

        cursor: pointer;
        // border-top: #1b6753;
        // background: linear-gradient(
        //   0deg,
        //   #1d4d40 0%,
        //   rgba(152, 219, 218, 0) 100%
        // );

        // border-top: 2px solid #b2d3ca;
        padding: 5px;
        margin: 0 10px;
      }

      .colo {
        background: var(--el-color-primary);
        border-radius: 4px 4px 4px 4px;
        color: #ffffff;
      }

      // li:hover {
      //   background: linear-gradient(0deg,
      //       #56c7a5 0%,
      //       rgba(86, 199, 165, 0) 100%);
      //   color: #ebfbff;
      // }
    }
  }

  .person-tableBox {
    height: calc(100% - 100px);

    .person-tablecnt {
      height: calc(100% - 30px);
      border-radius: 10px 10px 10px 10px;
      border: 1px solid #dedee0;
    }
  }

  .per_fy {
    display: flex;
    justify-content: space-between;

    .per_shuju {
      margin-top: 10px;
      width: 137px;
      height: 15px;
      font-size: 12px;
      font-weight: 290;
      color: #191919;
      line-height: 23px;
      margin-left: 20px;
    }
  }
}

::v-deep .el-table {
  text-align: center;
  --el-table-row-hover-bg-color: none;
  --el-table-tr-bg-color: none;
  --el-table-bg-color: none;
  --el-table-border-color: #ebf3eb !important;
}

::v-deep .el-table th.is-leaf {
  border-top: 1px solid #e8ede8 !important;
}

::v-deep .el-table .cell {
  line-height: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep .el-table th.el-table__cell {
  background: #f3f3f5 !important;
  color: #3d3d3d;
  font-size: 12px;
  text-align: center;
}

::v-deep .el-table td.el-table__cell {
  background: none;
  color: #3d3d3d;
  font-size: 12px;
  text-align: center;
}

::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #fafafa;
}

// ::v-deep .el-pagination {
//   margin-top: 10px;
// }

// ::v-deep .el-pagination.is-background .btn-prev:disabled {
//   background: #111D1E;
//   color: #EBFBFF;
// }

// ::v-deep .el-pagination.is-background .el-pager li {
//   background-color: #111D1E;
//   color: #EBFBFF;
// }

// ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
//   background-color: #1E3A26;
// }
// ::v-deep .el-pager li.active {
//   background: var(--el-table-cell-bmx-backgroundcolor);
//   border-radius: 6px 6px 6px 6px;
//   border: 2px solid var(--el-color-primary);
//   color: var(--el-color-primary);
// }

// ::v-deep .el-pager li {
//   background: transparent;
//   color: #101010;
// }
</style>