<template>
  <el-dialog :visible.sync="modals" title="线下支付确认" class="order_box" width="1000px">
    <el-form ref="formItem" :model="formItem" label-width="110px" @submit.native.prevent>
      <el-form-item label="订单号：" prop="orderNo">
        <el-input disabled v-model.trim="formItem.orderNo" style="width: 80%"></el-input>
      </el-form-item>

      <el-form-item label="订单金额：" prop="totalPrice">
        <el-input disabled v-model.trim="formItem.totalPrice" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="付款方：" prop="nikeName">
        <el-input disabled v-model.trim="formItem.nikeName" style="width: 80%"></el-input>
      </el-form-item>
      <!-- <el-form-item label="
付款日期：" prop="toName">
        <el-input disabled v-model.trim="formItem.toName"  style="width: 80%"></el-input>
      </el-form-item> -->
      <el-form-item label="付款金额：" prop="payPrice">
        <el-input disabled v-model.trim="formItem.payPrice" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="付款说明：" prop="userRemark">
        <el-input disabled v-model.trim="formItem.userRemark" style="width: 80%"></el-input>
      </el-form-item>

      <el-form size="small" label-width="100px">
        <el-form-item label="付款凭证：">
          <uploadFilePicMul ref="uploadfile" :file="formItem.fileList" @input="uploadSuccess"></uploadFilePicMul>
          <div class="upload-content">
            <div slot="tip" class="el-upload__tip">注：只能上传jpg/png文件，且不超过2MB，且不超过10张</div>
          </div>
        </el-form-item>
      </el-form>

      <el-form-item label="备注：" prop="userMsg">
        <el-input type="textarea" v-model.trim="formItem.userMsg" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="putSend('')">提交</el-button>
      <el-button @click="cancel('')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import uploadFilePicMul from '@/components/base/uploadFilePicMul';

import { orderDetailApi, orderOfflineApi } from '@/api/order';
import { expressAllApi, exportTempApi } from '@/api/logistics';
import { checkPermi } from '@/utils/permission'; // 权限判断函数
import { Debounce } from '@/utils/validate';
const validatePhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请填写手机号'));
  } else if (!/^1[3456789]\d{9}$/.test(value)) {
    callback(new Error('手机号格式不正确!'));
  } else {
    callback();
  }
};
export default {
  components: { uploadFilePicMul },
  name: 'orderSend',
  props: {
    dataOne: Object,
  },
  watch: {
    modals: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getDetail(this.dataOne.orderNo);
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      formItem: { fileList:[]},
      modals: false,
    };
  },

  created() {},

  methods: {

    getDetail(id) {
      orderDetailApi(id)
        .then((res) => {
          this.formItem = {
            ...res,

            fileList: res.fileList || [],
          };
        })
        .catch(() => {
          this.formItem = {fileList:[]};
        });
    },
    putSend() {
      const tfl=this.$refs.uploadfile.fileList

      console.log(tfl);
      if (tfl.length == 0||tfl.filter(ex=>ex.status===true).length==0) {
        this.$message.error('请上传凭证');
        return false;
      }
      orderOfflineApi({
        merMsg: this.formItem.merMsg,
        orderNo: this.dataOne.orderNo,
        fileList:tfl.map(ex=>({fileName:ex.name,fileUrl:ex.url})) ,
      })
        .then((res) => {
          this.$message.success('操作成功');
          this.$emit('refresh');
          this.modals = false;
        })
        .catch(() => {
          this.modals = false;
        });
    },
    handleSubmit(name) {
      this.modals = false;
    },
    uploadSuccess(list) {
      this.$set(this.formItem, 'fileList', list);
    },

    cancel(name) {
      this.modals = false;
    },
  },
};
</script>

<style scoped lang="scss">
.width8 {
  width: 80%;
}

.width9 {
  width: 70%;
}

.tempImgList {
  // opacity: 1;
  width: 38px !important;
  height: 30px !important;
  // margin-top: -30px;
  cursor: pointer;
  position: absolute;
  z-index: 11;
  img {
    width: 38px !important;
    height: 30px !important;
  }
}
</style>
