<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
            :file-list="fileList"
            class="upload-demo"
            list-type="picture-card"
            :action="oss.action"
            :data="oss.data"
            :multiple="oss.multiple"
            accept=".jpeg,.jpg,.png"
            :http-request="uploadSectionFile"
            :before-upload="handleBeforeApplyUpload"
            :on-remove="handleLoanApplyRemove">
          <i class="el-icon-plus"></i>
        </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">

import Axios from 'axios'

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: '其它'
        },
        {
          value: '疑似反催收',
          label: '疑似反催收'
        },
        {
          value: '监管部门投诉',
          label: '监管部门投诉'
        }
      ],
      oss: {
        action: '',
        data: {},
        multiple: false,
      },
      file: null
    }
  },
  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"),
    }

  },
  methods: {
    handleBeforeApplyUpload(file) {
      const attachType = 'LOESS_TRANSFER_APPLY';
      return this.$$get(`/oss/signature/?fileType=` + attachType + "&fileName=" + file.name).then(res => {
        if (res.data.code !== '200') {
          this.$message.error(res.data.message);
          return false
        }
        const result = res.data.result.result;
        const data = {};
        const tempOss = {};
        data.OSSAccessKeyId = result.accessId;
        data.policy = result.policy;
        data.Signature = result.signature;
        data.key = result.dir;
        tempOss.action = result.host;
        tempOss.data = data;
        this.oss = tempOss;
      });
    },


    uploadSectionFile(params) {
      const {action, data} = this.oss
      console.log(params, '图片信息')
      const d = new FormData();
      d.append("key", data.key);
      d.append("policy", data.policy);
      d.append("OSSAccessKeyId", data.OSSAccessKeyId);
      d.append("success_action_status", "200");
      d.append("Signature", data.Signature);
      d.append("file", params.file);
      const baseUrl = action;


      Axios({
        url: baseUrl,
        method: 'post',
        data: d,
        headers: {'Content-Type': 'multipart/form-data'}
      }).then((res) => {
        if (res.status === 200) {
          const imgUrl = `${baseUrl}/${data.key}`;
          this.$notify({title: '成功', message: params.file.name + ",上传成功", type: 'success'});
          this.fileList.push({
            name: params.file.name,
            url: imgUrl
          })
        }
      }).catch((e) => {
        console.log(e, '错误')
      });
    },


    handleLoanApplyRemove(file, fileList) {
      const {name}  = file;
      console.log(file, 'r2')
      console.log(fileList, 'r3')
      const i1 = this.fileList.findIndex((item)=>item.name===name)
      if(i1!==-1) {
        this.fileList.splice(i1,1)
        // this.fileList = nArr
      }
    },

    httpRequest() {

    },

    /** 提交点击 */
    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>
