<template>
  <divider-container title="内容信息">
    <el-form ref="ruleForm" :model="form" :rules="rules">
      <el-row :gutter="10">
        <el-col class="txt-right" :span="2">视频图标：</el-col>
        <el-col :span="22">
          <el-form-item>
            <upload v-model="form.videoImgFile" params="prefix=/article" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="2">分享图标：</el-col>
        <el-col :span="22">
          <el-form-item>
            <upload v-model="form.shareImgFile" params="prefix=/share" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="2">视频链接：</el-col>
        <el-col :span="22">
          <el-form-item prop="videoUrl">
            <el-input
              v-model="form.videoUrl"
              style="max-width: 500px;"
              autocomplete="off"
              :maxlength="230"
              placeholder="不超过230个汉字"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="2">视频时长(秒)：</el-col>
        <el-col :span="22">
          <el-form-item prop="playTime">
            <el-input-number v-model="form.playTime" controls-position="right" :min="1" :precision="0" :controls="false" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" type="flex">
        <el-col class="txt-right" :span="2">视频文案：</el-col>
        <el-col :span="22">
          <el-form-item prop="videoText">
            <el-input
              v-model="form.videoText"
              style="max-width: 500px;"
              type="textarea"
              :rows="8"
              autocomplete="off"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" type="flex">
        <el-col class="txt-right" :span="2">Q&A：</el-col>
        <el-col :span="22">
          <QAText v-model="form.qaList" />
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="2">关联医生：</el-col>
        <el-col :span="22">
          <el-form-item prop="doctorId">
            <DoctorSelect v-model="form.doctorId" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </divider-container>
</template>

<script>
import { UPLOAD_URL_DEMO } from '@/const/urlKey'
import DoctorSelect from './DoctorSelect'
import QAText from './QAText'
import { cutUrl } from '@/utils'

export default {
  name: 'ArticleItemVideo',

  components: { DoctorSelect, QAText },

  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    check: {
      type: Boolean,
      default: false
    }
  },

  data() {
    const validateImg = (rule, value, callback) => {
      if (!Array.isArray(value)) return callback(new Error('数据出错，请重新上传'))
      if (value.length < 1) return callback(new Error('请先上传图片'))
      return callback()
    }

    return {
      form: {
        shareImgFile: this.info.shareUrl || [{ url: UPLOAD_URL_DEMO }],
        videoImgFile: this.info.coverUrl || [{ url: UPLOAD_URL_DEMO }],
        videoUrl: this.info.videoUrl,
        videoText: this.info.videoText,
        playTime: this.info.playTime,
        doctorId: this.info.doctorId,
        qaList: this.info.qaList,
        able: false
      },
      rules: {
        shareImgFile: [{ validator: validateImg, trigger: 'change' }],
        // videoImgFile: [{ validator: validateImg, trigger: 'change' }],
        playTime: [{ required: true, message: '请选择时长', trigger: 'blur' }],
        videoUrl: [{ required: true, message: '请输入视频地址', trigger: 'blur' }],
        videoText: [{ required: true, message: '请输入视频文案', trigger: 'blur' }],
        doctorId: [{ required: true, message: '请选择医生', trigger: 'change' }]
      }
    }
  },

  watch: {
    check: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.handleSubmit()
          })
        }
      },
      immediate: true
    },
    'form.videoImgFile': {
      handler(val) {
        this.$refs['ruleForm'].validateField('videoImgFile')
      },
      deep: true
    },
    'form.shareImgFile': {
      handler(val) {
        this.$refs['ruleForm'].validateField('shareImgFile')
      },
      deep: true
    }
  },

  mounted() {
  },

  methods: {
    handleSubmit() {
      this.$refs['ruleForm'].validate((valid) => {
        this.form.able = valid
        if (!valid) {
          this.$message.error('请检查内容信息是否填写完成~')
        } else {
          this.$emit('submit', {
            shareUrl: cutUrl(this.form.shareImgFile[0].url),
            contentType: 'video',
            videoText: this.form.videoText,
            videoUrl: this.form.videoUrl,
            coverUrl: this.form.videoImgFile.length === 0 ? null : cutUrl(this.form.videoImgFile[0].url),
            doctorId: this.form.doctorId,
            qaList: this.form.qaList,
            playTime: this.form.playTime
          })
        }
      })
      this.$emit('reset-check')
    }
  }
}
</script>

<style scoped>
.mt-60 {
  margin-top: 60px;
}
.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;
}
.txt-right {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  font-weight: bold;
}
</style>
