<template>
  <el-dialog
    :visible.sync="isReviewing"
    custom-class="c-review"
    append-to-body
    title="审核"
  >
    <div class="l-flex">
      <div class="c-review-assest l-flex--col c-sibling-item">
        <div class="l-flex--row center c-review-assest__block">
          <auto-image
            v-if="isImage"
            class="o-image--preview"
            :src="assetUrl"
            retry
          />
          <video
            v-if="isVideo"
            class="o-video--preview"
            :src="assetUrl"
            controls
            @click.stop
          />
          <audio
            v-if="isAudio"
            :src="assetUrl"
            controls
            @click.stop
          />
        </div>
        <div class="l-flex--col has-top-padding">
          <div class="c-grid-form u-align-self--center has-bottom-padding">
            <span class="c-grid-form__label">审核意见：</span>
            <el-select
              v-model="review.type"
              placeholder="请选择"
            >
              <el-option
                v-for="option in reviewOptions"
                :key="option.label"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <template v-if="review.type === 'reject'">
              <span class="c-grid-form__label required">原因：</span>
              <el-input
                v-model.trim="review.reason"
                type="textarea"
                placeholder="请填写驳回原因"
                maxlength="50"
                :rows="3"
                resize="none"
                show-word-limit
              />
            </template>
          </div>
          <div class="l-flex--row">
            <el-button
              type="primary"
              class="o-button c-sibling-item"
              :disabled="!showOpt"
              @click="resolve"
            >通过</el-button>
            <el-button
              type="primary"
              class="o-button c-sibling-item"
              :disabled="!showOpt"
              @click="reject"
            >驳回</el-button>
            <el-button
              type="primary"
              class="o-button c-sibling-item"
              :disabled="list.length < 2"
              @click="next(-1)"
            >
              上一张
            </el-button>
            <el-button
              type="primary"
              class="o-button c-sibling-item"
              :disabled="list.length < 2"
              @click="next(1)"
            >
              下一张
            </el-button>
          </div>
        </div>
      </div>
      <div class="c-review-form l-flex--col c-sibling-item far">
        <div
          v-for="line in lines"
          :key="line.key"
          class="l-flex--row l-flex__fill"
        >
          <div class="c-review-form__label">{{ line.label }}:</div>
          <div>
            {{
              line.transform ? line.transform(form[line.key]) : form[line.key]
            }}
          </div>
        </div>
      </div>
    </div>
    <!-- <preview-dialog ref="previewDialog" /> -->
  </el-dialog>
</template>

<script>
import { getAssetUrl } from '@/api/asset'
import { AssetType } from '@/constant'
export default {
  name: 'ReviewDialog',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      lines: [
        { label: '文件名称', key: 'originalName' },
        { label: '分辨率', key: 'a' },
        { label: '大小', key: 'size' },
        { label: '上传人', key: 'createBy' },
        { label: '时长', key: 'duration' },
        { label: '上传时间', key: 'createTime' },
        { label: 'AI审核通过', key: 'q' },
        {
          label: '审核状态',
          key: 'status',
          transform: i => ['未审核', '未审核', '通过', '驳回'][i]
        }
      ],
      isReviewing: false,
      index: 0,
      isFull: false,
      // review
      reviewOptions: [
        { value: 'reject', label: '驳回' },
        { value: '图文不符' },
        { value: '内容不合规' }
      ],
      review: {
        type: '',
        reason: ''
      }
    }
  },
  computed: {
    showOpt () {
      return ![2, 3].includes(this.form.status)
    },
    form () {
      return this.list[this.index] || {}
    },
    source () {
      console.log({ ...this.list[this.index] }, this.list[this.index]['file'])
      return this.list[this.index].file || {}
    },
    isImage () {
      return this.source?.type === AssetType.IMAGE
    },
    isVideo () {
      return this.source?.type === AssetType.VIDEO
    },
    isAudio () {
      return this.source?.type === AssetType.AUDIO
    },
    assetUrl () {
      return this.source && getAssetUrl(this.source.url)
    }
  },
  methods: {
    show (index) {
      this.index = index
      this.isReviewing = true
    },
    close () {
      this.isReviewing = false
    },
    onCloseReviewDialog () {
      console.log('close')
    },
    full () {
      this.$refs.previewDialog.show(this.source)
    },
    resolve () {
      this.$emit('resolve', this.form)
    },
    reject () {
      this.$emit(
        'reject',
        () => {
          this.$message.success('驳回成功！')
        },
        { item: this.form, review: this.review }
      )
    },
    next (gap) {
      const position = this.index
      let index = (position + gap) % this.list.length
      if (index < 0) {
        index += this.list.length
      }
      this.index = index
      if (this.form.review) {
        this.review = { ...this.form.review }
      } else {
        this.review = {
          type: '',
          reason: ''
        }
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.c-review {
  &-assest {
    flex: 0 0 464px;
    &__block {
      height: 278px;
    }

    .o-image--preview,
    .o-video--preview {
      width: 100%;
      height: 100%;
    }
  }

  &-form {
    flex: 1 0 250px;
    height: 278px;
    font-size: 16px;
    &__label {
      flex: 0 0 90px;
      font-weight: 700;
    }
  }
}
.fl-1 {
  flex: 1;
}
</style>
<style>
.c-review {
  min-width: 800px;
}
</style>
