<template>
  <div class="container">
    <!-- <div class="metContainer" v-for="(itemArr, index) in metDataListSorted" :key="index" style="display: flex;">
      <div class="metDate">
        <div class="metMouth">{{ itemArr[0].date.split('-')[0] }} 月 </div>
        <div class="metDay">{{ itemArr[0].date.split('-')[1] }}</div>
      </div>
      <div class="metItem">
        <el-row :gutter="40" class="el-row" type="flex" justify="start" style="flex-wrap: wrap; flex-direction:row; ">
          <el-col v-for="(item, index) in metDataListSorted[index]" :xs="24" :sm="12" :md="8" style="flex: 1;">
            <meetingItem :MetData="item" />
          </el-col>
        </el-row>
      </div>
    </div> -->
    <div class="item" v-for="(item, index) in metDataList" :key="index">
      <div class="time">
        <p>
          {{ item.startTime.substring(0, 2) }}月{{
            item.startTime.substring(3, 5)
          }}日 {{ item.startTime.substr(6) }}
        </p>
        <p style="color: #b2b5be">{{ item.createTime.substring(0, 4) }} 年</p>
      </div>
      <div class="info" @click="detils(item.id)">
        <div class="left">
          <p>
            结束时间: {{ item.endTime.substring(0, 2) }}月{{
              item.endTime.substring(3, 5)
            }}日 {{ item.endTime.substr(6) }}
          </p>
          <p class="title">{{ item.theme }}</p>
          <p>
            <span>时间: {{ item.startTime.substr(6) }} </span>
            <span>发起人: {{ item.createName }}</span>
          </p>
        </div>
        <div class="right">
          <van-icon name="arrow" size="20" color="#545965" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tabBar from '@/components/tabbar/tabbar.vue'
import TabBarItem from '@/components/tabbar/TabBarItem.vue'
import meetingItem from '@/components/meetingTemplate/hisMetItem.vue'

export default {
  data() {
    return {
      metDataListSorted: [],
      metDataList: [],
    }
  },
  components: {
    // tabBar,
    // TabBarItem,
    // meetingItem
  },
  mounted() {
    window.scrollTo(0, 0)
  },
  created() {
    this.loadData()
  },
  methods: {
    detils(id) {
      this.$router.push({
        name: 'meetingDetail',
        query: {
          id,
        },
      })
    },
    loadData() {
      let url = `${window.context.xqhk}/meeting/v1/getJson`
      this.$http
        .post(url, {
          groupRelation: 'AND',
          groupTree: {},
          pageBean: {
            page: 1,
            pageSize: 10,
            showTotal: true,
          },
          params: {},
          querys: [
            {
              group: 'main',
              operation: 'EQUAL',
              parentGroup: '',
              property: 'meeting_status_',
              relation: 'AND',
              value: '3',
            },
            {
              group: 'main',
              operation: 'EQUAL',
              parentGroup: '',
              property: 'meeting_status_',
              relation: 'OR',
              value: '4',
            },
          ],
          sorter: [
            {
              direction: 'ASC',
              property: 'create_by_',
            },
          ],
        })
        .then((res) => {
          if (res.status == 200) {
            // res.data.value.rows.forEach((item, index) => {
            //   res.data.value.rows[index].date =
            //     res.data.value.rows[index].startTime.split(' ')[0]
            // })
            this.metDataList =
              (res && res.data && res.data.value && res.data.value.rows) || []
            // console.log(this.metDataList, 'this.metDataList')
            // this.metDataListSorted = this.sortClass(this.metDataList)
            // console.log(this.metDataListSorted, 'this.metDataListSorted')
            // this.metDataList.forEach(e => {
            //   this.users.push(e.name)
            // })
          } else {
            Message.error(res.data.message)
          }
        })
    },
    sortClass(sortData) {
      console.log(sortData, 'sortData')
      const groupBy = (array, f) => {
        let groups = {}
        array.forEach((o) => {
          let group = JSON.stringify(f(o))
          groups[group] = groups[group] || []
          groups[group].push(o)
        })
        return Object.keys(groups).map((group) => {
          return groups[group]
        })
        console.log(groups, 'groups')
      }

      const sorted = groupBy(sortData, (item) => {
        return item.date // 返回需要分组的对象
      })

      return sorted
    },
  },
}
</script>
<style lang="scss" scoped>
/* .metDate {
  display: inline-block;
  width: 15vw;
  vertical-align: top;
  margin: 20px 10px;
  padding-top: 14px;
}

.metItem {
  display: inline-block;
  margin-left: -8vw;
  vertical-align: top;
  width: 70%;
}

.metDay {
  font-size: 35px !important;
} */
* {
  padding: 0;
  margin: 0;
}
.container {
  height: 100%;
}
.item {
  width: 100%;
  display: flex;
  flex-direction: column;
  .time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0.4em;
    background-color: #f6f8fb;
    font-size: 1.2em;
  }
  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5em;
    background-color: #fff;
    color: #b2b5be;
    p {
      margin: 0.5em 0;
      font-size: 1.2em;
    }
    span {
      font-size: 1em;
      margin-right: 1.8em;
    }
    .title {
      font-size: 1.5em;
      font-weight: bold;
      color: #0b0b0b;
      max-width: 15em;
      text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
      white-space: nowrap; /*让文字不换行*/
      overflow: hidden; /*超出要隐藏*/
    }
  }
}
</style>
