<template>
  <div class="financialBox">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="企业报表" name="first">
        <el-form ref="form" :model="form" label-width="80px" class="line-bottom" inline>
              <el-form-item label="单位名称:">
                <el-input v-model="form.establishmentUnit"  placeholder="单位名称" clearable style="width:180px"></el-input>
              </el-form-item>
              <el-form-item label="上报时间:">
                <el-date-picker
                        style="width:180px"
                  v-model="dataValue"
                  @change="dataChange(dataValue)"
                  type="month"
                  placeholder="选择月"
                ></el-date-picker>
              </el-form-item>
          <div class="searchBox">
            <div class="search-line"></div>
            <el-button
                    class="iconfont iconchaxun"
                    size="mini"
                    type="primary"
                    style="margin-top:3px;margin-left:10px;"
                    @click="searchInfo"
            > 查询
            </el-button>
            <el-button
                    class="iconfont iconzhongzhi"
                    size="mini"
                    style="margin-top:3px;margin-left:10px;"
                    @click="clearInfo"
                    type="primary"
            > 重置
            </el-button>
          </div>
        </el-form>
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          stripe
          border
          style="width: 100%;margin-top:10px;"
        >
          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="establishmentUnit" label="单位名称" align="center">
            <template slot-scope="scope">
              <span @click="clickTxt(scope.row)" class="click-css">{{scope.row.establishmentUnit}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="reportYear" label="上报时间" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.reportYear}}年{{scope.row.reportMonth}}月份</span>
            </template>
          </el-table-column>
          <el-table-column prop="grainAndOilSalesIncome" label="粮油销售收入" align="center"></el-table-column>
          <el-table-column prop="grainAndOilSalesCost" label="粮油销售成本" align="center"></el-table-column>
          <el-table-column prop="netProfit" label="净利润" width="100" align="center"></el-table-column>
          <el-table-column label="毛利率" width="100" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.grossInterestRate?scope.row.grossInterestRate * 100 + '%':'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="资产负债率" width="100" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.assetLiabilityRatio?scope.row.assetLiabilityRatio * 100 + '%':'-'}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="汇总表" name="second">
        <el-form ref="form" :model="form" label-width="80px" class="line-bottom" inline>
              <el-form-item label="上报时间:">
                <el-date-picker
                  v-model="dataValue"
                  @change="dataChange(dataValue)"
                  type="month"
                  placeholder="选择月"
                ></el-date-picker>
              </el-form-item>
          <div class="searchBox">
            <div class="search-line"></div>
            <el-button
                    class="iconfont iconchaxun"
                    size="mini"
                    type="primary"
                    style="margin-top:3px;margin-left:10px;"
                    @click="searchInfoPop"
            > 查询
            </el-button>
            <el-button
                    class="iconfont iconzhongzhi"
                    size="mini"
                    style="margin-top:3px;margin-left:10px;"
                    @click="clearInfo"
                    type="primary"
            > 重置
            </el-button>
          </div>
        </el-form>
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          stripe
          border
          style="width: 100%;margin-top:10px;"
        >
          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="reportYear" label="上报时间" align="center">
            <template slot-scope="scope">
              <span
                @click="clickTxt(scope.row)"
                class="click-css"
              >{{scope.row.reportYear}}年{{scope.row.reportMonth}}月份</span>
            </template>
          </el-table-column>
          <el-table-column prop="grainAndOilSalesIncome" label="粮油销售收入"  align="center"></el-table-column>
          <el-table-column prop="grainAndOilSalesCost" label="粮油销售成本" align="center"></el-table-column>
          <el-table-column prop="netProfit" label="净利润"  align="center"></el-table-column>
          <el-table-column label="毛利率"  align="center">
            <template slot-scope="scope">
              <span>{{scope.row.grossInterestRate?scope.row.grossInterestRate * 100 + '%':'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="资产负债率"  align="center">
            <template slot-scope="scope">
              <span>{{scope.row.assetLiabilityRatio?scope.row.assetLiabilityRatio * 100 + '%':'-'}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column width="90" label="编制日期" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.applicationDate?scope.row.applicationDate.split('T')[0]:'-'}}</span>
            </template>
          </el-table-column>-->
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div class="pag-right clearFix">
      <el-pagination
        class="right"
        style="text-align:right;margin-right: 20px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="formPage.page"
        :page-sizes="[10,20,30,40]"
        :page-size="formPage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formPage.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  budgetSubmissionByPage,
  budgetSubmissionByPageOfAudit
} from "@/api/financialDataPresentation/index";

export default {
  data() {
    return {
      dataValue: "",
      activeName: "first",
      form: {
        establishmentUnit: "",
        reportYear: "",
        reportMonth: ""
      },
      formPage: {
        page: 1,
        size: 10,
        total: 0
      },
      //列表数据
      tableData: [],
      //列表loading控制
      tableLoading: false
    };
  },
  methods: {
    clickTxt(row) {
      if (this.activeName == "first") {
        this.$router.push({
          path: "enterpriseStatement",
          query: {
            id: row.id,
            row: row
          }
        });
      } else {
        this.$router.push({
          path: "summaryTable",
          query: {
            id: row.id,
            row: row
          }
        });
      }
    },
    dataChange(value) {
      if (value) {
        this.form.reportYear = value.getFullYear();
        this.form.reportMonth = value.getMonth() + 1;
      } else {
        this.form.reportYear = "";
        this.form.reportMonth = "";
      }
    },
    handleClick(tab, event) {
      this.form = {
        establishmentUnit: "",
        reportYear: "",
        reportMonth: ""
      };
      this.dataValue = "";
      this.formPage = {
        page: 1,
        size: 10,
        total: 0
      };
      if (tab.name == "first") {
        this.initTableData();
      } else {
        this.initTableDataPop();
        // this.initTableData();
      }
    },
    //查询
    searchInfo() {
      this.initTableData();
    },
    //查询-汇总表
    searchInfoPop() {
      this.initTableDataPop();
    },
    //清空
    clearInfo() {
      this.form.reportYear = "";
      this.form.reportMonth = "";
      this.form.establishmentUnit = "";
      this.dataValue = "";
      this.initTableData();
    },
    //分页大小
    handleSizeChange(val) {
      this.formPage.size = val;
      this.initTableData();
    },
    //分页页数
    handleCurrentChange(val) {
      this.formPage.page = val;
      this.initTableData();
    },
    //初始化列表数据
    initTableData() {
      this.tableLoading = true;
      budgetSubmissionByPage(this.form, this.formPage).then(response => {
        if (response.infoCode == 200) {
          this.tableData = response.data.list;
          this.formPage.total = response.data.total;
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
        this.tableLoading = false;
      });
    },
    //初始化列表数据-汇总表
    initTableDataPop() {
      this.tableLoading = true;
      budgetSubmissionByPageOfAudit(this.form, this.formPage).then(response => {
        if (response.infoCode == 200) {
          this.tableData = response.data.list;
          this.formPage.total = response.data.total;
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
        this.tableLoading = false;
      });
    }
  },
  created() {
    this.initTableData();
  }
};
</script>
<style scoped>
#ml-9 {
  margin-left: 9px;
}
.click-css {
  color: #0029ff;
  cursor: pointer;
}
.financialBox{
  overflow-y: auto;
  margin: 10px;
  border: 1px solid #f4f5f8;
  padding: 10px;
  min-width: 960px;
}
.search-line {
  cursor: pointer;
  border-left: 1px dashed #737bf1;
  height: 38px;
  display: inline-block;
  margin:0 10px 0 20px;
  vertical-align: middle;
}
.line-bottom{
  border-bottom:1px dashed #006bd5;
}
.searchBox{
  position: relative;
  display: inline-block;
}
</style>