<template>
  <div class="fundsStatement">
    <div style="background: #fff; padding: 15px 15px 0 15px">
      <el-form :inline="true" :model="req" class="demo-form-inline">
        <el-form-item label="资金账户">
          <el-select v-model="req.managementId" placeholder="请输入" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option
              :label="i.alias"
              :value="i.id"
              v-for="i in accountManagementData"
              :key="i.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <!-- 选单月 -->
          <el-date-picker
            v-model="req.dateBetween"
            type="month"
            format="YYYY/MM"
            value-format="YYYY-MM"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      style="padding: 20px; background: #fff; margin: 20px 0px"
      class="statistics"
    >
      <div class="statistics-item one">
        <div class="left">期末余额</div>
        <div class="center" style="margin: 0 15px"></div>
        <div class="right">
          <div
            style="padding: 4px"
            v-for="(item, index) in headerData"
            :key="index"
          >
            <span style="margin-right: 24px; font-weight: 400">{{
              item.currency
            }}</span>
            <span style="text-align: right; letter-spacing: 1px; float: right">
              {{ moneyFormat(item.balance, 2) }}
            </span>
          </div>
        </div>
      </div>
      <div class="statistics-item two">
        <div class="left">收入合计</div>
        <div class="center" style="margin: 0 15px"></div>
        <div class="right">
          <div
            style="padding: 4px"
            v-for="(item, index) in headerData"
            :key="index"
          >
            <span style="margin-right: 24px; font-weight: 400">{{
              item.currency
            }}</span>
            <span style="text-align: right; letter-spacing: 1px; float: right">
              {{ moneyFormat(item.income, 2) }}
            </span>
          </div>
        </div>
      </div>
      <div class="statistics-item three">
        <div class="left">支出合计</div>
        <div class="center" style="margin: 0 15px"></div>
        <div class="right">
          <div
            style="padding: 4px"
            v-for="(item, index) in headerData"
            :key="index"
          >
            <span style="margin-right: 24px; font-weight: 400">{{
              item.currency
            }}</span>
            <span style="text-align: right; letter-spacing: 1px; float: right">
              {{ moneyFormat(item.expenditure, 2) }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div style="background: #fff; padding: 15px 15px 0 15px">
      <el-table
        :data="tableData"
        style="width: 100%"
        :span-method="objectSpanMethod"
        :height="tableHiehgt"
        :cell-style="cellStyle"
        v-loading="loading"
      >
        <el-table-column
          prop="accountManagementAlias"
          label="账户信息"
          width="200"
          fixed
        >
          <template #default="{ row, $index }">
            <div v-if="$index === 0">
              <div style="font-weight: 700; font-size: 14px; color: #333">
                {{ row.name }}
              </div>
            </div>
            <el-popover placement="top-start" trigger="hover" v-else>
              <div style="width: 100%">
                <div
                  style="
                    margin-bottom: 10px;
                    font-weight: 700;
                    font-size: 14px;
                    color: #333;
                  "
                >
                  {{ row.accountManagementAlias }}
                </div>
                <div>
                  {{ row.corporationName }}
                </div>
              </div>

              <template #reference>
                <div class="account-box">
                  <div class="text">
                    <img src="@/assets/images/account-icon.png" alt="" />
                    <div class="account hidden-text">
                      {{ row.accountManagementAlias }}
                    </div>
                  </div>
                  <div class="corporation hidden-text">
                    {{ row.corporationName }}
                  </div>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="currencyType" label="币种" width="180" fixed>
          <template #default="{ row, $index }">
            <div v-if="$index === 0">
              <div
                v-for="(item, index) in row.currencyTypeList"
                :key="index"
                style="padding: 2px 0"
              >
                {{ item.currencyType }}（{{
                  moneyFormat(item.balanceTotal, 2)
                }}）
              </div>
            </div>
            <div v-else>
              {{ row.currencyType }}（{{ moneyFormat(row.balanceTotal, 2) }}）
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="dayNum - i + 1 + '日'"
          v-for="i of dayNum"
          :key="i"
          align="center"
        >
          <el-table-column
            :prop="dayNum - i + 1 + 'income'"
            label="收入"
            width="100"
            align="right"
          >
            <template #default="{ row, $index }">
              <div v-if="$index === 0">
                <div
                  v-for="(item, index) in row.currencyTypeList"
                  :key="index"
                  style="padding: 2px 0"
                >
                  {{
                    moneyFormat(
                      row[item.currencyType + (dayNum - i + 1 + "") + "income"],
                      2
                    )
                  }}
                </div>
              </div>
              <div v-else>
                {{ moneyFormat(row[dayNum - i + 1 + "income"], 2) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :prop="dayNum - i + 1 + 'expenditure'"
            label="支出"
            width="100"
            align="right"
          >
            <template #default="{ row, $index }">
              <div v-if="$index === 0">
                <div
                  v-for="(item, index) in row.currencyTypeList"
                  :key="index"
                  style="padding: 2px 0"
                >
                  {{
                    moneyFormat(
                      row[
                        item.currencyType +
                          (dayNum - i + 1 + "") +
                          "expenditure"
                      ],
                      2
                    )
                  }}
                </div>
              </div>
              <div v-else>
                {{ moneyFormat(row[dayNum - i + 1 + "expenditure"], 2) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :prop="dayNum - i + 1 + 'balance'"
            label="余额"
            width="100"
            align="right"
          >
            <template #default="{ row, $index }">
              <div v-if="$index === 0">
                <div
                  v-for="(item, index) in row.currencyTypeList"
                  :key="index"
                  style="padding: 2px 0"
                >
                  {{
                    moneyFormat(
                      row[
                        item.currencyType + (dayNum - i + 1 + "") + "balance"
                      ],
                      2
                    )
                  }}
                </div>
              </div>
              <div v-else>
                {{ moneyFormat(row[dayNum - i + 1 + "balance"], 2) }}
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { formatDate } from "@/utils/index";
const { proxy } = getCurrentInstance();
const loading = ref(false);
let tableData = ref([]);
const dayNum = ref(0);
const tableHiehgt = ref(0);
tableHiehgt.value = document.documentElement.clientHeight - 250;
const objectSpanMethod = ({ rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const _row = flitterData(tableData.value).one[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
};
const flitterData = (arr) => {
  let spanOneArr = [];
  let concatOne = 0;
  arr.forEach((item, index) => {
    if (index === 0) {
      spanOneArr.push(1);
    } else {
      //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
      if (
        item.accountManagementAlias === arr[index - 1].accountManagementAlias
      ) {
        //第一列需合并相同内容的判断条件
        spanOneArr[concatOne] += 1;
        spanOneArr.push(0);
      } else {
        spanOneArr.push(1);
        concatOne = index;
      }
    }
  });
  return {
    one: spanOneArr,
  };
};
let req = ref({
  dateBetween: formatDate(new Date(), "yyyy-MM"),
  managementId: null,
});
let dictsData = {};
proxy.getDict(["account_currency"]).then((res) => {
  dictsData = res;
});
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  // 状态列字体颜色
  // columnIndex 列下标
  // rowIndex 行下标
  // row 行
  // column 列
  if (columnIndex === 0) {
    return { background: "#F9F9F9", color: "#666" };
  } else if (columnIndex === 1) {
    return { background: "#F9F9F9", color: "#666" };
  }
};
const headerData = ref([]);
const getList = async () => {
  loading.value = true;
  proxy.post("/accountStatement/capitalDaily", req.value).then((message) => {
    let arr = [];
    //公司循环
    for (let i = 0; i < message.length; i++) {
      const element = message[i];
      //公司下的管理账户循环
      for (let j = 0; j < element.managementList.length; j++) {
        const jelement = element.managementList[j];
        //管理账户下的币种循环
        for (let k = 0; k < jelement.currencyList.length; k++) {
          const kelement = jelement.currencyList[k];
          let obj = {
            corporationName: element.corporationName,
            accountManagementAlias: jelement.accountManagementAlias,
            currencyType: kelement.currencyType,
          };
          //币种下的日期循环
          for (let l = 0; l < kelement.flowingWaterList.length; l++) {
            const lelement = kelement.flowingWaterList[l];
            obj[lelement.day + "balance"] = lelement.balance;
            obj[lelement.day + "income"] = lelement.income;
            obj[lelement.day + "expenditure"] = lelement.expenditure;
            if (l === 0) {
              obj.balanceTotal = lelement.balance;
            }
          }
          dayNum.value = kelement.flowingWaterList.length;
          //往前插入
          arr.unshift(obj);
        }
      }
    }
    // 获取table第一行统计数据
    proxy.post("/accountStatement/getCurrencyList", req.value).then((res) => {
      let obj = {
        currencyTypeList: [],
      };
      obj.name = "统计";
      for (let i = 0; i < res.length; i++) {
        const iele = res[i];
        let objOne = {};
        objOne.currencyType = iele.currencyType;
        let num = 0;
        // 获取相同币种的总余额
        for (let o = 0; o < arr.length; o++) {
          const oele = arr[o];
          if (objOne.currencyType === oele.currencyType) {
            num += oele.balanceTotal;
          }
        }
        objOne.balanceTotal = num;
        obj.currencyTypeList.push(objOne);
        for (let j = 0; j < iele.flowingWaterList.length; j++) {
          const jele = iele.flowingWaterList[j];
          obj[iele.currencyType + jele.day + "balance"] = jele.balance;
          obj[iele.currencyType + jele.day + "income"] = jele.income;
          obj[iele.currencyType + jele.day + "expenditure"] = jele.expenditure;
        }
      }
      arr.unshift(obj);
      tableData.value = arr;
      loading.value = false;
    });
  });
  proxy.post("/accountStatement/getTotalList", req.value).then((res) => {
    headerData.value = res;
  });
};
const accountManagementData = ref([]);
const getAccountManagement = async () => {
  proxy
    .post("/accountManagement/page", { pageNum: 1, pageSize: 10000 })
    .then((message) => {
      accountManagementData.value = message.rows;
    });
};
getList();
getAccountManagement();
</script>
<style lang="scss">
.fundsStatement {
  padding: 15px;
  // margin: 20px;
  // background: #fff;

  .account-box {
    padding: 40px 20px;

    .text {
      display: flex;
      color: #333;
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;

      img {
        width: 30px;
        height: 22px;
        background: linear-gradient(
          138deg,
          #1b67ff 0%,
          #9f63fb 72%,
          #ea76fb 100%
        );
        border-radius: 5px;
        opacity: 1;
        margin-right: 10px;
      }
    }
  }

  //修改tabletr边框颜色
  .is-group {
    tr {
      th {
        border-color: #fff !important;
        background: #eeeeee !important;
      }
    }

    tr:first-child {
      //选择第一个th
      th:first-child {
        background: #eff6ff !important;
      }

      //选择第二个th
      th:nth-child(2) {
        background: #eff6ff !important;
      }
    }
  }

  .el-table__row {
  }
}
.hidden-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.statistics {
  display: flex;
  .statistics-item {
    padding: 15px;
    align-items: center;
    justify-content: space-around;
    margin-right: 20px;
    // width: 280px;
    // height: 120px;
    display: flex;
    // background: #eff6ff;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    .left {
      color: #333333;
      font-size: 14px;
      font-weight: 700;
    }
    .center {
      width: 1px;
      height: 100%;
      background: #fff;
    }
    .right {
      color: #333333;
      font-size: 16px;
      font-weight: 700;
    }
  }
  .one {
    background: #eff6ff;
  }
  .two {
    background: #fff1e1;
  }
  .three {
    background: #e4f9f9;
  }
}
</style>
