<template>
  <div class="bbsl-common-page">
    <div class="bbsl-table-search">
      <el-form v-model="queryParam" :inline="true">
        <el-form-item label="教练员姓名：">
          <el-input
            v-model="querys[0].value"
            clearable
            maxlength="128"
            placeholder="请输入教练员"
          >
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch"
            >搜索
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div ref="basicDataThree" class="basicDataThree">
      <el-table
        ref="multipleSelection"
        v-loading="loading"
        :cell-style="{'text-align': 'center'}"
        :data="tableData"
        :header-cell-style="{'text-align': 'center'}"
        :max-height="tableHeight - 75"
        :style="{width: '100%'}"
        size="mini"
        @row-dblclick="handleDbClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column
          :formatter="({userName}) => userName || '-'"
          label="教练员姓名"
          min-width="160"
          prop="userName"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="性别"
          :formatter="({sex}) => sex || '-'"
          prop="sex"
          show-overflow-tooltip
          width="160"
        >
        </el-table-column>
        <el-table-column
          label="联系方式"
          min-width="100"
          :formatter="({phone}) => phone || '-'"
          prop="phone"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="账号"
          min-width="100"
          prop="account"
          :formatter="({account}) => account || '-'"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="课目"
          min-width="80"
          prop="subjectName"
          :formatter="({subjectName}) => subjectName || '-'"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <el-pagination
        ref="paginationPanel"
        :current-page="queryParam.pageBean.page"
        :page-size="queryParam.pageBean.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        :total="total"
        align="right"
        background
        class="bb-pagination"
        layout="prev, pager, next,total, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'

import * as examPlan from '@/api/examDataMenu/examManagerData/examPlan.js'

export default {
  name: 'kzzxMenu',

  mixins: [TableMixin],
  data() {
    return {
      tableData: [],

      querys: [
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'userName',
          relation: 'AND',
          value: ''
        }
      ],

      tableHeight: 0
    }
  },
  created() {
    this.loadData()
  },
  mounted() {},
  methods: {
    // 获取list
    async loadData(page) {
      if (page) {
        this.queryParam.pageBean.page = page
      }
      this.loading = true
      this.tableData = []

      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }

      let {rows, total} = await examPlan.coachSubjectList(this.queryParam)
      this.total = total
      this.tableData = rows

      this.$set(this.tableData)
      this.loading = false
      this.tableHeight = this.$refs.basicDataThree.clientHeight
    }
  }
}
</script>
<style lang="scss" scoped>
.bb-pagination {
  margin-top: 10px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.exam-name {
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  &::before {
    content: '';
    display: block;
    width: 2px;
    height: 15px;
    margin-right: 4px;
    background: #3296fa;
  }
}
.center-content {
  background: #fff;
  border-radius: 5px;
  padding: 16px;
  margin: 10px 0;
  .chart-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .chart-content-item {
      flex: 1;

      padding: 16px;
      &:last-child {
        margin: 0;
      }

      .chart-value {
        height: 260px;
      }
    }
  }
}
.bbsl-common-page {
  height: 100%;
  background-color: #ebeef5;
  overflow: auto;
}

.title {
  display: flex;
  justify-content: space-between;
  font-weight: bold;

  span {
    font-weight: 100;
  }
}

.basicDataOne {
  height: 10%;
  display: flex;
  align-items: center;

  .oneItem_box {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-right: 10px;
    height: 100%;

    div {
      font-weight: 500;
      font-size: 24px;
    }

    span {
      font-weight: bold;
      font-size: 30px;
    }
  }

  .oneItem_box:nth-child(1) {
    // background: linear-gradient(to bottom right, #e1ebff, #fff);
    background: linear-gradient(to bottom right, #d4f5f0, #fff);

    span {
      color: #1289fe;
    }
  }

  .oneItem_box:nth-child(2) {
    background: linear-gradient(to bottom right, #d4f5f0, #fff);

    span {
      color: #1dbfa7;
    }
  }

  .oneItem_box:nth-child(3) {
    // background: linear-gradient(to bottom right, #fff5ec, #fff);
    background: linear-gradient(to bottom right, #d4f5f0, #fff);

    span {
      color: #ff8c19;
    }
  }

  .oneItem_box:nth-child(4) {
    // background: linear-gradient(to bottom right, #EEB4B4, #fff);
    background: linear-gradient(to bottom right, #d4f5f0, #fff);
    margin: 0;

    span {
      color: red;
    }
  }
}

.basicDataTwo {
  height: 20%;
  display: flex;
  align-items: center;
  margin: 10px 0;

  .twoItem_one {
    width: 75%;
    height: 100%;
    margin-right: 10px;
    padding: 20px 30px;
    background: linear-gradient(to bottom right, #fff5ec, #fff);

    .content {
      height: calc(100% - 17px);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .item {
        height: 70%;
        text-align: center;
        display: flex;
        flex-direction: column;

        i {
          color: #ff8c19;
          font-size: 26px;
        }

        span:nth-of-type(1) {
          color: #999999;
        }

        span:nth-of-type(2) {
          font-size: 26px;
          color: #ff8c19;
        }
      }
    }
  }

  .twoItem_two {
    width: 25%;
    height: 100%;
    margin: 0 10px;
    padding: 20px 30px;
    background: linear-gradient(to bottom right, #d4f5f0, #fff);

    .content {
      height: 50%;
      padding: 10px 0;
      box-sizing: border-box;
      display: flex;

      .icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-radius: 50%;
        background-color: #8cded1;

        i {
          line-height: 90px;
          color: #1dbfa7;
          font-size: 40px !important;
        }
      }

      .right_main {
        position: relative;
        left: 20px;
        margin: 10px 10px 10px 20px;
        width: 50%;
        height: 90px;
        display: flex;
        flex-direction: column;

        span {
          font-size: 20px;
          color: #1dbfa7;
        }

        div:nth-of-type(1) {
          margin: 0;
          padding: 0;
          width: 100px;
          height: 1px;
          background-color: #55edd6;
          overflow: hidden;
        }

        div:nth-of-type(2) {
          font-size: 17px;
          color: rgb(161, 153, 153);
        }
      }
    }

    .footer {
      height: calc(50% - 27px);
      margin-top: 10px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: space-around;

      div {
        color: #999999;
      }

      span {
        color: #1dbfa7;
      }
    }
  }

  .twoItem_three {
    width: 25%;
    height: 100%;
    padding: 20px 30px;
    background: linear-gradient(to bottom right, #e1ebff, #fff);

    .content {
      margin-top: 10px;

      li {
        padding-bottom: 5px;
        color: #999999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
      }
    }
  }
}

.basicDataThree {
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  height: calc(100% - 80px);
}

.examinees {
  margin: 10px auto;
  background-color: #fff;
  border-radius: 15px;
  // box-shadow: 0px 0px 0.625vw 0 rgb(162, 157, 157);
  position: relative;
  box-sizing: border-box;
}

.notice {
  cursor: pointer;
  color: #999999 !important;
}

.notice:hover {
  color: #000 !important;
}

::v-deep .el-dialog__header {
  padding: 10px;
}

::v-deep .el-dialog__body {
  padding: 20px 30px;
}
</style>
