<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card style="height: 485px !important;">
          <el-card>
            <div slot="header"><span>新增合同套餐</span></div>
            <el-steps :active="active" :align-center="true">
              <el-step title="合同申请">
                <i class="step01" slot="icon"></i>
              </el-step>
              <el-step title="人员上岗">
                <i class="step02" slot="icon"></i>
              </el-step>
              <el-step title="终端申请">
                <i class="step03" slot="icon"></i>
              </el-step>
              <el-step title="堡垒机申请">
                <i class="step04" slot="icon"></i>
              </el-step>
            </el-steps>
          </el-card>
          <el-card>
            <div slot="header"><span>人员离岗套餐</span></div>
            <el-steps :active="active" :align-center="true">
              <el-step title="人员离岗">
                <i class="step01" slot="icon"></i>
              </el-step>
              <el-step title="终端申请">
                <i class="step03" slot="icon"></i>
              </el-step>
              <el-step title="终端申请">
                <i class="step03" slot="icon"></i>
              </el-step>
              <el-step title="堡垒机申请">
                <i class="step04" slot="icon"></i>
              </el-step>
            </el-steps>
          </el-card>
          <el-card>
            <div slot="header"><span>考勤管理套餐</span></div>
            <el-steps :active="active" :align-center="true">
              <el-step title="请假申请">
                <i class="step01" slot="icon"></i>
              </el-step>
              <el-step title="加班申请">
                <i class="step03" slot="icon"></i>
              </el-step>
              <el-step title="我的考勤">
                <i class="step04" slot="icon"></i>
              </el-step>
            </el-steps>
          </el-card>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card style="height: 485px !important;">
          <div class="flexbox" style="height: 150px;">
            <div class="flexitem bg01">
              <div class="itemname">合同总数</div>
              <div class="itemvalue">{{ contractInfo.contract_cnt ? contractInfo.contract_cnt : 0 }}<span class="itemunit">个</span></div>
            </div>
            <div class="flexitem bg01">
              <div class="itemname">合同金额</div>
              <div class="itemvalue">{{ contractInfo.amount ? contractInfo.amount : 0 }}<span class="itemunit">万元</span></div>
            </div>
            <div class="flexitem bg01">
              <div class="itemname">单位总数</div>
              <div class="itemvalue">{{ contractInfo.company_cnt ? contractInfo.company_cnt : 0  }}<span class="itemunit">个</span></div>
            </div>
            <div class="flexitem bg01">
              <div class="itemname">人员总数</div>
              <div class="itemvalue">{{ contractInfo.person_cnt ? contractInfo.person_cnt: 0 }}<span class="itemunit">个</span></div>
            </div>
          </div>
          <div class="flexbox" style="height: 150px;">
            <div v-if="idx < 4" class="flexitem" v-for="(item,idx) in checkOnList" :class="item.className" style="width: 200px !important;">
              <div class="itemname">{{ item.name }}</div>
              <div class="itemvalue">{{ item.value }}<span class="itemunit">{{ item.unit }}</span></div>
            </div>
          </div>
          <div class="flexbox" style="height: 150px;">
            <div v-if="idx >= 4" class="flexitem" v-for="(item,idx) in checkOnList" :class="item.className" style="width: 200px !important;">
              <div class="itemname">{{ item.name }} </div>
              <div class="itemvalue">{{ item.value }}<span class="itemunit">{{ item.unit }}</span></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>我的待办</span>
            <el-link @click="showWaitInfo()" style="float: right;">更多</el-link>
          </div>
          <el-table :data="myWaitData">
            <el-table-column prop="WF_NUM" label="工单编号" width="220"/>
            <el-table-column prop="TITLE" label="工单标题">
              <template slot-scope="scope">
                <a class="content" @click="showWaitInfo(scope.row)">{{scope.row.TITLE}}</a>
              </template>
            </el-table-column>
            <el-table-column prop="PROCESSNAME" label="流程类型" width="150"/>
            <el-table-column prop="date" label="待办类型" width="150">
              <template slot-scope="scope">
                {{scope.row.TASK_TYPE == 'PERSONAL' ? '个人待办':'组内待办'}}
              </template>
            </el-table-column>
            <el-table-column prop="ACTIVITYNAME" label="当前阶段" width="150"/>
            <el-table-column prop="CREATERNAME" label="发起人" width="150"/>
            <el-table-column prop="SHEETCREATETIME" label="创建时间" width="150"/>
            <el-table-column prop="TASKCREATETIME" label="到达时间" width="150"/>

          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { leaderContractInfo,getMyWaitTask ,getCheckonCount} from "@/api/home/home";
  import Cookies from 'js-cookie';


  export default {
    dicts: ['ddic_contract_type', 'ddic_contract_status', 'ddic_contract_class'],
    name: "partyB",
    data() {
      return {
        active:0,
        searchBox:false,
        loading: true,
        dateValue: [],
        // 查询参数
        queryParams: {
          status: '1',//合同状态
          beginTime: null,
          endTime: null
        },
        myWaitData:[],
        checkOnList:[],
        contractInfo: {
          amount : 0,
          company_cnt: 0,
          contract_cnt : 0,
          person_cnt : 0
        }
      }
    },
    created() {
      this.getContractInfo();
      this.getCheckOnList();
      this.getMyWaitTask();
    },
    mounted() {

    },
    methods: {

      showSearch(){
        this.searchBox = !this.searchBox
      },
      getCheckOnList() {
        this.queryParams.beginTime = this.dateValue.length == 0 ? '' : this.dateValue[0];
        this.queryParams.endTime = this.dateValue.length == 0 ? '' : this.dateValue[1];
        getCheckonCount(this.queryParams).then(response => {
          this.checkOnList = response.data.topShowList;
        })
      },
      getContractInfo(){
        this.queryParams.beginTime = this.dateValue.length == 0 ? '' : this.dateValue[0];
        this.queryParams.endTime = this.dateValue.length == 0 ? '' : this.dateValue[1];
        leaderContractInfo(this.queryParams).then(resp => {
          this.contractInfo = resp.data;
        });
      },

      getMyWaitTask(){
        let obj = {
          type:"myAllTask",
          currentPage:1,
          pageLimit:5,
          userName: Cookies.get("username")
        };
        getMyWaitTask(obj).then(rep => {
          console.log(rep.data,"------------getCheckOnList1-----")
          this.myWaitData = rep.data;
        });

      },

      // 搜索
      handleQuery() {
        this.getContractInfo();
        this.getCheckOnList();
      },
      // 重置
      resetQuery() {
        this.resetForm("queryForm");
        this.dateValue = [];
        this.queryParams.endTime = undefined;
        this.handleQuery();
      },
      showWaitInfo(){
        this.$router.push("/workflow/myOrder");
      }
    }
  }
</script>
<style scoped>

  ::v-deep .el-descriptions-item__label {
    width: 110px;
  }

  .chartsbox {
    width: 100%;
    height: 225px;
  }

  ::v-deep .el-descriptions-item__content {
    overflow: hidden;
    /* 确保超出的内容会被隐藏 */
    /* white-space: nowrap; */
    /* 确保文本在一行内显示，避免换行 */
    text-overflow: ellipsis;
    /* 使用省略号表示超出的文本 */
  }

  .card-box {
    padding-left: 5px;
    padding-right: 5px;
  }

  a:hover{
    color: #0193f4;
  }


  .flexbox {
    display: flex;
    justify-content: space-between
  }

  .flexitem {
    flex: 1;
    height: 100px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 4px 5px 5px -4px rgba(204, 204, 204, 0.5)
  }

  .itemname {
    font-size: 18px;
    font-weight: 600;
    color: #656565;
    padding-left: 15px;
    padding-top: 15px;
    text-align: left !important;
  }

  .itemvalue {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    height: 55px;
    line-height: 55px;
  }

  .itemunit {
    color: #666;
    font-size: 18px;
    margin-left: 7px;
  }

  .bg01 {
    background: linear-gradient(to top right, rgb(255, 255, 255), rgb(38, 105, 250));
  }

  .bg02 {
    background: linear-gradient(to top right, rgb(255, 255, 255), rgb(133, 196, 255));
  }

  .bg03 {
    background: linear-gradient(to top right, rgb(255, 255, 255), rgb(42, 140, 252));
  }
  .content {
    overflow: hidden;
    /* 确保超出的内容会被隐藏 */
    white-space: nowrap;
    /* 确保文本在一行内显示，避免换行 */
    text-overflow: ellipsis;
    /* 使用省略号表示超出的文本 */
  }


  .step01, .step02, .step03, .step04{
    width: 35px;
    height: 35px;
    background-size: 100% 100%;
  }
  .step01{
    background-image: url("../../assets/images/htsq.png");
  }
  .step02{
    background-image:  url("../../assets/images/rysg.png");
  }
  .step03{
    background-image:  url("../../assets/images/zdsq.png");
  }
  .step04{
    background-image:  url("../../assets/images/bljsq.png");
  }
  ::v-deep .el-step__icon.is-text{
    border: none !important;
  }
  ::v-deep .el-step__icon{
    width: 35px !important;
    height: 35px !important;
  }
  ::v-deep .el-step.is-horizontal .el-step__line{
    top: 20px !important;
  }


</style>