<template>
    <div class="benchWarp">
      <!-- top -->
      <div class="benchTop">
        <!-- 合作企业概况 -->
        <div class="bgWhite survey">
          <div class="title">合作企业概况</div>
          <div class="content">
            <div class="box" v-for="item in survey" :key="item.title">
              <p class="surveyTitle">{{item.title}}</p>
              <p class="surveyNum">{{negativeTurnZero(item.num)}}</p>
              <button class="lookDetail" @click="goEnterprise(item)">查看明细</button>
            </div>
          </div>
        </div>
        <!-- 待处理事项 -->
        <div class="bgWhite pending">
          <div class="title">待处理事项</div>
          <div class="content">
            <div class="box" v-for="item in pending" :key="item.title">
              <p class="pendingTitle">{{item.title}}</p>
              <p class="pendingNum">{{negativeTurnZero(item.num)}}</p>
              <button class="lookDetail" @click="goTask(item)">去跟进</button>
            </div>
          </div>
        </div>
      </div>
      <!-- bottom -->
      <div class="benchBottom">
        <!-- 邀请码动态 -->
        <div class="bgWhite invitationCode">
          <div class="title">邀请码动态</div>
          <div style="height: 19px;"></div>
          <bench :table-data="benchData" :total="total" :width="tableWidth" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></bench>
        </div>
        <!-- 在线客服 -->
        <div class="tips">
          <div class="bgWhite customerService">
            <div class="title">在线客服</div>
            <div class="customerContent">
              <div class="img"></div>
              <div class="font">
                <p>扫码在线咨询</p>
                <div style="height: 10px;"></div>
                <p>周一至周六 9:00-18:00</p>
              </div>
            </div>
          </div>
          <!-- 消息中心 -->
          <div class="bgWhite tip">
            <div class="tipTop">
              <div class="title">客户消息</div>
              <div class="more" @click="goUrl('/tenant/news/index')">更多></div>
            </div>
            <div style="height: 9px;"></div>
            <div v-if="manage.length === 0" style="text-align: center;color: #909399;height: 276px;line-height: 276px;">暂无数据</div>
            <div v-else class="tipListBox">
              <div v-for="item in manage" :key="item">
                <p @click="lookNews(item)" style="cursor:pointer;">[<span>{{item.categoryName}}</span>] {{item.title}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-drawer
        title="查看"
        :with-header="false"
        :visible.sync="drawer"
        :direction="direction"
        :size="drawerSize">
        <div v-html="content">
        </div>
      </el-drawer>

      <!-- 占位 -->
      <div style="height: 35px;"></div>
    </div>
</template>

<script>
  import bench from "./table/bench";
  import {getWorkbenchCompanySurveyVO, getMissionTodoVO, getinviteDynamicVOList} from '@/api/workstation/workbench'
  import { getList } from "@/api/tenant/notice";
  import { getNotice } from "@/api/desk/notice";
  import {setStore} from '@/util/store'
  import { negativeTurnZero } from "@/util/validate";
  export default {
    name: "index",
    components: {bench},
    data() {
        return {
          drawer: false,
          direction: 'rtl',
          drawerSize: '1000px',
          content: '',
          tableWidth: 100+'%',
          current: 1,
          size: 10,
          total: 0,
          survey: [
            {
              title: '绑定企业',
              num: 0,
              status: 2
            },
            {
              title: '审核中企业',
              num: 0,
              status: 1
            },
            {
              title: '已开户企业',
              num: 0,
              status: 2
            },
          ],
          pending: [
            // {
            //   title: '逾期未支付任务',
            //   num: 0,
            //   status: 2,
            //   url: '/workstation/task/index'
            // },
            {
              title: '逾期未支付的服务费订单',
              num: 0,
              status: 1,
              url: `/workstation/orderGoods/index?jlStatus=jlStatus`
            },
            {
              title: '超30天未发任务',
              num: 0,
              status: 1,
              url: '/workstation/task/index'
            },
          ],
          manage: [],
          benchData: []
        }
    },
    async created() {
      await this.getWorkbenchCompanySurveyVO()
      await this.getMissionTodoVO()
      await this.getinviteDynamicVOList()
      await this.newsInit()
    },
    mounted() {
      this.tableWidth = document.getElementsByClassName('benchWarp')[0].clientWidth - 305 + 'px'
    },
    methods: {
      negativeTurnZero,
      lookNews (item) {
        getNotice(item.id).then((res) => {
          const data = res.data.data;
          this.drawer = true
          this.content = data.content
        });
      },
      newsInit() {
        var userType = 3
        if (this.loginType === 'Type-T') {
          userType = 1
        } else if (this.loginType === 'Type-S') {
          userType = 3
        }
        getList(
          1,
          10,
          {},
          userType
        ).then((res) => {
          this.manage = res.data.data.records;
        });
      },
      goUrl (url) {
        this.$router.push(url)
      },
      getinviteDynamicVOList () {
        var params = {
          current: this.current,
          size: this.size
        }
        getinviteDynamicVOList(params).then(res => {
          this.benchData = res.data.data.records
          this.total = res.data.data.total
        })
      },
      getWorkbenchCompanySurveyVO(){
        getWorkbenchCompanySurveyVO().then(e => {
          this.survey[0].num = e.data.data.bind
          this.survey[1].num = e.data.data.examine
          this.survey[2].num = e.data.data.openAccount
        })
      },
      getMissionTodoVO(){
        getMissionTodoVO().then(e => {
          this.pending[0].num = e.data.data.overdueInsure
          this.pending[1].num = e.data.data.missionBeforeMarch
        })
      },
      goTask(item){
        setStore({name: 'taskStatus', content: item.status, type: 'session'})
        this.$router.push(item.url)
      },
      goEnterprise (item){
        setStore({name: 'enterpriseStatus', content: item.status, type: 'session'})
        this.$router.push('/workstation/enterprise/index')
      },
      handleSizeChange(val){
        this.size = val
        this.getinviteDynamicVOList()
      },
      handleCurrentChange(val) {
        this.current = val
        this.getinviteDynamicVOList()
      }
    }
  }
</script>

<style scoped>
  p{
    margin: 0 !important;
  }
  /* 底色 */
  .bgWhite{
    background: #FFFFFF;
  }
  /* 标题 */
  .title{
    font-weight: bold;
    height: 30px;
    font-size: 22px;
    color: #333333;
    line-height: 30px;
  }
  .benchWarp{
    padding: 0 20px !important;
    margin-top: 4px;
  }
  .benchTop{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .survey, .pending{
    flex: 1;
    padding: 10px;
    border-radius: 4px;
  }
  .survey{
    margin-right: 10px;
  }
  .pending{
    margin-left: 10px;
  }
  .content{
    display: flex;
    justify-content: space-around;
    padding: 0 30px;
  }
  .content .box{
    text-align: center;
  }
  .content .box .surveyTitle, .pendingTitle{
    /*width: 71px;*/
    height: 25px;
    font-size: 18px;
    /*font-family: Alibaba-PuHuiTi-R, Alibaba-PuHuiTi;*/
    font-weight: normal;
    color: #333333;
    line-height: 25px;

    /*font-size: 13px;*/
    /*color: #999999;*/
    margin-top: 30px !important;
  }
  .content .box .surveyNum, .pendingNum{
    /*width: 36px;*/
    height: 42px;
    font-size: 30px;
    /*font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;*/
    font-weight: normal;
    color: #333333;
    line-height: 42px;


    /*font-size: 16px;*/
    /*font-weight: 650;*/
    margin: 15px 0 !important;
  }

  .content .box .lookDetail{
    font-size: 18px;
    /*font-family: Alibaba-PuHuiTi-R, Alibaba-PuHuiTi;*/
    font-weight: normal;
    color: #3F9EFF;
    line-height: 25px;
    width: 119px;
    height: 39px;
    border-radius: 4px;
    border: 1px solid #3F9EFF;


    /*color: #999999;*/
    /*border: 1px solid #999999;*/
    background: #FFFFFF;
    /*border-radius: 10px;*/
    /*font-size: 12px;*/
  }
  .content .box .goJob{
    width: 80px;
    height: 20px;
    color: #0066FF;
    border: 1px solid #0066FF;
    background: #FFFFFF;
    border-radius: 10px;
    font-size: 12px;
  }

  .benchBottom{
    display: flex;
  }
  .invitationCode{
    width: calc(100% - 550px);
    padding: 18px 30px;
    border-radius: 4px;
  }
  .tips{
    width: 250px;
    margin-left: 15px;
  }
  .customerService{
    width: 414px;
    /*height: 224px;*/
    background: #FFFFFF;
    border-radius: 4px;

    /*height: 120px;*/
    margin-bottom: 20px;
    padding: 18px 30px;
  }
  .customerService .customerContent{
    display: flex;
    align-items: center;
    height: 100%;
  }
  .customerService .customerContent .img{
    width: 115px;
    height: 115px;
    background: #D8D8D8;
    margin-right: 15px;
    margin-top: 20px;
    background: url("/manage/img/kefu.jpg") no-repeat;
    background-size: 115px 115px;
  }
  .customerService .customerContent .font{
    /*width: 96px;*/
    height: 30px;
    font-size: 16px;
    /*font-family: PingFangSC-Regular, PingFang SC;*/
    font-weight: 400;
    color: #333333;
    /*line-height: 30px;*/


    /*font-size: 12px;*/
    /*color: #666666;*/
  }
  .tip{
    padding: 18px 30px;
    width: 414px;
    /*height: 375px;*/
    background: #FFFFFF;
    border-radius: 4px;
  }
  .tip .tipTop{
    display: flex;
    justify-content: space-between;
  }
  .tip .tipTop .more{
    cursor: pointer;
    height: 22px;
    font-size: 16px;
    /*font-family: Alibaba-PuHuiTi-R, Alibaba-PuHuiTi;*/
    font-weight: normal;
    color: #3F9EFF;
    line-height: 22px;
  }
  .tipListBox{
    height: 276px;
    overflow: auto;
  }
  .tipListBox div{
    display: flex;
    margin: 11px 0;
  }
  .tipListBox p{
    width: 400px;
    height: 30px;
    font-size: 16px;
    /*font-family: PingFangSC-Regular, PingFang SC;*/
    font-weight: 400;
    color: #333333;
    line-height: 30px;


    /*margin: 7px 0 !important;*/
    /*font-size: 12px;*/
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .tipListBox span{
    color: #3F9EFF;
  }
</style>
