<template>
  <el-dialog
      class="client-data-dialog"
      :title="title"
      width="30%"
      :visible.sync="dialogVisible"
      :before-close="handleClose">

    <el-form size="small" label-suffix=":" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="反馈类型" prop="feedType">
        <el-select v-model="ruleForm.feedType" label="反馈类型" placeholder="请选择">
          <el-option
              v-for="item in optionsFeedType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="反馈描述" prop="feedContent">
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入反馈内容"
            v-model="ruleForm.feedContent">
        </el-input>
      </el-form-item>

      <el-form-item label="反馈状态" prop="feedStatus">
        <el-select v-model="ruleForm.feedStatus" label="反馈状态" placeholder="请选择">
          <el-option
              v-for="item in optionsStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建人" prop="creater">
        <p>{{ this.ruleForm.creater }}</p>
      </el-form-item>

      <el-form-item label="相关凭证" required>
        <el-upload
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :http-request="handleUpload"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

    </el-form>

    <div slot="footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="submitForm('ruleForm')">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">


export default {
  name: 'AddUserServiceDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      fileList: [],
      ui: {
        submitLoading: false
      },
      visible: this.$props.dialogVisible,
      ruleForm: {
        feedNo:'',
        feedType: '',
        feedStatus: '',
        feedContent: '',
        clientNo: '',
        creater: '',
        loanNo:'',
        productName: '',
        feedVoucher: []
      },
      rules: {
        feedType: [
          {required: true, message: "请选择反馈类型", trigger: 'blur'}
        ],
        feedStatus: [
          {required: true, message: '请选择反馈结果', trigger: 'blur'}
        ],
        feedContent: [
          {required: true, message: '请输入反馈问题描述', trigger: 'blur'}
        ]
      },
      optionsStatus: [
        {
          value: 'YES',
          label: '已解决'
        },
        {
          value: 'NO',
          label: '未解决'
        }
      ],
      optionsFeedType: [
        {
          value: '内部投诉',
          label: '内部投诉'
        },
        {
          value: '还款问题',
          label: '还款问题'
        },
        {
          value: '系统问题',
          label: '系统问题'
        },
        {
          value: '借款咨询',
          label: '借款咨询'
        },
        {
          value: '账户问题',
          label: '账户问题'
        },
        {
          value: '银行卡签约问题',
          label: '银行卡签约问题'
        },
        {
          value: '其它',
          label: '其它'
        }
      ],
    }
  },
  created() {
    console.log(this.params,'888888888888');
    const {clientNo, feedNo, feedType,feedStatus,feedContent,feedVoucher, feedProduct,loanNo} = this.params;
    const list = [];
    feedVoucher.forEach(item=>{
      const o = {};
      o.name = item;
      o.url = item;
      list.push(o)
    });

    this.fileList = list;
    // console.log(this.params,'内容');

    this.ruleForm = {
      feedNo,
      feedType,
      feedStatus,
      feedContent,
      feedVoucher,
      loanNo,
      clientNo,
      productName: feedProduct,
      creater: localStorage.getItem("userName"),
    }

  },
  mounted() {
    this.client = new OSS({
      region: 'oss-cn-hangzhou',
      accessKeyId: 'LTAI4Fp8aDaS8sHXV76gWPVJ',
      accessKeySecret: 'muNvYl9ydZqCp8we6c6WO3pLa0jRt5',
      bucket: 'w-loan-static'
    });
  },
  methods: {
    handleUpload(file) {
      this.upload(file)
    },

    upload(file) {
      console.log(file, '文件')
      const key = file.file.name;
      const client = this.client;
      const that = this;
      const timeNum=new Date().getTime();
      client.multipartUpload('customer/feed/' +timeNum+'-'+key, file.file)
          .then((res) => {
            console.log(res, '返回结果');
            const fileList = that.fileList;

            const imgSrc = `https://file.jqtianxia.com/${res.name}`;
            const o = {name: res.name, url: imgSrc};
            fileList.push(o);

            that.$message.success('上传成功');
          })
          .catch((err) => {
            console.log(err, '错误信息');
            this.$message.error('上传失败');
          });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    /** 提交点击 */
    submitForm() {
      console.log(this.fileList,'文件列表');
      const feedVoucher = [];
      this.fileList.forEach(item=>{
        feedVoucher.push(item.url);
      })

      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        if(this.ruleForm.feedNo){
          this.$$post('/feed/updateClientFeed', {
            feedNo:this.ruleForm.feedNo,
            feedType: this.ruleForm.feedType,
            feedSource: 'CUSTOMER',
            feedStatus: this.ruleForm.feedStatus,
            loanNo: this.ruleForm.loanNo,
            feedContent: this.ruleForm.feedContent,
            clientNo: this.ruleForm.clientNo,
            productName: this.ruleForm.productName,
            feedVoucher: feedVoucher,
            creater: localStorage.getItem("userName"),
          })
              .then(res => {
                if (res.data.success) {
                  this.$message({message: '反馈问题修改成功', type: 'success'});
                  this.$emit('callback')
                  this.handleClose();
                }else {
                  this.$message.error(res.data.message);
                }

              })
              .catch(err => {
                alert("error!")
              })
        }else{
          this.$$post('/feed/createClientFeed', {
            creater: localStorage.getItem("userName"),
            feedType: this.ruleForm.feedType,
            feedSource: 'CUSTOMER',
            feedStatus: this.ruleForm.feedStatus,
            feedContent: this.ruleForm.feedContent,
            clientNo: this.ruleForm.clientNo,
            loanNo: this.ruleForm.loanNo,
            productName: this.ruleForm.productName,
            feedVoucher: feedVoucher
          })
              .then(res => {
                if (res.data.success) {
                  this.$message({message: '反馈问题新增成功', type: 'success'});
                  this.$emit('callback')
                  this.handleClose();
                }else {
                  this.$message.error(res.data.message);
                }

              })
              .catch(err => {
                alert("error!")
              })
        }



      })

    },


    /** 关闭处理 */
    handleClose() {
      this.$emit("handleClose");
    }
  },


}
</script>

<style>

</style>
