<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增资讯' : '编辑资讯'" :form="form"
      :rules='rules' @submit="submit">
      <template v-slot:title>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>标题：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.title" placeholder="请输入标题" clearable style="width: 400px;"></el-input>
          </div>
        </div>
      </template>
      <!-- <template v-slot:time>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>发布时间：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker style="width: 400px;" v-model="form.time" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
              placeholder="选择发布时间">
            </el-date-picker>
          </div>
        </div>
      </template> -->
      <template v-slot:image_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>标题图片/视频：
          </div>
          <div class="xy-table-item-content">
            <!-- <el-upload :action="action" :limit='1' class='upload-demo' list-type="picture-card" :file-list="pictureList"
              ref="pictureUpload" style="width:600px" :auto-upload="true" :data="uploadOther"
              :on-success="handlesuccess" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload> -->
            <el-upload :action="action" class='upload-demo' :file-list="pictureList" ref="pictureUpload"
              style="width:600px;display: flex;flex-wrap: wrap;margin-left:10px" :auto-upload="true" :data="uploadOther" :on-success="handlesuccess"
              :on-remove="handleRemove">
              <el-button style="width: 100%;text-align: left;" v-if="pictureList.length<1" size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:file_ids>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>附件：
          </div>
          <div class="xy-table-item-content">
            <el-upload :action="action" class='upload-demo' :file-list="fileList" ref="pictureUpload"
              style="width:400px" :auto-upload="true" :data="uploadOther" :on-success="handlesuccessFile"
              :on-remove="handleRemoveFile">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </template>

      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>内容：
          </div>
          <div class="xy-table-item-content">
            <div style="width: 99.9%;">
              <tinymce v-model="form.content" ref="tiny" :height="300" />
            </div>
          </div>
        </div>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  import {
    show,
    save,
    destroy
  } from '@/api/task/newplan.js'
  import {
    getToken
  } from '@/utils/auth'
  import Tinymce from '@/components/Tinymce'
  export default {
    components: {
      Tinymce
    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
        uploadOther: {
          token: ""
        },
        fileList: [],
        pictureList: [],
        form: {
          title: '',
          image_id: '',
          file_ids: [],
          content: '',
        },
        rules: {
          title: [{
            required: true,
            message: '请输入标题'
          }]

        }
      }
    },
    created() {
      this.uploadOther.token = getToken();
    },
    methods: {
      handleRemove(file, fileList) {
        this.pictureList = fileList
      },
      handlesuccess(response, file, fileList) {
        this.pictureList = fileList
      },
      handleRemoveFile(file, fileList) {
        this.fileList = fileList
      },
      handlesuccessFile(response, file, fileList) {
        this.fileList = fileList
      },
      submit() {
        if (this.id) {
          this.form.id = this.id
        }
        if (this.type == 'add') {
          this.form.id = ''
        }

        if (this.pictureList.length > 0) {
          if (this.pictureList[0].response) {
            this.form.image_id = this.pictureList[0].response.id
          } else {
            this.form.image_id = this.pictureList[0].id
          }
        } else {
          Message({
            type: 'warning',
            message: '请上传标题图片'
          })
          this.form.image_id = ''
          return
        }

        let _files = []
        if (this.fileList.length > 0) {
          for (var h of this.fileList) {
            if (h.response) {
              _files.push(h.response.id)
            } else {
              _files.push(h.id)
            }
          }
          this.form.file_ids = _files
        } else {
          this.form.file_ids = []
        }



        save({
          ...this.form,
          table_name: 'articles',
        }).then(res => {
          Message({
            type: 'success',
            message: this.type === 'add' ? '新增成功' : '编辑成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      },
      getDetail() {
        show({
          id: this.id,
          table_name: 'articles',
          with_relations: ['image']
        }).then(res => {
          this.form = {
            title: res?.title,
            image_id: res?.image_id,
            file_ids: res?.file_ids,
            content: res?.content,
          }
          if(res.image){
            this.pictureList.push({
              id:res.image.id,
              name:res.image.original_name,
              url:res.image.url
            })
          }


          let _files = []
          if(res.files && res.files.length>0){
            res.files.map(item=>{
              _files.push({
                id:item.id,
                name:item.original_name,
                url:item.url
              })
            })
          }
          this.fileList = _files
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.fileList = []
          this.pictureList = []
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">

</style>
