<template>
  <div class="app-container">
        <div v-if="isAdmin">
            <div class="filter-container" style="display: block;">
                <div class="container_item" style="margin-bottm:4px;">
                    <span class="item_text" style="padding-left: 26px;">{{$t('table.status')}}：</span>
                    <p class="status_span">
                        <span :class="status==1?'cur':''" @click="statusClick(1)">全部</span>
                        <span :class="status==2?'cur':''" @click="statusClick(2)">流转中</span>
                        <span :class="status==3?'cur':''" @click="statusClick(3)">已完成</span>
                    </p>
                </div>
                <div class="container_item" style="margin-bottm:4px;">
                    <span class="item_text">{{$t('workflow.busNumber')}}：</span>
                    <el-input v-model="query.title"  class="filter-item input_item"  />
                </div>
                <div class="filter-container">
                    <div class="container_item">
                        <span class="item_text">{{$t('workflow.functionName')}}：</span>
                        <el-input v-model="query.title"  class="filter-item input_item"  />
                    </div>
                    <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
                        {{ $t('table.search') }}
                    </el-button>
                </div>
                </div>
                <div class="wrapper_table">
                <el-table
                    :data="tableData"
                    stripe
                    highlight-current-row
                    style="width: 100%;"
                    :header-cell-class-name="headerStyle"
                    :max-height="tableHeight"
                >
                    <el-table-column prop="" :label="$t('workflow.busNumber')"  align="left"></el-table-column>
                    <el-table-column prop="" :label="$t('workflow.modular')" align="left"></el-table-column>
                    <el-table-column prop="" :label="$t('workflow.functionName')"  align="left"></el-table-column>
                    <el-table-column prop="" :label="$t('workflow.state')"  align="left"></el-table-column>
                    <el-table-column prop="" :label="$t('workflow. userName')" align="left"> </el-table-column>
                    <el-table-column prop="" :label="$t('workflow.saveTime')"  align="left"></el-table-column>
                    <el-table-column prop="" :label="$t('workflow. courseTime')" align="left"> </el-table-column>
                    <el-table-column prop="" :label="$t('workflow. node')" align="left"> </el-table-column>
                </el-table>
            </div>
        </div>
        <div>
            <div class="filter-container">
                <div class="container_item">
                    <span class="item_text">{{$t('workflow.functionName')}}：</span>
                    <el-input v-model="query.title"  class="filter-item input_item"  />
                </div>
                <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
                    {{ $t('table.search') }}
                </el-button>
                <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-reset" @click="query={};handleSearch()">
                    {{ $t('table.reset') }}
                </el-button>
            </div>
            <p class="tab_title_span">
                <span>{{$t('workflow.busNumber')}}</span>
                <span>{{$t('workflow.functionName')}}</span>
                <span>{{$t('workflow. userName')}}</span>
                <span>{{$t('workflow.saveTime')}}</span>
            </p>
            <div class="list_tab">
                <div class="list_item">
                    <p class="item_left">
                        <span>等待时间</span>
                        <span>23h</span>
                    </p>
                    <div class="item_span">
                        <span>323</span>
                        <span>3434</span>
                        <span>343</span>
                        <span>343</span>
                    </div>
                    <div class="item_but">
                        <span class="span1">查看流程</span>
                        <span class="span2">去处理</span>
                    </div>
                </div>
                <div class="list_item">
                    <p class="item_left">
                        <span>等待时间</span>
                        <span>23h</span>
                    </p>
                    <div class="item_span">
                        <span>323</span>
                        <span>3434</span>
                        <span>343</span>
                        <span>343</span>
                    </div>
                    <div class="item_but">
                        <span class="span1">查看流程</span>
                        <span class="span2">去处理</span>
                    </div>
                </div>
            </div>
        </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import http from '@/api/http'

export default {
  name: '',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      total: 0,
      query: {},
      tableHeight: 0,
      tableData:[],
      pageNum:1,
      pageSize:20,
      currentType:'1',
      status:'1',
      isAdmin:false
    }
  },
  watch: {
      $route(){
        this.getClassify()
      },
  },
  created() {
    this.getClassify()
  },

  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {
    getClassify(){
      this.tableData = []
      this.total = 0;
      this.pageNum = 1;
      switch (this.$route.path) {
          case '/grouplimit': this.currentType = '1'; break;
          case '/nongrouplimit':this.currentType = '2';break;
          default: break;
      }
    //   this.getData();
    },
    getData(){
      let url = ''
      if(this.currentType==1){
        url = '/cust/queryGroupLists'
      }else{
        url = '/cust/queryLists'
      }
      http.post(url,{cpage:this.pageNum,pageSize:this.pageSize}).then((res)=>{
        this.tableData = res.data.list;
        this.total = res.data.total || 0;
      }).catch(err=>{});
    },

    handleSearch(){
      this.pageNum = 1
      this.getData()
    },
    details(id,operation){
      this.$router.push({
          name: 'quotauntree',
          query: {id,type:this.currentType,operation}
      })
    },
    headerStyle() {
      return 'tableStyle'
    },
    handleDelete(){

    },
    statusClick(a){
        this.status = a
    }
  }
}
</script>
<style scoped lang='scss'>
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
.but_list{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .but-item{
    display: flex;
    align-items: center;
    margin-right: 6px;
    cursor: pointer;
    img{
      width: 12px;
      height: 14px;
    }
    span{
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3D5596;
      margin-left: 2px;
    }
  }
}
.status_span{
    span{
        display: inline-block;
        width: 64px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        // background: #227CC8;
        // border-radius: 2px;
        font-size: 13px;
        font-family: "SourceHanSansCN";
        font-weight: bold;
        color: #0B4D8F;

    }
    span.cur{
        background: #227CC8;
        border-radius: 2px;
        color: #FFFFFF;
    }
}
.tab_title_span{
    width: 100%;
    padding-left: 150px;
    padding-right: 250px;
    margin: 0;
    span{
        display: inline-block;
        width: 25%;
        font-size: 14px;
        font-family: "SourceHanSansCN";
        font-weight: 500;
        color: #212121;
    }
}
.list_tab{
    .list_item{
        margin-top: 10px;
        display: flex;
        height: 70px;
        background: #FFFFFF;
        border-radius: 4px;
        .item_left{
            padding: 0;
            margin: 0;
            width: 80px;
            margin-right: 70px;
            height: 70px;
            // line-height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background: rgba(228,81,65, .1);
            span{
                display: inline-block;
                width: 100%;
                text-align: center;
                color: #E45141;
            }
        }
        .item_span{
            flex: 1;
            span{
                width: 25%;
                display: inline-block;
                line-height: 70px;
            }
        }
        .item_but{
            width: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            .span1{
                width: 68px;
                height: 24px;
                background: rgba(86,131,211, .16);
                border-radius: 4px;
                display: inline-block;
                text-align: center;
                line-height: 24px;
                font-size: 12px;
                font-family: "SourceHanSansCN";
                font-weight: bold;
                color: #5683D3;
            }
            .span2{
                width: 68px;
                height: 24px;
                background: rgba(228,81,65, .2);
                border-radius: 4px;
                display: inline-block;
                text-align: center;
                line-height: 24px;
                color: #E45141;
                font-size: 12px;
                font-family: "SourceHanSansCN";
                font-weight: bold;
                margin-left: 20px;
            }
        }
    }
}
</style>
<style lang="css">
  .dialog_top  .el-input__inner{
    width: 184px !important;
    box-shadow:0px -1px 2px 0px rgb(0 0 0 / 40%) !important;
    border-radius:2px !important;
  }

</style>
