<template>
  <div class="container">
    <el-card class="metCard" @click.native="toDetail(MetData)"
      :style="MetData2.meetingStatus == 2 ? 'background-color: #dcebfe;' : ''">
      <div class="info">
        <div class="theme metCard-item">
          {{ MetData2.theme || '无主题会议' }}
        </div>
        <div class="metCard-item">
         时间： {{ MetData2.startTime ? (MetData2.startTime.split(' ')[1] + ' - ' + MetData2.endTime.split(' ')[1]) : ''
          }}
        </div>
        <div class="metCard-item" style="margin-top:5PX;">
          发起人：{{ MetData2.createName }}
        </div>
        <div class="metCard-item" v-if="MetData2.users[0].userName != undefined">
          参会人：{{ MetData2.users[0].userName }}共{{ MetData2.users.length }}人
        </div>
        <div class="metCard-item" v-else>
          参会人：无
        </div>
      </div>
      <div class="status" v-if="MetData2.meetingStatus">
        <div style="color:#f7912f; width:75PX; " v-if="MetData2.meetingStatus == 1">
          <img slot="item-icon-active" style="width:15PX; height:15PX;"
            src="@/assets/img/meetingAppIconfontSvg/before2.svg" />
          待开始
        </div>
        <div style="color:#24b84a; width:75PX;" v-if="MetData2.meetingStatus == 2">
          <img slot="item-icon-active" style="width:15PX; height:15PX;"
            src="@/assets/img/meetingAppIconfontSvg/ing2.svg" />
          进行中
        </div>
        <div style="color:#707070; width:75PX; " v-if="MetData2.meetingStatus == 3">
          <img slot="item-icon-active" style="width:15PX; height:15PX;"
            src="@/assets/img/meetingAppIconfontSvg/end2.svg" />
          已完成
        </div>
        <div style="color:#707070; width:75PX;" v-if="MetData2.meetingStatus == 4">
          <img slot="item-icon-active" style="width:15PX; height:15PX;"
            src="@/assets/img/meetingAppIconfontSvg/cancel2.svg" />
          已取消
        </div>
      </div>
    </el-card>



  </div>
</template>

<script>


export default {
  data() {
    return {
      MetData2: {
      }
    }
  },
  props: {
    MetData: {
      type: Object,
      default: null,
    }
  },

  components: {

  },
  beforeCreate() {


  },
  created() {
    this.initData()
    console.log(this.MetData, 'this.MetData')

  },
  methods: {
    initData: function () {
      return this.MetData2 = this.MetData
    },
    toDetail(metData) {
      this.$router.push({
        name: 'meetingDetail',
        params: {
          metData: JSON.stringify(metData)
        }
      })
    }

  },
  computed: {

  }
}
</script>
<style scoped lang="scss">
.container{
  width: 100%;
  height: 150PX;
  /* margin-right: 30PX !important; */
}
.metCard {
  width: 100%;
  height: 140PX;
  /* margin: -5PX 20PX; */
  /* padding: 10PX; */
  box-shadow: none;
  border: none;
  background-color: rgb(248,248,248);
  display: flex;
  justify-content: space-between;
  /* font-family: "Helvetica Neue",  "Helvetica", 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'SimSun',  'sans-serif'; */
}
/deep/ .el-card__body{
  width: 100%;
}

.metCard-item{
  font-size: 18px;
  color: #545c63;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; */
}

.theme{
  font-size: 28PX;
  font-weight: bold;
  color: #000;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  margin-bottom: 10PX;
}

.info {
  display: inline-block;
  width: 200PX;
  /* height: 200PX; */
  vertical-align: top;

}

.status {
  float: right;
}

.el-card__body{
  /* width: 475PX !important; */
  padding: 20PX 0 0 20PX !important;
}

</style>