<template>
  <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="信审任务"
      center
      width="50%"
      :visible.sync="DialogVisible"
      :before-close="handleCancel"
  >
    <div>
      <block-header title="基本信息"/>
      <template v-if="UserInfo">
        <div style=" margin:0 auto 30px">
          <el-descriptions border>
            <el-descriptions-item label="姓名">{{ UserInfo.clientName }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ UserInfo.clientCell }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{ UserInfo.certNo }}</el-descriptions-item>
            <el-descriptions-item label="单位名称">{{ UserInfo.companyName }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </template>


      <block-header title="确认内容"/>
      <div class="box-agreement">

        <el-form label-suffix=":" :rules="rules" label-width="200px" :model="form" ref="form">
          <el-row>
            <el-col :span="16">

              <el-form-item prop="wechat" label="是否有微信号">
                <el-radio-group v-model="form.wechat">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item prop="wechatList" v-if="form.wechat" label="微信截图">
                <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-item  label="是否有支付宝账号">
                <el-radio-group v-model="form.alipay">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是,本人</el-radio>
                  <el-radio :label="2">是,非本人</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item  label="是否有QQ号">
                <el-radio-group v-model="form.qq">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>

            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Axios from 'axios'

export default {
  name: "CreateCredit",
  props: {
    DialogVisible: {
      type: Boolean,
      required: true,
    },
    UserInfo: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      TemplateList: [],
      LoanInfo: null,
      rules: {
        wechat: [
          {required: true, message: "请选择", trigger: 'change'}
        ],
        alipay: [
          {required: true, message: "请选择", trigger: 'change'}
        ],
        qq: [
          {required: true, message: "请选择", trigger: 'change'}
        ],
        wechatList: [
          {required: true, message: "请选择", trigger: 'change'}
        ]
      },
      form: {
        creator: localStorage.getItem("userName") ? localStorage.getItem("userName") : '',
        orderNo: "",
        wechat: '',
        alipay: '',
        qq: '',
        id:'',
        wechatList: []
      },

      oss: {
        action: '',
        data: {},
        multiple: false,
      },
      file: null,
      fileList: [],
    };
  },
  async created() {
    if (this.UserInfo) {
      this.form.orderNo = this.UserInfo.orderNo;
      this.form.id = this.UserInfo.id;
    }
    console.log(this.UserInfo, '用户信息')
  },
  methods: {
    /** 取消 && 关闭弹框 */
    handleCancel() {
      this.$emit('handleClose')
    },
    /** 提交数据 */
    onSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) {
          return false
        }


        this.$confirm('是否确认提交', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            const params = this.form

            if (this.fileList.length) {
              const l = this.fileList;
              const wList = []
              l.forEach(item => {
                wList.push(item.url)
              })
              params.wechatList = wList;
            }


            const res = await this.$$post('/retrial/manualSubmit', {...params})
            if (res.status === 200 && res.data.success) {
              this.$message({message: '操作成功!', type: 'success'});
              this.$emit('handleCallback')
              setTimeout(() => {
                this.handleCancel()
              }, 1500)
            }
          } catch (err) {
            this.$message({message: '异常', type: 'error'});
          }
        }).catch(error => {
          console.log(error, '。。。')
          this.$message({message: '取消操作', type: 'error'});
        });
      })


    },


    /** 上传图片 */
    uploadSectionFile(params) {
      try {
        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
            })

            this.form.wechatList.push(imgUrl)
          }
        }).catch((e) => {
          console.log(e, '错误')
        });
      } catch (err) {

      }
    },

    /** 上传前 */
    handleBeforeApplyUpload(file) {
      const attachType = 'ORDER_QUERY';
      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;
      });
    },

    /** 图片删除*/
    handleLoanApplyRemove(file, fileList) {
      const {name} = file;
      const i1 = this.fileList.findIndex((item) => item.name === name)
      if (i1 !== -1) {
        this.fileList.splice(i1, 1)
        this.form.wechatList.splice(i1, 1)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-dialog__title {
  font-size: 30px;
  font-weight: 700;
}

.box-agreement {
  height: 300px;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 50px;
}

/deep/ .el-upload, /deep/ .el-upload-list__item {
  width: 80px;
  height: 80px;
  line-height: 90px;
}

</style>
