<template>
  <div id="content-container" :class="{'expand-right': expandRight}">
    <page-loading :show="pageLoading"></page-loading>
    <!--Page Title-->
    <div id="page-title">
      <h1 class="page-header text-overflow">周报填报</h1>
    </div>
    <!--End page title-->

    <!--Breadcrumb-->
    <!--<ol class="breadcrumb">-->
      <!--<li><a href="#">Home</a></li>-->
      <!--<li><a href="#">Layouts</a></li>-->
      <!--<li class="active">Demo</li>-->
    <!--</ol>-->
    <!--End breadcrumb-->

    <!--Page content-->
    <div class="page-content">
      <div style="margin-bottom: 10px">
        <el-button type="primary" @click="addExpApply" v-if="!isSuper">新增</el-button>
      </div>
      <data-table
              :totalColumnsData="tableColumnsData"
              :rowsData="tableRowsData"
              :showSingleOperation="tableShowSingleOperation"
              :showMultipleOperation="false"
              :canFolded="true"
              :showPageCtr="true"
              :totalPage="tableTotalPage"
              :currentPage="pageNo"
              @selectPage="tableSelectPage"
              @singleEdit="tableSingleEdit"
              @singleCheck="tableSingleCheck"
      >
      </data-table>
    </div>
    <!--End Page content-->
  </div>
</template>

<script type="text/ecmascript-6">
  import routerData from '../../../../router.json'
  import PageLoading from '../../../components/PageLoading.vue'
  import DataForm from '../../../components/form/DataForm.vue'
  import DataTable from '../../../components/DataTable.vue'
  import Api from '../../../server/index.js'
  import {getItem} from '../../../config/mUtils.js'

  export default {
    beforeRouteEnter (to, from, next) {
      next(function (vm) {
        global.getMenuIndex(vm);
      })
    },
    data (){
      return {
        expandRight: false,
        //table单选操作
        tableShowSingleOperation: {
          show: true,
          showEdit: true,
          showDelete: true,
          showCheck: true
        },
        //分页
        pageNo: 1,
        pageSize: 10,
        tableTotalPage: 1,
        tableColumnsData: [],
        tableRowsData: [],
        isSuper: false
      }
    },
    created () {
      this.initTableColumns();
      this.init();
    },
    methods: {
      addExpApply () {
        this.$router.push({name: 'AddClaimApply'})
      },
      init () {
        let userId = getItem('userId');
        if (userId === '0') {
          this.isSuper = true;
        }
        let projectWeeklyFindReq={
          pageNo:this.pageNo,
          pageSize:this.pageSize
        }
        Api.ProjectManagements.getWeekly(projectWeeklyFindReq).then(result=>{
          this.tableRowsData = [];
          this.pageLoading = false;
          console.log("周报填报列表",result)
          if (result.status === 0) {
            let dataList = result.data.ls;
            for (let i=0; i<dataList.length; i++) {
              this.tableRowsData.push({
                id: dataList[i].id,
                projectNo: dataList[i].projectNo,
                projectName: dataList[i].projectName,
                userName: dataList[i].userName,
                workload: dataList[i].workload,
                thisWeek: dataList[i].thisWeek,
                nextWeek: dataList[i].nextWeek
              })
              // this.pageNo=result.data.pages
              this.tableTotalPage=result.data.total
            }
            console.log("tableRowsData",this.tableRowsData)
          }
        })
        // Api.FinanceManagement.getReimburseList(this.pageNo, this.pageSize).then(result => {
        //   this.pageLoading = false;
        //   this.tableRowsData = [];
        //   if (result.status === 0) {
        //     this.isEdit = result.data.isEdit;
        //     this.tableTotalPage = result.data.total
        //     let dataList = result.data.ls;
        //     for (let i=0; i<dataList.length; i++) {
        //       let deptName = '';
        //       for (let j=0; j<dataList[i].userInfo.dept.length; j++) {
        //         deptName += dataList[i].userInfo.dept[j].orgName;
        //         if (j < dataList[i].userInfo.dept.length - 1) {
        //           deptName += '>';
        //         }
        //       }
        //       this.tableRowsData.push({
        //         status: dataList[i].status,
        //         id: dataList[i].id,
        //         userInfoName: dataList[i].userInfo.userInfoName,
        //         category: '报销',
        //         deptName: deptName
        //       })
        //     }
        //   } else {
        //     this.$message.error(`${result.msg}`);
        //   }
        // })
      },
      //初始化tableColumns
      initTableColumns () {
        this.tableColumnsData = [
          {
            label: '项目编号',
            prop: 'projectNo',
            show: true
          },
          {
            label: '项目名称',
            prop: 'projectName',
            show: true
          },
          {
            label: '员工姓名',
            prop: 'userName',
            show: true
          },
          {
            label: '工作量(人日)',
            prop: 'workload',
            show: true
          },
          {
            label: '本周进展',
            prop: 'thisWeek',
            show: true
          },
          {
            label: '下周计划',
            prop: 'nextWeek',
            show: true
          }
        ];
      },
      tableSelectPage (param){
        this.pageNo = param;
        this.init();
      },
      tableSingleCheck (index){
        this.$router.push({
          name: "ExpenseClaimApplyEdit",
          params: {id: this.tableRowsData[index].id}
        })
      },
      tableSingleEdit (index) {
        this.$router.push({
          name: "ExpenseClaimApplyEdit",
          params: {id: this.tableRowsData[index].id}
        })
      }
    },
    components: {
      PageLoading, DataTable, DataForm
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  .expand-right {
    @media (min-width: 768px) {
      padding-left: 0 !important;
    }
  }

  .page-content {
    padding: 15px;
  }
</style>
