<template>
  <div class="container-box">
    <div class="all-box">
      <div class="top-box">
        <div class="top-title1">家畜品种库</div>
      </div>
      <div class="content-box">
        <div
          class="item-box"
          v-for="item in livestockList"
          :key="item.id"
          @click="livestockClick(item)"
        >
          <div class="img-box">
            <img :src="item.url" alt="" style="width: 100%" />
          </div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="all-box" style="margin-top: 60px">
      <div class="top-box">
        <div class="top-title1">家禽品种库</div>
      </div>
      <div class="content-box">
        <div
          class="item-box"
          v-for="item in poultryList"
          :key="item.id"
          @click="poultryClick(item)"
        >
          <div class="img-box">
            <img :src="item.url" alt="" style="width: 100%" />
          </div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      livestockList: [
        {
          id: 1,
          url: require('../../assets/img/zhu.png'),
          title: '猪'
        },
        {
          id: 2,
          url: require('../../assets/img/niu.png'),
          title: '牛'
        },
        {
          id: 3,
          url: require('../../assets/img/yang.png'),
          title: '羊'
        },
        {
          id: 4,
          url: require('../../assets/img/lv.png'),
          title: '驴'
        }
      ],
      poultryList: [
        {
          id: 1,
          url: require('../../assets/img/huoji.png'),
          title: '火鸡'
        },
        {
          id: 2,
          url: require('../../assets/img/e.png'),
          title: '鹅'
        },
        {
          id: 3,
          url: require('../../assets/img/ya.png'),
          title: '鸭'
        },
        {
          id: 4,
          url: require('../../assets/img/ji.png'),
          title: '鸡'
        }
      ]
    }
  },
  methods: {
    livestockClick(item) {
      console.log(item, 'item.name')
      if (item.title == '猪') {
        this.$router.push({
          path: '/variety-resources/pig-list'
        })
      } else {
        this.$alert('建设中，请耐心等待！', '提示', {
          confirmButtonText: '确定',
          callback: (action) => {}
        })
      }
    },
    poultryClick(item) {
      this.$alert('建设中，请耐心等待！', '提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container-box {
  min-height: calc(100vh - 84px);
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .all-box {
    .top-box {
      border-radius: 6px;
      background: #fff;
      padding: 10px;
      margin-bottom: 10px;
      .top-title1 {
        background-color: #5aad00;
        color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        width: 80px;
      }
    }
    .content-box {
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      background: #fff;
      padding: 10px;
      .item-box {
        flex: 1;
        cursor: pointer;
        margin-right: 20px;

        .img-box {
          padding: 5px 15px;
          border: 1px solid #f2f2f2;
        }
        .title {
          margin-top: 10px;
          width: 100%;
          font-size: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .item-box:last-child {
        margin-right: 0px;
      }
    }
  }
}
</style>