<template>
  <div class="container">
    <Header title="演习列表" />
    <van-tabs
      v-model="activeName"
      color="white"
      background="#1c4990"
      title-active-color="white"
      title-inactive-color="#ccc"
      swipeable
      animated
      @change="tabChange"
    >
      <van-tab title="未完成" name="1">
        <div class="tabMain">
           <ul>
          <li v-for="(item, index) in list" :key="index" @click="setPath(item.id, 1)">
            <van-icon name="arrow" class="rightIcon" />
            <p><span>演习名称：</span>{{ item.drillName }}</p>
            <p><span>演习编号：</span>{{ item.drillSn }}</p>
            <p><span>演习类型：</span>{{ item.drillTypeName }}</p>
            <p><span>演习开始时间：</span>{{ item.planStartTime }}</p>
            <p><span>演习结束时间：</span>{{ item.planEndTime }}</p>
          </li>
        </ul>
        </div>
      </van-tab>
      <van-tab title="已完成" name="2">
        <div class="tabMain">
           <ul>
          <li v-for="(item, index) in list" :key="index"  @click="setPath(item.id, 2)">
            <van-icon name="arrow" class="rightIcon" />
            <p><span>演习名称：</span>{{ item.drillName }}</p>
            <p><span>演习编号：</span>{{ item.drillSn }}</p>
            <p><span>演习类型：</span>{{ item.drillTypeName }}</p>
            <p><span>演习开始时间：</span>{{ item.planStartTime }}</p>
            <p><span>演习结束时间：</span>{{ item.planEndTime }}</p>
          </li>
        </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getList, getInfo } from '@/api/emergencies'
// import { getInfo, upload, startPlan } from '@/api/emergencies'
export default {
  name: 'VueSkMeet',

  data () {
    return {
      activeName: '1',
      list: [
      ]
    }
  },
  mounted () {
    this.getList()
  },

  methods: {
    getList () {
      getList({ drillStatus: this.activeName * 1 }).then(({ data }) => {
        if (data.code === 200) {
          this.list = data.data
        }
      })
    },
    tabChange (name, title) {
      this.activeName = name
      this.getList()
    },
    setPath (id, drillStatus) {
      // 状态等于未完成时，检查当前账号是否为演习计划组织人
      if (drillStatus === 1) {
        getInfo({ id: id, drillStatus: drillStatus }).then(({ data }) => {
          if (data.code === 200) {
            this.$router.push({ path: '/details', query: { id, drillStatus } })
          }
        })
      } else {
        this.$router.push({ path: '/details', query: { id, drillStatus } })
      }
    }
  }
}
</script>

<style lang="less" scoped>
li{
  position: relative;
  width: 100%;
    min-height: 130px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px 1px #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 8px;
    p{
      padding: 10px;
    }
    span{
      color: #969799;
    }
    .rightIcon{
      position: absolute;
      right: 5px;
      top: calc(50% - 5px);

    }
}
</style>
