<template>
  <div>
		<h2>Custom DataList</h2>
		<DataList style="width:550px;height:250px"
				:data="data"
				selectionMode="single"
				itemCls="dataitem"
        @selectionChange="selection=$event">
			<template slot-scope="scope">
				<div class="product">
					<img :src="getImage(scope.row)">
					<p>{{scope.row.name}}</p>
				</div>
			</template>
		</DataList>
		<p v-if="selection">You selected: {{selection.name}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: this.getData(),
      selection: null
    };
  },
  methods: {
    getImage(row) {
      return (
        "https://www.jeasyui.com/tutorial/datagrid/images/" +
        row.itemid +
        ".png"
      );
    },
    getData() {
      return [
        {
          code: "FI-SW-01",
          name: "Koi",
          unitcost: 10.0,
          status: "P",
          listprice: 36.5,
          attr: "Large",
          itemid: "EST-1"
        },
        {
          code: "K9-DL-01",
          name: "Dalmation",
          unitcost: 12.0,
          status: "P",
          listprice: 18.5,
          attr: "Spotted Adult Female",
          itemid: "EST-2"
        },
        {
          code: "RP-SN-01",
          name: "Rattlesnake",
          unitcost: 12.0,
          status: "P",
          listprice: 38.5,
          attr: "Venomless",
          itemid: "EST-3"
        },
        {
          code: "RP-SN-01",
          name: "Rattlesnake",
          unitcost: 12.0,
          status: "P",
          listprice: 26.5,
          attr: "Rattleless",
          itemid: "EST-4"
        },
        {
          code: "RP-LI-02",
          name: "Iguana",
          unitcost: 12.0,
          status: "P",
          listprice: 35.5,
          attr: "Green Adult",
          itemid: "EST-5"
        },
        {
          code: "FL-DSH-01",
          name: "Manx",
          unitcost: 12.0,
          status: "P",
          listprice: 158.5,
          attr: "Tailless",
          itemid: "EST-6"
        },
        {
          code: "FL-DSH-01",
          name: "Manx",
          unitcost: 12.0,
          status: "P",
          listprice: 83.5,
          attr: "With tail",
          itemid: "EST-7"
        },
        {
          code: "FL-DLH-02",
          name: "Persian",
          unitcost: 12.0,
          status: "P",
          listprice: 23.5,
          attr: "Adult Female",
          itemid: "EST-8"
        },
        {
          code: "FL-DLH-02",
          name: "Persian",
          unitcost: 12.0,
          status: "P",
          listprice: 89.5,
          attr: "Adult Male",
          itemid: "EST-9"
        },
        {
          code: "AV-CB-01",
          name: "Amazon Parrot",
          unitcost: 92.0,
          status: "P",
          listprice: 63.5,
          attr: "Adult Male",
          itemid: "EST-10"
        }
      ];
    }
  }
};
</script>
<style>
.dataitem {
  width: 120px;
  height: 120px;
  float: left;
  margin: 6px;
}
.product {
  text-align: center;
}
.product img {
  height: 80px;
  padding: 10px;
}
</style>