<template>
  <div>
    <xy-dialog :width="70" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增攻略' : '编辑攻略'" :form="form" :rules="rules" @submit="submit">
      <template v-slot:title>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>标题：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.title" placeholder="请填写标题" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:subheading>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            副标题：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.subheading" placeholder="请填写副标题" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:strategyTypeId>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>栏目：
          </div>
          <div class="xy-table-item-content">
            <el-select clearable v-model="form.strategyTypeId" placeholder="请选择栏目" style="width: 300px;">
              <el-option v-for="item in strategyTypes" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:state>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>是否启用：
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.state"></el-switch>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>内容：
          </div>
          <div class="xy-table-item-content" style="width:680px">
			<xyTinymce v-if="isShow" v-model="form.content"></xyTinymce>
            <!-- <tinymce ref="tinymce" :height="200" v-model="form.content" id='tinymce'></tinymce> -->
          </div>
        </div>
      </template>
      <template v-slot:coverPicture>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>封面图：
          </div>
          <div class="xy-table-item-content">
            <div v-if="form.coverPicture" style="position: relative;">
              <img :src="form.coverPicture" class="avatar">
              <Button
                shape="circle"
                icon="md-close"
                type="error"
                size="small"
                class="img__delete"
                @click="form.coverPicture = ''"></Button>
            </div>
            <el-upload
              v-else
              accept="picture"
              :limit="1"
              class="avatar-uploader"
              list-type="picture-card"
              :action="action"
              :show-file-list="true"
              :on-error="uploadFail"
              :on-success="uploadSuccess"
              :before-upload="uploadBefore">
              <i  class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:sortNumber>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            排序：
          </div>
          <div class="xy-table-item-content">
            <el-input-number :controls="false" :min="0" :precision="0" v-model="form.sortNumber" placeholder="请填写排序" clearable style="width: 300px;"></el-input-number>
          </div>
        </div>
      </template>
      <template v-slot:label>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>标签：
          </div>
          <div class="xy-table-item-content">
            <el-select multiple v-model="form.label" placeholder="请选择标签" style="width: 300px;">
              <el-option v-for="item in labels" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {index as typeIndex} from "@/api/strategyType"
import {store,save} from "@/api/strategy"
import {getparameter} from '@/api/system/dictionary'

// import tinymce from "@/components/Tinymce"
  import xyTinymce from "@/components/XyTinymce/index.vue";

import { Message } from 'element-ui'
    import {replaceAll} from "@/utils/index"
export default {
  components:{
    xyTinymce
  },
  data() {
    return {
      isShow:false,
      type:'',
      id:'',
      action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`,

      detail:{},
      labels:[],
      strategyTypes:[],
      form:{
        title:'',
        subheading:'',
        strategyTypeId:'',
        state:true,
        coverPicture:'',
        sortNumber:0,
        label:'',
        content:'',
      },
      rules:{
        title:[
          {required:true,message:'请填写标题'}
        ],
        strategyTypeId:[
          {required:true,message:'请选择类型'}
        ],
        coverPicture:[
          {required:true,message:'请上传封面图'}
        ],
        content:[
          {required:true,message:'请填写内容'}
        ]
      }
    }
  },
  methods: {
    //上传
    uploadFail(err){
      console.log(err)
    },
    uploadSuccess(response){
      console.log(response)
      this.form.coverPicture = response.url
    },
    uploadBefore(file){
      if((file.size/1000) > 2024){
        Message({
          type:'warning',
          message:'上传图片大小超过2M！'
        })
        return false
      }
    },

    getDetail(){
      this.form = {
        title:this.detail.title,
        subheading:this.detail.subheading,
        strategyTypeId:this.detail.strategy_types_id,
        state:!!Number(this.detail.state),
        coverPicture:this.detail.cover_picture,
        sortNumber:this.detail.sort_number,
        label:this.detail.label,
        content:this.detail.content,
      }
      // this.$refs['tinymce'].setContent(this.form.content)
    },
    async getLabel(){
      const res = await getparameter({number:'label'})
      this.labels = res.detail
    },
    async getStrategyTypes(){
      const res = await typeIndex()
      this.strategyTypes = res.rows
      console.log(this.strategyTypes)
    },

    submit(){
      if(this.type === 'add'){
        console.log(this.form)
        store({
          strategy_types_id:this.form.strategyTypeId,
          state:this.form.state ? 1 : 0,
          sort_number:this.form.sortNumber,
          title:this.form.title,
          // content:this.form.content,
          subheading:this.form.subheading,
          label:this.form.label.toString(),
          cover_picture:this.form.coverPicture,
		  content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
		  
        }).then(res => {
          Message({
            type:'success',
            message:'新增攻略信息成功'
          })
          this.$emit('refresh')
          this.isShow = false
        })
        return
      }
      if(this.type === 'editor'){
        save({
          id:this.id,
          strategy_types_id:this.form.strategyTypeId,
          state:this.form.state ? 1 : 0,
          sort_number:this.form.sortNumber,
          title:this.form.title,
          // content:this.form.content,
          subheading:this.form.subheading,
          label:this.form.label.toString(),
          cover_picture:this.form.coverPicture,
		  content: replaceAll(this.form.content,'../storage/files',`${process.env.VUE_APP_BASE_API}storage/files`)
		  
        }).then(res => {
          Message({
            type:'success',
            message:'编辑攻略信息成功'
          })
          this.$emit('refresh')
          this.isShow = false
        })
      }
    }
  },
  watch:{
    isShow(newVal){
      if(newVal){
        this.getStrategyTypes()
        this.getLabel()
        if(this.type === 'editor'){
          this.getDetail()
        }
      }else{
        this.id = ''
        this.type = ''
        // this.$refs['tinymce'].setContent(' ')
        this.$refs['dialog'].reset()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.xy-table-item-label{
  width: 160px;
}
</style>
<style>
.avatar-uploader .el-upload {
  width: 120px;
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader .el-upload:hover {
  border-color: #BF617C;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  display: block;
  border-radius: 6px;
}
.img__delete{
  transform: scale(0.7,0.7);

  position: absolute;
  top: 1px;
  left: 4%;
}
</style>
