<template>
  <a-modal
    :width="1000"
    height="auto"
    :visible="editVisible" @cancel="handleClose"
    cancelText="取消" okText="提交" @ok="handleSubmit">
    <a-form-model
      class="a-form-model"
      ref="ruleForm"
      :model="submitData"
      :rules="validateRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      @validate="validate">
      <div class="a-form-model-item-view">
        <a-form-model-item has-feedback class="a-form-model-item" ref="publisherId" label="发布者" prop="publisherId">
          <a-select
              style="width: 100%"
              @change="handlePublisherIdChange"
              v-model="submitData.publisherId"
              :defaultValue="submitData.publisherId"
              placeholder="请选择发布者">
            <a-select-option v-for="(item,index) in authUserIdOption" :key="item.value">{{item.text}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item has-feedback class="a-form-model-item" ref="itemSubject" label="健康知识主题" prop="itemSubject">
          <a-input
              placeholder="请输入健康知识主题"
              v-model="submitData.itemSubject"
              @blur="
             () => {
               $refs.itemSubject.onFieldBlur();
             }"
          />
        </a-form-model-item>
      </div>
      <a-divider>填写攻略内容</a-divider>
      <Editor @change="getEditorContent" :value="editorContent" :isClear="true"></Editor>
    </a-form-model>
  </a-modal>
</template>
<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import Editor from '@/components/editor/Editor'
import store from '@/store'
import moment from 'moment'
import baseUtils from '@/utils/baseUtils'
moment.locale('zh-cn')

const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}
export default {
  name: 'ItemEdit',
  components: {
    Editor:Editor,
    moment:moment,
    baseUtils:baseUtils,
  },
  props: {

  },
  data () {
    return {
      locale:locale,
      editorContent:``,
      authUserIdOption:[],
      submitUrl:'api/v1/healthKnowledge/updateItem', //提交URL
      timeFormat:'YYYY-MM-DD', //时间格式
      beginAndEndTimeFormat:'YYYY-MM', //时间格式
      uploadUrl: process.env.BASE_API+'/api/systemFile/uploadFile', //文件时上传
      submitData:{
        itemContent:'',
        itemSubject:'',
        publisherId:'',
      },
      editVisible:false,
      //校验规则
      validateRules: {
        temContent: [
          { required: true, message: '请规范填写健康知识内容', trigger: 'blur' }
        ],
        itemSubject: [
          { required: true, message: '请规范填写健康知识主题', trigger: 'blur' }
        ],
        publisherId: [
          { required: true, message: '请选择发布者ID', trigger: 'change' }
        ],
      },
      formItemLayout,
      dictDataList:[], //字典数据集合
      //上传文件的时候必须带上的token
      uploadHeader:{
          "Authentication":store.state.account.token
      },
      previewVisible: false,
      previewImage: '',
      labelCol: {
          span: 5,
      },
      wrapperCol: {
          span: 15,
      },
      loading: false,
    }
  },
  methods: {
    moment, //时间处理
    getEditorContent(textValue) {
      this.editorContent = textValue
      console.log('textValue : ' + textValue)
      console.log('editorContent : ' + this.editorContent)
    },
    async showEdit(data){
      this.submitData = {...data}
      let itemContent = data.itemContent
      if(!this.$isNull(itemContent)){
        this.editorContent = itemContent
      }
      await this.setOtherData();
      this.editVisible = true
    },
    async setOtherData(){
      this.authUserIdOption = await this.$commonConstants.authUserIdOption()
    },
    handlePublisherIdChange(value){
      this.submitData.publisherId = value
    },
    handleAuthUserChange(value){
      this.submitData.authUserId = value
    },
    onEndTimeChange(value, dateString){
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.submitData.endTime = dateString
    },
    onBeginTimeChange(value, dateString){
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.submitData.beginTime = dateString
    },
    onTimeOK(value){
      console.log('onOk: ', value);
    },
    //删除文件集合里面的文件
    removeFileFromList(arrayList,uid){
      if(arrayList && uid){
        let newArr = arrayList.reduce((total, current) => {
          current.uid !== uid && total.push(current);
          return total;
        }, []);
        return newArr;
      }
    },
    //处理关闭
    async handleClose(){
      await this.resetForm();
      await this.clearAll();
      this.$emit("close")
    },
    //清除所有
    async clearAll(){
      console.log('clearAll')
      //清除所有文件内容
      this.authUserIdOption.splice(0,this.authUserIdOption.length);
      this.submitData = {
        itemContent:'',
        itemSubject:'',
        publisherId:'',
      }
      this.editVisible = false
    },
    //验证方法
    validate(successStatus,object){
      console.log(successStatus)
      console.log(object)
    },
    //重置表单
    async resetForm() { //重置表单
      this.$refs.ruleForm.resetFields();
    },
    //处理提交
    handleSubmit () { //处理提交
      let that = this
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          //格式化时间
          /*if(this.submitData.beginTime){
              this.submitData.beginTime = moment(this.submitData.beginTime).format(this.beginAndEndTimeFormat);
          }
          if(this.submitData.endTime){
              this.submitData.endTime = moment(this.submitData.endTime).format(this.beginAndEndTimeFormat);
          }*/
          if(!this.$isNull(this.editorContent)){
            this.submitData.itemContent = this.editorContent
          }else{
            this.$message.error('请填写知识内容');
          }
          this.loading = true
          //从表单里面拿到值
          this.$putBodyRequest(this.submitUrl, {
            ...this.submitData
          }).then(() => {
            this.loading = false
            this.resetForm()
            this.clearAll();
            this.$emit('success')
          }).catch(() => {
             this.$message.error('更新出现错误')
             this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  watch: { //监控弹窗的变化

  }
}
</script>
<style lang="less" scoped>
    /*使用~@引入*/
    @import "~@/utils/utils.less";
</style>
