<template>
    <div>
        <el-input size="mini" v-model="msg.Name" placeholder="根据名称搜索" :clearable="true"
                    @clear="getList" @keyup.enter.native="getList">
            <el-button slot="append" @click="getList">搜索</el-button>
        </el-input>
        <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50px">
            </el-table-column>
            <el-table-column label="ID" width="100px">
                <template slot-scope="scope">{{ scope.row.Id }}</template>
            </el-table-column>
            <el-table-column prop="name" label="名称">
                <template slot-scope="scope">
                    <div flex="cross:center dir:left">
                        <img style="width:50px;height:50px;margin-right:10px;" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+scope.row.CoverImage"/>
                        <div>{{ scope.row.Name }}</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="text-align:right"
        background
        @current-change="handleCurrentChange"
        :page-size="msg.pageSize"
        layout="prev, pager, next"
        :total="total">
        </el-pagination>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        dataList: [],
        msg:{
            pageIndex:1,
            pageSize:15,
            Name:'',
        },
        total:0,
        selectRow:[],
      };
    },
    created() {},
    methods: {
      //获取所有菜单
      getList() {
        this.apipost("/api/product/GetProductGoodsDialogList", this.msg, res => {
          if (res.data.resultCode == 1) {
            console.log(res,'res');
            this.total=res.data.data.count;
            this.dataList=res.data.data.pageData;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      handleSelectionChange(val){
        this.selectRow=JSON.parse(JSON.stringify(val));
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //父组件调用方法
      getChoicedGoods(){
        return this.selectRow;
      },
      //清空多选方法
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },  
    },
    mounted() {
      this.getList();
    }
  };

</script>
