<template>
  <div class="test">
    <h2>son1</h2>
    <el-row :gutter="36" >
      <el-col :span="12">
        <el-card shadow="hover">
          <a :href="url">111</a>
          <p :title="url"></p>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div @click="Add(2,3)">123+{{Add(2,3)}}</div>

          <div>123+{{TestFunction("32")}}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="36" type="flex" justify="center">
      <ul>
        
        <li v-for="(item,idx) in pageLists" :key="idx" style="color:black;">
          <!-- for 绑定 lists + 绑定下标 -->
          <!-- {{item.title1}}-{{item.content1}} -->
          
          <el-col :span="12" >
            <el-card shadow="hover" >
              <div style="height:200px">
                
                <el-image
      style="width: 100%; height: 200px;min-width:200px;opacity:0.9;"
      :src="url"
      :fit="fit"></el-image>
                
              </div>
              <div @click="Jump(item.id)"  class="bottom clearfix"> <p  class="title">{{item.title1}}</p></div>
             
            </el-card>
          </el-col>
        </li>
      </ul>
    </el-row>
  </div>
</template>

<style scoped>
body {
  color: black;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline;
}
.el-col {
  margin-bottom: 20px;
}
.test {
  display: flex;
  flex-direction: column;
}
.title{
   font-size: 30px;
   text-align:left 
}
</style>


<script>
import store from "@/store"; //取出存储器里面的lists
export default {
  name: "List",
  store,
  computed: {
    //动态监听变化
    pageLists: () => store.state.lists
  },
  data() {
    return {

      a: 2,
      b: 3,
      sum: 0,
      url: "/img/12.jpg",
      fit:"cover",
      lists1: [
        { name: "123", age: "32" },
        { name: "1123", age: "323" }
      ]
    };
  },
  methods: {
    Add: (a, b) => {
      //console.log("???"+store.getters.getTodoById("123456"));
      return a + b;
    },
    TestFunction: function(id) {
      //不会报错 等价于 Add2()
      // console.log("store" + store + "com" + this.$options);
      let x = todo => todo.age === id;
      console.log(this.lists1.find(x));
      return this.lists1.find(function(todo) {
        return todo.age === id;
      });
    },
    Jump(id){
        this.$router.push('/user/'+id); 
    }
  },
  mounted() {
    console.log(this.$options);
    //localStorage.clear();
  }
};
</script>