<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 List1"  :key="index"  >
              <div id="triangle" style="float:left;"></div><span @click="handledetail(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 List2"  :key="index"  >
              <div id="triangle" style="float:left;"></div><span @click="handledetail(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="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-row>
      </el-tab-pane>
      <el-tab-pane label="贸易粮交易规则" name="third">
        <ul>
         <li class="clearFloat" v-for="(item,index) in List3"  :key="index"  >
              <div id="triangle" style="float:left;"></div><span @click="handledetail(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="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-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { selectTransactionInfoNoticePageList } from "@/api/grainCirculationPrice/tradingCenter/tradeBulletin";

export default {
  data() {
    return {
      activeName: "first",
      List1: [],
      List2:[],
      List3:[],
      pageForm1: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      pageForm2: {
        page: 1,
        size: 10,
        total: 0
      },
      pageForm3: {
        page: 1,
        size: 10,
        total: 0
      }
    };
  },
  methods: {
    handleSizeChange(val) {
        this.pageForm.size = val;
        this.getList();
    },
    handleCurrentChange(val) {
        this.pageForm.page = val;
        this.getList();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getList() {
      let data = {
        wjlx: 1,
        wjlxmc: "国家政策粮食交易规则",
        pageNum: this.pageForm1.pageNum,
        pageSize: this.pageForm1.pageSize
      }
      selectTransactionInfoNoticePageList(data).then(res => {
        if (res.infoCode == 200) {
          this.List1 = res.data.list;
          this.pageForm1.total = res.data.total;
          console.log(this.List1,'List1的数据')
        }
      });
      selectTransactionInfoNoticePageList({
        wjlx: 2,
        wjlxmc: "地方政策粮食交易规则",
        pageNum: this.pageForm2.page,
        pageSize: this.pageForm2.size
      }).then(res => {
        if (res.infoCode == 200) {
          this.List2 = res.data.list;
          this.pageForm2.total = res.data.total;
        }
      });
      selectTransactionInfoNoticePageList({
        wjlx: 3,
        wjlxmc: "贸易粮交易规则",
        pageNum: this.pageForm3.page,
        pageSize: this.pageForm3.size
      }).then(res => {
        if (res.infoCode == 200) {
          this.List3 = res.data.list;
          this.pageForm3.total = res.data.total;
        }
      });
    },
    handledetail(val){
        this.$router.push({
        path: "/circulate/tradingCenter/tradeBulletin/detail",
        query:{id:val.ggbm}
      });
    }
  },
  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;
}
.hand{
    
}
</style>