<template>
  <div class="video-wrapper" style="position: relative;">
    <div v-if="status === 'PROCESS' && detail.showStatus" class="status">
      <van-image v-if="item.status === 'ENABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
        :src="icon_enable" />
      <van-image v-if="item.status === 'DISABLE'" round width="6rem" height="6rem" style="vertical-align: bottom;"
        :src="icon_refuse" />
      <van-image v-if="item.status === 'APPLY'" round width="6rem" height="6rem" style="vertical-align: bottom;"
        :src="icon_apply" />
    </div>
    <div :id="'mui-player-' + item.id" class="video-div" />
    <div class="control-bar">
      <div>
        <div class="video-bar">
          <van-row align="center">
            <van-col span="8">
              <van-image round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.avatar" />&nbsp;
              <span style="font-size: 1.05rem; vertical-align: middle;">{{ item.name }}</span>
            </van-col>
            <van-col span="16">
              <div style="color: #999999; text-align: right;">{{ item.book_name }} ｜ {{ item.localism_type }}</div>
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="book-intro" style="margin-top: 1rem;">
        <div :id="'book-intro' + item.id" :class="{ 'van-multi-ellipsis--l3': isToggle }">{{ item.note }}</div>
        <div v-if="hasToggle">
          <div v-if="isToggle" class="book-toggle-icon" @click="onToggle(false)">
            展开&nbsp;
            <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_down" />
          </div>
          <div v-else class="book-toggle-icon" @click="onToggle(true)">
            折叠&nbsp;
            <van-icon style="vertical-align: middle;" size="0.9rem" :name="icon_up" />
          </div>
        </div>
      </div>
      <div v-if="status === 'PROCESS'">
        <div v-if="item.status === 'DISABLE'" class="van-hairline--top"
          style="padding: 1rem; font-size: 0.85rem;">
          <p style="color: #999999; margin-bottom: 0.25rem;">老师留言：</p>
          <p>{{ item.check_note }}</p>
        </div>
      </div>
      <div v-if="status === 'PENDING'" class="van-hairline--top book-handle">
        <van-row>
          <van-col offset="3" style="padding: 1rem;" @click="onRefuse()">
            <div class="disagree-btn">
              <van-icon name="close" />&nbsp;不通过
            </div>
          </van-col>
          <van-col style="padding: 1rem;" @click="onPass()">
            <div class="agree-btn" style="">
              <van-icon name="passed" />&nbsp;通过
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>

  <van-overlay :show="showNotice" z-index="1000">
    <div class="wrapper" @click.stop>
      <div class="block">
        <div style="position: absolute; top: -2rem; right: 1rem; font-size: 1.5rem;">
          <van-icon name="close" color="#FFFFFF" @click="closeNotice" />
        </div>
        <div class="van-hairline--bottom"
          style="color: #222222; font-size: 1.25rem; font-weight: bold; text-align: center; padding-bottom: 1rem;">
          作品不通过
        </div>
        <div>
          <van-field v-model="message" rows="2" autosize label="" type="textarea" maxlength="200"
            placeholder="请填写您对小朋友的温馨鼓励" show-word-limit @focus="focusInput"
          @blur="blurInput" />
        </div>
        <div style="margin-top: 3rem;">
          <my-button type="primary" @on-click="handleAudit('disable')">确定</my-button>
        </div>
      </div>
    </div>
  </van-overlay>

  <van-dialog v-model:show="show" title="温馨提示" show-cancel-button :confirmButtonColor="styleColor.baseColor"
    @confirm="handleAudit('enable')" @cancel="onCancel">
    <div style="padding: 1rem; text-align: center;">是否确认审核通过该视频 ？</div>
  </van-dialog>
</template>

<script setup>
import icon_up from '@images/icon-guanbi@2x.png'
import icon_down from '@images/icon-zhankai@2x.png'

import icon_refuse from '@images/icon-jujue@2x.png'
import icon_apply from '@images/icon-shenhe@2x.png'
import icon_enable from '@images/icon-tongguo@2x.png'

import MyButton from '@/components/MyButton/index.vue'
import { ref, reactive, onMounted, nextTick, watch, onUpdated } from 'vue'
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import axios from '@/utils/axios';
import _ from 'lodash';
import tools from '@/common/tool'
import { styleColor } from '@/constant.js';

import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

const props = defineProps({
  item: Object,
  status: String,
});
const emit = defineEmits(['on-click']);

// 判断是否显示简介的展开图标
const hasToggle = ref(false); // 判断是否有展开文字，默认没有
const isToggle = ref(true); // 判断展开状态，默认展开

const onToggle = (v) => { // 展开/折叠
  isToggle.value = v
}

onMounted(() => {
  setTimeout(() => {
    // 判断是否显示简介的展开图标
    hasToggle.value = tools.hasEllipsis(`book-intro${props.item.id}`);
  }, 500);
})

// 审核视频通过/不通过弹框
const showNotice = ref(false);
const show = ref(false);
const message = ref('');
const onPass = () => { // 通过审核
  show.value = true;
}
const onCancel = () => {
  show.value = false;
}

const closeNotice = () => {
  showNotice.value = false;
}
const onRefuse = () => { // 不通过审核
  showNotice.value = true;
}
const handleAudit = (status) => {
  axios.post('/srv/?a=check_prod', {
    prod_id: props.item.id,
    status,
    check_note: message.value,
  })
  .then(res => {
    if (res.data.code === 1) {
      Toast.success('操作成功');
      message.value = '';
      showNotice.value = false;
      show.value = false;
      emit('on-click', props.item.id);
    } else {
      console.warn(res);
      if (!res.data.show) return false;
      Toast({
        icon: 'close',
        message: res.data.msg
      });
    }
  })
  .catch(err => {
    console.error(err); 
  })
}

// 优化处理输入框弹出遮挡问题
let interval = ''
const focusInput = () => {
  window.addEventListener("resize", function () {
    if (
      document.activeElement.tagName === "INPUT" ||
      document.activeElement.tagName === "TEXTAREA"
    ) {
      interval = window.setTimeout(function () {
        if ("scrollIntoView" in document.activeElement) {
          document.activeElement.scrollIntoView();
        } else {
          document.activeElement.scrollIntoViewIfNeeded();
        }
      }, 0);
    }
  });
}
const blurInput = () => {
  clearInterval(interval);
}
</script>

<script>
export default {
  data() {
    return {
      detail: {},
      mp: '',
    }
  },
  created() {
  },
  mounted() {
    setTimeout(() => {
      var mp = new MuiPlayer({
        container: '#mui-player-' + this.item.id,
        title: this.item.title,
        src: this.item.video,
        poster: this.item.cover,
        autoFit: false,
        videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
          { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
          { attrKey: 'playsinline', attrValue: 'playsinline' },
          { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
        ]
      })
      this.mp = mp;
      this.detail = _.cloneDeep(this.item);
      this.detail.showStatus = true;
      var video = mp.video();
      // 监听原生video事件，审核状态标签显示控制
      var _this = this;
      video && video.addEventListener('play', function (event) {
        _this.detail.showStatus = false;
      });
      video && video.addEventListener('pause', function (event) {
        _this.detail.showStatus = true;
      });
    }, 500);
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.video-wrapper {
  margin: 1rem;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);

  .status {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
  }

  .video-div {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .video-bar {
    color: #713610;
    padding: 1rem;
    padding-bottom: 0.5rem;
  }

  .book-intro {
    padding: 1rem;
    padding-top: 0;

    .book-post {
      color: #222222;
      font-size: 1.25rem;
      font-weight: bold;
    }

    #book-intro {
      color: #333333;
      margin-top: 0.25rem;
    }

    .book-toggle-icon {
      text-align: right;
      color: #713610;
      font-size: 1rem;
      margin-top: 0.5rem;
    }
  }
  .book-handle {
    padding: 0 1rem;
    .disagree-btn {
      background: #B4B4B3; 
      border-radius: 15px; 
      color: #FFFFFF; 
      padding: 0.25rem 0.8rem;
    }
    .agree-btn {
      background: @base-color; 
      border-radius: 15px; 
      color: @base-font-color; 
      padding: 0.25rem 1.5rem;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  text-align: center;
}

.block {
  width: 80%;
  // height: 25rem;
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem;
  position: relative;
  margin-top: 1rem;
  margin-bottom: 5rem;
}
</style>