<template>
  <div class="custom-table">
    <el-table
      :data="list"
      border
      :span-method="objectSpanMethod"
      v-loading="loading">
      <el-table-column prop="enforce_class" label="检查类别" show-overflow-tooltip align="center"/>
      <el-table-column prop="fullName" show-overflow-tooltip label="检查项"/>
      <el-table-column prop="enforce_method" show-overflow-tooltip label="检查流程及方法"/>
      <el-table-column prop="problem" show-overflow-tooltip label="常见问题"/>
      <el-table-column prop="updateDate" label="更新时间" show-overflow-tooltip align="center"/>
      <el-table-column prop="update_user_name" label="更新人员" show-overflow-tooltip align="center"/>
      <el-table-column prop="action" label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleDetail(scope.row.id)">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getHandbookList } from '@/api/book'
import { formatDate, notEmpty } from '@/utils/tool';

export default {
  computed: {
    pageTotal () {
      const page = Math.ceil(this.total / this.query.size)
      return page > 0 ? page : 1
    }
  },
  data () {
    return {
      spanArr: [],
      query: {
        sort: "sort asc",
        page: 1,
        size: 100
      },
      loading: false,
      list: [],
      total: 0
    }
  },
  mounted () {
    this.handleQuery()
  },
  methods: {
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
    },
    resetForm (queryString) {
      this.query.query = queryString
      this.handleQuery()
    },
    handleSizeChange (val) {
      this.query.size = val
      this.handleQuery()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.handleQuery()
    },
    handleQuery () {
      this.loading = true
      const vm = this
      if (this.query && this.query.query) {
        this.query.query = this.query.query + ";enforce_type=='0'"
      } else {
        this.query.query = "enforce_type=='0'"
      }
      getHandbookList(this.query).then(res => {
        if (res) {
          vm.total = res.total || 0
          const list = res.data || []
          list.map(item => {
            item.fullName = '';
            if (notEmpty(item.full_name) && notEmpty(item.enforce_class)) {
              item.fullName = item.full_name.replace(item.enforce_class+'---', '');
            }
            item.updateDate = formatDate(item.update_time)
            if (item.problems && Array.isArray(item.problems) && item.problems.length === 0) {
              item.problem = ''
            } else {
              let i = 0
              item.problem = (item.problems || []).map((problem, index) => {
                if (problem.problem_desc) {
                  let desc = (i + 1) + '、' + problem.problem_desc
                  i = i + 1
                  return desc
                }
              }).join(';')
            }
          })
          this.spanArr = []
          this.getSpanArr(list)
          vm.list = list
        }
        vm.loading = false
      })
    },
    handleDetail (id) {
      this.$router.push({
        path: '/monitor/book/detail',
        query: {
          id
        }
      })
    },
    handleEdit (id) {
      this.$router.push({
        path: '/monitor/book/edit',
        query: {
          id
        }
      })
    },
    getSpanArr (data) {
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].enforce_class === data[i - 1].enforce_class) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    }
  }
}
</script>