<template>
  <div>
		<h2>Basic DataList</h2>
		<DataList style="width:550px;height:250px"
				:data="data"
				selectionMode="single"
        @selectionChange="selection=$event">
			<template slot-scope="scope">
				<div class="product f-row">
					<img :src="getImage(scope.row)">
					<div class="detail">
						<p>{{scope.row.itemid}} - {{scope.row.name}}</p>
						<p>{{scope.row.attr}}</p>
						<p>List Price: {{scope.row.listprice}}</p>
					</div>
				</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>
.product .detail {
  align-self: center;
}
.product img {
  height: 100px;
  padding: 10px;
}
.product p {
  margin: 0;
  padding: 6px 0;
}
</style>