<template>
  <div class="container">
    <div class="top">
      <el-button type="success" @click="addDepaartment">新增部门</el-button>
    </div>
    <el-table  border  stripe  :data="tableList"  highlight-current-row  style="width:100%">
      <el-table-column  type="index"  align="center"  label="序号"  width="50px"/>
      <el-table-column prop="dname" label="部门名称" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center">  
        <template slot-scope="scope">
           {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="dremark" label="备注" align="center" />
      <el-table-column  prop="operation"  label="操作"  align="center"  width="200px"  fixed="right">
        <template slot-scope="scope">
          <el-button  size="mini"  @click="handleEdit(scope.row)">修改</el-button>
          <el-button  size="mini"  @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        class="right"
        :current-page.sync="listQuery.page"
        :page-size="listQuery.limit"
        :page-sizes="[10,20,30,40]"
        :total="total"
        @size-change="sizeChange"
        @current-change="pageChange"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
// 引入分页
import Pagination from '@/components/Pagination'
import { getList,deleteFun } from '@/api/system/userManagement/departmentManagement'
export default {
  name: 'DepartManagement',
  components: { Pagination },
  data() {
    return {
      // 列表数据
      tableList: [],
      // 分页
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let data = {
        pageIndex: this.listQuery.page,
        pageSize: this.listQuery.limit
      }
      getList(data).then((res) => {
          if (res.code == 200) {
            this.tableList = res.data.records
            this.listQuery.limit = res.data.size
            this.total = res.data.total
          }
      }).catch((err) => {
          console.log(err)
        })
    },
    sizeChange(v) {
      this.listQuery.limit = v;
      this.getList();
    },
    pageChange(v) {
      this.listQuery.page = v;
      this.getList();
    },
    // 新增
    addDepaartment() {
      this.$router.push({ name: 'AddDepartment',query: { state: 'add' }})
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({ name: 'AddDepartment',query: { state: 'edit',id: row.did }})
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确定删除该项记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          deleteFun(row.did).then((res) => {
            if (res.code == 200) {
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        })
    },
    dateFormat(timedate) {
      if (timedate === null || timedate === undefined) {
        return ''
      } else {
        let arr
        // 首先对日期进行拆解，获得日期字符串
        if (timedate.indexOf('T') > -1) {
          arr = timedate.split('T')
        } else {
          arr = timedate.split(' ')
        }
        var d = arr[0]
        var darr = d.split('-')
        var t = arr[1]
        var tarr = t.split('.000')
        var marr = tarr[0].split(':')
        var dd = parseInt(darr[0]) + '/' + parseInt(darr[1]) + '/' + parseInt(darr[2]) + ' ' + parseInt(marr[0]) + ':' + parseInt(marr[1]) + ':' + parseInt(marr[2])

        const date = new Date(Date.parse(dd))
        date.setTime(date.setHours(date.getHours() + 8))

        var year = date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
        * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
        * */
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        // 拼接
        return (year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds)
        // return (year + '-' + month + '-' + day)
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.container{
    width:100%;
      .top{

        height:50px;
        line-height:50px;
        text-align: right;
        margin-bottom:20px;
    }
}
.pagination-container {
  margin-top:10px;
  margin-right:20px;
  text-align: right;
}
</style>
