<template>
  <div class="app-container">
    <!--    <el-row :gutter="10" class="mb8">-->
    <!--    </el-row>-->
    <div class="table" >
      <el-table
        :header-cell-style="headerStyle"
        :row-style="{height:'50px'}"
        :span-method="objectSpanMethod"
        v-loading="loading"
        :data="deptList"
      >
        <el-table-column
          type="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          min-width="200px"
          label="税目"
          align="center"
        >
          <el-table-column
            prop="groupName"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="itemName"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column
          prop="content"
          align="center"
          min-width="100px"
          label="内容"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          label="计税依据及税率"
        >
          <el-table-column
            prop="taxRateGist"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="taxRate"
            align="center"
          ></el-table-column>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import {
  adsMatHyxtStampTaxContractDL, adsMatHyxtStampTaxInvoiceDelc,
  contractImport, deleteadsMatHyxtStampTaxContractD,
  downloadTemplateD, downloadTemplateM,
  invoiceDqueryPagee, invoiceImportP,
  queryList, queryPageNo
} from '@/api/utils'
import  moment from 'moment'

export default {
  components:{
  },
  data() {
    return {
      dialogVisible:false,
      deptList:[],
      options:[],
      queryParams:{
        invoiceCode:'',
        invoiceNumber:'',
        sellerName:'',
      },
      // 遮罩层
      loading: false,
      pageNo:1,
      pageSize:10,
      total:0,
      ruleForm:{},
      spanArr:[],
      pos:0,
    };
  },
  created() {
    this.getList();
  },
  computed:{

  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        /*
        将需要合并的行数赋值给 _row，注意这里由上一个方法的输出可以知道，这里的值可以是 3或者0
        当为 3 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格向下合并 _row 格
        当为 0 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格隐藏
        */
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }else {
        // return {
        //   rowspan: 0,
        //   colspan: 0
        // }
      }
    },
    getSpanArr(data) {
      for (let i = 0; i < data.length; i++) {
        // 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].groupName === data[i - 1].groupName) {
            // 如果相同就将索引为 pos 的值加一
            this.spanArr[this.pos] += 1;
            // 且将数组添加 0
            this.spanArr.push(0);
          } else {
            // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
            // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
            this.spanArr.push(1);
            // 同时 索引加一
            this.pos = i;
          }
        }
      }
    },
    headerStyle({ row, column,rowIndex,columnIndex}) {
      if (rowIndex === 1) {
        //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
        return {display: 'none'}

      }
      return "background:#f5f7fa"

    },
    delect(row){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adsMatHyxtStampTaxInvoiceDelc(row).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败，请重试!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    moment,
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      let data={
        pageNo:this.pageNo,
        pageSize:this.pageSize,
        ...this.queryParams
      }
      queryList(data).then((response) => {
        if(response && response.data){
          this.loading = false;
          this.deptList = response.data;
          this.getSpanArr(this.deptList)
        }else {
          this.deptList =[]
          this.loading = false;
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNo=val
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped>
//.table{
//  height: 100% !important;
//}
::v-deep .el-table{
  height: 70vh !important;
  overflow-y: scroll;
}
</style>
