<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="选择日期" prop="DateQuery">
        <el-date-picker
          v-model="queryParams.sDate"
          type="month"
          style="width: 150px"
          value-format="yyyy-MM"
          clearable
          placeholder="请输起始月"
        />
        <el-date-picker
          v-model="queryParams.eDate"
          type="month"
          style="width: 150px"
          value-format="yyyy-MM"
          clearable
          placeholder="请输截止月"
        />
      </el-form-item>
      <el-form-item label="同比年份" prop="duibiYear">
        <el-date-picker
          v-model="queryParams.duibiYear"
          type="year"
          style="width: 150px"
          value-format="yyyy"
          placeholder="请选择同比年份"
        />
      </el-form-item>

      <el-form-item label="部门" prop="deptid" v-show="showDept">
        <treeselect
          v-model="queryParams.deptid"
          :options="deptOptions"
          :show-count="true"
          :placeholder="$t('请选择部门')"
          :normalizer="normalizer"
        />
      </el-form-item>
      <el-form-item label="客户经理" prop="salesmanid" v-show="showCustomsManage">
        <user-selector
          manage
          v-model="queryParams.salesmanid"
          clearable
          @change="handleQuery"
          :prepend="{ id: 0, nickname: $t('未分配客户经理') }"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="panel-group" style="margin: 5px">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleGoTo">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              {{ $t("业绩总览 Total") }}
            </div>
            <div class="card-panel-num">{{ allsumvolume }}</div>
            <div style="text-align: right">同比：13%</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleGoTo">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              {{ $t("海运拼柜") }}
            </div>
            <div class="card-panel-num">{{ sumvolume1 }}</div>
            <div style="text-align: right">同比：13%</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleGoTo">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="date" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              {{ $t("专线空运") }}
            </div>
            <div class="card-panel-num">{{ sumweight3 }}</div>
            <div style="text-align: right">同比：13%</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="panel-group" style="margin: 5px">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleGoTo">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              {{ $t("成交总览 Total") }}
            </div>
            <div class="card-panel-num">{{ sumCustomerCount }}</div>
            <div style="text-align: right">同比：13%</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleGoTo">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="time-range" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              {{ $t("首次成交") }}
            </div>
            <div class="card-panel-num">{{ fisCustomerCount }}</div>
            <div style="text-align: right">同比：13%</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div
      ref="mainBar"
      :class="className"
      :style="{ height: height, width: width }"
    />
  </div>
</template>
      
<script>
import UserSelector from "@/components/UserSelector";
import Treeselect from "@riophae/vue-treeselect";
//自定义目录数样式
import "@/assets/styles/vue-treeselect.css";
import { listSimpleDepts } from "@/api/system/dept";
//报表权限接口
import { getCurUserPermission,getDeptChild } from "@/api/report/EcwReportPermission";
import {
  SalesReportCount,
  FirstCustomerCount,
  CustomerTargetCount,
  getEChartData,
} from "@/api/report/salesreport";
import * as echarts from "echarts";
require("echarts/theme/macarons");
import resize from "../../dashboard/mixins/resize";
import SalesPanelGroup from "../../dashboard/SalesPanelGroup";
import { MessageBox } from "element-ui";

const CurDate = new Date();
function currentTime() {
  var date = new Date();
  var year = date.getFullYear();
  //月份从0~11，所以加一
  let month = date.getMonth() + 1;
  //如果格式是MM则需要此步骤，如果是M格式则此处注释掉
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  let strDate = year + "-" + month;
  return strDate;
}

function getLastYear() {
  //获取上一年份
  var date = new Date();
  date.setFullYear(date.getFullYear() - 1);
  let year = date.getFullYear();
  return year.toString();
}

//2024-05-01合并
export default {
  name: "ReportSalesreportIndex",
  components: {
    SalesPanelGroup,
    UserSelector,
    Treeselect,
  },
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "500px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      showCustomsManage: true,//是否显示客户经理查询条件
      showDept: true,//是否显示部门查询条件
      chart: null,
      allsumvolume: undefined, //总V值
      sumvolume1: undefined, //海运拼柜
      sumweight3: undefined, //专线空运
      sumCustomerCount: undefined, //成交客户总数
      fisCustomerCount: undefined, //首次成交客户户数
      dateRangeCreateTime: [],
      SalesReportRespShow:[],
      queryParams: {
        salesmanid: undefined, //销售经理
        deptid: undefined, //部门
        sDate: CurDate.getFullYear() + "-01", //开始日期
        eDate: currentTime(), //结束日期
        duibiYear: getLastYear(), //对比年份
      },
      deptOptions: [],
      deptData: [],
      //报表权限信息
      objEcwReportPermission: {},
    };
  },
  watch: {},
  mounted() {},
  created() {
    this.handleQuery();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    getDept() {
      listSimpleDepts().then((response) => {
        //this.deptData.add
      });
    },
    getCustomerTargetCount() {
      CustomerTargetCount(this.queryParams).then((response) => {
        this.sumCustomerCount = response.data;
      });
    },
    getSalesReportCount() {
      //获取运输方式统计数 lanbm 2024-04-01 add
      SalesReportCount(this.queryParams).then((response) => {
        //业绩总览
        this.allsumvolume = response.data.allsumvolume;
        //海运拼柜
        this.sumvolume1 = response.data.sumvolume1;
        //专线空运
        this.sumweight3 = response.data.sumweight3;
      });
    },
    getSalesReportCount() {
      //获取运输方式统计数 lanbm 2024-04-01 add
      SalesReportCount(this.queryParams).then((response) => {
        //业绩总览
        this.allsumvolume = response.data.allsumvolume;
        //海运拼柜
        this.sumvolume1 = response.data.sumvolume1;
        //专线空运
        this.sumweight3 = response.data.sumweight3;
      });
    },
    getFirstCustomerCount() {
      //获取首次成交客户数 lanbm 2024-04-01 add
      FirstCustomerCount(this.queryParams).then((response) => {
        //首次成交客户数
        this.fisCustomerCount = response.data;
      });
    },
    initChart() {
      var chartDom = this.$refs["mainBar"];
      this.chart = echarts.init(chartDom, "macarons");
      this.setOptions();
    },
    setOptions() {
      this.loading = true;
      getEChartData(this.queryParams).then((response) => {
        this.chart.setOption({
          title: {
            text: "月度业绩分布",
          },
          legend: {},
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.5],
          },
          yAxis: response.data.objyAxis,
          series: response.data.obSseries,
        });
      });
    },
    isChinese() {
      //基础函数，判断系统显示语言是中文还是英文
      return this.$i18n.locale === "zh_CN";
    },
    handleQuery() {
      if (this.isRight() == false) return;
      this.loading = true;
      //获取当前用户报表权限
      getCurUserPermission().then((response) => {
        this.objEcwReportPermission = response.data;
        if (this.objEcwReportPermission.permissionFw == 1) {
          //本人权限
          this.showCustomsManage = false;
          this.showDept = false;
          this.queryParams.salesmanid = this.objEcwReportPermission.userId;
        } else if (this.objEcwReportPermission.permissionFw == 2) {
          //本部门权限
          this.showCustomsManage = true;
          this.showDept = true;
          this.queryParams.deptid = parseInt(
            this.objEcwReportPermission.deptId
          );
        } else if (this.objEcwReportPermission.permissionFw == 3) {
          //全公司权限
          this.showCustomsManage = true;
          this.showDept = true;
        }

        this.getTreeselect();
        this.getSalesReportCount();
        this.getFirstCustomerCount();
        //获取成交客户数，出重结果
        this.getCustomerTargetCount();
        //获取权限后再初始化统计图表
        this.initChart();
        this.loading = false;
      });
    },
    getList() {},
    resetQuery() {
      this.queryParams = {
        salesmanid: undefined, //销售经理
        deptid: undefined, //部门
        sDate: undefined, //开始日期
        eDate: undefined, //结束日期
        duibiYear: undefined, //对比年份
      };
    },
    handleGoTo() {
      if (this.isRight() == false) return;
      let p = {};
      Object.assign(p, this.queryParams);
      this.$router.push({
        path: "/report/sales_analysis",
        query: p,
      });
    },
    isRight() {
      //校验查询参数 lanbm 2024-05-09 add
      if (this.queryParams.sDate == undefined) {
        MessageBox("请输入起始月份。");
        return false;
      }
      if (this.queryParams.eDate == undefined) {
        MessageBox("请输入截止月份。");
        return false;
      }
      if (this.queryParams.duibiYear == undefined) {
        MessageBox("请输入对比年份。");
        return false;
      } else {
        let y = parseInt(this.queryParams.duibiYear);
        if (y < 2023) {
          MessageBox("对比年份只能选2023年和2023年之后的年份。");
          return false;
        }
        var date = new Date();
        var year = date.getFullYear();
        if (y > year) {
          MessageBox("对比年份只能选当前年份之前的年份。");
          return false;
        }
      }
      return true;
    },
    handleAdd() {},
    handleExport() {},
    /** 查询部门下拉树结构 + 岗位下拉 */
    getTreeselect() {
      if (this.objEcwReportPermission.permissionFw == 3) {
        listSimpleDepts().then((response) => {
          // 处理deptOptions 参数
          this.deptOptions = [];
          this.deptOptions.push(...this.handleTree(response.data, "id"));
        });
      } else if (this.objEcwReportPermission.permissionFw == 2) {
        this.DeptEx.id = this.objEcwReportPermission.deptId;
        getDeptChild(this.DeptEx).then((response) => {
          // 处理deptOptions 参数
          this.deptOptions = [];
          this.deptOptions.push(...this.handleTree(response.data, "id"));
        });
      }
    },
    //格式化部门的下拉框
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
  },
};
</script>


<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    display: flex;
    justify-content: space-between;
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      font-size: 48px;
    }

    .card-panel-description {
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
      