<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="common">
            <el-col :span="8" class="one" v-for="(item, index) in list" :key="index">
              <el-col :span="24" class="image">
                <el-image :src="getImage(item.image)"></el-image>
              </el-col>
              <el-col :span="24" class="info">
                <p>{{ item.title }}</p>
                <p>
                  举办地点:<span>{{ item.province }}-{{ item.city }}</span>
                </p>
                <p>
                  举办时间:<span>{{ item.start_time }}-{{ item.end_time }}</span>
                </p>
              </el-col>
              <el-col :span="24" class="btn">
                <el-button type="primary" size="mini" @click="detail(item)">进人展会</el-button>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: online } = createNamespacedHelpers('online');
const { mapActions: code } = createNamespacedHelpers('code');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      list: [],
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...online(['query']),
    ...code(['xzqh']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        for (const val of res.data) this.searchXzqh(val);
        this.$set(this, `list`, res.data);
      }
    },
    // 切换图片
    getImage(data) {
      if (_.map(data, 'url')[0]) {
        return _.map(data, 'url')[0];
      }
    },
    // 查询省市
    async searchXzqh(data) {
      if (data.province) {
        const res = await this.xzqh();
        if (this.$checkRes(res)) {
          data.province = res.data.find((i) => i.code == data.province).name;
        }
      }
      if (data.city) {
        const res = await this.xzqh({ code: data.city });
        if (this.$checkRes(res)) {
          data.city = res.data.find((i) => i.code == data.city).name;
        }
      }
    },
    // 进入展会
    detail(data) {
      this.$router.push({ path: '/train/detail', query: { id: data.id, column_name: data.column_name } });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  min-height: 500px;
  margin: 10px 0 0 0;
  .common {
    .one {
      width: 32.7%;
      height: 370px;
      box-shadow: 0 0 5px #ccc;
      border-radius: 5px;
      margin: 0 10px 10px 0;
      .image {
        /deep/.el-image__inner {
          width: 100%;
          height: 225px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }
      }
      .info {
        padding: 0 10px;
        p {
          font-size: 14px;
          margin: 0 0 8px 0;
        }
        p:nth-child(1) {
          font-size: 16px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .btn {
        text-align: center;
      }
    }
    .one:nth-child(3n) {
      margin: 0 0 10px 0;
    }
  }
}
</style>
