<template>
  <wrapper
    v-loading="loading"
    fill
    margin
    padding
    background
  >
    <div class="l-flex__none l-flex--row has-bottom-padding u-color--black">
      <i
        class="l-flex__none o-icon medium o-icon--back el-icon-arrow-left u-pointer u-bold"
        @click="onBack"
      />
      <span class="c-sibling-item o-title u-bold">{{ title }}</span>
      <span class="c-sibling-item far o-user">{{ createBy }}</span>
    </div>
    <status-wrapper
      v-if="loading || error"
      :error="error"
      @click="getPublishWorkflowDetail"
    />
    <template v-else>
      <div class="l-flex__none l-flex--row has-padding">
        <el-steps
          :active="active"
          finish-status="success"
          class="l-flex__fill"
          align-center
        >
          <el-step
            v-if="hasMinios"
            title="媒资审核"
          />
          <el-step
            v-if="hasItems"
            title="节目审核"
          />
          <el-step
            v-if="hasCarousels"
            title="轮播审核"
          />
          <el-step
            v-if="hasProgramCalendar"
            title="排期审核"
          />
          <el-step title="发布审核" />
          <el-step title="完成" />
        </el-steps>
      </div>
      <component
        :is="activeComponent"
        v-if="activeComponent"
        :workflow="workflow"
        @review="onReview"
        @next="onNext"
      />
      <div
        v-else
        class="has-padding"
      >
        <el-result
          icon="success"
          title="发布成功"
        >
          <template slot="extra">
            <el-link
              type="primary"
              @click="onBack"
            >
              返回列表
            </el-link>
          </template>
        </el-result>
      </div>
      <confirm-dialog
        ref="rejectDialog"
        title="驳回"
        @confirm="onConfirmReject"
      >
        <div class="c-grid-form u-align-self--center">
          <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>
      </confirm-dialog>
    </template>
  </wrapper>
</template>

<script>
import {
  getPublishWorkflowDetail,
  reviewWorkflow
} from '@/api/workflow'
import { resolvePublish } from '@/api/platform'
import ReviewAssets from './components/ReviewAssets'
import ReviewPrograms from './components/ReviewPrograms'
import ReviewRecurPrograms from './components/ReviewRecurPrograms'
import ReviewSchedule from './components/ReviewSchedule'
import ReviewPublish from './components/ReviewPublish'

export default {
  name: 'WorkflowReviewDetail',
  components: {
    ReviewAssets,
    ReviewPrograms,
    ReviewRecurPrograms,
    ReviewSchedule,
    ReviewPublish
  },
  data () {
    return {
      loading: true,
      error: false,
      workflow: null,
      active: 0,
      reviewOptions: [
        { value: 'reject', label: '驳回' },
        { value: '图文不符' },
        { value: '内容不合规' }
      ],
      review: {
        type: '',
        reason: ''
      }
    }
  },
  computed: {
    id () {
      return this.$route.params.id
    },
    title () {
      return this.workflow?.calendarReleaseScheduling.programCalendarName
    },
    createBy () {
      const user = this.workflow?.calendarReleaseScheduling.createByUsername
      return user ? `申请人：${user}` : ''
    },
    hasMinios () {
      if (this.workflow) {
        return !!this.workflow.minios
      }
      return false
    },
    hasItems () {
      if (this.workflow) {
        return !!this.workflow.items
      }
      return false
    },
    hasCarousels () {
      if (this.workflow) {
        return !!this.workflow.carousels
      }
      return false
    },
    hasProgramCalendar () {
      if (this.workflow) {
        return !!this.workflow.programCalendar
      }
      return false
    },
    process () {
      const arr = []
      if (this.hasMinios) {
        arr.push('ReviewAssets')
      }
      if (this.hasItems) {
        arr.push('ReviewPrograms')
      }
      if (this.hasCarousels) {
        arr.push('ReviewRecurPrograms')
      }
      if (this.hasProgramCalendar) {
        arr.push('ReviewSchedule')
      }
      if (this.workflow) {
        arr.push('ReviewPublish')
      }
      return arr
    },
    activeComponent () {
      return this.process[this.active]
    }
  },
  created () {
    this.getPublishWorkflowDetail()
  },
  methods: {
    getPublishWorkflowDetail () {
      this.loading = true
      this.error = false
      getPublishWorkflowDetail(this.id).then(
        ({ data }) => {
          this.workflow = data
        },
        () => {
          this.error = true
        }
      ).finally(() => {
        this.loading = false
      })
    },
    onNext (step = 1) {
      this.active += step
    },
    onReview ({ type, agreeIds, rejectIds }) {
      this.$submitData = {
        type,
        agreeIds,
        rejectIds
      }
      if (rejectIds.length) {
        this.review = {
          type: 'reject',
          reason: ''
        }
        this.$refs.rejectDialog.show()
        return
      }
      this.$confirm(`确定${type === 'calendar' ? '发布' : '通过'}？`, { type: 'warning' }).then(() => {
        if (type === 'calendar') {
          this.onResolve()
        } else {
          this.onSubmit()
        }
      })
    },
    onConfirmReject (done) {
      const reason = this.review.type === 'reject' ? this.review.reason : this.review.type
      if (!reason) {
        this.$message({
          type: 'warning',
          message: '请选择或填写驳回原因'
        })
        return
      }
      this.$submitData.reason = reason
      this.onReject(done)
    },
    onSubmit () {
      reviewWorkflow(this.id, this.$submitData).then(() => {
        this.onNext()
      })
    },
    onResolve () {
      resolvePublish(this.workflow.calendarReleaseScheduling).then(() => {
        this.onNext(2)
      })
    },
    onReject (done) {
      reviewWorkflow(this.id, this.$submitData).then(() => {
        done?.()
        this.$message({
          type: 'success',
          message: '驳回成功'
        })
        this.onBack()
      })
    },
    onBack () {
      this.$router.replace({ name: 'workflow-list' })
    }
  }
}
</script>

<style lang="scss" scoped>
.o-title {
  font-size: 18px;
}

.o-user {
  font-size: 14px;
}
</style>
