<template>
  <el-dialog
    :title="!dataForm.id ? this.$i18n.t('crud.addTitle') : this.$i18n.t('temp.modify')"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="760px"
    v-if="visible"
    @close="dialogClose">
    <el-form :model="dataForm" size="small" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="售后渠道" prop="printChannel">
            <el-select key="printChannel" v-model="dataForm.printChannel" :disabled="isView">
<!--              <el-option label="广森" value="GSART"></el-option>-->
<!--              <el-option label="快印" value="KuaiYin"></el-option>-->
<!--              <el-option label="蜗牛" value="WoNiu"></el-option>-->
              <el-option label="闪电" value="Lightning"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="订单编号" prop="orderNumber" style="width: 300px">
            <el-input :disabled="isView" v-model="dataForm.orderNumber" @blur="searchOrder(dataForm.orderNumber)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button style="margin-left: 10px" type="text" @click="openOrderInfo(dataForm.orderNumber)">查看</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="快递单号" prop="deliveryNo" style="width: 300px">
            <span key="deliveryNo">{{dataForm.deliveryNo}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单时间" prop="orderTime" :disabled="true">
            <span key="orderTime">{{dataForm.orderTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单金额" prop="orderAmount" :disabled="true">
            <span key="orderAmount">{{dataForm.orderAmount}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="产品名称" prop="prodName" :disabled="true">
        <span key="prodName">{{dataForm.prodName}}</span>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="售后类型" prop="type">
            <el-select v-model="dataForm.type" clearable :disabled="isView">
              <el-option label="瑕疵" value="瑕疵"></el-option>
              <el-option label="裁切" value="裁切"></el-option>
              <el-option label="毛边" value="毛边"></el-option>
              <el-option label="翘边" value="翘边"></el-option>
              <el-option label="错发" value="错发"></el-option>
              <el-option label="少发" value="少发"></el-option>
              <el-option label="漏发" value="漏发"></el-option>
              <el-option label="退件" value="退件"></el-option>
              <el-option label="补发" value="补发"></el-option>
              <el-option label="丢件" value="丢件"></el-option>
              <el-option label="物流" value="物流"></el-option>
              <el-option label="改地址" value="改地址"></el-option>
              <el-option label="改快递" value="改快递"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="售后登记时间" prop="createTime">
            <el-date-picker
              :disabled="isView"
              size="small"
              v-model="dataForm.createTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="售后状态" prop="progress">
            <el-select
              :disabled="isView"
              v-model="dataForm.status"
              clearable
              placeholder="请选择售后状态"
              size="small">
              <el-option label="待处理" :value="0"></el-option>
              <el-option label="已处理" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登记人" prop="settleStatus">
            <el-select
              v-model="dataForm.registrant"
              clearable
              placeholder="登记人"
              size="small">
              <el-option label="永平" value="永平"></el-option>
              <el-option label="文楷" value="文楷"></el-option>
              <el-option label="方权" value="方权"></el-option>
              <el-option label="文祥" value="文祥"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="退款方式" prop="refundType">
            <el-select
              :disabled="isView"
              v-model="dataForm.refundType"
              clearable
              placeholder="请选择退款方式"
              size="small">
              <el-option :key="0" label="余额" :value="0"></el-option>
              <el-option :key="1" label="微信" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="退款数量" prop="refundCount">
            <el-input type="number" :disabled="isView" v-model="dataForm.refundCount" style="width: 220px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="退款金额" prop="refundAmount">
            <el-input :disabled="isView" v-model="dataForm.refundAmount" style="width: 220px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="退款金额(按成本)" prop="costAmount" label-width="100">
            <el-input :disabled="isView" v-model="dataForm.costAmount" style="width: 220px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="售后描述" prop="describe">
        <el-input :disabled="isView" type="textarea" v-model="dataForm.content"></el-input>
      </el-form-item>
      <el-form-item label="售后图片" prop="pic">
        <el-upload
          :disabled="isView"
          ref="upload"
          :multiple="true"
          :action="$http.adornUrl('/admin/file/simpleUpload')"
          list-type="picture-card"
          accept="image/*"
          :headers="{Authorization: $cookie.get('Authorization_vs'),locale:lang}"
          :on-success="onUploadSuccess"
          :file-list="fileList"
          :on-remove="handlePicRemove"
          :on-preview="handlePicPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
        <div  @paste="pasteImg($event)">
          <textarea placeholder="点击这里，然后把图片粘贴" style="width: 100%;height: 100px;border: 1px solid #c9c9c9;border-radius: 5px;"></textarea>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <div class="default-btn"  @click="dialogClose">{{$t('crud.filter.cancelBtn')}}</div>
      <div class="default-btn primary-btn" @click="dataFormSubmit()">{{$t('crud.filter.submitBtn')}}</div>
    </span>
    <el-dialog :visible.sync="imgDialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <order-info ref="orderInfo"></order-info>
  </el-dialog>
</template>

<script>
  import ImgUpload from '@/components/img-upload';
  import OrderInfo from "../order/orderInfo";
  import { uploadFile } from '@/utils/httpRequest.js'
export default {
  components: {
    ImgUpload,OrderInfo
  },
  data () {
    return {
      visible: false,
      orderInfoVisible: false,
      lang: localStorage.getItem('lang') || 'zh_CN',
      isView: false,
      dataForm: {
        id: null,
        orderNumber: null,
        type: null,
        content: null,
        orderTime: null,
        afterSalesTime: null,
        refundAmount: 0,
        costAmount: 0,
        status: 0,
        pic: null,
        deliveryNo: null,
        createTime: null,
        updateTime: null,
        printChannel: null,
        orderAmount:null,
        refundType: 0,
        prodName: null,
        settleStatus: 0
      },
      dialogImageUrl: null,
      imgDialogVisible: false,
      afterSalesDateRange: [],
      fileList: [],
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      dataRule: {
      }
    }
  },
  methods: {
    init (id, isView) {
      this.dataForm.id = id || 0
      this.visible = true;
      this.$nextTick(() => {
        this.isView = isView;
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl('/print/thirdAfterSales/info/' + this.dataForm.id),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.dataForm = data;
            if(this.dataForm.pic){
              this.fileList = [];
              let picArray = this.dataForm.pic.split(",");
              for (let i = 0; i < picArray.length; i++) {
                this.fileList.push({ url: this.resourcesUrl + picArray[i], response: {filePath: picArray[i] }})
              }
              // picArray.forEach(item =>{
              //   let ele = {filePath: item, resourcesUrl: this.resourcesUrl}
              //   this.fileList.push(ele);
              // })
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      let filePath = [];
      if(this.fileList.length > 0 && !this.dataForm.id){
        this.fileList.forEach(item => {
          filePath.push(item.response.filePath);
        });
        this.dataForm.pic = filePath.join(",");
      }else{
        this.fileList.forEach(item => {
          filePath.push(item.response.filePath);
        });
        this.dataForm.pic = filePath.join(",");
      }
      this.$http({
        url: this.$http.adornUrl('/print/thirdAfterSales'),
        method: this.dataForm.id ? 'put' : 'post',
        data: this.$http.adornData(this.dataForm)
      }).then(({data}) => {
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 200,
          onClose: () => {
            this.dataForm.pic = null;
            this.visible = false;
            this.$emit("refreshDataList", null);
          }
        })
      })
    },
    searchOrder(orderNumber){
      if(orderNumber){
        this.$http({
          url: this.$http.adornUrl('/order/thirdPrintOrder/info/' + orderNumber),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.dataForm.orderTime = data.order.createTime;
          this.dataForm.deliveryNo = data.deliveryCode;
          this.dataForm.orderAmount = data.order.actualTotal;
          this.dataForm.prodName = data.order.prodName;
        })
      }else{
        this.dataForm.orderTime = null;
        this.dataForm.deliveryNo = null;
      }
    },
    openOrderInfo(orderNumber){
      this.$refs.orderInfo.init({
        orderNumber: orderNumber
      })
    },
    handlePicPreview(file){
      this.dialogImageUrl = file.url;
      this.imgDialogVisible = true;
    },
    onUploadSuccess(response, file, fileList){
      this.fileList = fileList;
    },
    handlePicRemove(file, fileList){
      this.fileList = fileList;
    },
    /**
     * textarea图片粘贴事件
     */
    pasteImg(e) {
      console.log(e)
      const { items } = e.clipboardData; // 获取粘贴板文件对象
      if (items.length) {
        for (const item of items) {
          if (item.type.indexOf('image') !== -1) {
            const file = item.getAsFile(); // 获取图片文件
            if (file) {
              uploadFile(
                this.$http.adornUrl('/admin/file/simpleUpload'),
                file
              ).then(({ data }) => {
                // this.$refs['file'].value = null // 解决上传同一图片不显示bug
                // { url: this.resourcesUrl + picArray[i], response: {filePath: picArray[i] }
                let obj = {url: data.resourcesUrl + data.filePath, response: {filePath: data.filePath }}
                this.fileList.push(obj)
              })
            }
          }
        }
      }
    },
    dialogClose(){
      this.fileList = [];
      this.dataForm = {};
      this.dataForm.refundType = 0;
      this.dataForm.status = 0;
      this.dataForm.refundAmount = 0;
      this.dataForm.costAmount = 0;
      this.visible = false;
      this.$emit("refreshDataList", null);
    }
  }
}
</script>
