<template>
  <div class="myTable">
    <div class="table-subject-select"  v-if="tips || showSelect">
      <Select v-model="subjectSelectVal" style="width:100px" v-if="showSelect" @on-change="onSelectChange">
        <Option v-for="(item,index) in subjectList" :value="index" :key="index">{{ item.name }}</Option>
      </Select>
      <span class="table-tips" v-if="tips">{{tips}}</span>
      <span class="table-tips" v-if="!tips">* 模拟数据，仅供参考</span>
    </div>
    <Table :border="isShowBorder" :data="tableData" :columns="tableColumns"></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page show-total
              :current="1"
              :total="tableDatas.length"
              :page-size="pageSize"
              :page-size-opts="pageSizeOpts"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              show-sizer />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      columns: {
        type: Array,
        default:[]
      },
      isScroll: {
        type: Boolean,
        default:false
      },
      tableDatas: {
        type: Array,
        default:[]
      },
      showSelect: {
        type: Boolean,
        default:false
      },
      tips: {
        type: String,
        default:null
      },
      pageSize: {
        type: Number,
        default:10
      }
    },
    data() {
      return {
        isShowBorder: true,
        subjectSelectVal:1,
        tableData: [],
        tableColumns: [],
        pageSizeOpts:[5,10,20,30,40],
        poperData: [],
        subjectList: [
          {
            name:"语文"
          },
          {
            name:"数学"
          },
          {
            name:"英语"
          },
          {
            name:"生物"
          },
          {
            name:"化学"
          },
        ],
      }
    },
    created() {
      this.tableColumns = this.columns;
      this.tableData = this.tableDatas;
      this.columns.forEach(item => {
        item.render = typeof item.renderType == 'function' ? item.renderType : this[item.renderType];
      })

      this.pageChange(1);


    },
    methods: {

      //分页操作
      pageChange(page) {
        let start = this.pageSize * (page - 1);
        let end = this.pageSize * page;
        this.tableData = this.tableDatas.slice(start, end);
      },

      pageSizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },

      onSelectChange(val) {
        this.$emit('onSelectChange', val);
      },

      renderSimple() {

      },

      renderClassName(h, params) {
        let that = this;
        let row = params.row;
        return h('span', {
          on: {
            click: function () {
              that.$router.push({ name: 'earlyWarning', params: { name : params.row.name } })
            }
          },
          style: {
            cursor: 'pointer',
            color: "#00ffd2",
            fontWeight: "bold"
          }
        }, [
            h('span', {
              domProps: {
                className: "table-rank-value"
              },
            }, params.row.name),
            h('Icon', {
              props: {
                type: (row.changesStatus == 1 && row.changesVal != 0) ? 'md-trending-up' : (row.changesStatus == -1 && row.changesVal != 0) ? 'md-trending-down' : 'md-git-commit',
                color: (row.changesStatus == 1 && row.changesVal != 0) ? '#13ff13' : (row.changesStatus == -1 && row.changesVal != 0) ? '#fd4e4e' : 'yellow',
                size: '22'
              },
              style: {
                cursor: 'pointer',
                marginLeft:"10px"
              }
            }),

          ])
       
      },

      renderEventIndex(h, params) {
        let that = this;
        return h('span', {
          on: {
            click: function () {
                that.$parent.$parent.$parent.isShowQuestions = true;
                that.$router.push({ path: '/total/questionList', query: { QIndex: params.row.id } })
            }
          },
          style: {
            cursor: 'pointer',
            color: "#00ffd2",
            fontWeight: "bold"
          }
        }, params.row.id)
      },

      //总分排名Render
      renderRank(h, params) {
        const row = params.row;
        return h('span', {
          domProps: {
            className: "badge-wrap"
          },
        }, [
            h('span', {
              domProps: {
                className: 'table-rank-badge'
              },
              style: {
                color: row.changesStatus == 1 ? '#0ccb0c' : '#ff5d5d'
              },
            }, (row.changesStatus == 1 && row.changesVal != 0) ? '+' + row.changesVal : (row.changesStatus == -1 && row.changesVal != 0) ? '-' + row.changesVal : ''),
            h('span', {
              domProps: {
                className: "table-rank-value"
              },
            }, row.classRank),

          ]
        );
      },

      //折线图趋势变化
      renderLineChange(h, params) {
        const row = params.row;
        return h('Poptip', {
          props: {
            trigger: 'hover',
            placement: 'right',
            transfer: true
          },
          on: {
            //鼠标触发气泡事件
            'on-popper-show': () => {
              console.log(row.poperData);
              //this.poperData = row.poperData
            },
          }
        }, [
            h('Icon', {
              props: {
                type: row.classRank == 1 ? 'md-trending-up' : row.classRank == 2 ? 'md-trending-down' : 'md-git-commit',
                color: row.classRank == 1 ? '#13ff13' : row.classRank == 2 ? '#fd4e4e' : 'yellow',
                size: '22'
              },
              style: {
                cursor: 'pointer'
              }
            }),
            h('div', {
              slot: 'content'
            }, [h('BaseChangeLine', {
              props: {
                poperData: row.poperData,
                isLoad: true,
                lineColor: row.classRank == 1 ? 'green' : row.classRank == 2 ? '#fd4e4e' : '#ffcc33'
              }
            })
              ])
          ]);
      },
      //排名变化
      renderRankChange(h, params) {
        const row = params.row;
        return h('span', [
          h('Icon', {
            props: {
              type: (row.changesStatus == 1 && row.changesVal != 0) ? 'md-arrow-up' : (row.changesStatus == -1 && row.changesVal != 0) ? 'md-arrow-down' : 'md-git-commit',
              color: (row.changesStatus == 1 && row.changesVal != 0) ? '#13ff13' : (row.changesStatus == -1 && row.changesVal != 0) ? '#fd4e4e' : 'yellow',
              size: '22'
            },
            style: {
              cursor: 'pointer'
            }
          }),
          h('span', {
            domProps: {
              className: "table-rank-value"
            },
          }, row.changesStatus == 0 ? '' : row.changesVal)
        ]);
      },

      //是否进线
      renderEntry(h, params) {
        const row = params.row;
        return h('span', [
          h('span', {
            domProps: {
              className: "table-entry-status"
            },
            style: {
              cursor: 'pointer',
              background: row.score > 580 ? '#209a31' : row.score > 550 ? '#00767d' : 'transparent'
            }
          }, row.score > 580 ? '进' : row.score > 550 ? '踩' : ''),
          h('span', {
            domProps: {
              className: "table-rank-value"
            },
          }, row.score)
        ]);
      },



      //变化状态
      renderStauts(h, params) {
        const row = params.row;
        return h('span', [
          h('Icon', {
            props: {
              type: row.classRank === 1 ? 'md-arrow-up' : row.classRank === 2 ? 'md-arrow-down' : 'md-git-commit',
              color: row.classRank === 1 ? '#13ff13' : row.classRank === 2 ? '#fd4e4e' : 'yellow',
              size: '22'
            },
            style: {
              cursor: 'pointer'
            }
          })
        ]);
      },

      renderHard(h, params) {
        let that = this;
        const row = params.row;
        return h('span', row.hardList.map(function (item, index) {
          return h('span', {
            style: {
              fontSize: '16px',
              fontWeight: "600",
              color: '#03efdb',
              cursor: 'pointer',
              //textDecoration: "underline"
            },
            on: {
              'click': function () {
                that.$parent.$parent.$parent.isShowQuestions = true;
                that.$router.push({ path: '/total/questionList', query: { QIndex: item } })
              }
            }
          }, item + (index == row.hardList.length - 1 ? '' : ' , '))
        }))
      },

      renderCareful(h, params) {
        let that = this;
        const row = params.row;
        return h('span', row.carefulList.map(function (item, index) {
          return h('span', {
            style: {
              fontSize: '16px',
              fontWeight: "600",
              color: '#03efdb',
              cursor: 'pointer',
              //textDecoration: "underline"
            },
            on: {
              'click': function () {
                that.$parent.$parent.$parent.isShowQuestions = true;
                that.$router.push({ path: '/total/questionList', query: { QIndex: item } })
              }
            }
          }, item + (index == row.carefulList.length - 1 ? '' : ' , '))
        }))
      },


      renderPercent(h , params){
        return h('span', params.row.scoreRate + '%');
      }
      },

  mounted() {

  },

  watch: {
    tableDatas: function (data) {
      this.tableData = data;
    }
  }



  }
</script>

<style>

  .myTable {
    width: 100%;
    /*height: 400px;*/
    /*padding: 20px 0;*/
    margin: 0 auto;
    display: block;
    user-select: none !important;
  }

    .myTable .ivu-table td, .myTable .ivu-table th {
      /*border: none;*/
      color: #e4eadb;
      border-color: #595959;
    }

    .myTable .ivu-table-wrapper {
      /*border:none;*/
      border-color: #595959;
      border-right: 1px solid #595959;
    }

    .myTable .ivu-table::before, .myTable .ivu-table::after {
      height: 1px;
      background: #595959;
    }

    .myTable .ivu-table {
      box-sizing: border-box;
      /*border:1px solid #595959;*/
    }

      .myTable .ivu-table, .myTable .ivu-table td {
        background: #282828;
        text-align: center;
        position: relative;
      }

        .myTable .ivu-table th {
          background: rgba(107, 107, 107, 0.19);
          text-align: center;
          position: relative;
        }

    .myTable .ivu-table-sort {
      margin-left: -6px;
    }

      .myTable .ivu-table-sort i {
        color: #fff;
      }

    .myTable .ivu-table-header .ivu-table-cell {
      font-size: 14px;
      font-weight: bold;
    }

    .myTable .ivu-table-header {
      background: rgba(228, 234, 219, 0.08);
    }


    .myTable .table-rank-value {
      margin-left: 10px;
      vertical-align: middle;
      font-size: 14px;
    }

    .myTable .table-rank-badge {
      position: absolute;
      right: 10px;
      top: 12px;
      font-size: 14px;
      padding: 2px 14px;
      color: #e4eadb;
    }

    .myTable .badge-wrap .ivu-icon, .myTable .badge-wrap img {
      position: absolute;
      left: 7px;
      top: 12px;
    }


    .myTable .ivu-page-item {
      background: rgba(40,40,40,.5);
    }

      .myTable .ivu-page-item:hover {
        border-color: #e4eadb;
      }

    .myTable .ivu-page-item-active {
      background: #fff;
    }


    .myTable .ivu-page-item a {
      color: #f1f1f1;
    }

    .myTable .ivu-page-next, .myTable .ivu-page-prev {
      background: rgba(0,0,0,0);
    }

      .myTable .ivu-page-next a, .myTable .ivu-page-prev a {
        color: #e4eadb;
      }

      .myTable .ivu-page-next:hover, .myTable .ivu-page-prev:hover {
        border-color: #e4eadb;
      }


    .myTable .ivu-page-item-active, .myTable .ivu-page-item:hover a {
      border-color: #e4eadb;
    }

      .myTable .ivu-page-item-active a {
        color: #595959;
      }

    .myTable .ivu-table-fixed {
      /*padding-top:3px;*/
      background: #282828;
    }

    .myTable .ivu-select-arrow {
      top: 72%;
    }

    .myTable .ivu-table-fixed-right::before, .ivu-table-fixed::before {
      height: 0;
    }

  .table-subject-select {
    position:relative;
    display:flex;
    justify-content:space-between;
    padding-right:5px;
    height:40px;
    margin-bottom:10px;
  }

         .table-subject-select .table-tips{
           font-size:14px;
           color:#4cf8da;
           font-weight:bold;
           position:absolute;
           right:5px;
           top:0;
         }

      .table-subject-select .ivu-select {
      margin: 5px 20px 15px 0;
      height: 30px;
  }

      .table-subject-select .ivu-select-single .ivu-select-selection {
          height: 30px;
          background: transparent;
          border: 1px solid #595959;
          box-shadow: none;
          color:#cecece; 
      }

      .table-subject-select .ivu-select-single .ivu-select-arrow {
          top:76%;
      }

      .table-subject-select .ivu-select-single .ivu-select-placeholder {
          height: 30px;
          line-height: 30px;
          font-size: 16px;
      }


  .myTable .table-entry-status {
    position:absolute;
    right:20px;
    top:15px;
    background:#209a31;
    width:15px;
    height:15px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
  }

  .ivu-table-overflowX::-webkit-scrollbar {
    height: 12px !important;
  }

  .ivu-table-overflowX::-webkit-scrollbar-track {
    border-radius: 0px;
    display: none;
  }

  .ivu-table-overflowX::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background: #949494;
  }
</style>

