<template>
  <div id="list">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one" v-if="type == '1'">
          <el-col :span="8" class="oneList" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item.id, '0')">
            <el-col :span="24" class="name textOver">
              {{ item.name }}
            </el-col>
            <el-col :span="24" class="brief">
              {{ item.achievebrief }}
            </el-col>
            <el-col :span="24" class="other">
              <p class="textOver">领域:{{ item.field }}</p>
              <p class="textOver">联系人:{{ item.contacts }}</p>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="one two" v-else-if="type == '2'">
          <el-col :span="8" class="twoList" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item.id, '1')">
            <el-image :src="getImage(item.img_url)" class="image">
              <template #error>
                <el-image :src="imgUrl"></el-image>
              </template>
            </el-image>
            <el-col :span="24" class="name textOver">
              {{ item.name }}
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="one thr" v-else-if="type == '3'">
          <el-col :span="8" class="thrList" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item.id, '2')">
            <el-col :span="24" class="image">
              <el-image :src="getImage(item.img_path)">
                <template #error>
                  <el-image :src="expetImg"></el-image>
                </template>
              </el-image>
            </el-col>
            <el-col :span="24" class="other">
              <p class="textOver">{{ item.name }}</p>
              <p class="textOver">{{ item.zwzc || '暂无' }}</p>
              <p class="textOver">{{ item.company || '暂无' }}</p>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="one four" v-else-if="type == '4'">
          <el-col :span="24" class="fourList" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item.id, '3')">
            <el-col :span="24" class="top">
              <el-col :span="19" class="title textOver">
                {{ item.title }}
              </el-col>
              <el-col :span="5" class="date">
                <span>{{ item.publish_time || '暂无' }}</span>
              </el-col>
            </el-col>
            <el-col :span="24" class="down"> 简介:{{ item.titlejj || '暂无' }} </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="one five" v-else-if="type == '5'">
          <el-col :span="24" class="fiveList" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item.id, '4')">
            <el-col :span="24" class="top">
              <el-col :span="19" class="title textOver">
                {{ item.name }}
              </el-col>
              <el-col :span="5" class="date">
                <span>{{ getDate(item.create_time) || '暂无' }}</span>
              </el-col>
            </el-col>
            <el-col :span="24" class="down">
              <el-col :span="12" class="textOver"> 所属领域:{{ item.filed }} </el-col>
              <el-col :span="12" class="textOver"> 合作方式:{{ item.cooperation }} </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="one six" v-else-if="type == '6'">
          <el-col :span="24" class="sixList" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item.id, '5')">
            <el-col :span="10" class="name textOver">
              {{ item.name }}
            </el-col>
            <el-col :span="10" class="messbute"> 信息属性：{{ item.messattribute }} </el-col>
            <el-col :span="4" class="date">
              {{ getDate(item.create_time) }}
            </el-col>
            <el-col :span="24" class="info">
              {{ item.informationdesc }}
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
var moment = require('moment');
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'list',
  props: {
    type: { type: String },
    list: { type: Array },
  },
  components: {},
  data: function () {
    return {
      imgUrl: require('@a/fmzl.jpg'),
      expetImg: require('@a/expert.png'),
    };
  },
  created() {},
  methods: {
    // 整理时间
    getDate(date) {
      let newsDate = moment(date).format('YYYY-MM-DD');
      if (newsDate) return newsDate;
    },
    detailBtn(id, index) {
      this.$emit('detail', { id: id, index: index });
    },
    getImage(data) {
      if (_.map(data, 'url')[0]) {
        return _.map(data, 'url')[0];
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 5px 0 0 0;
  .one {
    height: 435px;
    overflow: hidden;
    .oneList {
      width: 32.1%;
      height: 212px;
      overflow: hidden;
      background: url('~@a/achieve.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin: 0 10px 10px 0;
      padding: 20px 18px;
      .name {
        font-size: 16px;
        font-weight: bold;
        margin: 0 0 5px 0;
      }
      .brief {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 6;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        font-size: 14px;
      }
      .other {
        p {
          font-size: 14px;
          padding: 3px 0 0 0;
        }
      }
    }
    .oneList:nth-child(3n) {
      margin: 0 0 10px 0;
    }
    .twoList {
      width: 32.1%;
      height: 210px;
      overflow: hidden;
      margin: 0 10px 10px 0;
      box-shadow: 0 0 5px #ccc;
      border-radius: 5px;
      .image {
        width: 100%;
        height: 180px;
        .el-image {
          width: 100%;
          height: 180px;
        }
      }
      .name {
        text-align: center;
        padding: 2px 0;
        font-weight: bold;
      }
    }
    .twoList:nth-child(3n) {
      margin: 0 0 10px 0;
    }
    .thrList {
      width: 32.1%;
      height: 210px;
      overflow: hidden;
      margin: 0 10px 10px 0;
      box-shadow: 0 0 5px #ccc;
      .image {
        padding: 15px 0;
        text-align: center;
        .el-image {
          width: 90px;
          height: 90px;
          border-radius: 90px;
        }
      }
      .other {
        padding: 0 5px;
        p {
          font-size: 14px;
          padding: 4px 0 0 0;
        }
        p:nth-child(1) {
          font-size: 16px;
          font-weight: bold;
          text-align: center;
        }
      }
    }
    .thrList:nth-child(3n) {
      margin: 0 0 10px 0;
    }
    .fourList {
      border-bottom: 1px dashed #ccc;
      padding: 10px 0;
      .top {
        margin: 0 0 5px 0;
        .title {
          font-size: 16px;
          font-weight: bold;
        }
        .date {
          text-align: right;
          span {
            background: #044b79;
            color: #fff;
            padding: 0 5px;
            font-size: 14px;
            border-radius: 5px;
          }
        }
      }
      .down {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        height: 40px;
      }
    }
    .fiveList {
      border-bottom: 1px dashed #ccc;
      padding: 12px 0;
      .top {
        margin: 0 0 5px 0;
        .title {
          font-size: 16px;
          font-weight: bold;
        }
        .date {
          text-align: right;
          span {
            background: #044b79;
            color: #fff;
            padding: 0 5px;
            font-size: 14px;
            border-radius: 5px;
          }
        }
      }
      .down {
        .fourList {
          border-bottom: 1px dashed #ccc;
          padding: 10px 0;
          .top {
            margin: 0 0 5px 0;
            .title {
              font-size: 16px;
              font-weight: bold;
            }
            .date {
              text-align: right;
              span {
                background: #044b79;
                color: #fff;
                padding: 0 5px;
                font-size: 14px;
                border-radius: 5px;
              }
            }
          }
          .down {
            font-size: 14px;
          }
        }
      }
    }
    .sixList {
      padding: 10px 0;
      border-bottom: 1px dashed #044b79;
      .name {
        font-size: 18px;
        font-weight: bold;
      }
      .messbute {
        font-size: 16px;
      }
      .date {
        font-size: 16px;
        text-align: center;
      }
      .info {
        padding: 5px 0 0 0;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        height: 40px;
      }
    }
  }
  .two {
    padding: 2px;
  }
  .thr {
    padding: 2px;
  }
}
</style>
