<template>
  <el-drawer
    title="文章详情"
    :visible.sync="drawer"
    size="80%"
    @close="$emit('cancel')"
  >

    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="140px">
      <divider-container title="基本信息" />

      <el-form-item v-if="modalType !== 'add'" label="文章ID">{{ form.id }}</el-form-item>
      <el-form-item label="课程分类" prop="name">
        <el-radio-group v-model="form.moduleType" :disabled="modalType !== 'add' && lockRadio">
          <el-radio
            v-for="item in moduleOptions"
            :key="item.value"
            :disabled="modalType !== 'add' && item.value === 'PARENTING_COURSES'"
            :label="item.value"
          >{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="内容名称" prop="title">
        <el-input v-model="form.title" style="max-width: 600px;" autocomplete="off" :maxlength="150" placeholder="不超过150个汉字" />
      </el-form-item>
      <el-form-item label="内容来源" prop="contentSources">
        <el-input v-model="form.contentSources" style="max-width: 600px;" autocomplete="off" :maxlength="150" placeholder="不超过150个汉字" />
      </el-form-item>

      <div style="display: flex; align-items: center;">
        <label class="label el-form-item__label">内容载体</label>
        <div style="display: inline-block;" :span="20">
          <div v-if="tempModule === null">请优先选择课程分类</div>
          <div v-else-if="tempModule === 'text'">文字</div>
          <el-form-item v-else-if="tempModule === 'options'" prop="carrier" label-width="0" style="margin: 0;">
            <el-radio-group v-model="form.carrier" :disabled="modalType !== 'add'">
              <el-radio
                v-for="item in carrierOptions"
                :key="item.value"
                :label="item.value"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
      <itemText v-if="tempModule === 'text'" ref="text" :info="form.info" :check="check" @submit="saveParams" @reset-check="check = false" />
      <itemVideo v-else-if="form.carrier === 'video'" ref="video" :info="form.info" :check="check" @submit="saveParams" @reset-check="check = false" />
      <itemVioce v-else-if="form.carrier === 'audio'" ref="audio" :info="form.info" :check="check" @submit="saveParams" @reset-check="check = false" />

      <divider-container title="标签分类" />

      <el-form-item label="勾选标签">
        <TagCheckTag v-model="form.tags" :module-type="form.moduleType" />
      </el-form-item>

      <template v-if="form.moduleType !== null">
        <divider-container v-if="form.moduleType !== 'ONE_LESSON_PER_WEEK'" title="发布渠道">
          <el-row :gutter="10">
            <el-col class="txt-right" :span="2">是否发布：</el-col>
            <el-col :span="22">
              <div style="border-radius: 10px; border: 1px solid #EEEEEE; padding: 8px;">
                <el-radio-group v-model="form.isRelease">
                  <el-radio
                    v-for="item in releaseOptions"
                    :key="item.value"
                    :label="item.value"
                  >{{ item.label }}</el-radio>
                </el-radio-group>
                <el-checkbox v-model="form.isFeature">将内容设为精选，发布到首页“<span style="color: red;">{{ `${moduleTxt}——精选` }}</span>”</el-checkbox>
              </div>
            </el-col>
          </el-row>
        </divider-container>

        <divider-container v-else title="发布时段">
          <el-row :gutter="10">
            <el-col class="txt-right" :span="2">设置时段：</el-col>
            <el-col :span="22">
              <el-form-item prop="timeArr">
                <el-date-picker
                  v-model="form.timeArr"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['12:00:00', '08:00:00']"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
                <!-- :picker-options="pickerOptions" -->
              </el-form-item>
            </el-col>
          </el-row>
        </divider-container>
      </template>

      <divider-container title="运营设置" class="mt-60" />

      <el-row :gutter="10">
        <el-row>
          <el-col :span="8">
            <el-form-item label="排序等级" prop="sort">
              <el-input-number v-model="form.sort" controls-position="right" :min="0" :max="10000" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="点赞数" prop="likeNum">
              <el-input-number v-model="form.likeNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="收藏量" prop="collectNum">
              <el-input-number v-model="form.collectNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="播放量" prop="playNum">
              <el-input-number v-model="form.playNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="8">
            <el-form-item label="内容分值" prop="score">
              <el-input-number v-model="form.score" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内容等级" prop="level">
              <el-input-number v-model="form.level" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="8" /> -->
        </el-row>
      </el-row>
    </el-form>

    <div class="flex-end mcol-10 btn-footer">
      <el-button type="primary" @click="handleSubmit('ruleForm')">保存</el-button>
      <el-button @click="handleComment">评论</el-button>
      <el-button @click="drawer = false">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import MODULETYPE from '@/const/moduleType'
import { setStatus } from '@/utils'
import EMITKEY from '@/const/emitNameKey'

import itemText from '../itemComponents/itemText'
import itemVideo from '../itemComponents/itemVideo'
import itemVioce from '../itemComponents/itemVioce'
import TagCheckTag from '../itemComponents/TagCheckTag'

import { saveItem, getItem, deleteArticle } from '@/model/article'

export default {
  name: 'ArticleItem',

  components: { itemText, itemVideo, itemVioce, TagCheckTag },

  props: {
    modalType: {
      type: String,
      default: 'add'
    },
    articleType: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      drawer: true,

      form: {
        moduleType: this.articleType,
        title: '',
        carrier: null,
        info: {},
        isRelease: true,
        isFeature: false,
        likeNum: 0,
        collectNum: 0,
        playNum: 0,
        score: 0,
        level: 0,
        timeArr: '',
        tags: [],
        contentSources: null,
        sort: 0
      },
      rules: {
        moduleType: [{ required: true, message: '请选择课程分类', trigger: 'blur' }],
        title: [{ required: true, message: '请输入内容名称', trigger: 'blur' }],
        carrier: [{ required: true, message: '请选择内容载体', trigger: 'blur' }],
        likeNum: [{ required: true, message: '请输入点赞数', trigger: 'blur' }],
        collectNum: [{ required: true, message: '请输入收藏数', trigger: 'blur' }],
        playNum: [{ required: true, message: '请输入播放数', trigger: 'blur' }],
        score: [{ required: true, message: '请输入分值', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序等级', trigger: 'blur' }],
        level: [{ required: true, message: '请输入等级', trigger: 'blur' }]

      },

      moduleOptions: MODULETYPE.ARTICLE_ITEM_MODAL_TYPE,
      carrierOptions: setStatus(['视频', '音频'], ['video', 'audio']),
      releaseOptions: setStatus(['是', '否'], [true, false]),

      pickerOptions: {
        disabledDate(time) {
          const now = new Date(new Date().setHours(0, 0, 0, 0))
          if (time.getTime() > now) {
            return false
          } else {
            return true
          }
        }
      },
      check: false,
      params: {},
      lockRadio: false
    }
  },

  computed: {
    tempModule: function() {
      const tmp = this.form.moduleType
      const result = tmp === null ? null : tmp === 'PARENTING_COURSES' ? 'text' : 'options'
      return result
    },
    moduleTxt: function() {
      const tmp = this.form.moduleType
      const result = tmp === 'PARENTING_COURSES' ? '育儿课堂' : '专家说'
      return result
    }
  },

  mounted() {
    this.id && this.loadData()
  },

  methods: {
    async loadData() {
      const { success, data, msg } = await getItem({
        id: this.id
      })
      if (success) {
        this.form = data
        this.lockRadio = data.moduleType === 'PARENTING_COURSES'
      } else {
        this.$message.error(msg)
      }
    },

    handleSubmit(formName) {
      // console.log(formName)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formSubmit()
        } else {
          this.$message.error('请检查内容信息是否填写完成~')
        }
      })
    },

    formSubmit() {
      this.params = {
        moduleType: this.form.moduleType,
        isRelease: this.form.isRelease,
        isFeature: this.form.isFeature,
        title: this.form.title,
        likeNum: this.form.likeNum,
        collectNum: this.form.collectNum,
        playNum: this.form.playNum,
        score: this.form.score,
        level: this.form.level,
        tags: this.form.tags,
        contentSources: this.form.contentSources,
        sort: this.form.sort
      }
      if (this.form.moduleType === 'ONE_LESSON_PER_WEEK') {
        if (!Array.isArray(this.form.timeArr)) {
          this.$message.warning('请选择时段~')
          this.check = false
          return false
        }
        this.params.startTime = this.form.timeArr[0]
        this.params.endTime = this.form.timeArr[1]
      }
      this.check = true
    },

    saveParams(obj) {
      console.log(obj)
      Object.assign(this.params, obj)
      this.saveData(this.params)
    },

    async saveData(options) {
      const { success, msg } = await saveItem({
        data: options,
        id: this.id || null
      })
      this.check = false
      this.params = {}
      if (success) {
        this.$message.success('操作成功~')
        this.bus.$emit(EMITKEY.ARTICLERELOAD)
        this.drawer = false
      } else {
        this.$message.error(msg)
      }
    },

    async handleDelete() {
      const { success, msg } = await deleteArticle({
        id: this.id
      })
      if (success) {
        this.$message.success('删除成功~')
        this.drawer = false
        this.bus.$emit(EMITKEY.ARTICLERELOAD)
      } else {
        this.$message.error(msg)
      }
    },

    handleComment() {
      this.$commentArticleDrawer({
        id: this.id
      })
    }
  }
}
</script>

<style scoped>
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mt-60 {
  margin-top: 60px;
}
.mcol-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.mcol-20 .el-row {
  font-size: 14px;
  line-height: 1.7;
  padding-top: 14px;
}
.search-box {
  border: 1px #DCDEE2 solid;
  padding: 5px;
}
.search-box .search-input {
  margin: 0 5px;
  max-width: 200px;
}
.btn-footer {
  margin-right: 15px;
}
.label {
  display: inline-block;
  width: 140px;
}
.txt-right {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  font-weight: bold;
}
</style>
