<template>
  <div>
    <x-header :left-options="{backText: '',showBack:true}">
      内镜视频
      <div
        class="uploadBtn"
        slot="right"
      >
        <van-uploader>
          <van-button type="text">上传文件</van-button>
        </van-uploader>
      </div>
    </x-header>

    <!-- 列表 -->
    <v-content
      has-header
      :has-footer="false"
    >
      <div class="list_content">
        <van-row
          type="flex"
          justify="space-between"
        >
          <van-col
            v-for="(item,index) in videoList"
            :key="index"
            class="col"
          >
            <!-- 视频 -->
            <video
              id="video"
              controls
              preload="auto"
              loop="loop"
              x5-video-player-fullscreen="true"
              x5-video-orientation="portraint"
              playsinline="true"
              x5-video-player-type="h5"
              style="object-fit:fill"
            >
              <!-- :poster="'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'" -->
              <source src="../assets/img/video.mp4">
            </video>

            <div class="label">
              {{item.name}}
            </div>
            <div class="label">
              {{item.time}}
            </div>
            <div class="label">
              <a>诊断详情</a>
              <a
                style="color:#127BFF;"
                @click="showPop(item.describe)"
              >点击查看</a>
            </div>
          </van-col>
        </van-row>
      </div>
    </v-content>
    <van-popup
      v-model="show"
      position="bottom"
      round
      :style="{ height: '40%' }"
    >
      <div class="pop_content">
        <div class="item">
          <div class="label">
            诊断日期：
          </div>
          <div class="value">
            {{ describe.date }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            诊断所见：
          </div>
          <div class="value">
            {{ describe.see }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            诊断结果：
          </div>
          <div class="value">
            {{ describe.result }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false,
      describe: {},//诊断详情
      videoList: [
        {
          name: '视频',
          url: 'https://docs.egret.com/engine/img/engine2d.mp4',
          time: '2022-01-04',
          describe: {
            date: '2022-01-08',
            see: '大肿瘤',
            result: '倒计时20天'
          }
        },
        {
          name: '视频',
          url: 'https://docs.egret.com/engine/img/engine2d.mp4',
          time: '2022-01-04',
          describe: {
            date: '2022-01-08',
            see: '大肿瘤',
            result: '倒计时20天'
          }
        },
        {
          name: '视频',
          url: 'https://docs.egret.com/engine/img/engine2d.mp4',
          time: '2022-01-04',
          describe: {
            date: '2022-01-08',
            see: '大肿瘤',
            result: '倒计时20天'
          }
        },
        {
          name: '视频',
          url: 'https://docs.egret.com/engine/img/engine2d.mp4',
          time: '2022-01-04',
          describe: {
            date: '2022-01-08',
            see: '大肿瘤',
            result: '倒计时20天'
          }
        }
      ],

    }
  },
  methods: {
    jumpTo () {
      console.log('双穿视屏');
    },
    showPop (data) {
      this.show = true
      this.describe = data
    },
  },
  beforeRouteEnter (to, from, next) {
    from.meta.keepAlive = true
    next()
  },
  mounted () {
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
.content {
  background: rgb(246, 246, 246);
}
.list_content {
  padding: 14px 14px;

  .col {
    width: 48%;
    padding: 10px;
    background: #fff;
    margin-bottom: 10px;
    .label {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }
  }
}
#video {
  width: 100%;
  height: 150px;
}
.uploadBtn {
  transform: translateY(-16px) translatex(12px);
  color: #fff;
}
.pop_content {
  padding: 20px;
  .item {
    display: flex;
    margin-bottom: 10px;
    .label {
      color: #127bff;
    }
    .value {
      color: #444;
    }
  }
}
</style>