<template>
  <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" :class="`form-container ${options.page}-form`" >
    <div class="left">
      <el-form-item label="项目：" prop="project_id">
        <el-col :span="12">
          <el-select v-model="form.project_id" placeholder="请选择项目" size="small" style="width: 100%" clearable :disabled="isDetails">
            <el-option v-for="item in projectList" :label="item.project_name" :value="item.project_id" :key="item.project_id"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="类型：" prop="type_id">
        <el-col :span="12">
          <el-select v-model="form.type_id" placeholder="请选择类型" size="small" style="width: 100%" clearable :disabled="isDetails">
            <el-option v-for="item in typeList" :label="item.type_name" :value="item.type_id" :key="item.type_id"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="标题：" prop="title" style="margin-right:15px;">
        <el-input v-model="form.title" placeholder="请输入辩题" size="small" :disabled="isDetails"/>
      </el-form-item>
      <el-form-item label="跳转链接：" style="margin-right:15px;">
        <el-input v-model="form.uri" placeholder="请输入跳转链接" size="small" :disabled="isDetails"/>
      </el-form-item>
      <el-form-item v-if="pageName !== 'ads'" label="摘要：" prop="summary" :rules="{required: true, message: '请输入摘要', trigger: 'blur'}" style="margin-right:15px;">
        <el-input type="textarea" v-model="form.summary" placeholder="请输入摘要" size="small" rows="4" :disabled="isDetails"/>
      </el-form-item>
      <el-form-item label="备注：" prop="remarks" style="margin-right:15px;">
        <el-input type="textarea" v-model="form.remarks" placeholder="请输入备注" size="small" rows="4" :disabled="isDetails"/>
      </el-form-item>
      <el-form-item ref="el-form-item-tinymce" v-if="pageName === 'article'" label="正文：" prop="content" :rules="{required: true, message: '请输入正文', trigger: 'blur'}" style="margin-right:15px;">
        <Tinymce ref="editor" v-model="form.content" :readonly="isDetails" :height="400" @blur="tinymceBlur" />
      </el-form-item>
    </div>
    <div class="right">
      <el-form-item label="web端图片：" required class="file-upload">
        <el-upload
          :disabled="isDetails"
          class="avatar-uploader"
          action="https://baidu.com"
          :show-file-list="false"
          :before-upload="val => beforeAvatarUpload(val, 'pc_img')">
          <img v-if="form.web_img_uri" :src="form.web_img_uri" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p>
      </el-form-item>
      <el-form-item label="移动端图片：" required class="file-upload">
        <el-upload
          :disabled="isDetails"
          action="https://baidu.com"
          class="avatar-uploader"
          :show-file-list="false"
          :before-upload="val => beforeAvatarUpload(val, 'mobile_img')">
          <img v-if="form.mobile_terminal_img_uri" :src="form.mobile_terminal_img_uri" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <p class="des">请上传文件，最多上传一张/份<br>支持：PNG、JPG</p>
      </el-form-item>
      <el-form-item label="上传附件：" class="file-upload">
        <el-upload
          :disabled="isDetails"
          action="https://baidu.com"
          class="file-uploader"
          ref="upload"
          :show-file-list="false"
          :before-upload="val => beforeAvatarUpload(val, 'file')">
          <el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传文件</el-button>
        </el-upload>
        <p class="des">请上传文件，最多上传一份<br>支持：word、excel、pdf</p>
      </el-form-item>
      <el-form-item label="上传视频：" class="file-upload">
        <el-upload
          :disabled="isDetails"
          action="https://baidu.com"
          class="file-uploader"
          ref="upload"
          :show-file-list="false"
          :before-upload="val => beforeAvatarUpload(val, 'video')">
          <el-button slot="trigger" size="small" type="primary" :disabled="isDetails">上传视频</el-button>
        </el-upload>
        <p class="des">请上传文件，最多上传一份<br>支持：MP4</p>
      </el-form-item>
      <el-form-item label="开始时间：" prop="start_time">
        <el-date-picker v-model="form.start_time" type="date" placeholder="选择开始时间" size="small" clearable :disabled="isDetails"/>
      </el-form-item>
      <el-form-item label="结束时间：" required class="mb-15">
        <el-switch v-model="form.hasEndDate" :active-value="1" :inactive-value="0" active-text="有" inactive-text="无" :disabled="isDetails"></el-switch>
        <el-date-picker v-if="form.hasEndDate" v-model="form.end_time" type="date" placeholder="选择结束时间" size="small" clearable :disabled="isDetails"/>
      </el-form-item>
      <el-form-item label="发布状态：" class="mb-15">
        <el-switch v-model="form.is_publish" :active-value="1" :inactive-value="0" active-text="开" inactive-text="关" :disabled="isDetails"></el-switch>
      </el-form-item>
      <el-form-item label="置顶状态：" class="mb-15" v-if="pageName !== 'image-text'">
        <el-switch v-model="form.is_top" :active-value="1" :inactive-value="0" active-text="开" inactive-text="关" :disabled="isDetails"></el-switch>
        <el-input-number size="small" v-model="form.weight" :min="0" :disabled="isDetails"></el-input-number>
      </el-form-item>
      <el-form-item v-if="!isDetails" class="mb-15">
        <el-button @click="handleClose" size="mini">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">保存</el-button>
      </el-form-item>
      <el-form-item label="审核状态：" v-if="isDetails" class="mb-15">
        {{options.details.review_status | reviewStatus}}
      </el-form-item>
      <el-form-item label="审核评审：" v-if="isDetails" class="mb-15">
        {{options.details.review_word || ''}}
      </el-form-item>
      <slot name="form-item-review" v-if="isDetails"/>
      <!-- <el-form-item v-if="isDetails">
        <el-button type="primary" @click="handleReview" size="mini">审核</el-button>
      </el-form-item> -->
    </div>
  </el-form>
</template>
<script>
import Tinymce from '@/components/Tinymce'
export default {
  props: {
    options: {
      type: Object
    }
  },
  components: { Tinymce },
  filters: {
    reviewStatus(val) {
      let text = '待审核'
      switch (val) {
        case 1:
          text = '通过'
          break
        case 2:
          text = '不通过'
          break
      }
      return text
    }
  },
  data() {
    return {
      projectList: [
        { project_id: '111', project_name: '官网' },
        { project_id: '222', project_name: 'kellet' }
      ],
      typeList: [
        { type_id: '111', type_name: 'banner广告' },
        { type_id: '222', type_name: '侧边栏广告' },
        { type_id: '333', type_name: '正文区广告' }
      ],
      form: {
        project_id: '',
        type_id: '',
        title: '',
        uri: '',
        summary: '',
        remarks: '',
        content: '',
        web_img_uri: '',
        mobile_terminal_img_uri: '',
        enclosure_uri: '',
        video_uri: '',
        start_time: '',
        hasEndDate: 1,
        end_time: '',
        is_publish: 1,
        is_top: 1,
        weight: 10
      },
      rules: {
        project_id: [
          { required: true, message: '请选择项目', trigger: 'change' }
        ],
        type_id: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    pageName() {
      return this.options.page
    },
    isDetails() {
      return this.options.type === 'details'
    }
  },
  created() {
    if (this.isDetails) {
      const details = this.options.details
      this.deepSet(this.form, details)
    }
  },
  methods: {
    deepSet(obj, source) {
      for (const key in source) {
        const sourceVal = source[key]
        if (Array.isArray(sourceVal)) {
          obj[key] = sourceVal
        } else if (typeof sourceVal === 'object' && !(sourceVal instanceof Date)) {
          const val = obj[key]
          this.deepSet(val, sourceVal)
        } else {
          obj[key] = sourceVal
        }
      }
    },
    beforeAvatarUpload(file, type) {
      console.log(file)
      console.log(type)
      return false
    },
    handleClose() {
      this.$emit('drawFormClose')
    },
    tinymceBlur() {
      this.$refs['el-form-item-tinymce'].$emit('el.form.blur')
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit('drawFormSubmit', this.form)
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.form-container{
  padding-top:15px;
  display:flex;
  align-items: stretch;
}
.form-container .left{
  width:60%;
}
.form-container .right{
  flex-shrink: 0;
  flex: 1;
  box-sizing:border-box;
  border-left:1px dotted #eee;
}
.form-container:after{
  clear:both;
}
.el-form-item.file-upload .des{
  display:inline-block;
  color: #c9c9c9;
  line-height:24px;
  font-size:12px;
}
.el-form-item.file-upload:not(.is-required){
  margin-bottom:5px;
}
.el-form-item.mb-15{
  margin-bottom:15px;
}
.avatar-uploader, .file-uploader{
  display:inline-block;
  vertical-align: top;
  width:130px;
}
.avatar-uploader ::v-deep.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
.avatar-uploader ::v-deep.el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>