<template>
    <div class="content-main">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="国家政策粮食交易结果" name="first">
                <ul >
                    <li class="clearFloat" v-for="(item,index) in tableOne"  :key="index"  >
                        <div id="triangle" style="float:left;"></div><span @click="showInfo(item,index)">{{item.wjmc}}</span><span style="float:right;">{{item.fbsj}}</span>
                    </li>
                </ul>
                <el-row>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageForm1.page"
                        :page-sizes="[10,20,30,40]"
                        :page-size="pageForm1.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageForm1.total"
                    ></el-pagination>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="地方政策粮食交易结果" name="second">
                <ul>
                    <li class="clearFloat" v-for="(item,index) in tableTwo" :key="index">
                       <div id="triangle" style="float:left;"></div> <span  @click="showInfo(item,index)"  >{{item.wjmc}}</span><span style="float:right;">{{item.fbsj}}</span>
                    </li>
                </ul>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageForm2.page"
                    :page-sizes="[10,20,30,40]"
                    :page-size="pageForm2.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageForm2.total"
                ></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="贸易粮交易结果" name="third">
                <ul>
                    <li class="clearFloat" v-for="(item,index) in tableThree" :key="index">
                       <div id="triangle" style="float:left;"></div> <span  @click="showInfo(item,index)" >{{item.wjmc}}</span><span style="float:right;" >{{item.fbsj}}</span>
                    </li>
                </ul>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageForm3.page"
                    :page-sizes="[10,20,30,40]"
                    :page-size="pageForm3.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageForm3.total"
                ></el-pagination>
            </el-tab-pane>
     
        </el-tabs>
    </div>
</template>
<script>
import {getBrand} from '@/api/grainCirculationPrice/tradingCenter/transactionDisplay/index'
  export default {
    data() {
      return {
        activeName: 'first',
        tabLabel:1,
        pageForm1: {
            page: 1,
            size: 10,
            total: 0
        },
         pageForm2: {
            page: 1,
            size: 10,
            total: 0
        },
         pageForm3: {
            page: 1,
            size: 10,
            total: 0
        },
        tableModel:[],
        tableOne:[],
        tableTwo:[],
        tableThree:[]
      };
    },
    methods: {
        handleCurrentChange(val) {
            this.pageForm.page = val;
            this.getList();
        },
        handleSizeChange(val) {
            this.pageForm.size = val;
            this.getList();
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
    //   handleClick(tab, event) {
    //       this.wjlxmc = tab.label
    //     if(tab.label == '国家政策粮食交易结果'){
    //         this.tabLabel = 1
    //         this.pageForm1.total = res.data.total;
    //         this.getList(tab.label)
    //     }if(tab.label == '地方政策粮食交易结果'){
    //         this.tabLabel = 2
    //         this.pageForm2.total = res.data.total;
    //         this.getList()
    //     }if(tab.label == '贸易粮交易结果'){
    //         this.tabLabel = 3
    //         this.pageForm3.total = res.data.total;
    //         this.getList()
    //     }
    //   },
    getList() {
      let data = {
        wjlx: 1,
        wjlxmc: "国家政策粮食交易结果",
        pageNum: this.pageForm2.page,
        pageSize: this.pageForm2.size
      }
      getBrand(data).then(res => {
            console.log(res,123)

        if (res.infoCode == 200) {
          this.tableOne = res.data.data.list;
          this.pageForm1.total = res.data.total;
          console.log(this.tableOne,'tableOne的数据')
        }
      });
      getBrand({
        wjlx: 2,
        wjlxmc: "地方政策粮食交易结果",
        pageNum: this.pageForm2.page,
        pageSize: this.pageForm2.size
      }).then(res => {
        if (res.infoCode == 200) {
          this.tableTwo = res.data.data.list;
          this.pageForm2.total = res.data.total;
        }
      });
      getBrand({
        wjlx: 3,
        wjlxmc: "贸易粮交易结果",
        pageNum: this.pageForm3.page,
        pageSize: this.pageForm3.size
      }).then(res => {
        if (res.infoCode == 200) {
          this.tableThree = res.data.data.list;
          this.pageForm3.total = res.data.total;
        }
      });
    },


    //   //获取详情
    //   getList(label){
    //     let data = {
    //         wjlxmc:label,
    //         pageNum:this.pageForm.page,
    //         pageSize:this.pageForm.size,
    //         wjlx:'国家政策粮食交易结果'
    //     }
    //     getBrand(data).then(res => {
    //         console.log(res.data,"数据")
    //         if(this.tabLabel == 1){
    //             this.tableOne = res.data.list
    //             // this.pageForm1.total = res.data.total;
    //             console.log(this.pageForm1)
    //         }if(this.tabLabel == 2){
    //             this.tableTwo = res.data.list
    //             // this.pageForm2.total = res.data.total;
    //         }if(this.tabLabel == 3){
    //             this.tableThree = res.data.list
    //             // this.pageForm3.total = res.data.total;
    //         }
    //         console.log(res.data.list,"请求后......")
    //     })
    //   },
      //点击跳到首页
      showInfo(item,index) {
          console.log(item,"x点击详情row")
          console.log(index,"点击详情index")
             this.$router.push({
                name: "transactionDisplayDetails",
                query: {
                    cjbm: item.cjbm,
                    indexs:index+1,
                    type: 'show'
                }
            }) 
        },
    },
    created(){
        this.getList()
    }
  };
</script>
<style scoped>

#triangle{
		margin:0 auto;
		width: 0px;
		height: 0px;
        display: inline-block;
		border-top:6px solid transparent;
		border-bottom: 6px solid transparent;
		border-left: 8px solid orange;
        margin-top: 5px;
		border-right:8px  solid transparent;
}
.clearFloat{
    padding: 5px 0px 5px 0px;
    cursor: pointer;

}
</style>