<template>
    <div class="app-container">
    <el-row :gutter="10">
    <el-col :span="22" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>查询支援</span>
          </div>
          <div class="form">
                <el-form :rules="rules" ref="form" inline :model="form" style="width:100%">
                    <el-form-item prop="radio">
                        <el-radio v-model="form.radio" label="支援单元">支援单元号</el-radio>
                        <el-radio v-model="form.radio" label="被支援单元">被支援单元号</el-radio>
                    </el-form-item>
                    <el-form-item label="单元号" prop="value">
                        <el-select v-model="form.value" default-first-option clearable allow-create filterable placeholder="请选择单元号">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="起止日期：" prop="yearMonth">
                        <el-date-picker
                          v-model="form.yearMonth"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" :loading="searchLoading" @click="getBalanceInfo('form')">&nbsp;查询&nbsp;</el-button>
                <el-button type="primary" icon="el-icon-document" :loading="exportLoading" @click="exportExcel">&nbsp;导出&nbsp;</el-button>
              </el-form>
                <el-table
                  :data="balancePiece.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  v-loading = "loading"
                  style="width: 100%">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="站/段/工作内容">
                            <span>{{ props.row.stationAndPartAndWorkInfo }}</span>
                          </el-form-item>
                          <el-form-item label="工作类型">
                            <span>{{ props.row.workType }}</span>
                          </el-form-item>
                          <el-form-item label="单位">
                            <span>{{ props.row.workUnit }}</span>
                          </el-form-item>
                          <el-form-item label="数量">
                            <span>{{ props.row.amount }}</span>
                          </el-form-item>
                          <el-form-item label="单价">
                            <span>{{ props.row.unitPrice }}</span>
                          </el-form-item>
                          <el-form-item label="结算金额">
                            <span>{{ props.row.settlementAmount }}</span>
                          </el-form-item>
                          <el-form-item label="说明">
                            <span>{{ props.row.explainInfo }}</span>
                          </el-form-item>
                          <el-form-item label="上传日期时间">
                            <span>{{ props.row.uploadTime }}</span>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>
                  <el-table-column
                    label="支援人姓名"
                    prop="assistPerson">
                  </el-table-column>
                  <el-table-column
                    label="支援单元"
                    prop="assistUnit">
                  </el-table-column>
                  <el-table-column
                    label="被支援单元"
                    prop="beAssistedUnit">
                  </el-table-column>
                  <el-table-column
                    label="支援日期"
                    prop="assistDate">
                  </el-table-column>
                </el-table>
                <div class="pagination"><el-pagination
                    @size-change="handleSizeChange"
                    @current-change="current_change"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>

                <el-table
                  :data="balanceDay.slice((currentPage1-1)*pagesize1,currentPage1*pagesize1)"
                  v-loading = "loading"
                  style="width: 100%;margin-top:60px">
                  <el-table-column
                    label="支援人姓名"
                    prop="assistPerson">
                  </el-table-column>
                  <el-table-column
                    label="支援单元"
                    prop="assistUnit">
                  </el-table-column>
                  <el-table-column
                    label="被支援单元"
                    prop="beAssistedUnit">
                  </el-table-column>
                  <el-table-column
                    label="支援日期"
                    prop="assistDate">
                  </el-table-column>
                  <el-table-column
                    label="住宿类型"
                    prop="stayType">
                  </el-table-column>
                  <el-table-column
                    label="结算金额"
                    prop="settlementAmount">
                  </el-table-column>
                  <el-table-column
                    label="上传日期时间"
                    prop="uploadTime">
                  </el-table-column>
                </el-table>
                <div class="pagination"><el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="current_change1"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes1"
                    :page-size="pagesize1"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total1">
                  </el-pagination>
                </div>
          </div>
        </el-card>
    </el-col>
    </el-row>
    </div>
</template>
<script>
import { getBalance } from "@/api/income/balance";

export default {
  name: "weekSelect",
  data() {
    return {
        user: {},
        balancePiece:[],
        balanceDay:[],
        loading:false,
        searchLoading:false,
        exportLoading:false,
        currentPage:1,
        currentPage1:1,
        dailyReportFlag:false,
        total:0,
        total1:0,
        pagesize:5,
        pageSizes:[5,10,20,30,50],
        pagesize1:5,
        pageSizes1:[5,10,20,30,50],
        form:{
            yearMonth:"",
            value: '',
            radio:'支援单元'
        },
        rules: {
          yearMonth:[
              { required: true, message: '请选择起止日期', trigger: 'change' }
          ],
          value:[
              { required: true, message: '请选择单元号', trigger: 'change' }
          ]
        },
        options: [{
          value: 'U0999',
          label: 'U0999'
        }, {
          value: 'U1031',
          label: 'U1031'
        }, {
          value: 'U1051',
          label: 'U1051'
        }, {
          value: 'U1052',
          label: 'U1052'
        }, {
          value: 'U1053',
          label: 'U1053'
        },
        {
          value: 'U1055',
          label: 'U1055'
        },
        {
          value: 'U1061',
          label: 'U1061'
        },
        {
          value: 'U1062',
          label: 'U1062'
        },
        {
          value: 'U1063',
          label: 'U1063'
        },
        {
          value: 'U1064',
          label: 'U1064'
        },
        {
          value: 'U1065',
          label: 'U1065'
        },
        {
          value: 'U1998',
          label: 'U1998'
        },
        {
          value: 'U1999',
          label: 'U1999'
        },{
          value: 'U2021',
          label: 'U2021'
        },{
          value: 'U2032',
          label: 'U2032'
        },{
          value: 'U2998',
          label: 'U2998'
        },{
          value: 'U2999',
          label: 'U2999'
        }],
        
    };
},
methods:{
    current_change:function(currentPage){
        this.currentPage = currentPage;
    },
    current_change1:function(currentPage1){
        this.currentPage1 = currentPage1;
    },
    handleSizeChange(val) {
        this.pagesize = Number(`${val}`);
    },
    handleSizeChange1(val) {
        this.pagesize1 = Number(`${val}`);
    },
    getBalanceInfo(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.searchLoading = true;
            getBalance(this.form.radio,this.form.value,this.form.yearMonth).then(res => {
            this.balancePiece = res.balancePiece;
            this.balanceDay = res.balanceDay;
            this.total = res.balancePiece.length;
            this.total1 = res.balanceDay.length;
            this.searchLoading = false;
            })
          } else {
            return false;
          }
        });
      },
    exportExcel(){
      if(this.balancePiece.length == 0 && this.balanceDay.length == 0){
        this.$message({
            showClose: true,
            message: '查询数据为空，无法导出！',
            type: 'error'
              });
      }else{
        this.exportLoading = true;
        import('@/utils/Export2Excel').then(excel => {
          const tHeader = [["支援人","支援单元","被支援单元","支援日期","站/段/工作内容","工作类型","单位","数量","单价","结算金额","说明","上传日期时间"],["支援人","支援单元","被支支援单元","支援日期","住宿类型","结算金额","说明","上传日期时间"]]
          const filterVal = [["assistPerson","assistUnit","beAssistedUnit","assistDate","stationAndPartAndWorkInfo","workType","workUnit","amount","unitPrice","settlementAmount","explainInfo","uploadTime"],["assistPerson","assistUnit","beAssistedUnit","assistDate","stayType","settlementAmount","explainInfo","uploadTime"]]
          const listPiece = this.balancePiece;
          const listDay = this.balanceDay;
          const dataP = this.formatJson(filterVal[0], listPiece);
          const dataD = this.formatJson(filterVal[1], listDay);
          excel.export_json_to_excel_sheet({
            headers: tHeader,
            datas: [dataP,dataD],
            sheetnames: ['JJZY','GRZY'],
            multiHeader: [],
            autoWidth:false,
            filename: '支援导出表_'+ this.form.radio + this.form.value+"_"+this.form.yearMonth.toString().replace(',',"至"),
          });
          this.exportLoading = false;
          // this.downloadLoading = false
        });
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
  }
}
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.pagination{
  margin:20px auto;
  padding-left: 36%;
}
</style>