<template>
  <div class="common-page page-t1 iframe-ctn scrolling4">
    <div class="option page-row">
      <table-filter
        ref="filter"
        :form="form"
        :Dict="Dict"
        :rules="rules"
        :config="form.config"
        :loadData="loadData"
      />
    </div>
    <div class="panel-bottom page-row">
      <div class="ctin-box">
        <div class="content-within">
          <div class="content-fix">
            <div class="toolbar">
              <div>
                <el-button
                  v-for="(item, key) in form.config.otherBtn"
                  size="mini"
                  :type="item.type"
                  :icon="item.icon"
                  @click="item.callback.call(_self, $event)"
                  >{{ item.name }}</el-button
                >
              </div>
              <div>
                <el-button
                  v-for="(item, key) in form.config.rightBtn"
                  size="mini"
                  :type="item.type"
                  :icon="item.icon"
                  @click="item.callback.call(_self, $event)"
                  >{{ item.name }}</el-button
                >
              </div>
            </div>
            <!-- 表格渲染 -->
            <cu-table
              ref="cuTable"
              :table="table"
              :Dict="Dict"
              :config="form.config"
              :loadData="loadData"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 表单渲染 -->
    <cu-form
      ref="cuForm"
      :form="form"
      :Dict="Dict"
      :rules="rules"
      :submit="submitForm"
      :cancel="cancelForm"
      :watchKeys="['paperfilename']"
    />
  </div>
</template>

<script>
import { reqApi, Config } from "@/assets/js/httpApi.js";
import { Tools } from "@/assets/js/common.js";
import DateRangePicker from "@/components/DateRangePicker";
import TableFilter from "@/components/TableFilter";
import cuForm from "@/components/cuForm/index2";
import cuTable from "@/components/cuTable";

export default {
  name: "Dashboard",
  components: {
    DateRangePicker,
    TableFilter,
    cuForm,
    cuTable,
  },
  data() {
    return {
      Dict: { selectList: [] },
      table: {
        page: 1,
        size: 10,
        total: 0,
        loading: false,
        dataList: [],
      },
      rules: {},
      form: {
        title: "",
        visible: false,
        reqType: "add",
        historyDialog: false,
        status: { cu: 0 },
        query: {},
        search: {},
        item: {},
        file: 0,
        config: {},
      },
    };
  },
  created() {
    // 获取基本信息
    this.pageApi = Config.getModuleInfo(this);
    this.Dict = this.pageApi.Dict;
    this.form.config = this.pageApi.config;
    this.rules = reqApi.getRules(this.Dict.baseInfo) || this.Dict.rules || {};
    this.pageApi.created && this.pageApi.created();
  },
  watch: {
    "form.item.grossIncome": {
      handler(newValue) {
        this.form.item.investmentProportion = this.calculatePercentage(this.form.item.researchInput, newValue)
      },
      immediate: true, // 立即调用处理函数
    },
	"form.item.researchInput": {
      handler(newValue) {
        this.form.item.investmentProportion = this.calculatePercentage(newValue, this.form.item.grossIncome)
      },
      immediate: true, // 立即调用处理函数
    },
  },
  mounted() {
    this.$nextTick(() => {
      var search = new URLSearchParams(window.location.search);
      var companyId = (this.companyId = search.get("companyId"));
      this.baseParams = companyId
        ? { exact: { companyId: companyId } }
        : void 0;
      this.loadData(this.baseParams);
      //window.onMessage = function(filename){};
    });

    // 获取选择列表字典
    var selectList = this.Dict.selectList;
    Tools.asyncLoop.call(this, selectList, function (key, value, next) {
      if (typeof value === "function") {
        value.call(this.Dict).then(function (res) {
          selectList[key] = res;
          next();
        });
      } else {
        next();
      }
    });
  },
  methods: {
    calculatePercentage(expense, totalIncome) {
		console.log('')
      if(!expense || !totalIncome){
		return ''
	  }
		if (expense*0!==0) {
        return 0; // 避免除以零
      }
	  if (totalIncome*0!==0) {
        return 0; // 避免除以零
      }


      return ((expense / totalIncome) * 100).toFixed(2);
    },
    loadData: reqApi.common.getRequst,
    cancelForm() {
      this.form.visible = false;
    },
    submitForm(form, item) {
      item.companyId && (item.companyId = this.companyId);
      reqApi.common.submitForm.call(this, form, item);
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
#app {
  position: relative;
  display: flex;
}
.iframe-ctn {
  height: 100%;
  overflow-y: auto;
}
.scrolling4::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  cursor: pointer;
}
</style>
