<template>
    <div class="page">
      <topBar
        v-if="topList.length > 0"
        :topList="topList"
        :moren="moren"
      ></topBar>
      <div class="thetopbox">
        <el-form label-width="110px">
          <el-row>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_825')" prop="memberCode">
                <el-input clearable v-model="queryParams.memberCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_826')" prop="memberName">
                <el-input clearable v-model="queryParams.memberName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_829')" prop="pkVertex">
                <el-select
                  clearable
                  :placeholder="$t('CK_KS_38')"
                  v-model="queryParams.pkVertex"
                >
                  <el-option
                    v-for="item in vertexList"
                    :key="item.pkId"
                    :label="item.vertexName"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="$t('MN_F_T_122')" prop="pkTeamCode">
                <el-select
                  clearable
                  :placeholder="$t('CK_KS_38')"
                  v-model="queryParams.pkTeamCode"
                >
                  <el-option
                    v-for="item in memberTeamList"
                    :key="item.pkId"
                    :label="item.teamName"
                    :value="item.pkId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
            <el-form-item :label="$t('MN_F_T_830')" prop="registerAuthority">
              <el-select
                clearable
                :placeholder="$t('CK_KS_38')"
                v-model="queryParams.registerAuthority"
              >
                <el-option
                  v-for="item in registerList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('PER_DA_9')" prop="thetimes">
                <el-date-picker
                  v-model="queryParams.thetimes"
                  @change="changeTime"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  :clearable="false"
                  :range-separator="$t('w_0139')"
                  :start-placeholder="$t('CK_KS_4')"
                  :end-placeholder="$t('CK_KS_5')"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="searchbox">
                <el-button
                  class="my_search"
                  @click="
                    () => {
                      getSearch();
                      getCzNum();
                    }
                  "
                >
                  {{ $t("MN_T_2") }}</el-button
                >
                <el-button class="my_reset" @click="reChongzhi">
                  {{ $t("MN_T_3") }}</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="main">
        <div class="maintop">
          <div class="mainbtn">
            <el-button size="small" class="thebtn1" @click="handleExport">
              {{ $t("MN_T_8") }}</el-button
            >
          </div>
        </div>
        <div class="maintable">
          <el-table
            :data="tableData"
            v-loading="loading"
            height="680px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="colsele" type="selection" width="55">
            </el-table-column>
            <el-table-column
              align="center"
              prop="memberCode"
              :label="$t('MN_F_T_825')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="memberName"
              :label="$t('MN_F_T_826')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="vertexName"
              :label="$t('MN_F_T_829')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="teamName"
              :label="$t('MN_F_T_122')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="registerName"
              :label="$t('MN_F_T_830')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="consumeMoney"
              min-width="100px"
              :label="$t('CK_KS_126') +  `(${isLocalSymbol()})`"
            >
            <template slot-scope="scope">
                {{ scope.row.consumeMoney| numFilter }}
            </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="consumeAchieve"
              min-width="100px"
              :label="$t('N_I_103') + `(PV)`"
            >
            </el-table-column>
          
          </el-table>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getSearch"
      />
    </div>
  </template>
    
        <script>
  import topBar from "@/components/topBar";
  import * as sta from "@/api/statistics";
  import { getRegistration } from "@/api/level";
  import { getvertexValue, getmemberTeamList } from "@/api/financialCase";
  import { isLocals, isLocalSymbol } from "@/utils/numberToCurrency";
  export default {
    name: "RealPerAddAwards",
    components: {
      topBar,
    },
    filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
    data() {
      return {
        moren: "realPerAddAwards",
        topList: [
          {
            name: this.$t("CK_KS_125"),
            path: "realPerAddAwards",
          },
        ],
        tableData: [],
        loading:false,
        queryParams: {
          pageNum: 1,
          pageSize: 50,
          thetimes: [],
        },
        total: 0,
        multipleSelection: [],
        memberTeamList: [],
        vertexList: [],
        registerList:[]
      };
    },
    created() {
      this.getSearch();
      this.getOthers();
    },
    methods: {
      isLocalSymbol,
      isLocals,
      changeTime(val) {
        this.queryParams.startCreateTime = val[0];
        this.queryParams.endCreateTime = val[1];
      },
      getOthers() {
        getmemberTeamList().then((res) => {
          this.memberTeamList = res.rows;
        });
        getvertexValue().then((res) => {
          this.vertexList = res.data;
        });
        getRegistration().then((res) => {
        this.registerList = res.data;
      });
      },
      //导出
      handleExport() {
        this.$confirm(this.$t("MN_F_T_407"), this.$t("MN_F_T_304"), {
          confirmButtonText: this.$t("w_0035"),
          cancelButtonText: this.$t("ENU_P_TYPE0"),
          type: "warning",
        }).then((_) => {
          this.download(
            "/report/manager/member-report/report-summary-list-export",
            { ...this.queryParams },
            `${this.$t("CK_KS_125")}${new Date().getTime()}.xlsx`
          );
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      reChongzhi() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 50,
          thetimes: [],
        };
        this.getSearch();
      },
      getSearch() {
        this.loading = true
        sta.getReportSummary(this.queryParams).then((res) => {
          this.loading = false
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total = res.total;
            
          }
        });
      },
      getCzNum() {
        this.queryParams.pageNum = 1;
      },
    },
  };
  </script>
    
    <style lang="scss" scoped>
  ::v-deep .el-image-viewer__close {
    right: 500px;
  }
  ::v-deep .dizhi .el-cascader {
    width: 100%;
  }
  ::v-deep .el-range-editor.el-input__inner {
    width: 100%;
  }
  ::v-deep .el-table thead {
    color: #000000;
  }
  ::v-deep .el-table .warning-row {
    background: #f9f9f9;
  }
  .page {
    padding: 10px 20px;
    background: #f9f9f9;
    font-size: 14px;
    .thetopbox {
      padding: 15px 20px 15px 0;
      background: #ffffff;
      border-radius: 8px;
      .searchbox {
        display: flex;
        align-items: center;
        margin-left: 40px;
      }
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #08143f;
        color: #ffffff;
      }
    }
    .main {
      //margin-top: 20px;
      background: #f9f9f9;
      //border-radius: 8px;
      //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  
      .maintop {
        display: flex;
        // padding: 10px 0;
        justify-content: space-between;
        align-items: center;
        .mainbtn {
          .thebtn1 {
            color: #ffffff;
            background: #ffad41;
            width: 68px;
            height: 32px;
          }
          .thebtn2 {
            color: #ffffff;
            background: #009b58;
            width: 68px;
            height: 32px;
          }
          .thebtn3 {
            color: #ffffff;
            background: #c8161d;
            width: 68px;
            height: 32px;
          }
        }
      }
    }
  }
  </style>
    