<template>
  <el-container>
    <el-aside width="287px">
      <div class="asideHeader">
        <h2 class="asideTitle">防疫通行数据对比</h2>
        <div class="exportData" @click="exportData">导出所有数据</div>
      </div>
      <div class="searchBox">
        <el-input
          placeholder="请输入关键字搜索"
          prefix-icon="el-icon-search"
          v-model="searchWord"
          class="searchInput"
          clearable
        >
        </el-input>
        <el-button
          class="searchBtn"
          type="primary"
          size="small"
          @click="searchCompany"
          >搜索</el-button
        >
      </div>
      <div class="projectList">
        <vue-scroll style="height: 100%">
          <ul>
            <li
              class="list-item"
              v-for="(item, index) in projectList"
              :key="item.enterpriseId"
              :class="dataIndex === index ? 'active' : ''"
              @click="clickList(index, item)"
            >
              {{ item.name }}
            </li>
          </ul>
        </vue-scroll>
      </div>
    </el-aside>
    <el-main>
      <div class="main-header">
        <div class="header-box">
          <img src="@/assets/images/laborManage/totalNum.png" alt="" />
          <div>
            <p>实名人数</p>
            <h2>{{ statisticalData.workerNum }}</h2>
          </div>
        </div>
        <div class="header-box">
          <img src="@/assets/images/laborManage/greenCode.png" alt="" />
          <div>
            <p v-if="projectType == 'common' || projectType == 'zjsj'"> 绿码人数 </p>
            <p v-else>昌通码绿码人数</p>
            <h2>{{ statisticalData.greenCodeNum }}</h2>
          </div>
        </div>
        <div class="header-box">
          <img src="@/assets/images/laborManage/abnormalCode.png" alt="" />
          <div>
            <p>异常码人数</p>
            <h2>{{ statisticalData.abnormalNum }}</h2>
          </div>
        </div>
        <div class="header-box">
          <img src="@/assets/images/laborManage/inNum.png" alt="" />
          <div>
            <p>进入人数</p>
            <h2>{{ statisticalData.inNum }}</h2>
          </div>
        </div>
        <div class="header-box">
          <img src="@/assets/images/laborManage/outNum.png" alt="" />
          <div>
            <p>外出人数</p>
            <h2>{{ statisticalData.outNum }}</h2>
          </div>
        </div>
      </div>
      <div class="main-middle">
        <div class="abnormalAnalysis" ref="abnormalAnalysis"></div>
        <div class="btnBox">
          <el-button
            size="mini"
            :class="selectType === 1 ? 'activeBtn' : ''"
            @click="selectDate(1)"
            >近7天</el-button
          >
          <el-button
            size="mini"
            :class="selectType === 2 ? 'activeBtn' : ''"
            @click="selectDate(2)"
            >近30天</el-button
          >
        </div>
      </div>
      <div class="main-footer">
        <div class="contrastAnalysis" ref="contrastAnalysis"></div>
        <div class="btnBox">
          <el-button
            size="mini"
            :class="selectType_contrast === 1 ? 'activeBtn' : ''"
            @click="selectDate_contrast(1)"
            >近7天</el-button
          >
          <el-button
            size="mini"
            :class="selectType_contrast === 2 ? 'activeBtn' : ''"
            @click="selectDate_contrast(2)"
            >近30天</el-button
          >
        </div>
        <el-button
          size="mini"
          type="primary"
          plain
          class="exportForm"
          @click="exportForm"
          >导出表格</el-button
        >
        <el-dialog
          title="请选择下载日期"
          :visible.sync="selectTime"
          width="30%"
        >
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <el-form-item label="选择时间" prop="time">
              <el-date-picker
                v-model="ruleForm.time"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                style="width: 80%;"
                @change="getTime"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="selectTime = false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import echarts from "echarts4";
import {
  selectProjectAllEnterpriseList,
  getProjectChartData,
  getProjectDetailData,
} from "@/assets/js/api/laborPerson.js";
import moment from "moment";
export default {
  data() {
    return {
      projectType:"",
      rules: {
        time: [
          {
            required: true,
            message: "请选择需要打印的日期",
            trigger: "change",
          },
        ],
      },
      ruleForm: {
        time: "",
      },
      queryTime: "", //时间
      selectTime: false, // 选择时间的弹窗
      moment: moment,
      searchWord: "", // 搜索框输入
      dataIndex: 0,
      projectList: [],
      projectSn: "",
      userEnterpriseId: "",
      enterpriseId: "",
      statisticalData: {
        workerNum: 0, //实名人数
        greenCodeNum: 0, // 绿码人数
        abnormalNum: 0, // 异常码人数
        inNum: 0, // 进入人数
        outNum: 0, // 外出人数
      },
      selectType: 1,
      selectType_contrast: 1,
      isContrast: false,
      enterpriseName: "",
      noData: false,
    };
  },
  created() {
    this.projectType = PROJECT_TYPE;
    this.projectSn = this.$store.state.projectSn;
    this.userEnterpriseId = this.$store.state.userInfo.userEnterpriseId;
    // console.log('-----',this.userEnterpriseId)
  },
  mounted() {
    this.getProjectList();
    // this.abnormalChart(); // 异常码人数图表分析
    // this.contrastChart(); // 对比人数图表分析
  },
  methods: {
    // 初始化数据
    initData() {
      this.statisticalData = {
        workerNum: 0, //实名人数
        greenCodeNum: 0, // 绿码人数
        abnormalNum: 0, // 异常码人数
        inNum: 0, // 进入人数
        outNum: 0, // 外出人数
      };
    },
    // 点击企业列表
    clickList(index, project) {
      this.dataIndex = index;
      this.enterpriseId = project.enterpriseId;
      this.selectType = 1;
      this.selectType_contrast = 1;
      this.enterpriseName = project.name;
      this.getProjectDetail();
    },
    // 搜索
    searchCompany() {
      this.dataIndex = 0;
      this.selectType = 1;
      this.selectType_contrast = 1;
      this.getProjectList();
    },
    // 异常码人数图表
    abnormalChart(xData, notCodeNum, redCodeNum, yellowCodeNum) {
      let abnormalAnalysis = echarts.init(this.$refs.abnormalAnalysis);
      let option = {
        title: {
          text: "异常码人数",
          left: "1%",
        },
        legend: {
          data: ["无码", "黄码", "红码"],
          bottom: "-1%",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "1%",
          right: "3%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xData,
            boundaryGap: 10,
            axisTick: {
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
            splitLine: {
              //网格线
              show: false,
            },
            boundaryGap: true,
            axisLabel: {
              formatter: function(val) {
                let index = val.indexOf("-");
                val = val.slice(index + 1);
                return val;
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              //y轴
              show: false,
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
            splitLine: {
              //网格线
              show: true,
            },
          },
        ],
        series: [
          {
            name: "无码",
            type: "line",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(43, 219, 157, 0.3)" },
                  { offset: 1, color: "rgba(206, 246, 221, 0)" },
                ]),
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(43, 219, 157, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(43, 219, 157, 0.7)", //改变折线颜色
                },
              },
            },
            // emphasis: {
            //   focus: "series",
            // },
            data: notCodeNum,
          },

          {
            name: "黄码",
            type: "line",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(255, 248, 117, 0.7)" },
                  { offset: 1, color: "rgba(255, 248, 117, 0)" },
                ]),
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(255, 248, 117, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(255, 248, 117, 0.7)", //改变折线颜色
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: yellowCodeNum,
          },
          {
            name: "红码",
            type: "line",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(252, 173, 147, 0.7)" },
                  { offset: 1, color: "rgba(252, 173, 147, 0)" },
                ]),
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(252, 173, 147, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(252, 173, 147, 0.7)", //改变折线颜色
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: redCodeNum,
          },
        ],
      };

      abnormalAnalysis.setOption(option);
    },
    // 通行数据对比图表
    contrastChart(xData, greenCodeNum, abnormalNum, inNum, outNum) {
      let contrastAnalysis = echarts.init(this.$refs.contrastAnalysis);
      let option = {
        title: {
          text: "通行数据对比",
          left: "1%",
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255, 255, 255, 1)",
          showDelay: 0,
          textStyle: {
            color: "rgba(51, 51, 51, 1)", //字体颜色
            fontSize: 14, //字体大小
            lineHeight: 30,
          },
          padding: 10,
          formatter: function(params) {
            var tip = "时间：" + params[0].name + "<br/>";
            for (var i = 0, l = params.length; i < l; i++) {
              tip +=
                params[i].marker +
                params[i].seriesName +
                "：" +
                params[i].value +
                "<br/>";
            }
            return tip;
          },
        },
        grid: {
          top: "15%",
          left: "2%",
          right: "3%",
          bottom: "8%",
          containLabel: true,
        },
        legend: {
          data: ["昌通码绿码人数", "异常码人数", "进入人数", "外出人数"],
          bottom: "-1%",
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              formatter: function(val) {
                let index = val.indexOf("-");
                val = val.slice(index + 1);
                return val;
              },
            },
            splitNumber: 10,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "昌通码绿码人数",
            type: "bar",
            barWidth: 30, //柱图宽度
            itemStyle: {
              normal: {
                color: "#6A87FA",
              },
            },
            data: greenCodeNum,
          },
          {
            name: "异常码人数",
            type: "bar",
            barWidth: 30, //柱图宽度
            itemStyle: {
              normal: {
                color: "#FF7575",
              },
            },
            data: abnormalNum,
          },
          {
            name: "进入人数",
            type: "line",
            // yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(255, 165, 60, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(255, 165, 60, 1)", //改变折线颜色
                },
              },
            },
            data: inNum,
          },
          {
            name: "外出人数",
            type: "line",
            // yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "rgba(9, 214, 163, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(9, 214, 163, 1)", //改变折线颜色
                },
              },
            },
            data: outNum,
          },
        ],
      };
      contrastAnalysis.setOption(option);
    },
    // 获取企业列表
    getProjectList() {
      selectProjectAllEnterpriseList({
        projectSn: this.projectSn,
        enterpriseName: this.searchWord,
        userEnterpriseId: this.userEnterpriseId,
      }).then((res) => {
        if (res.code == 200) {
          console.log("企业列表的信息", res);
          this.projectList = res.result;
          this.enterpriseId = this.projectList[0].enterpriseId;
          this.enterpriseName = this.projectList[0].name;
          this.getProjectDetail();
        }
      });
    },

    // 获取对应企业的详细数据
    getProjectDetail(chartType) {
      this.initData();
      // 统计数据
      getProjectDetailData({
        projectSn: this.projectSn,
        enterpriseId: this.enterpriseId,
      }).then((res) => {
        console.log(res);
        if (res.result) {
          console.log('外出的信息有吗',res.result)
          this.statisticalData = res.result;
          this.statisticalData.abnormalNum =
            res.result.notCodeNum +
            res.result.redCodeNum +
            res.result.yellowCodeNum;
        }
      });

      // 图表数据
      getProjectChartData({
        projectSn: this.projectSn,
        selectType: this.isContrast
          ? this.selectType_contrast
          : this.selectType,
        enterpriseId: this.enterpriseId,
      }).then((res) => {
        console.log('-----------',res)
        let dateArray = [];
        let notCodeNum = [];
        let redCodeNum = [];
        let yellowCodeNum = [];
        let greenCodeNum = [];
        let abnormalNum = [];
        let inNum = [];
        let outNum = [];
        res.result.forEach((item) => {
          dateArray.push(item.queryTime);
          notCodeNum.push(item.notCodeNum);
          redCodeNum.push(item.redCodeNum);
          yellowCodeNum.push(item.yellowCodeNum);
          greenCodeNum.push(item.greenCodeNum);
          abnormalNum.push(
            item.notCodeNum + item.redCodeNum + item.yellowCodeNum
          );
          inNum.push(item.inNum);
          outNum.push(item.outNum);
        });
        // chartType 1异常人数图表渲染 2通行数据图表渲染 不传时都渲染
        if (chartType == 1) {
          this.abnormalChart(dateArray, notCodeNum, redCodeNum, yellowCodeNum);
        } else if (chartType == 2) {
          this.contrastChart(
            dateArray,
            greenCodeNum,
            abnormalNum,
            inNum,
            outNum
          );
        } else {
          this.abnormalChart(dateArray, notCodeNum, redCodeNum, yellowCodeNum);
          this.contrastChart(
            dateArray,
            greenCodeNum,
            abnormalNum,
            inNum,
            outNum
          );
        }
      });
    },

    // 异常码切换7天或30天数据
    selectDate(type) {
      // type 1为7天 2为30天
      this.selectType = type;
      this.isContrast = false;
      this.getProjectDetail(1);
    },

    // 通行数据对比切换7天或30天数据
    selectDate_contrast(type) {
      this.selectType_contrast = type;
      this.isContrast = true;
      this.getProjectDetail(2);
    },

    // 导出数据
    exportData() {
      window.location.href =
        this.$http.defaults.baseURL +
        "xmgl/projectEnterpriseWorkerStatistics/exporExcelProjectEnterpriseWorkerStatistics?projectSn=" +
        this.$store.state.projectSn +
        "&enterpriseName=" +
        this.searchWord +
        "&userEnterpriseId=" +
        this.userEnterpriseId;
    },
    exportForm() {
      this.selectTime = true;
    },
    getTime(val) {
      console.log("时间", val);
      this.queryTime = val;
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          window.location.href =
            this.$http.defaults.baseURL +
            "xmgl/projectEnterpriseWorkerStatistics/exporExcelDayEnterpriseWorkerStatisticsDetail?projectSn=" +
            this.$store.state.projectSn +
            "&userEnterpriseId=" +
            this.userEnterpriseId +
            "&queryTime=" +
            this.queryTime +
            "&enterpriseId=" +
            this.enterpriseId;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}
.el-aside {
  background: #fff;
  color: #333;
  text-align: center;
  height: 100%;
  overflow: auto;

  .exportData {
    border: 1px solid #409eff;
    border-radius: 4px 4px 4px 4px;
    width: 92px;
    margin: 0 auto;
    font-size: 12px;
    color: #409eff;
    cursor: pointer;
  }
  .searchBox {
    display: flex;
    height: 30px;
    margin-top: 25px;
    padding: 0;
    justify-content: space-around;
    /deep/ .el-input {
      width: 187px;
    }
    /deep/ .el-input__inner {
      border: 1px solid #dcdfe6;
      height: 30px;
      border-radius: 50px 50px 50px 50px;
      box-sizing: border-box;
    }
    /deep/ .el-input__prefix,
    /deep/ .el-input__icon {
      line-height: 30px !important;
    }
  }
  .searchBtn {
    background: #409eff;
  }
  .list-item {
    padding: 16px 0;
    cursor: pointer;
  }
  .projectList {
    overflow-y: auto;
    height: calc(100% - 153px);
  }
  .el-aside .projectList:hover {
    opacity: 1;
    transition: opacity 0.34s ease-out;
  }
}
.active {
  color: #409eff;
}
.el-main {
  // background-color: #d3dce6;
  padding: 20px 20px 0 20px;
  text-align: center;
}
.main-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .header-box {
    display: flex;
    width: 16%;
    background: #fff;
    padding: 24px 0 30px 32px;
    border-radius: 24px 24px 24px 24px;
    align-items: center;
    img {
      width: 72px;
      height: 72px;
      border-radius: 10px 10px 10px 10px;
      margin-right: 21px;
    }
    p {
      font-size: 18px;
      color: #666666;
    }
    h2 {
      font-size: 36px;
      text-align: left;
      line-height: 50px;
      margin: 0;
    }
  }
}
.main-middle {
  position: relative;
  .abnormalAnalysis {
    padding: 20px;
    box-sizing: border-box;
    height: 282px;
    background: #fff;
    border-radius: 24px 24px 24px 24px;
  }
}

.btnBox {
  position: absolute;
  top: 8%;
  right: 3%;
  .activeBtn {
    background: rgba(77, 112, 255, 0.1);
    color: rgba(77, 112, 255, 1);
  }
  .el-button {
    border: none;
  }
}

.main-footer {
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 24px 24px 24px 24px;
  margin-top: 20px;
  position: relative;
  .contrastAnalysis {
    height: 420px;
  }
  .exportForm {
    position: absolute;
    bottom: 5%;
    right: 3%;
  }
}
</style>
