<template>
  <div class="enterprise-recharge-details">
    <div class="frame">
      <!-- 公司名称 -->
      <autocomplete
        class="mr20"
        :params="parameter.params"
        :config="configAutocomplete"
      />
      <!-- 业务负责人 -->
      <autocomplete
        :params="parameter.params"
        :config="configAutocompleteSec"
      />
      <el-select
        v-model="parameter.params.transactionType"
        placeholder="交易类型"
        clearable
      >
        <el-option
          v-for="(item, index) in rechargeTypeEnum"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="parameter.params.transactionState"
        placeholder="交易状态"
        clearable
      >
        <el-option
          v-for="(item, index) in rechargeStatusEnum"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="datetime"
        type="datetimerange"
        align="right"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="changeDateTime"
      >
      </el-date-picker>
      <div class="buttons">
        <el-button icon="el-icon-search" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table">
      <div class="operation">
        <!-- <el-button @click="addition">新增产品</el-button> -->
      </div>
      <el-table
        v-if="tableHeight"
        ref="multipleTable"
        :height="tableHeight"
        :data="tableData"
        show-summary
        :summary-method="getSummaries"
        style="width: 100%"
      >
        >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="companyName"
          label="企业名称"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column label="交易类型">
          <template slot-scope="{ row }">
            <p>
              {{
                row.transactionType === "TURN"
                  ? LoopBackTypeEnum.find((item) => item.value === row.turnType)
                      .label
                  : rechargeTypeEnum.find(
                      (item) => item.value === row.transactionType
                    ).label
              }}
            </p>
          </template>
        </el-table-column>

        <el-table-column label="交易状态">
          <template slot-scope="{ row }">
            <p>
              {{
                rechargeStatusEnum.find(
                  (item) => item.value === row.transactionState
                ).label
              }}
            </p>
          </template>
        </el-table-column>

        <el-table-column
          prop="transactionAmount"
          label="交易金额"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="rechargeRebate"
          label="充值返利比例"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="rechargeRebateAmount"
          label="充值返利金额"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="businessLeader"
          label="业务负责人"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <span class="el-dropdown-link" @click="detail(row)">详情</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination :parameter="parameter" @searchAgain="getByPage" />
    </div>
    <!-- 详情 -->
    <el-drawer
      title="详情"
      direction="ltr"
      size="60%"
      :withHeader="false"
      :visible.sync="controlWindows.detail"
    >
      <general-details
        title="详情"
        :isHeader="true"
        v-if="controlWindows.detail"
        :sourceData="oilCompanyMatch"
        :mappingData="mappingData"
        @close="controlWindows.detail = false"
      >
        <template #transactionType>
          <p>
            {{
              oilCompanyMatch[0].transactionType === "TURN"
                ? LoopBackTypeEnum.find(
                    (item) => item.value === oilCompanyMatch[0].turnType
                  ).label
                : rechargeTypeEnum.find(
                    (item) => item.value === oilCompanyMatch[0].transactionType
                  ).label
            }}
          </p>
        </template>
        <template #transactionState>
          <p>
            {{
              rechargeStatusEnum.find(
                (item) => item.value === oilCompanyMatch[0].transactionState
              ).label
            }}
          </p>
        </template>
        <template #auditMark>
          <p>
            {{
              auditMarkEnum.find(
                (item) => item.value === oilCompanyMatch[0].auditMark
              ).label
            }}
          </p>
        </template>
        <template #offlineTransactionProof>
          <el-image
            style="width: 100px; height: 100px"
            :src="oilCompanyMatch[0].offlineTransactionProof"
          />
        </template>
        <template #accountState>
          <p>
            {{
              accountStatusEnum.find(
                (item) => item.value === oilCompanyMatch[1].accountState
              ).label
            }}
          </p>
        </template>
        <template #accountType>
          <p>
            {{ oilCompanyMatch[1].accountType === "0" ? "基础账户" : "" }}
          </p>
        </template>
      </general-details>
    </el-drawer>
  </div>
</template>

<script>
import serve from "api/financialCenter/enterpriseRechargeDetails.js";
import commonServe from "api/common.js";

import autocomplete from "components/autocomplete/index.vue";
import pagination from "components/pagination/index.vue";
import generalDetails from "components/generalDetails/index.vue";

import {
  rechargeTypeEnum,
  rechargeStatusEnum,
  accountStatusEnum,
} from "utils/dataType.js";

export default {
  components: {
    pagination,
    autocomplete,
    generalDetails,
  },
  data() {
    return {
      rechargeTypeEnum: rechargeTypeEnum,
      rechargeStatusEnum: rechargeStatusEnum,
      accountStatusEnum: accountStatusEnum,
      controlWindows: {
        detail: false,
      },
      datetime: [],
      tableHeight: 0,
      tableData: [],
      configAutocomplete: {
        serveTarget: commonServe.getRefineryCompanyList,
        autocompleteKey: "name",
        labelKey: "name",
        valueKey: "id",
        placeholder: "企业名称",
        querykey: "companyId",
      },
      configAutocompleteSec: {
        serveTarget: commonServe.liekQuery,
        autocompleteKey: "",
        labelKey: ["id", "nickName", "phone"],
        valueKey: "id",
        placeholder: "业务负责人",
        querykey: "businessLeader",
      },
      parameter: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      },

      LoopBackTypeEnum: [
        {
          label: "充值圈回",
          value: 1,
        },
        {
          label: "赊销圈回",
          value: 2,
        },
        {
          label: "充值返利圈回",
          value: 3,
        },
        {
          label: "消费返利圈回",
          value: 4,
        },
      ],
      auditMarkEnum: [
        {
          label: "待审核",
          value: 0,
          type: "warning",
        },
        {
          label: "审核通过",
          value: 1,
          type: "success",
        },
        {
          label: "审核失败",
          value: -1,
          type: "danger",
        },
      ],

      oilCompanyMatch: {},
      mappingData: [
        {
          carTitle: "",
          carItems: [
            { label: "ID", value: "id" },
            { label: "交易类型", value: "transactionType" },
            { label: "交易状态", value: "transactionState" },
            { label: "交易金额", value: "transactionAmount" },
            { label: "充值返利比例", value: "rechargeRebate" },
            { label: "充值返利金额", value: "rechargeRebateAmount" },
            { label: "线下汇款公司账户", value: "offlinePaymentCompany" },
            { label: "线下交易发起时间", value: "offlineStartTime" },
            { label: "线下交易完成时间", value: "offlineCompleteTime" },
            { label: "线下交易凭证", value: "offlineTransactionProof" },
            { label: "交易审核标识", value: "auditMark" },
            { label: "审核人", value: "auditUserName" },
            { label: "交易说明", value: "reverseRemark" },
            { label: "审核时间", value: "auditTime" },
            { label: "审核系统来源", value: "auditSource" },
            { label: "赊销还款审核", value: "chargeSalesAuditMark" },
            { label: "赊销还款审核人", value: "chargeSalesAuditUser" },
            { label: "赊销还款审核时间", value: "chargeSalesAuditTime" },
            { label: "赊销还款审核来源", value: "chargeSalesAuditSource" },
            { label: "创建用户", value: "createUserName" },
            { label: "创建时间", value: "createTime" },
            { label: "创建数据来源", value: "createSource" },
            { label: "企业收款账户", value: "internalCompanyName" },
            { label: "开户行", value: "bankDeposit" },
            { label: "银行卡号", value: "bankCardNo" },
          ],
        },
        {
          carTitle: "账户信息",
          carItems: [
            { label: "账户总余额", value: "balance" },
            { label: "待还总金额", value: "totalChargeAmount" },
            { label: "账户状态", value: "accountState" },
            { label: "账户类型", value: "accountType" },
            { label: "账户充值余额", value: "rechargeBalance" },
            { label: "赊销充值余额", value: "chargeRechargeBalance" },
            { label: "充值返利余额", value: "rechargeRebateBalance" },
            { label: "消费返利余额", value: "consumeRebateBalance" },
            { label: "累计充值金额", value: "totalRechargeAmount" },
            { label: "累计赊销充值金额", value: "totalChargeRechargeAmount" },
            { label: "累计充值返利金额", value: "totalRechargeRebateAmount" },
            { label: "累计消费返利金额", value: "totalConsumeRebateAmount" },
          ],
        },
      ],
    };
  },
  created() {
    this.initDateTime();
    this.getByPage();
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.heightHandle();
    });
    window.addEventListener(
      "resize",
      this.$utils.debounce(this.heightHandle, 500)
    );
  },
  methods: {
    search() {
      this.parameter.currentPage = 1;
      this.getByPage();
    },
    //table list
    getByPage() {
      this.parameter.params["companyAccountType"] = "4";
      serve.getByPage(this.parameter).then((res) => {
        this.tableData = res.data.list;
        this.parameter.total = res.data.totalCount;
      });
    },
    //新增
    addition() {
      this.controlWindows.addInfo.title = "产品新增";
      this.controlWindows.add = true;
    },
    detail(row) {
      Promise.all([
        serve.get(row.id),
        commonServe.getByCompanyIdAccount(row.companyId),
      ]).then(([firstRes, secondRes]) => {
        this.oilCompanyMatch = [firstRes.data, secondRes.data];

        this.controlWindows.detail = true;
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      let transactionAmount = 0; // 交易金额
      let rechargeRebateAmount = 0; // 充值返利金额
      data.forEach((item) => {
        transactionAmount += item.transactionAmount
          ? item.transactionAmount
          : 0;
        rechargeRebateAmount += item.rechargeRebateAmount
          ? item.rechargeRebateAmount
          : 0;
      });
      transactionAmount = transactionAmount.toFixed(2);
      rechargeRebateAmount = rechargeRebateAmount.toFixed(2);
      columns.forEach((item, index) => {
        if (index === 1) {
          sums[index] = "合计";
          return;
        }
        switch (item.property) {
          case "transactionAmount":
            sums[index] = transactionAmount + "元";
            break;
          case "rechargeRebateAmount":
            sums[index] = rechargeRebateAmount + "元";
            break;

          default:
            break;
        }
      });
      return sums;
    },
    //重置
    reset() {
      Object.assign(this.parameter, {
        currentPage: 1,
        pageSize: 10,
        params: {},
      });
      this.initDateTime();
    },
    // init时间
    initDateTime() {
      let now = new Date().getTime();
      let beforeDay30 = now - 1000 * 60 * 60 * 24 * 30;
      let nowRes = this.$utils.parseTime(now);
      let beforeDay30Res = this.$utils.parseTime(beforeDay30);
      let { y, M, d } = nowRes;
      let { y: beforey, M: beforeM, d: befored } = beforeDay30Res;
      this.datetime = [
        `${beforey}-${beforeM}-${befored} 00:00:00`,
        `${y}-${M}-${d} 23:59:59`,
      ];
      this.changeDateTime(this.datetime);
    },
    changeDateTime(val) {
      if (val) {
        this.parameter.params.createTimeStart = val[0];
        this.parameter.params.createTimeEnd = val[1];
      }
    },
    // table height
    heightHandle() {
      let bodyHeight = document.body.clientHeight;
      let frameHeight = this.obtainElement(".frame").clientHeight;
      let operationHeight = this.obtainElement(".operation").clientHeight;
      let paginationHeight = this.obtainElement(".el-pagination").clientHeight;
      this.tableHeight =
        bodyHeight - frameHeight - operationHeight - paginationHeight - 145;
    },
    obtainElement(className) {
      return document.documentElement.querySelector(className);
    },
  },
};
</script>

<style lang="scss" scoped>
.enterprise-recharge-details {
  .pft14 {
    font-size: 14px;
  }
  .frame {
    margin: 20px;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    background: #fff;
    .el-input,
    .el-select {
      width: 183px;
      height: 40px;
    }
    .el-autocomplete + .el-input,
    .el-input + .el-autocomplete,
    .el-autocomplete + .el-select,
    .el-input + .el-input,
    .el-input + .el-select,
    .el-select + .el-select,
    .el-select + .el-input {
      margin-right: 20px;
      margin-bottom: 15px;
    }
    .mr20 {
      margin-right: 20px;
    }
    .buttons {
      text-align: right;
    }
  }

  .table {
    overflow: hidden;
    margin: 0 20px;
    padding-bottom: 20px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    > .operation {
      box-sizing: content-box;
      padding: 15px;
    }
    .gray {
      color: #999;
      span {
        color: #333;
      }
    }
    .el-table {
      margin-bottom: 20px;
      border-radius: 10px 10px 0px 0px;
    }

    .el-dropdown-link {
      margin-right: 10px;
      cursor: pointer;
      color: #409eff;
      &.special {
        margin-right: 0;
      }
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
  .ft14 {
    font-size: 14px;
  }
}
</style>
