<template>

  <div class="test_box">

    <p>hell,你好</p>

    <p>encodeURI编码后转码的路由参数内容----<span style="color: red">({{routerParmas}})</span></p>

    <div class="table_box">

      <el-table :data="sheetTableData" border style="width: 100%" :summary-method="getSummaries" show-summary>

        <el-table-column prop="years" label="年度" align='center' sortable>

          <template slot-scope="scope">

            <el-input class="txt_ct" v-model="scope.row.years" placeholder="请输入" disabled></el-input>

          </template>

        </el-table-column>

        <el-table-column prop="firstSeason" label="第一季度统计" align='center'>

          <template slot-scope="scope">

            <el-input class="txt_ct" v-model="scope.row.firstSeason" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'').replace(/^(\d*(\.\d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>

          </template>

        </el-table-column>

        <el-table-column prop="secondSeason" label="第二季度统计" align='center'>

          <template slot-scope="scope">

            <el-input class="txt_ct" v-model="scope.row.secondSeason" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'').replace(/^(\d*(\.\d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>

          </template>

        </el-table-column>

        <el-table-column prop="thirdSeason" label="第三季度统计" align='center'>

          <template slot-scope="scope">

            <el-input class="txt_ct" v-model="scope.row.thirdSeason" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'').replace(/^(\d*(\.\d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>

          </template>

        </el-table-column>

        <el-table-column prop="fourthSeason" label="第四季度统计" align='center'>

          <template slot-scope="scope">

            <el-input class="txt_ct" v-model="scope.row.fourthSeason" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'').replace(/^(\d*(\.\d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>

          </template>

        </el-table-column>

        <el-table-column fixed="right" label="操作" align='center'>

          <template slot-scope="scope">

            <el-button type="primary" size="small" @click='addData' icon="el-icon-plus" circle></el-button>

            <el-button v-if="scope.$index == sheetTableData.length-1 || scope.$index == 0" @click.native.prevent="deleteData(scope.$index,sheetTableData)" type="danger" size="small" icon="el-icon-delete" circle></el-button>

          </template>

        </el-table-column>

        <!-- 暂无数据 -->

        <div slot="empty" v-if="!sheetTableData.length" style="padding:20px;">

          <div style="margin-top: 10px">暂无数据

            <span>，请 <el-button type="text" @click="dialogVisible = true">新增</el-button></span>

          </div>

        </div>

      </el-table>

      <!-- 弹窗 -->

      <el-dialog title="请选择起始年份/截止年份" :visible.sync="dialogVisible">

        <div style="display: flex;align-items: center;justify-content: center;">

          <div class="block">

            <el-date-picker v-model="startYear" type="year" placeholder="起始年份" value-format="yyyy">

            </el-date-picker>

          </div>

          <div class="block">

            <p style="padding:10px;">至</p>

          </div>

          <div class="block">

            <el-date-picker v-model="endYear" type="year" placeholder="截止年份" value-format="yyyy">

            </el-date-picker>

          </div>

        </div>

        <span slot="footer" class="dialog-footer">

          <el-button @click="dialogVisible = false">取 消</el-button>

          <el-button type="primary" @click="sureAddData">确 定</el-button>

        </span>

      </el-dialog>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      isEgdit: false,//是否可编辑

      sheetTableData: [],//数据

      startYear: '',//起始年份

      endYear: '',//截止年份

      dialogVisible: false,//弹窗是否显示

      routerParmas: decodeURI(decodeURI(this.$route.query.goodName)), //路由编码参数解码

    };

  },

  methods: {

    //新增数据

    addData() {

      let item = {

        "id": null,

        "years": Number(this.sheetTableData[this.sheetTableData.length - 1].years) + 1,

        "firstSeason": null,

        "secondSeason": null,

        "thirdSeason": null,

        "fourthSeason": null

      }

      this.sheetTableData.push(item)

    },

    //确认依据起始年份/截止年份 添加数据

    sureAddData() {

      let yearDiff = Number(this.endYear - this.startYear)

      //console.log(yearDiff, 'yearDiff', this.endYear, 'timeEnd', this.startYear, 'timeStart')

      if (yearDiff > 0) {

        for (let i = 0; i <= yearDiff; i++) {

          this.sheetTableData.push({

            "id": null,

            "years": Number(this.startYear) + Number(i),

            "firstSeason": null,

            "secondSeason": null,

            "thirdSeason": null,

            "fourthSeason": null,

          })

        }

      } else {

        this.$eleMessage('截止年份应大于起始年份', 'error', 500)

      }

      this.dialogVisible = false;

    },

    //删除

    deleteData(index, list) {

      list.splice(index, 1);

    },

    //合计---Element ui自带合计功能还是蛮好用的 (前提是dom中的prop属性必须要有)

    getSummaries(param) {

      const { columns, data } = param;

      const sums = [];

      columns.forEach((column, index) => {

        if (index === 0) {

          sums[index] = '合计';

          return;

        }

        const values = data.map(item => Number(item[column.property]));

        if (!values.every(value => isNaN(value))) {

          sums[index] = values.reduce((prev, curr) => {

            const value = Number(curr);

            if (!isNaN(value)) {

              return prev + curr;

            } else {

              return prev;

            }

          }, 0);

          sums[index] += '';

        } else {

          sums[index] = '';

        }

      });

      return sums;

    },

    changeValue(){

        //1、oninput事件在value改变时触发,实时的即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发。

        //2、onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。

        console.log('输入时候可以做些什么事情')

    }

  }

}

</script>

<style scoped>

</style>