<!--suppress ALL -->
<template>
  <el-row :gutter="40" class="person-panel">
    <el-col :span="16" :lg="14" :sm="12" class="card-panel-left">
      <div class="card-panel grid-content bg-purple" style="height: 370px;">
        <div
          class="card-panel-icon-wrapper icon-people"
          @click="ProfileShow"
          style="cursor: pointer;"
        >
          <img
            v-if="profile.img_url != null"
            :src="profile.img_url"
            width="50"
            height="50"
            style="border-radius: 30px;"
          >
          <img
            v-if="profile.img_url == null"
            src="static/images/head_default.png"
            width="50"
            height="50"
            style="border-radius: 30px;"
          >
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            {{profile.name}}
            <br>
            <span v-if="profile.is_creator == 1">{{$t('dashboard.superadmin')}}</span>
            {{profile.job_name}}
          </div>
        </div>
        <div
          class="card-panel-updatetext"
          style="overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; max-width:230px;margin: 40px 40px 0 0;"
        >
          <span class="card-panel-timetext">{{profile.company_info.name}}</span>
        </div>
        <div class="card-panel-BP" v-loading="loading1">
          <!-- maxPeople -->
          <el-tooltip v-if="sys_info" class="item" effect="dark" :content="(maxPeople-sys_info.employee_count+1)>0? this.$t('dashboard.addemployee_count') +(maxPeople-sys_info.employee_count+1) + this.$t('dashboard.ren') : this.$t('dashboard.maxPeople') " placement="top">
            <div style="width:33%; cursor:pointer" @click="$router.replace({name: 'employee_master'})">
            <div class="card-panel-BP01" style="width:100%;" v-if="sys_info != null">
              <count-to
                :start-val="0"
                :end-val="sys_info.employee_count"
                :duration="2600"
                class="card-panel-num"
              ></count-to>
              <p class>{{$t('dashboard.employee_count')}}</p>
            </div>
            
            </div>
          </el-tooltip>

          <div class="x-sidebar"/>
          <router-link :to="{name:'event_master',params:{currentMonth:true}}" class="card-panel-BP02" v-if="sys_info != null">
            <count-to
              :start-val="0"
              :end-val="sys_info.event_count"
              :duration="2600"
              class="card-panel-num"
            ></count-to>

            <p class>{{$t('dashboard.event_count')}}</p>
          </router-link>
          <div class="x-sidebar"/>
          <router-link :to="{name:'task_master',params:{currentMonth:true}}" class="card-panel-BP03" v-if="sys_info != null">
            <count-to
              :start-val="0"
              :end-val="sys_info.task_count"
              :duration="2600"
              class="card-panel-num"
            ></count-to>

            <p class>{{$t('dashboard.task_count')}}</p>
          </router-link>
        </div>
        <h3 class="card-panel-tasktitle">{{$t('dashboard.tasktitle_admin')}}</h3>
        <router-link :to="{name:'event_master'}" class="card-panel-Score" v-loading="loading2">
          <div class="card-panel-Score01" v-if="auth_info != null">
            <count-to
              :start-val="0"
              :end-val="auth_info.addSum"
              :duration="2600"
              class="card-panel-mark"
            ></count-to>
            <p class>{{$t('dashboard.addSum')}}</p>
          </div>
          <div class="x-sidebar"/>
          <div class="card-panel-Score02" v-if="auth_info != null">
            <count-to
              :start-val="0"
              :end-val="auth_info.deductSum"
              :duration="2600"
              class="card-panel-mark"
            ></count-to>
            <p class>{{$t('dashboard.deductSum')}}</p>
          </div>
          <div class="x-sidebar"/>
          <div class="card-panel-Score03" v-if="auth_info != null">
            <count-to
              :start-val="0"
              :end-val="auth_info.deduct_addCount"
              :duration="2600"
              class="card-panel-mark"
            ></count-to>
            <p class>{{$t('dashboard.deduct_addCount')}}</p>
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col :span="8" :lg="10" :sm="12" class="card-panel-right" style="height: 100%;">
      <div class="grid-content bg-purple-light" style="height: 100%;">
        <h3 class="jc-h3-text">{{$t('dashboard.playerOptions')}}</h3>
        <jcnr></jcnr>
        <video-player
          v-if="false"
          style="height: 100%;"
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
        ></video-player>
      </div>
    </el-col>
  </el-row>
</template>

<script>
require("video.js/dist/video-js.css");
require("vue-video-player/src/custom-theme.css");
import { videoPlayer } from "vue-video-player";
import Vue from "vue";
import VCharts from "v-charts";
import CountTo from "vue-count-to";
import moment from "moment";
import jcnr from "./jcnr";
Vue.use(VCharts);
export default {
  components: {
    CountTo,
    videoPlayer,
    jcnr
  },
  name: "PersonPanel",
  data() {
    this.chartSettings = {
        metrics: [ this.$t('dashboard.point_up'), this.$t('dashboard.point_down')],
        dimension: [ this.$t('dashboard.date') ],
    };
    return {
      maxPeople: this.$store.getters.user_info.company_info.user_count_max,
      playerOptions: {
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        //aspectRatio: '16:9',
        fluid: true,
        sources: [
          {
            type: "video/mp4",
            src:
              "https://cnmwth.oss-cn-shenzhen.aliyuncs.com/Video/Interview_h246.mp4"
          }
        ],
        poster:
          "https://cnmwth.oss-cn-shenzhen.aliyuncs.com/images/img_Interview_curt.jpg", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试" //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
      loading1: false,
      loading2: false,
      sys_info: null,
      rank_info: null,
      auth_info: {
        deductSum: 0,
        addSum: 0,
        deduct_addCount: 0
      },
      pieseries: {
        name: this.$t('dashboard.name'),
        type: "pie",
        radius: 55,
        center: [100, 80],
        label: { show: false },
        data: [
          /*{'name': '工作职责(100分)', 'value': 100},
              {'name': '公告部分(120分)', 'value': 120},
              {'name': '规章制度(200分)', 'value': 200},
              {'name': '个人能力(210分)', 'value': 210}*/
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      },

      profile: this.$store.getters.user_info,
      imgUrl_01: "static/images/rank1.png",
      imgUrl_02: "static/images/up.png",
      imgUrl_down: "static/images/down.png",

      pieLegend: {
        type: "scroll",
        orient: "vertical",
        right: 10,
        top: 30,
        bottom: 20,
        data: [
          /*'工作职责(100分)', '公告部分(120分)', '规章制度(200分)', '个人能力(210分)'*/
        ]
      },
      linegrid: {
        left: "3%",
        right: "4%",
        bottom: 20,
        top: 50,
        containLabel: true
      },
      lineLegend: {
        left: 10,
        top: 20
      },
      colorsintegral: ["#ff0000", "#5ab1ef"],
      chartData02: {
        columns: [this.$t('dashboard.date'), this.$t('dashboard.point_up'), this.$t('dashboard.point_down')],
        rows: [
          /*
            {'日期': '07/20', '奖分': 139, '扣分': 109},
            {'日期': '07/21', '奖分': 353, '扣分': 323},
            {'日期': '07/22', '奖分': 292, '扣分': 262},
            {'日期': '07/23', '奖分': 172, '扣分': 142},
            {'日期': '07/24', '奖分': 379, '扣分': 349},
            {'日期': '07/25', '奖分': 459, '扣分': 429}*/
        ]
      }
    };
  },
  created() {
    //this.get_chart_data()
    this.get_sys_data();
    this.get_manager_auth_info();
  },
  filters: {
    dateTimeFormatter: function(cellValue) {
      return cellValue ? moment(cellValue * 1000).format("MM-DD HH:mm") : "";
    }
  },
  methods: {
    ProfileShow() {
      this.$parent.$parent.$parent.dialogProfileVisible = true;
    },

    getCurrMonthDays() {
      let date = [];
      let start =
        moment()
          .add("month", 0)
          .format("YYYY-MM") + "-01";
      let end = moment(start)
        .add("month", 1)
        .add("days", -1)
        .format("YYYY-MM-DD");
      date.push(start);
      date.push(end);
      return date;
    },

    get_sys_data() {
      const self = this;
      self.loading1 = true;
      const time_range = self.getCurrMonthDays();
      const time_start = moment(time_range[0]).format("x") / 1000;
      const time_end =
        moment(time_range[1]).format("x") / 1000 + (3600 * 24 - 1);
      const params = {
        time_range: time_start + "," + time_end
      };
      this.$http('get',"/integral.php/ajax_request_common/get_sys_data", params)
        .then(response => {
          if (response.status == 200) {
            self.loading1 = false;
            var jsonData = response.data;
            try {
              self.sys_info = jsonData.data;
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    get_manager_auth_info() {
      const self = this;

      self.loading2 = true;
      const time_range = self.getCurrMonthDays();
      console.log(moment(self.getCurrMonthDays()[0]).format("x"));
      const time_start = moment(time_range[0]).format("x") / 1000;
      const time_end =
        moment(time_range[1]).format("x") / 1000 + (3600 * 24 - 1);
      const params = {
        employee_id: self.profile.id,
        time_range: time_start + "," + time_end
      };
      this.$http('get',"/integral.php/point_data/get_manager_auth_info_all",params)
        .then(response => {
          if (response.status == 200) {
            self.loading2 = false;
            var jsonData = response.data;
            try {
              self.auth_info["addSum"] = 0;
              self.auth_info["deduct_addCount"] = 0;
              self.auth_info["deductSum"] = 0;

              if (jsonData.data.length == 1) {
                self.auth_info["addSum"] = jsonData.data[0].point * 1;
                self.auth_info["deduct_addCount"] +=
                  jsonData.data[0].rec_count * 1;
              } else if (jsonData.data.length >= 2) {
                self.auth_info["addSum"] = jsonData.data[0].point * 1;
                self.auth_info["deduct_addCount"] +=
                  jsonData.data[0].rec_count * 1;
                self.auth_info["deductSum"] = jsonData.data[1].point * 1;
                self.auth_info["deduct_addCount"] +=
                  jsonData.data[1].rec_count * 1;
              }

              console.log(self.auth_info);
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    get_chart_data() {
      const self = this;
      const time_now = moment(Date.now(), "YYYY-MM-DD HH:mm:ss")._i / 1000;
      const time_end = time_now - 24 * 3600 * 30;
      const params = {
        employee_id: self.profile.id,
        target_id: self.profile.id,
        point_type: 0,
        time_range: time_end + "," + time_now
      };
      this.$http('get',"/integral.php/point_data/chart_data_by_employee",params)
        .then(response => {
          if (response.status == 200) {
            var jsonData = response.data;
            try {
              // 饼图
              const pieseries = [];
              const pieLegend = [];
              for (const item in jsonData.structure_positive_chart_data) {
                pieseries.push({
                  value: jsonData.structure_positive_chart_data[item][1],
                  name:
                    jsonData.structure_positive_chart_data[item][0] +
                    "(" +
                    jsonData.structure_positive_chart_data[item][1] +
                    ")"
                });
                pieLegend.push(
                  jsonData.structure_positive_chart_data[item][0] +
                    "(" +
                    jsonData.structure_positive_chart_data[item][1] +
                    ")"
                );
              }
              self.$set(self.pieseries, "data", pieseries);
              self.$set(self.pieLegend, "data", pieLegend);

              // 线图
              const lineData = [];
              for (const item in jsonData.trend_chart_data.labels) {
                lineData.push({
                  日期: jsonData.trend_chart_data.labels[item],
                  奖分: jsonData.trend_chart_data.p_positive[item],
                  扣分: jsonData.trend_chart_data.p_negative[item] * -1
                });
              }
              self.$set(self.chartData02, "rows", lineData);
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.charts-pie-box {
  float: left;
}

.charts-tag li {
  list-style-type: none;
  line-height: 2;
  font-size: 14px;
}

.charts-tag li span {
  display: inline;
  padding: 0px 12px;
  margin-right: 12px;
  border-radius: 2px;
}

.person-panel {
  width: 100%;
  height: 330px;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  margin-bottom: 10px !important;
  margin-top: 18px;
  .card-panel-left {
    padding-right: 0px !important;
    padding-left: 0 !important;
  }
  .card-panel {
    font-size: 12px;
    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);
    .card-panel-icon-wrapper {
      color: #fff;
    }
    .icon-people {
      background: rgba(216, 216, 216, 1);
    }
    .icon-people {
      color: #fff;
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 25px 0 0 36px;
      transition: all 0.38s ease-out;
      border-radius: 100%;
    }
    .card-panel-icon {
      float: left;
      font-size: 36px;
    }
    .card-panel-img_01 {
      width: 20px;
      margin-left: 15px;
    }
    .card-panel-description {
      float: left;
      margin-top: 31px;
      margin-left: 15px;
      .card-panel-text {
        font-weight: bold;
        line-height: 18px;
        color: #606266;
        font-size: 16px;
        margin-bottom: 12px;
      }
    }
    .card-panel-updatetext {
      float: right;
      color: #606266;
      font-size: 14px;
      margin-top: 48px;
      margin-right: 40px;
      .card-panel-timetext {
        white-space: nowrap;
      }
    }
    .card-panel-BP {
      float: left;
      color: #606266;
      width: 100%;
      font-size: 14px;
      margin-top: 20px;
      margin-left: 10px;
      margin-right: 944px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      text-align: center;
      .card-panel-BP01 {
        width: 33%;
      }
      .card-panel-BP02 {
        width: 33%;
      }
      .card-panel-BP03 {
        width: 33%;
      }
      .x-sidebar {
        float: left;
        height: 67px;
        border-right: 0.09rem solid #dddddd;
      }
    }
    .card-panel-BP-text {
      font-family: "Microsoft YaHei";
      color: rgba(144, 147, 153, 1);
      font-size: 14px;
      white-space: nowrap;
      line-height: 19px;
      text-align: center;
      .card-panel-img_02 {
        max-height: 0.3rem;
      }
    }
    .card-panel-num {
      font-family: "Microsoft YaHei";
      font-size: 32px;
      color: rgba(245, 108, 108, 1);
    }
    .card-panel-tasktitle {
      font-family: "Microsoft YaHei";
      color: rgba(85, 85, 85, 1);
      float: left;
      width: 120px;
      height: 10px;
      font-size: 16px;
      font-size: 14px;
      margin-left: 35px;
      margin-right: 906px;
    }
    .card-panel-Score {
      float: left;
      color: #606266;
      width: 100%;
      font-size: 14px;
      margin-top: 10px;
      margin-left: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      text-align: center;
      .card-panel-Score01 {
        width: 33%;
      }
      .card-panel-Score02 {
        width: 33%;
      }
      .card-panel-Score03 {
        width: 33%;
      }
      .x-sidebar {
        float: left;
        height: 67px;
        border-right: 0.09rem solid #dddddd;
      }
    }
    .card-panel-Score-text {
      font-family: "Microsoft YaHei";
      color: rgba(144, 147, 153, 1);
      font-size: 14px;
      white-space: nowrap;
      line-height: 19px;
      text-align: center;
    }
    .card-panel-mark {
      font-family: "Microsoft YaHei";
      font-size: 32px;
      color: rgba(91, 139, 247, 1);
    }
  }
  .card-panel-right {
    float: right;
    padding-right: 20px;

    background: #fff;
  }
}

.person-panel .card-panel {
  box-shadow: none !important;
  border: none;
}
.video-player .video-js {
  height: 100%;
}
.jc-h3-text {
  margin: 0;
  padding: 18px;
  padding-top: 24px;
  color: #333;
}
</style>
