<!--
<reply-dialog
  :editRow="editRow"
  :publishShow="publishShow"
  @hidePublishDialog="hidePublishDialog">
</reply-dialog>

import replyDialog from '@/components/suggest/reply-dialog.vue'
 -->
<template>
  <div v-show="customDialog">
    <el-dialog class="edit-dialog" title="快速回复" :visible.sync="customDialog" width="600px" :before-close="handleClose">
      <div class="edit-dialog-body">
        <el-form :model="templateData" label-width="132px" :rules="rules" ref="publishForm">
          <el-form-item label="状态:" prop="issueStatus">
            <el-select class="w-448" v-model="templateData.issueStatus" placeholder="请选择">
              <template v-for="item in statusOptions">
                <el-option v-if="item.key != 0" :key="item.key" :label="item.value" :value="item.key"> </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="回复模板:">
            <el-select class="w-448" v-model="templateData.templateType" placeholder="请选择" @change="changeType">
              <el-option v-for="item in typeOptions" :key="item.templateType" :label="item.templateName" :value="item.templateType"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="反馈内容:" prop="message">
            <limit-textarea :inputWidth="448" :inputValue.sync="templateData.message" :holder="'请输入反馈内容'" :getByType="'word'" :maxLength="100"> </limit-textarea>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer font-0" style="padding-bottom: 10px;">
        <el-button @click="customCancel">取消</el-button>
        <el-button class="m-l-10" type="primary" @click="customConfirm('publishForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import limitTextarea from '@/components/haoban/limit-textarea.vue';
import { getRequest, postRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
  name: 'reply-dialog',
  components: {
    limitTextarea
  },
  props: {
    publishShow: {
      type: Boolean,
      default: false
    },
    editRow: {
      type: Object,
      default() {
        return {
          issueId: '',
          nikeName: '',
          phoneNumber: '',
          enterpriseName: '',
          storeGroupName: '',
          issueType: '',
          issueDetail: '',
          issueImageList: [],
          issueStatus: ''
        };
      }
    }
  },
  data() {
    let validMessage = (rule, value, callback) => {
      if (this.templateData.message === '') {
        callback(new Error('请输入反馈内容'));
      } else {
        callback();
      }
    };
    return {
      customDialog: false, // 弹框显示
      formData: {
        issueId: '',
        nikeName: '',
        phoneNumber: '',
        enterpriseName: '',
        storeGroupName: '',
        issueType: '',
        issueDetail: '',
        issueImageList: [],
        issueStatus: '',
        message: ''
      },
      templateData: {
        issueStatus: '',
        templateType: '',
        message: ''
      },
      rules: {
        message: [{ required: true, validator: validMessage, trigger: 'blur' }],
        issueStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      statusOptions: [],
      typeOptions: []
    };
  },
  methods: {
    /**
     *   关闭
     */
    handleClose(done) {
      const that = this;
      that.$refs['publishForm'].resetFields();
      done();
      that.hideDialog();
    },

    /**
     *  取消
     */
    customCancel() {
      const that = this;
      that.$refs['publishForm'].resetFields();
      that.hideDialog();
    },

    hideDialog() {
      const that = this;
      that.customDialog = false;
      that.$emit('hidePublishDialog');
      that.templateData = {
        templateType: '',
        message: ''
      };
    },
    /**
     * 改变模板
     */
    changeType(e) {
      const that = this;
      that.typeOptions.forEach(ele => {
        if (ele.templateType == e) {
          that.templateData.message = ele.templateDetail;
        }
      });
    },

    /**
     *  确定
     */
    customConfirm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postEditData();
        } else {
          return false;
        }
      });
    },
    postEditData() {
      const that = this;
      let para = {
        issueId: that.formData.issueId,
        issueStatus: that.templateData.issueStatus,
        message: that.templateData.message
      };
      postRequest(`/gic-platform-operation/feedback/message/${that.formData.issueId}`, para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == '0') {
            showMsg.showmsg('回复成功', 'success');
            that.setData();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     *  提交数据
     */
    setData(list) {
      const that = this;
      that.$refs['publishForm'].resetFields();
      that.templateData = {
        templateType: '',
        message: ''
      };
      that.$emit('hidePublishDialog', true);
    },
    /**
     * 获取状态列表
     */
    getStatusData() {
      const that = this;
      getRequest(`/gic-platform-operation/feedback/list/status`, {})
        .then(res => {
          let data = res.data;
          if (data.errorCode == 0) {
            that.statusOptions = data.result || [];
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.$message.error(error);
        });
    },
    /**
     * 获取模板列表
     */
    getTempData() {
      const that = this;
      getRequest(`/gic-platform-operation/feedback/message/template/`, {})
        .then(res => {
          let data = res.data;
          if (data.errorCode == 0) {
            that.typeOptions = data.result || [];
          } else {
            that.$message.error(data.message);
          }
        })
        .catch(function(error) {
          that.$message.error(error);
        });
    }
  },
  watch: {
    publishShow: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
    },
    editRow: function(newData, oldData) {
      const that = this;
      that.formData = JSON.parse(JSON.stringify(newData));
      that.formData.issueStatus = String(that.formData.issueStatus);
      that.formData.message = '';
    }
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.customDialog = that.publishShow;
    that.formData = JSON.parse(JSON.stringify(that.editRow));
    that.formData.issueStatus = String(that.formData.issueStatus);
    that.formData.message = '';
    that.getStatusData();
    that.getTempData();
  }
};
</script>

<style lang="less" scoped>
.edit-dialog {
  /deep/ .el-dialog__body {
    padding: 2px 0px 0 0px;
  }

  /deep/ .el-dialog__footer {
    border: none;
    padding-top: 3px;
  }

  &__title {
    width: 100%;
    height: 38px;
    padding: 12px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(235, 238, 245, 1);
  }

  .el-alert--info {
    width: 400px;
    font-size: 14px;
    color: #606266;
    background: #e6f7ff;
    border: 1px solid rgba(145, 213, 255, 1);
  }
  .el-icon-info {
    width: 12px;
    font-size: 12px;
    color: #1890ff;
  }
  .el-form {
    margin-top: 40px;
    /deep/ .el-form-item__label {
      padding-right: 20px;
    }
  }
  .w-448 {
    width: 448px;
  }
}
</style>
