<template>
  <div class="dashboard-container anniu">
    <template>
      <div class="shouye">
        <el-row :gutter="24" class="panel-group">
          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="manager_type != 0">
            <a class="zybq" @click="go_review_master" >
              <div class="card-panel">
                <div class="tpzs" style="position: relative;"><span style="    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(245, 108, 108);
    border-radius: 4px;
    line-height: 2.5rem;
    font-size: 24px;
    text-align: center;
    color: #fff;">{{review_count}}</span></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">{{$t('dashboard.check')}}</div>
                  <div class="card-panel-text2">{{$t('dashboard.task')}}、{{$t('dashboard.event')}}</div>
                </div>
              </div>
            </a>
          </el-col>
          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="is_creator == 0 && settings.enable_modules.indexOf('integral_application') >= 0">
            <IntegralCreateApplicationBtn></IntegralCreateApplicationBtn>
          </el-col>
          <el-col v-if="manager_type > 0" :xs="8" :sm="4" :lg="8" class="card-panel-col">
            <IntegrelCreateReviewBtn></IntegrelCreateReviewBtn>
          </el-col>
          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="settings.enable_modules.indexOf('task_mine') >= 0">
            <a @click="go_task_mine">
              <div class="card-panel">
                <div class="tpzs4"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">{{$t('dashboard.top_task')}}</div>
                  <div class="card-panel-text2">{{$t('dashboard.get_task')}}</div>
                </div>
              </div>
            </a>
          </el-col>




          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="manager_type == 4 && settings.enable_modules.indexOf('pk_master') >= 0">
            <a @click="go_pk">
              <div class="card-panel">
                <div class="tpzs5"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">{{$t('dashboard.pk')}}</div>
                  <div class="card-panel-text2">{{$t('dashboard.pk666')}}</div>
                </div>
              </div>
            </a>
          </el-col>

          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="manager_type < 4 && settings.enable_modules.indexOf('pk_mine') >= 0">
            <a @click="go_pk_mine">
              <div class="card-panel">
                <div class="tpzs5"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">{{$t('dashboard.my_pk')}}</div>
                  <div class="card-panel-text2">{{$t('dashboard.pk666')}}</div>
                </div>
              </div>
            </a>
          </el-col>


          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="manager_type == 4">
            <a @click="go_setting">
              <div class="card-panel">
                <div class="tpzs8"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">{{$t('dashboard.sys_set')}}</div>
                  <div class="card-panel-text2">{{$t('dashboard.sys_set_diy')}}</div>
                </div>
              </div>
            </a>
          </el-col>




          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="manager_type != 0 && settings.enable_modules.indexOf('task_master') >= 0">
           <TaskCreateBtn></TaskCreateBtn>
          </el-col>







          <!-- 员工的按钮 -->

          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="manager_type == 0 && settings.enable_modules.indexOf('integral_application') >= 0">
            <a @click="go_review">
              <div class="card-panel">
                <div class="tpzs9"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">{{$t('dashboard.Petition')}}</div>
                  <div class="card-panel-text2">{{$t('dashboard.point_notes')}}</div>
                </div>
              </div>
            </a>
          </el-col>
          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="manager_type == 0">
            <PointAutoCom></PointAutoCom>
          </el-col>
          <el-col :xs="8" :sm="4" :lg="8" class="card-panel-col" v-if="manager_type == 0">
            <a @click="go_chart_personal">
              <div class="card-panel">
                <div class="tpzs11"></div>
                <div class="card-panel-description">
                  <div class="card-panel-text">{{$t('dashboard.point_total')}}</div>
                  <div class="card-panel-text2">{{$t('dashboard.point_my')}}</div>
                </div>
              </div>
            </a>
          </el-col>



        </el-row>
      </div>
    </template>
















  </div>
</template>
<script>
  import IntegrelCreateReviewBtn from './IntegralCreateReviewBtn'
  import IntegralCreateApplicationBtn from './IntegralCreateApplicationBtn'
  import TaskCreateBtn from './TaskCreateBtn'
  import PointAutoCom from './PointAutoCom'

  export default {
    components: { IntegrelCreateReviewBtn, IntegralCreateApplicationBtn, TaskCreateBtn ,PointAutoCom},
    data() {
      return {
        settings: this.$store.getters.system_setting,
        review_count:0,
        manager_type:this.$store.getters.user_info.manager_type,
        is_creator:this.$store.getters.user_info.is_creator
      }
    },
    methods: {
      loadReviewList: function () {
        let params = {
          reviewer_id: this.$store.getters.user_info.id,
          status: 0,
          page: 1,
          page_size: 10,
          status:'waiting'
        }

        var self = this

        this.$http('get','/integral.php/employee_approve/approve_list',params).then(function (response) {
          if (response.status == 200) {

            var jsonData = response.data;
            try {
              self.review_count = jsonData.data.total_count

            } catch (err) {
              console.log(err)
            }
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      go_review_master() {
        this.$router.replace({
          name: 'review_master'
        })
      },
      go_task_mine() {
        this.$router.replace({
          name: 'task_mine'
        })
      },
      go_pk() {
        this.$router.replace({
          name: 'pk_master'
        })
      },
      go_pk_mine() {
        this.$router.replace({
          name: 'pk_mine'
        })
      },
      go_setting() {
        this.$router.replace({
          name: 'settings'
        })
      },
      go_review() {
        this.$router.replace({
          name: 'integral_application'
        })
      },
      go_chart_personal() {
        this.$router.replace({
          name: 'chart_personal'
        })
      },

    },
    created(){
      this.loadReviewList()
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @media screen and (max-width: 1200px) {
    .anniu {
      height: auto !important;
    }
    .anniu .card-panel-col {
      margin-top: 0 !important;
    }
  }

  .anniu .card-panel-col {
    margin-top: 10px;
  }

  .shouye a {
    display: block;
    margin: 0;
    padding: 20px 0;

    color: rgba(51, 51, 51, 1);
    background: #fff;
    border-radius: 5px;
    border: solid 1px #5b85f7;
  }

  .shouye a:hover {
    display: block;
    border-radius: 5px;
    border: solid 1px #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 2, 12, 0.26);
    -moz-box-shadow: 0 0 10px rgba(0, 2, 12, 0.26);
    box-shadow: 0 0 10px rgba(0, 2, 12, 0.26);
  }

  .shouye .zybq {
    border: solid 1px #f56c6c;
    color: rgba(245, 108, 108, 1) !important;
  }

  .shouye .zybq .card-panel-text2 {
    color: rgba(245, 108, 108, 1) !important;
  }

  .shouye .zybq .card-panel-text {
    color: rgba(245, 108, 108, 1) !important;
  }

  .shouye .panel-group {

    .shouye .card-panel-col {

    }
    .card-panel {
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
    }

    .tpzs {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/sqtb.png);
      background-size: 100%;
    }

    .tpzs2 {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/jfsq.png);
      background-size: 100%;
    }

    .tpzs3 {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/jflr.png);
      background-size: 100%;
    }

    .tpzs4 {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/xsrw.png);
      background-size: 100%;
    }

    .tpzs5 {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/pkjz.png);
      background-size: 100%;
    }

    .tpzs6 {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/fbrw.png);
      background-size: 100%;
    }

    .tpzs8 {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/setting.png);
      background-size: 100%;
    }
    .tpzs9 {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/review.png);
      background-size: 100%;
    }


    .tpzs10 {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/iny.png);
      background-size: 100%;
    }
    .tpzs11 {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url(/images/data.png);
      background-size: 100%;
    }
    .card-panel-icon-wrapper {
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-description {
      width: 100%;
      text-align: center;
      .card-panel-text {
        line-height: 40px;
        font-size: 20px;
        font-weight: bold;
      }

      .card-panel-text2 {
        font-size: 14px;
        line-height: 20px;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
</style>
