<template>
  <el-dialog title="回复" :visible.sync="isVisible" width="600px" class="send-main">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-form-item label="回复内容" prop="responseInfo">
          <el-input type="textarea" v-model="form.responseInfo" placeholder="请输入回复内容" :maxlength="400"></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" v-if="!isClick" @click="okSend('form')">确 定</el-button>
      <el-button type="primary" v-else style="opacity: 0.6;" disabled>确 定</el-button>
    </div>
  </el-dialog>
</template>
<script type="javascript">
  import {feedbackInfoUpdate} from 'api/website/order/index'
  export default {
    props: ['oneRow'],
    name: 'dealDialog',
    data() {
      return {
        isClick: false, // 是否点击了发货
        rules: {
          responseInfo: { required:  true, message: '请输入回复内容', trigger: 'blur' }
        },
        form: {
          id: this.oneRow.id,
          responseInfo: '' // 回复内容
        },
        isVisible: false,
      }
    },
    watch: {
      isVisible(newValue, oldValue) {
        if (!newValue) {
          this.$emit('dealEvent', false)
        }
      }
    },
    mounted() {
      this.isVisible = true
    },
    methods: {
      /**
       * 弹框-取消
       * */
      cancel() {
        this.$emit('dealEvent', false)
      },
      /**
       * 回复
       */
      okSend(formName) {
        let _this = this
        if(this.isClick){
          return
        }
        this.isClick = true
        setTimeout(function(){
          _this.isClick = false
        }, 2000)
        const set = this.$refs;
        set[formName].validate((valid) => {
          if (valid) {
            feedbackInfoUpdate(this.form).then((response) => {
              if(response.status == 200){
                this.$notify({
                  title: "成功",
                  message: "操作成功",
                  type: "success",
                  duration: 2000
                });
                this.$emit('dealEvent', true)
              } else {
                this.$notify({
                  title: '失败',
                  message: response.message,
                  type: 'error',
                  duration: 2000
                })
              }
            });
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .send-main{
    .send-info{
      border: 1px solid #eee;
      padding: 20px;
      margin-bottom: 20px;
      margin-top: 20px;
    }
    .invoice-item{
      padding: 20px;
      border: 1px solid #eee;
      .invoice-item-text{
        margin-top: 10px;
      }
    }
  }
</style>
