<template>
  <div>
    <van-nav-bar title="服务详情" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="main">
      <van-row class="cell">
        <van-col span="6">项目名称：</van-col>
        <van-col span="18">
          <van-field v-model="form.name" placeholder="项目名称" disabled />
        </van-col>
      </van-row>
      <van-row class="cell">
        <van-col span="6">项目内容：</van-col>
        <van-col span="18">
          <van-field v-model="form.content" placeholder="项目内容" disabled />
        </van-col>
      </van-row>
      <van-row class="cell">
        <van-col span="6">服务对象：</van-col>
        <van-col span="18">
          <van-field v-model="form.serviceTarget" placeholder="服务对象" disabled />
        </van-col>
      </van-row>
      <van-row class="cell">
        <van-col span="6">服务时间：</van-col>
        <van-col span="18">
          <van-field v-model="form.servicetTimeDesc" placeholder="服务时间" disabled />
        </van-col>
      </van-row>
      <van-row class="cell">
        <van-col span="6">服务人员：</van-col>
        <van-col span="18">
          <van-field v-model="form.serviceStaff" placeholder="服务人员" disabled />
        </van-col>
      </van-row>
      <van-row class="cell">
        <van-col span="6">服务地址：</van-col>
        <van-col span="18">
          <van-field class="textarea" v-model="address" rows="1" type="textarea" placeholder="请输入服务地址" disabled />
        </van-col>
      </van-row>
      <div class="main2">
        <div>
          <p>服务情况：</p>
          <div class="box">
            {{form.serviceRecord}}
          </div>
        </div>
        <div>
          <p>照片：</p>
          <div class="boximg">
            <div v-for="(item,index) in imgUrl" :key="index">
              <van-image fit="contain" :src="item" alt="" @click="showPopup" />
            </div>
          </div>
          <van-image-preview v-model="show" :images="imgUrl"></van-image-preview>
        </div>
        <div>
          <p>视频：</p>
          <div class="boximg">
            <div v-for="(item,index) in multiMediaUrl" :key="index">
              <video @click="showvideoplay=true,videourl=item" style="object-fit:cover;" :src="item" poster='../../assets/video.png'></video>
            </div>
          </div>
        </div>
        <van-dialog style="width:100%;border-radius:0;height:200px" v-model="showvideoplay" :show-cancel-button="false" :show-confirm-button="false" closeOnClickOverlay>
          <video controls preload="auto" style="width:100%;height:200px;object-fit: contain;" :src="videourl" v-if="videourl"></video>
        </van-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { getProjectHistory } from '../../api/index.js'
export default {
  data() {
    return {
      show: false,
      searchshow: false,
      showvideoplay: false,
      appendFile: [],
      imgUrl: [],
      multiMediaUrl: '',
      form: {
        fileList: [],
      },
      positionSearch: '',
      id: '',
      videourl: '',
      address: '',
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getProjectHistory()
  },
  methods: {
    showPopup() {
      this.show = true
    },
    async getProjectHistory() {
      const res = await getProjectHistory({ id: this.id })
      this.form = res.data
      this.address = this.form.streetName + this.form.address
      this.imgUrl = res.data.imgUrl.split(',')
      if (!res.data.multiMediaUrl) return
      this.multiMediaUrl = res.data.multiMediaUrl.split(',')
    },
  },
}
</script>
<style lang="scss" scoped>
.tx {
  width: 160px;
  height: 160px;
}
.message {
  padding: 0 30px;
}
.topBox {
  padding: 24px 0;
  border-bottom: 1px solid #eee;
}
.van-row {
  font-size: 30px;
  text-align: left;
}
.row {
  .van-col {
    line-height: 60px;
  }
}
.main {
  padding: 0 30px;
  font-size: 30px;
  text-align: left;
  margin-bottom: 30px;
  .box {
    min-height: 200px;
    border: 1px solid #eee;
    padding: 20px;
    font-size: 26px;
    color: #999;
  }
  .boximg {
    min-height: 100px;
    border: 1px solid #eee;
    padding: 20px 0;
    font-size: 26px;
    color: #999;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    /deep/.van-image {
      img {
        max-width: 200px;
        max-height: 200px;
        //   margin-right: 16px;
        margin: 0 10px;
        margin-bottom: 16px;
      }
    }
    video {
      width: 180px;
      height: 180px;
      //   margin-right: 16px;
      margin: 0 10px;
      margin-bottom: 16px;
    }
  }
}
.cell {
  border-bottom: 1px solid #eee;
  margin-top: 16px;
  .van-col {
    line-height: 80px;
  }
  .van-cell {
    padding: 0;
    line-height: 80px;
  }
}
.textarea {
  line-height: 30px !important;
  margin-top: 25px;
}
.van-button {
  width: 690px;
  margin: 24px auto;
  color: #fff;
  background-color: #1677ff;
  border-radius: 8px;
  font-size: 30px;
}
.box {
  position: relative;
  height: 240px;
  .boxlist {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    div {
      width: 200px;
      height: 200px;
      margin: 0 20px;
    }

    img {
      width: 100%;
      height: 100%;
    }
    video {
      width: 100%;
      height: 100%;
    }
    // background-color: chocolate;
  }
  .van-uploader {
    position: absolute;
    top: 0;
    left: 0;
    /deep/.van-uploader__wrapper {
      .van-uploader__upload {
        width: 200px;
        height: 200px;
      }
    }

    /deep/.van-uploader__preview {
      margin: 0 20px;
      .van-uploader__file {
        opacity: 0;
      }
      .van-image {
        width: 200px;
        height: 200px;
        opacity: 0;
        // margin: 20px;
      }
      width: 200px;
      height: 200px;
    }
  }
}
/deep/.van-field__control {
  color: #333;
}
/deep/.van-field__control:disabled {
  color: #333;
  -webkit-text-fill-color: unset;
}
</style>