<template>
  <div class="max-big-box">
    <div class="big-max-box">
      <!--返回按钮-->
      <div class="out-page-button cursor_pointer" @click="outButton">
        <img src="~@/assets/images/icon_25.png">
        <p>返回</p>
      </div>
      <div class="big-title-box">
        <p>基数单位名称：<span>{{transmissionData.unitName}}</span></p>
        <p>当前数量：<span>{{transmissionData.currentNum}}</span></p>
      </div>
      <!--表格-->
      <div class="table-box">
        <el-table
          ref="multipleTable"
          :row-key="getRowKey"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @select-all="handleSelectionChange"
          @select="handleSelectionChange">
          1710
          <el-table-column
            :reserve-selection="true"
            type="selection"
            width="91">
          </el-table-column>
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="110">
          </el-table-column>
          <el-table-column
            label="类型"
            width="327">
            <template slot-scope="scope">
              {{scope.row.unitType==1?"新增":"消耗"}}
            </template>
          </el-table-column>
          <el-table-column
            prop="disposeName"
            label="处理人"
            width="327">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="处理时间"
            width="427">
          </el-table-column>
          <el-table-column
            label="处理变化"
            width="427">
            <template slot-scope="scope">
              {{scope.row.unitType==1?"+":"-"}}{{scope.row.unitNum}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pagesize"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { unitDetailList } from '@/api/userApi'
  export default {
    name: "numberDetails",//数量详情
    props:["transmissionData"],
    data () {
      return {
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //选中数据
        multipleSelection:[],
      }
    },

    created(){

    },
    mounted() {
      this.getListData();
    },
    methods: {
      //数据列表
      async getListData () {
        let self = this;
        let obj={
          id:self.transmissionData.id,
          pageSize:self.pagesize,
          pageNum:self.currentPage
        };
        const { data } = await unitDetailList(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.$forceUpdate();
        }
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
      },
      //勾选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.tableNum = this.multipleSelection.length
      },
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    .big-max-box
      height:100%;
      width:100%;
      /*车辆页面信息*/
      .big-title-box
        margin-left 105px
        display flex
        margin-top:20px;
        p
          line-height:40px
          color:$color_ff;
          font-size:$font_18;
          text-align left
        span
          color:$theme;
        p:nth-child(1)
          width:300px;
        p:nth-child(2)
          width:300px;
        p:nth-child(3)
          width:300px;
      //返回按钮
      .out-page-button
        height:30px;
        width:93px;
        margin:0 0 0 106px;
        background:url("~@/assets/images/button_02.png");
        background-size 100% 100%
        display flex
        img
          display block
          height:12px;
          width:7px;
          margin:9px 10px 0 22px;
        p
          line-height:30px;
          font-size:$font_12;
          color:$color_ff;
          text-align left
      //表格
      .table-box
        width:1710px !important;
        margin:0 105px 60px;
        text-align center !important
        /*点击详情*/
        .table-info-p-one
          display inline-block
        .table-info-p-two
          display inline-block
          width:60px;
          height:20px;
          color:$color_33;
          font-size:$font_12;
          background url("~@/assets/images/button_14.png")
          background-size 100% 100%
          border-radius:4px;
        .colorA
          color:$theme3;
        .colorB
          color:$theme2;
        .colorC
          color:$theme1;
        .table-min-button
          width:210px;
          margin:0 auto;
          display flex
          div:nth-child(1)
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          div:nth-child(2)
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          div:nth-child(3)
            height:20px;
            width:70px;
            font-size:$font_14;
            color:$theme3;
            display flex
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
    //修改日期选择样式
    /*
    .el-calendar
      background $color_ff
    */
    //修改table表格样式
    .el-table
      background rgba(6,177,240,0.2)
    .el-table /deep/ tr
    .el-table /deep/ th
      background rgba(6,177,240,0)
    .el-table::before
      height:0;
    .el-table /deep/ .cell
      max-height:46px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    .el-table /deep/ td
    .el-table /deep/ th.is-leaf
      border-bottom:0!important;
    .el-table /deep/ .el-checkbox__inner
      //background rgba(6,177,240,0.2)
      border 1px solid #216f93 !important
    .el-table /deep/ thead
      color:$color_ff;
    .el-table
      color:$color_a1
    .el-table /deep/ th
      text-align-last: center;
    .el-table /deep/ td
      text-align-last: center;
    .el-table /deep/ tbody tr:hover > td
      background rgba(6,177,240,0.2)
      color:$theme;
    .el-table /deep/ .el-checkbox
      width:14px;
      margin:0 auto;
      display block
    //修改动作条样式
    .el-pagination.is-background /deep/ .btn-next
    .el-pagination.is-background /deep/ .btn-prev
    .el-pagination.is-background /deep/ .el-pager li
      background:url("~@/assets/images/button_13.png");
      color:$color_ff;
    .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
      background:url("~@/assets/images/button_14.png");
      color:$color_ff;
    .colorA
      color :$theme;
    ::-webkit-input-placeholder
      color: $border_1;
    ::-moz-placeholder
      color: $border_1;
    ::-ms-input-placeholder
      color: $border_1;

</style>
