<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 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 {
      total: 0,
      tableData: [],
      loading: false,
      rateLoading: false,
      activeName: "monthdata",
      rateData: [],
      year: {
        first: "",
        second: "",
      },
    };
  },
  mounted() {
    this.init();
    this.initRate();
  },
  methods: {
    init() {
      if (this.loading) return;
      this.loading = true;
      this.apipost(
        "/api/ClueStatic/GetClueYear",
        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/GetClueYearRate",
        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>
