<template>
  <div class="financialBox">
    <el-form ref="form" :model="form" label-width="80px" class="line-bottom" inline>
      <el-form-item label="申请部门:">
        <el-input v-model="form.applicationOffice"  placeholder="申请部门" clearable style="width:180px"></el-input>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="form.findingsAudit" clearable placeholder="请选择"  style="width:180px">
          <el-option
            v-for="(item,index) in findingsAuditObj"
            :key="index"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </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>
    <div class="addBtnBg">
      <el-button class="iconfont iconxinzeng" @click="modify" type="primary"> 新增</el-button>
      <el-button class="outButton" icon="el-icon-upload2" @click="exportDetail" type="primary">导出</el-button>
    </div>
    <el-table :data="tableData" v-loading="tableLoading" stripe border style="width: 100%">
      <!-- @selection-change="chooseTable" -->
      <!-- <el-table-column type="selection" width="35"></el-table-column> -->
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="projectName" label="项目名称" align="center"></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="totalAnnualFunds"
        label="年度资金总额"
        align="center"
      ></el-table-column>
      <!-- :formatter="valueFormatter" -->
      <el-table-column
        :show-overflow-tooltip="true"
        prop="totalMediumTermFunds"
        label="中期（三年）资金总额"
        align="center"
      ></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="applicationOffice"
        label="申请部门"
        align="center"
      ></el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="申请日期" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.applicationDate?scope.row.applicationDate.split('T')[0]:''}}</span>
<!--          <span>{{scope.row.applicationDate.split('T')[0]}}</span>-->
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="findingsAudit"
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <span :class="{'textRed':(scope.row.findingsAudit=='驳回')}">{{scope.row.findingsAudit}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="170" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看" placement="top">
            <el-button
                    type="primary"
                    @click.stop="modify(scope.row,'show')"
                    class="button operate_show_btn"
                    style="float:left;"
            >
              <i class="iconfont iconchakan2" style="font-size: 13px"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            content="编辑"
            placement="top"
            v-show="scope.row.findingsAudit=='未提交' || scope.row.findingsAudit=='驳回'"
          >
            <el-button
              type="primary"
              @click.stop="modify(scope.row,'update')"
              class="button operate_edit_btn"
              id="ml-9"
              style="float:left;"
            >
              <i class="iconfont iconxiugai" style="font-size: 13px"></i>
            </el-button>
          </el-tooltip>


          <el-tooltip
            class="item"
            content="提交"
            placement="top"
            v-show="scope.row.findingsAudit=='未提交' || scope.row.findingsAudit=='驳回'"
          >
<!--            <el-button-->
<!--              type="primary"-->
<!--              @click="submission(scope.row)"-->
<!--              class="button operate_submit_btn"-->
<!--              style="float:left;"-->
<!--            >-->
<!--              <i class="iconfont icontijiao" style="font-size: 13px"></i>-->
<!--            </el-button>-->
            <i class="iconfont icontijiao"
               @click="submission(scope.row)"
               style="width:24px;
						height:24px;
						float:left;
						margin:0 10px;
						text-align:center;
						line-height:24px;
						font-size:13px;
						color:#fff;
						background:#3082bc;
						border-radius:3px;
						cursor:pointer;
						display:inline-block;"></i>
          </el-tooltip>
          <el-tooltip
                  class="item"
                  effect="light"
                  content="删除"
                  placement="top"
                  v-show="scope.row.findingsAudit=='未提交'"
          >
            <el-button
                    type="primary"
                    class="button operate_delete_btn"
                    @click="deleteInfo(scope.row)"
                    style="float:left;"
            >
              <i class="iconfont iconshanchu" style="font-size: 13px"></i>
            </el-button>
          </el-tooltip>

        </template>
      </el-table-column>
    </el-table>
    <el-table :data="tableDataAll" id="outTable" v-loading="tableLoading" stripe border style="width: 100%; height:0px;">
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="projectName" label="项目名称" align="center"></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="totalAnnualFunds"
        label="年度资金总额"
        align="center"
      ></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="totalMediumTermFunds"
        label="中期（三年）资金总额"
        align="center"
      ></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="applicationOffice"
        label="申请部门"
        align="center"
      ></el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="申请日期" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.applicationDate?scope.row.applicationDate.split('T')[0]:''}}</span>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="findingsAudit"
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <span :class="{'textRed':(scope.row.findingsAudit=='驳回')}">{{scope.row.findingsAudit}}</span>
        </template>
      </el-table-column>
    </el-table>
    <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,
  budgetSubmissionDelete,
  budgetSubmissionSubmission,
  approveSubmissionModify
} from "@/api/budgetSubmission/index";
import FileSaver from "file-saver";
import XLSX from "xlsx";
// import { uploadComponent, exportExcel } from "@/api/credit/index";

export default {
  data() {
    return {
      form: {},
      formPage: {
        page: 1,
        size: 10,
        total: 0
      },
      //状态
      findingsAuditObj: [
        {
          value: "未提交",
          code: "0"
        },
        {
          value: "处室处长审核",
          code: "1"
        },
        {
          value: "办公室财务人员审核",
          code: "2"
        },
        {
          value: "办公室财务处长审核",
          code: "3"
        },
        {
          value: "规划财务处人员审核",
          code: "4"
        },
        {
          value: "规划财务处处长审核",
          code: "5"
        },
        {
          value: "审核通过",
          code: "6"
        },
        {
          value: "驳回",
          code: "0"
        },
      ],
      //列表数据
      tableData: [],
      tableDataAll: [],
      //列表loading控制
      tableLoading: false,

      idsArr: []
    };
  },
  methods: {
    //导出
    exportDetail() {
      this.$confirm("是否下载Excel表？", "提示", {
        closeOnClickModal: false,
        closeOnPressEscape: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.detailStr = '预算报表申请'
          var workbook = XLSX.utils.book_new()
          XLSX.utils.book_append_sheet(workbook, XLSX.utils.table_to_sheet(document.getElementById("outTable")), '列表')
        let vbout = XLSX.write(workbook, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([vbout], { type: "application/octet-stream" }),
            `${this.detailStr}.xlsx`
          );
        } catch (err) {
        }
        return vbout;
      });
    },
    // 格式化
    valueFormatter: function(row, column, cellValue) {
      // let strValue = String(column.property);
      // if (row.totalAnnualFunds == null) {
      //   row.totalAnnualFunds = "-";
      //   return row.totalAnnualFunds;
      // } else {
      //   return row.totalAnnualFunds;
      // }
      // if (row.strValue == null) {
      //   row.strValue = "-";
      //   return row.strValue;
      // }else {
      //   return row.strValue;
      // }
    },
    chooseTable(val) {
      this.idsArr = [];
      val.map(item => {
        this.idsArr.push(item.id);
      });
    },
    exportFn() {
      if (this.idsArr.length > 0) {
        let arrs = this.idsArr.join(",");
        // exportExcel(arrs).then(res => {
        //   this.idsArr = [];
        //   const resBlob = new Blob([res.data]);
        //   const fileName = "信用管理.xlsx";
        //   if ("download" in document.createElement("a")) {
        //     // 非IE下载
        //     const elink = document.createElement("a");
        //     elink.download = fileName;
        //     elink.style.display = "none";
        //     elink.href = URL.createObjectURL(resBlob);
        //     document.body.appendChild(elink);
        //     elink.click();
        //     URL.revokeObjectURL(elink.href); // 释放URL 对象
        //     document.body.removeChild(elink);
        //   } else {
        //     // IE10+下载
        //     navigator.msSaveBlob(resBlob, fileName);
        //   }
        // });
      } else {
        this.$message({
          type: "warning",
          message: "请选择要导出的数据"
        });
      }
    },
    //导入
    onUpload(e) {
      // uploadComponent(e).then(res => {
      //   this.$message({
      //     type: "success",
      //     message: res.msg
      //   });
      //   //          this.obj.accessoryID = res.data.data.id
      //   //          this.obj.accessoryURL = res.data.data.uri
      //   //          this.obj.kqTableName = res.data.data.name
      //   //          this.fileName = res.data.data.name
      //   // this.getAllInfoList()
      //   e.target.value = "";
      // });
    },
    //查询
    searchInfo() {
      this.initTableData();
    },
    //清空
    clearInfo() {
      this.form = {};
      this.initTableData();
    },
    //新增
    newAdd() {
      this.dialogForm = {};
      this.$router.push({
        path: "/grainHarvestSys/service/companyInfoDetail",
        query: { state: "add" }
      });
    },
    //分页大小
    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 && 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;
      });
      let formPageAll = {
        page: 1,
        size: 1000
      }
      budgetSubmissionByPage(this.form, formPageAll).then(response => {
        if (response.infoCode && response.infoCode === 200) {
          this.tableDataAll = response.data.list;
        }
      });
    },
    // 编辑
    modify(row, state) {
      this.$router.push({
        path: "applyAdd",
        query: {
          id: row.id,
          state: state,
          row: row,
          page: this.formPage.page,
          fundSo: row.fundSources,
          bolF: "fundSources"
        }
      });
    },
    // 单点删除
    deleteInfo(row) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        budgetSubmissionDelete(row).then(response => {
          if (response.infoCode == "200") {
            this.$message.success("删除成功")
            this.initTableData();
          } else {
            this.$message({
              type: "error",
              message: response.msg
            });
          }
        });
      });
    },
    deepClone(src) {
      if (src === null) {
        return null;
      }
      if (typeof src !== "object") {
        return src;
      }
      let des = "";
      if (src instanceof Array) {
        des = [];
      } else {
        des = {};
      }
      for (let key in src) {
        if (typeof src[key] !== "object") {
          des[key] = src[key];
        } else {
          des[key] = this.deepClone(src[key]);
        }
      }
      return des;
    },
    // 提交
    submission(row) {
      this.$confirm("是否确认提交？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let rowObj = {
            status:1,
            message:"提交",
            findingsAudit: row.departmentsCodes === '内蒙古自治区粮食和物资储备局601001' ? "处室处长审核" : "待二级单位财务审核",
            departmentsCodes: row.departmentsCodes,
            id:row.id
        }
        // rowObj.applicationDate = new Date();
        // row.status = 1;
        // row.message = 1;
        // row.findingsAudit = "处室处长审核";
        row.applicationDate = new Date();
        approveSubmissionModify(rowObj).then(response => {
          if (response.infoCode === 200) {
            this.$message.success("提交成功")
            this.initTableData();
          } else {
            this.$message({
              type: "error",
              message: response.msg
            });
          }
        })
      });
    }
  },
  created() {
    if(this.$route.query.page){
      this.formPage.page = this.$route.query.page
    }
    this.initTableData();
  }
};
</script>
<style scoped>
  .financialBox{
    overflow-y: auto;
    margin: 10px;
    border: 1px solid #f4f5f8;
    padding: 10px;
    min-width: 960px;
  }
  .textRed{
    color:#F56C6C ;
  }
  .dashboard-container{
    overflow: auto;
  }
  .searchBox{
    position: relative;
    display: inline-block;
  }
  .line-bottom{
    border-bottom:1px dashed #006bd5;
  }
  .search-line {
    cursor: pointer;
    border-right: 1px dashed #737bf1;
    height: 38px;
    display: inline-block;
    margin:0 10px 0 20px;
    vertical-align: middle;
  }
</style>
