<template>
  <div class="customerManage" style="display:flex;height:calc(100% - 20px);flex-direction:column;">
    <div class="tools" style="border:none;">
      <div class="tools-item">
        <h1>年度引流统计</h1>
      </div>
      <div>
        <span class="font-size-12" style="padding-right: 10px">业务员</span>
        <el-select style="width: 220px;" filterable multiple clearable v-model="msg.QEmployeeIdsArr"
          @change="changeEmployee">
          <el-option v-for="(item, index) in EmployeeList" :key="index" :label="item.EmName" :value="item.EmployeeId">
          </el-option>
        </el-select>
      </div>
      <div class="rightmenu">
        <el-dropdown @command="handleCommand">
          <el-button class="crm-btn crm-btn-more easy-btn margin-right0">
            <i class="iconfont icongengduo"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1"><i class="iconfont icondaochu"></i> 导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-tabs v-model="activeName" style="flex:1;height:100%;" class="diy-eltabs" tab-position="top">
      <el-tab-pane label="年度数据" name="monthdata" style="background:#000">
        <div class="data-box-item">
          <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;" height="100%"
            border>
            <el-table-column prop="ItemName" label="" width="150">
            </el-table-column>
            <el-table-column>
              <template slot="header" slot-scope="scope">{{year.first}}年</template>
              <template slot-scope="scope">{{scope.row.FirstYear}}</template>
            </el-table-column>
            <el-table-column>
              <template slot="header" slot-scope="scope">{{year.second}}年</template>
              <template slot-scope="scope">{{scope.row.SecondYear}}</template>
            </el-table-column>
            <el-table-column prop="YearRate" label="平均" :formatter="formatter"></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="年度成长率" name="monthrate">
        <div class="data-box-item">
          <el-table :data="rateData" tooltip-effect="dark" v-loading="rateLoading" style="width: 100%;" height="100%"
            border :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName">
            <el-table-column prop="ItemName" label="" width="150">
            </el-table-column>
            <el-table-column>
              <template slot="header" slot-scope="scope">{{year.first}}年</template>
              <template slot-scope="scope">{{scope.row.FirstYear}}</template>
            </el-table-column>
            <el-table-column>
              <template slot="header" slot-scope="scope">{{year.second}}年</template>
              <template slot-scope="scope">{{scope.row.SecondYear}}%</template>
            </el-table-column>
            <el-table-column prop="YearRate" label="平均" :formatter="formatter"></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: {},
        total: 0,
        tableData: [],
        loading: false,
        rateLoading: false,
        activeName: "monthdata",
        rateData: [],
        year: {
          first: "",
          second: "",
        },
        EmployeeList: []
      };
    },
    mounted() {
      this.init();
      this.initRate();
      this.Employee()
    },
    methods: {
      changeEmployee() {
        this.msg.QEmployeeIds = this.msg.QEmployeeIdsArr.join(',')
        this.init();
      },
      // 获取业务员
      Employee() {
        let userInfo = this.getLocalStorage();
        let msg = {
          RB_Group_id: userInfo.RB_Group_id,
          BranchId: 1245,
          DepartmentId: 0,
          PostId: 0,
          IsLeave: 0,
        };
        this.apipost2(
          "admin_get_EmployeeGetList",
          msg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data;
            } else {}
          },
          (err) => {}
        );
      },
      init() {
        if (this.loading) return;
        this.loading = true;
        this.apipost(
          "/api/ClueStatic/GetClueYearV2",
          this.msg,
          (res) => {
            this.loading = false;
            let t = res.data.data[0];
            this.year.first = t.FirstYearStr;
            this.year.second = t.SecondYearStr;
            this.tableData = res.data.data;
          },
          (e) => {
            this.loading = false;
          }
        );
      },
      initRate() {
        if (this.rateLoading) return;
        this.rateLoading = true;
        this.apipost(
          "/api/ClueStatic/GetClueYearRateV2",
          this.msg,
          (res) => {
            this.rateLoading = false;
            this.rateData = res.data.data;
          },
          (e) => {
            this.rateLoading = false;
          }
        );
      },
      tableRowClassName({
        row
      }) {
        let cname = "font-size-12";
        if (row.DateStr == "平均") {
          cname += " xiaoji-row";
        } else if (row.DateStr == "总数") {
          cname += " sum-row";
        }
        return cname;
      },
      tableCellClassName({
        row,
        column
      }) {
        try {
          if (
            row[column.property].toString().indexOf("-") != -1 &&
            column.property != "DateStr"
          ) {
            return "warning-col";
          }
        } catch (error) {}
      },
      changeMonthHandler(val) {
        this.msg.YearStr = val.getFullYear();
        this.init();
        this.initRate();
      },
      formatter(row, column) {
        return row[column.property] + "%";
      },
      handleCommand(command) {
        if (command == "1") {
          this.downloadHandler();
        }
      },
      downloadHandler() {
        this.GetLocalFile(
          "/api/ClueStatic/DownLoadClueDay",
          this.msg,
          "数据统计.xls",
          (res) => {
            this.$message({
              message: "导出成功",
              type: "success",
            });
          }
        );
      },
      handleCommand(command) {
        if (command == "1") {
          if (this.activeName == "monthdata") {
            this.downloadHandler(
              "/api/ClueStatic/DownLoadClueYear",
              "年度引流数据"
            );
          } else {
            this.downloadHandler(
              "/api/ClueStatic/DownLoadClueYearRate",
              "年度引流成长率"
            );
          }
        }
      },
      downloadHandler(url, name) {
        this.GetLocalFile(url, this.msg, `${name}.xls`, (res) => {
          this.$message({
            message: "导出成功",
            type: "success",
          });
        });
      },
    },
  };
</script>

<style>
  @import "../../assets/css/customerManage.css";

  .el-table__fixed-body-wrapper table {
    padding-bottom: 8px !important;
  }

  .el-table .xiaoji-row {
    background: #ffff00;
  }

  .el-table .sum-row {
    background: #00b0f0;
  }

  .el-table .warning-col {
    background: red;
  }

  .diy-eltabs .el-tabs__content {
    height: calc(100% - 40px);
  }

  .diy-eltabs .data-box-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>