<template>
  <div>
    <Drawer
      :title="formTitle"
      v-model="modalVisible"
      width="990"
      :mask-closable="false"
      :styles="styles"
      @on-close="close"
    >
      <Form
        ref="formValidate"
        :label-width="100"
      >
       <FormItem label="回复" prop="title">
          <Input
             type="textarea"
            v-model="content"
            placeholder="请输入回复内容"
          ></Input>
        </FormItem>
         <FormItem v-if="!editMode" label="情绪值类型">
            <InputNumber v-model="moodType"></InputNumber>
          </FormItem>
           <FormItem v-if="!editMode" label="情绪值">
            <InputNumber v-model="mood"></InputNumber>
          </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="close">取消</Button>
        <Button type="primary" @click="submit">保存</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import UploadS from '@/view/common/upload.vue'
import {
  updateContent,
  addTreeHole,
  relayTreeHole
} from '@/api/api'
export default {
  props: {
    search: {
      type: Function,
      default: null
    },
    treeData: {
      type: Array,
      default: () => []
    },
    row: {
      type: Object,
      default: () => {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    UploadS
  },
  data () {
    return {
      id: null,
      modalVisible: false,
      editMode: false,
      formTitle: '',
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      moodType: null,
      mood: null,
      content: ''
    }
  },
  watch: {
    visible: {
      handler: function (val) {
        this.modalVisible = val
        if (val) {
          this.search()
        }
        this.formValidate = this.row
      },
      immediate: true
    },
    row: {
      handler: function (val) {
        console.log(val)
        if (val.id === 'add') {
          this.editMode = false
          this.formTitle = '新增留言'
        } else {
          this.editMode = true
          this.formTitle = '编辑回复'
          // this.content=val.content
          this.id = val.id
        }
      },
      immediate: true
    }
  },
  methods: {
    submit () {
      let params = {
        content: this.content
      }
      if (this.editMode) {
        params.id = this.id
        relayTreeHole(params).then((res) => {
          if (res.status === 200) {
            this.$Message.success(res.msg)
            this.close()
            this.search()
          } else {
            this.$Message.error(res.msg)
          }
        })
      } else {
        params.mood = this.mood
        params.moodType = this.moodType
        addTreeHole(params).then((res) => {
          if (res.status === 200) {
            this.$Message.success('新增成功')
            this.close()
            this.search()
          } else {
            this.$Message.error(res.msg)
          }
        })
      }
    },
    getTree (e) {
      getTreeCategories(e).then((res) => {
        console.log(res)
      })
    },
    change (val, type) {
      if (type === 1) {
        this.formValidate.is_in_home_lis = val ? 1 : 0
      }
      if (type === 2) {
        this.formValidate.is_in_discover_list = val ? 1 : 0
      }
    },
    close () {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style>
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
