<template>
  <div class="container">
    <Header title="演习详情" />
    <div class="main">
      <p class="tabTitle">演习过程确认项</p>
      <div class="course" v-for="(item, index) in itemObj.drillProcessList" :key="index">
        <p>{{ index + 1 + "、" + item.contentInfo }}</p>
        <p @click="getStatus(index)" class="type" v-if="itemObj.drillStatus === 1">
          {{ item.confirmStatus === 1 ? "确认" : "√" }}
        </p>
      </div>
      <p class="tabTitle">
        <span v-if="itemObj.drillStatus === 1" style="color: red">* </span>演习图片
      </p>
      <div class="imagesList">
        <van-uploader :after-read="afterRead" v-model="fileList" multiple v-if="itemObj.drillStatus === 1">
          <img src="@/assets/images/photo.png" alt="" />
        </van-uploader>
        <div v-else>
          <img class="imgs" @click="seeImage(item.picUrl)" v-for="(item, index) in itemObj.drillPicList" :key="index"
            :src="baseUrl + item.picUrl" alt="" />
        </div>
      </div>
      <van-button v-if="itemObj.drillStatus === 1" class="add" type="primary" @click="add">提交</van-button>
    </div>
    <van-image-preview v-model="imageShow" :images="imageList" :closeable="true" :loop="false" :closeOnPopstate="true" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getInfo, upload, startPlan } from '@/api/emergencies'
export default {
  name: 'VueSkDetails',
  computed: {
    ...mapState('baseUrl', ['baseUrl'])
  },
  data () {
    return {
      itemObj: {},
      fileList: [],
      imageShow: false,
      imageList: [],
      drillPicList: []
    }
  },

  mounted () {
    // console.log(this.$route.query, 888)
    getInfo({ id: this.$route.query.id, drillStatus: this.$route.query.drillStatus }).then(({ data }) => {
      if (data.code === 200) {
        console.log(data.data)
        this.itemObj = data.data
      }
    })
  },

  methods: {
    getStatus (index) {
      console.log(this.itemObj.drillProcessList[index])
      this.itemObj.drillProcessList[index].confirmStatus = 2
    },
    seeImage (url) {
      this.imageList = []
      this.imageList.push(this.baseUrl + url)
      this.imageShow = true
    },
    async add () {
      if (
        !this.itemObj.drillProcessList.every((item) => item.confirmStatus === 2)
      ) {
        this.$notify({
          type: 'warning',
          message: '请先选择所有确认项后进行提交！',
          duration: 1000
        })
      } else {
        this.drillPicList = []
        if (this.fileList.length) {
          for await (const item of this.fileList) {
            const formData = new FormData()
            formData.append('file', item.file)
            const { data } = await upload(formData)
            if (data.code === 200) {
              this.drillPicList.push({ picUrl: data.fileName })
            } else {
              this.$notify({
                type: 'danger',
                message: data.msg,
                duration: 1000
              })
              return
            }
          }
          const drillProcessList = []
          console.log(this.itemObj)
          this.itemObj.drillProcessList.forEach((item) => {
            drillProcessList.push({
              id: item.id,
              confirmStatus: item.confirmStatus
            })
          })
          startPlan({
            id: this.itemObj.id,
            drillProcessList,
            drillPicList: this.drillPicList
          }).then(({ data }) => {
            if (data.code === 200) {
              this.$notify({
                type: 'success',
                message: data.msg,
                duration: 1000
              })
              this.$router.go(-1)
            }
          })

          //   Promise.all(arr).then(res => {
          //     console.log(res)
          //     res.forEach(item => {
          //       this.drillPicList.push({ picUrl: item.data.url })
          //     })
          //     const drillProcessList = []
          //     console.log(this.itemObj)
          //     this.itemObj.drillProcessList.forEach(item => {
          //       drillProcessList.push({ id: item.id, confirmStatus: item.confirmStatus })
          //     })
          //     startPlan({ id: this.itemObj.id, drillProcessList, drillPicList: this.drillPicList }).then(({ data }) => {
          //       if (data.code === 200) {
          //         this.$notify({
          //           type: 'primary',
          //           message: data.msg,
          //           duration: 1000
          //         })
          //         this.$router.go(-1)
          //       }
          //     })
          //     // console.log(res)
          //   })
          // } else {
          //   this.$notify({
          //     type: 'warning',
          //     message: '演习图片不能为空',
          //     duration: 1000
          //   })
        } else {
          this.$notify({
            type: 'warning',
            message: '演习图片不能为空',
            duration: 1000
          })
        }
      }
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(this.fileList)
    }
  }
}
</script>

<style lang="less" scoped>
.tabTitle {
  color: #1c4990;
  padding: 0 15px;
  font-weight: 600;
  text-align: left;
  margin: 20px 0;
}

.add {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 50px);
}

.course {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #eee;

  p {
    word-wrap: break-word;
    text-align: left;
  }

  .type {
    text-align: right;
    color: #1c4990;
  }
}

.imagesList {
  text-align: left;
  padding: 0 20px;
}

.imgs {
  width: 60px;
  height: 60px;
  margin: 5px;
  border: 1px solid #eee;
}

img {
  width: 40px;
  height: 33px;
  margin: 13px;
}
</style>
