<template>
  <div class="d-page d-flex flex-column">
    <!-- 财务信息 -->
    <title-bar title="财务信息">
      <van-icon slot="left" name="cross" size="20" />
    </title-bar>
    <div class="top-search-box">
      <van-dropdown-menu style="width: 80%" active-color="#1989fa">
        <van-dropdown-item
          style="width: 20%"
          v-model="searchForm.stat_year"
          :options="yearArray"
        ></van-dropdown-item>
        <van-dropdown-item
          style="width: 20%"
          v-model="searchForm.stat_prd_style"
          :options="statPrdStyle"
        ></van-dropdown-item>
        <van-dropdown-item
          style="width: 20%"
          v-model="searchForm.stat_time"
          :options="mixArray"
        ></van-dropdown-item>
        <van-dropdown-item
          style="width: 20%"
          v-model="searchForm.stat_style"
          :options="statStyle"
        ></van-dropdown-item>
      </van-dropdown-menu>
      <van-button
        plain
        style="width: 15%;"
        color="#FF574C"
        class="fp-button2"
        @click="reset"
      >重置</van-button
      >
      <van-button
        style="width: 15%;"
        color="#FF574C"
        class="fp-button2"
        @click="searchBtnClick"
        >查询</van-button
      >
    </div>
    <div class="title-content d-page d-flex flex-column d-scorll">
      <scroller-view
        v-if="nodata"
        v-calculate-height
        :pulldown="pulldown"
        :pullup="pullup"
        :refresh-data="getGrade"
        :load-data="onLoadData"
      >
        <div v-if="list.length != 0">
          <div v-for="(item, index) in list" :key="index">
            <div class="item-box" @click="onItemtap(item)">
              <table-double-view
                :keyValue="keyValueDouble"
                :data="item"
              ></table-double-view>
            </div>
          </div>
        </div>
        <div v-else align="center">
          <img
            src="@/assets/images/nodata.png"
            style="width: 40%; margin-top: 137px"
          />
        </div>
      </scroller-view>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Tab, Tabs } from "vant";
import BalanceSheet from "@/components/customer-information/business-application-status/financial-information/BalanceSheet.vue";
import IncomeStatement from "@/components/customer-information/business-application-status/financial-information/IncomeStatement.vue";
import CashFlowStatement from "@/components/customer-information/business-application-status/financial-information/CashFlowStatement.vue";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import TableDoubleView from "@/public/TableDoubleView.vue";
import TableSingleView from "@/public/TableSingleView.vue";
import { DropdownMenu, DropdownItem } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
/**
 * @Description 财务信息
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:17
 */
@Component({
  name: "FinancialInformation",
  components: {
    TitleBar,
    BalanceSheet,
    IncomeStatement,
    CashFlowStatement,
    TableDoubleView,
    // DropdownMenu,
    // DropdownItem,
  },
})
export default class FinancialInformation extends Vue {
  pageTitle = ""; // 页面标题
  list: any[] = [];
  flag = true;
  //下拉刷新，上拉加载
  pageNo = 1;
  pullup = true;
  pulldown = true;
  nodata = true;
  keyValueDouble = {
    stat_prd_style_cnName: "报表类型",
    stat_prd: "报表期间",
    stat_style_cnName: "报表口径",
    state_flg_name: "状态",
    ccr_serno_name: "是否参与评级",
    lmt_serno_name: "是否参与非专项测算",
  };
  yearArray: any[] = [
    //报表时间
    {
      text: "报表时间",
      value: "",
    },
  ];
  statPrdStyle = [
    //报表周期类型
    { text: "报表周期类型", value: "" },
    { text: "月报", value: "1" },
    { text: "季报", value: "2" },
    { text: "半年报", value: "3" },
    { text: "年报", value: "4" },
  ];

  mixArray: any[] = [{ text: "月份", value: "" }];

  month = [
    //月份
    { text: "月份", value: "" },
    { text: "1月", value: "01" },
    { text: "2月", value: "02" },
    { text: "3月", value: "03" },
    { text: "4月", value: "04" },
    { text: "5月", value: "05" },
    { text: "6月", value: "06" },
    { text: "7月", value: "07" },
    { text: "8月", value: "08" },
    { text: "9月", value: "09" },
    { text: "10月", value: "10" },
    { text: "11月", value: "11" },
    { text: "12月", value: "12" },
  ];
  season = [
    //季度
    { text: "季度", value: "" },
    { text: "第一季度", value: "03" },
    { text: "第二季度", value: "06" },
    { text: "第三季度", value: "09" },
    { text: "第四季度", value: "12" },
  ];
  halfYear = [
    { text: "年度", value: "" },
    { text: "上半年", value: "06" },
    { text: "下半年", value: "12" },
  ];
  statStyle = [
    { text: "全部口径", value: "" },
    { text: "本部报表", value: "1" },
    { text: "合并报表", value: "2" },
    { text: "未知", value: "9" },
  ];
  searchForm = {
    stat_prd: "", //报表时间
    stat_year: "", //年
    stat_prd_style: "", // 报表周期类型
    stat_style: "", // 报表口径
    stat_time: "", //月季度
  };
  @Watch("searchForm.stat_prd_style")
  onRouterChanged(val: any) {
    if (val == "1") {
      this.mixArray = this.month;
    } else if (val == "2") {
      this.mixArray = this.season;
    } else if (val == "3") {
      this.mixArray = this.halfYear;
    } else if (val == "4") {
      this.mixArray = [];
    } else if (val == "") {
      this.mixArray = this.month;
    }
  }
  onClick() {
    this.$router.go(-1);
  }
  /**
   * 查询财报列表信息
   * pd
   * 2021年11月30日18:57:46
   * */
  getGrade(pageNo = 1) {
    this.pullup = true;
    this.nodata = true;
    this.pulldown = true;
    const searchForm = this.searchForm;
    const parm = {
      stat_prd: searchForm.stat_year + "" + searchForm.stat_time, //报表时间
      stat_prd_style: searchForm.stat_prd_style, // 报表周期类型
      stat_style: searchForm.stat_style, // 报表口径
      cus_id: this.$store.getters.getCusInfo.cus_id,
      tc: nettyApi.TRADE_CODE.selectCWXX,
      maxLine: "10",
      targetPage: pageNo,
    };
    NativeUI.showWaiting("正在查询");
    return IF.transferDataInter(nettyApi.commonRq, parm).then((res: any) => {
      NativeUI.closeWaiting();
      console.log(parm);
      if (res.rc == "1") {
        if (pageNo == 1) {
          this.list = res.cusFinInfoIColl;
        } else {
          this.list = this.list.concat(res.cusFinInfoIColl);
        }
        if (this.list.length != 0) {
          this.flag = false;
        }
      } else {
        NativeUI.toast(res.msg);
      }
      if (res.cusFinInfoIColl && res.cusFinInfoIColl.length < 10) {
        this.pullup = false;
      }
      if (this.list.length == 0) {
        this.nodata = false;
        this.pulldown = false;
      }
    });
  }
  searchBtnClick() {
    this.searchForm.stat_prd =
      this.searchForm.stat_year + this.searchForm.stat_time;
    /*if (
        this.searchForm.stat_prd_style != '' ||
        this.searchForm.stat_style != '' ||
        this.searchForm.stat_prd.length > 4
      ) {*/
    this.getGrade();
    /*} else {
        NativeUI.toast('请选择正确参数');
      }*/
  }
  activated() {
    this.getGrade();
    for (let i = 2000; i < 2051; i++) {
      let obj = {
        text: "",
        value: 0,
      };
      obj.text = i + "年";
      obj.value = i;
      this.yearArray.push(obj);
    }
  }
  onItemtap(item: any) {
    this.$router.push({
      path: "/FinancialInfoDetail",
      query: item,
    });
  }
  //下拉刷新
  loadFinancialList() {
    this.getGrade(1);
  }
  //上拉加载数据
  onLoadData() {
    this.pageNo = Math.ceil(this.list.length / 10) + 1;
    return this.getGrade(this.pageNo);
  }
  //重置数据
  reset() {
    this.searchForm.stat_prd = "";
    this.searchForm.stat_year = "";
    this.searchForm.stat_prd_style = "";
    this.searchForm.stat_style = "";
    this.searchForm.stat_time = "";
  }
}
</script>

<style scoped>
.title-content {
  width: 100%;
  margin-top: 2%;
}
::v-deep .van-tabs__wrap {
  width: 97%;
  height: 40px;
  display: flex;
  justify-content: flex-end;
}
::v-deep .van-tabs__nav--card {
  width: 30%;
}
::v-deep .van-tabs__nav {
  height: 40px;
}
::v-deep .van-tab__text {
  font-size: 18px;
}
::v-deep .van-tabs__content {
  overflow-y: auto;
}
.item-box {
  width: 80%;
  margin: 20px auto;
  border: 1px solid;
  border-color: rgb(168, 154, 154);
  border-radius: 20px;
  height: 120px;
  box-shadow: 0 0 6px #d7d7d7;
}
.d-scorll {
  overflow-y: auto;
  overflow: scroll;
  height: calc(100vh - 120px);
}
::v-deep .van-field__label {
  text-align: right;
}
.top-search-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  margin-top: 21px;
}
.fp-button2 {
  width: 72px !important;
  height: 32px;
  margin: 5px;
}
</style>