<template>
    <section class="homeGT">
        <div class="htaTitle"><span class="TitleTab"><em v-for='(item,index) in titleArr' :key='index' @click='titleClick(item,index)' :class='inx==index?"active":""'>{{item.name}}</em></span><span class="more" @click='more'>查看更多>></span></div>
        <div class="htaBox">
            <div class="tableContent" v-if="type==1">
                <el-scrollbar>
                 <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="item_meetingdate"
                    label="日期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="item_meetingweek"
                    label="星期"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="item_meetingtime"
                    label="时段">
                </el-table-column>
                <el-table-column
                    prop="item_meetingsite"
                    label="地点">
                </el-table-column>
                 <el-table-column
                    prop="item_meetingtype"
                    label="会议类型">
                </el-table-column>
                 <el-table-column
                    prop="item_meetingdetails"
                    show-overflow-tooltip
                    label="会议内容">
                </el-table-column>
                 <el-table-column
                    prop="item_compere"
                    label="主持人">
                </el-table-column>
                 <el-table-column
                    prop="item_participant"
                    label="参加人员">
                </el-table-column>
                 <el-table-column
                    prop="item_remark"
                    show-overflow-tooltip
                    label="备注">
                </el-table-column>
                 </el-table>
                 </el-scrollbar>
            </div>
            <div class="tableContent" v-if="type==2">
                 <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="item_num"
                    label="序号"
                    width="50">
                </el-table-column>
                 <el-table-column
                    prop="item_task_name"
                    show-overflow-tooltip
                    label="任务名称">
                </el-table-column>
                <el-table-column
                    prop="item_per_name"
                     width="80"
                    label="责任人">
                </el-table-column>                
                <el-table-column
                    prop="item_departname"
                     width="80"
                    label="责任部门">
                </el-table-column> 
                <el-table-column
                    prop="item_granttime"
                    label="发放时间"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="item_completetime"
                    width="100"
                    label="完成时限">
                </el-table-column>                
                <el-table-column
                    prop="item_progress"
                    width="100"
                    label="任务进度">
                     <template slot-scope="scope">
                        <span><el-progress :percentage="scope.row.item_progress"></el-progress></span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="item_remark"
                    show-overflow-tooltip
                    width='200'
                    label="备注">
                </el-table-column>
                 </el-table>
            </div>
        </div>
    </section>
</template>
<script>
export default {
    data(){
        return{
          titleArr:[
              {name:'信息化会议',type:1},
              {name:'年度工作要点',type:2},
          ],
          inx:0,
          params:{//搜索条件
            pageIndex:1,
            pageSize:3,
            total:0
          },
          type:1,
          tableData:[],
          tableData2:[],
        }
    },
    mounted() {
        this.xxhlist()
        this.ndgzydlist()
    },
    methods: {
        titleClick(item,index){
           this.inx=index
           this.type=item.type
        },
        xxhlist(){
            this.$api.xxhlistApi(this.params,{
                onSucess: response => {
                    console.log(response)
                    this.tableData=response.data.data
                }
            })            
        },
        ndgzydlist(){
            this.$api.ndgzydlistApi(this.params,{
                onSucess: response => {
                    console.log(response)
                    this.tableData2=response.data.data
                }
            })            
        },
        more(){
            if(this.type==1){
                 let appId='__BW3MQkflZe4tN0xxpJZ'
                let name='信息化会议'
                let flag=1
                this.$store.dispatch("loadMenus", {appId, name,flag});
            }else if(this.type==2){
                let appId='__2oNwctJi6ZtNyy6reZt'
                let name='年度工作要点'
                let flag=1
                this.$store.dispatch("loadMenus", {appId, name,flag});
            }           
        },
    },
}
</script>
<style lang="scss" scoped>
.homeGT{
    display: flex; 
    flex-direction: column;
    .htaTitle{
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        padding: 16px;
        display: flex;
        align-items: center;
        .TitleTab{
          flex:1;
          em{
              margin-right: 15px;
              font-size: 16px;
              padding-bottom:16px;
              cursor: pointer;
              &.active{
                 border-bottom: 1px solid #0076f6;  
                 color: #0076f6;
              }
          }
        }
        .more{
            flex-wrap: 150px;
            font-size: 14px;
            cursor: pointer;
        }
    }
    .htaBox{
        padding: 16px 0 16px 16px;
        ul{
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            
            li{
                background: #fff;
                width: 140px;
                height: 100px;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                padding: 16px;
                margin-right:16px;
                margin-bottom: 16px;
                align-items: center;
                text-align: center;
                span{
                  margin-bottom: 8px;  
                   img{
                     width: 48px;
                     height:48px;
                   }
                   strong{                      
                       color: rgba(0, 0, 0, 0.85);
                       font-size: 14px;
                       font-weight: normal;
                   }
                }
            }
        }
    }

   
}
</style>
