<!--
  @description: 售后服务-填写售后信息
  @Modifier：dijia
  @routerPath:/personalCenter/fillAfterSalesInfo
  @date：  2021/12/15
-->
<template>
  <div>
    <div class="nav">
      <!--当前位置-面包屑-->
      <div class="crumbs_nav_main">
        <span class="pos_title">
          <i class="iconfont icon-dizhi" />
        </span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="toBack()">
            {{ breadcrumbTitle }}
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span>{{ refundTypeRadio==='return' ? '申请退货' : '申请换货' }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <i
        class="el-icon-close cursor"
        title="返回"
        style="font-size:20px;"
        @click="closePage"
      />
    </div>
    <!-- 售后状态 -->
    <stateRcolDetail :order-detail-obj="orderDetailTestObj" />
    <!-- 订单详情 -->
    <div class="m order-info-mod">
      <div class="order-info order-info-new mc">
        <div class="order_title">
          <img src="@/assets/img/shopmall/orderstatus.png" width="24px" height="24px">
          订单详情
        </div>
        <div class="order-info-content">
          <div>
            <div class="item">
              <span class="label">
                订单编号：
              </span>
              <div class="info-rcol" :title="orderDetailObj.orderNo">
                {{ orderDetailObj.orderNo ? orderDetailObj.orderNo : '暂无' }}
              </div>
            </div>
            <div class="item">
              <span class="label">
                采购人：
              </span>
              <div class="info-rcol" :title="orderDetailObj.receiverName">
                {{ orderDetailObj.receiverName ? orderDetailObj.receiverName : '暂无' }}
              </div>
            </div>
            <div class="item">
              <span class="label">
                采购部门：
              </span>
              <div class="info-rcol" :title="orderDetailObj.buyerDepartName">
                {{ orderDetailObj.buyerDepartName ? orderDetailObj.buyerDepartName : '暂无' }}
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="order-info-content">
          <div>
            <div class="item">
              <span class="label">
                下单时间：
              </span>
              <div class="info-rcol" :title="orderDetailObj.createTime">
                {{ orderDetailObj.createTime ? orderDetailObj.createTime : '暂无' }}
              </div>
            </div>
            <div class="item">
              <span class="label">
                手机号码：
              </span>
              <div class="info-rcol" :title="orderDetailObj.phoneNumber">
                {{ orderDetailObj.phoneNumber ? orderDetailObj.phoneNumber : '暂无' }}
              </div>
            </div>
          </div>
        </div>
        <div class="order-info-content">
          <div>
            <div class="item">
              <span class="label">
                供应商：
              </span>
              <div class="info-rcol" :title="orderDetailObj.goodsDepartName">
                {{ orderDetailObj.goodsDepartName ? orderDetailObj.goodsDepartName : '暂无' }}
              </div>
            </div>
            <div class="item">
              <span class="label">
                供应商订单号：
              </span>
              <div class="info-rcol" :title="orderDetailObj.supplierOrderId ? orderDetailObj.supplierOrderId : '暂无'">
                {{ orderDetailObj.supplierOrderId ? orderDetailObj.supplierOrderId : '暂无' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 退货/换货信息 -->
    <div class="order_title ml40">
      {{ refundTypeRadio==='return' ? '退货' : '换货' }}信息
    </div>
    <div class="refund_box">
      <el-form ref="refundForm" :model="ruleForm" :rules="rules" label-width="120px">
        <el-form-item :label="refundTypeRadio==='return' ? '退货商品：' : '换货商品：'" prop="name">
          <div class="goods_box">
            <div class="img_box cursor" @click="goToDetail()">
              <img :src="goodsInfo.productPicture" alt="商品图片">
            </div>
            <div class="goodsName_box">
              <p class="cursor goods_item_title_two" :title="goodsInfo.productName" @click="goToDetail()">
                {{ goodsInfo.productName }}
              </p>
              <span style="color:#F59A23;">¥{{ goodsInfo.price }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="服务类型：" prop="name">
          <el-radio-group v-model="refundTypeRadio" disabled @change="change">
            <el-radio label="exchange">
              换货
            </el-radio>
            <el-radio label="return">
              退货
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="申请数量：" prop="name">
          <el-input-number v-model="ruleForm.num" :min="1" :max="10" />
        </el-form-item>
        <el-form-item :label="refundTypeRadio==='return' ? '退货原因：' : '换货原因：'" prop="name">
          <el-select v-model="ruleForm.value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="refundTypeRadio==='return' ? '退货金额：' : '换货金额：'" prop="name">
          <el-input v-model="ruleForm.name" style="width:280px" />
        </el-form-item>
        <el-form-item :label="refundTypeRadio==='return' ? '退货说明：' : '换货说明：'" prop="name">
          <el-input v-model="ruleForm.name" type="textarea" :rows="5" style="width:800px" show-word-limit maxlength="300" />
        </el-form-item>
        <el-form-item label="上传图片：" prop="name">
          <upload
            ref="upload"
            list-type="picture"
            :limit="10"
            :on-change="supplierFileChange"
            :data="supplierFileType"
            :file-list="fileList"
            :auto-delete="true"
            :auto-upload="true"
            file-ref="supplierFileRef"
            but-text="上传凭证"
            :title="''"
            accept="image/jpg,image/jpeg,image/png"
            :class="{ 'showDeleteBtn': editFlag }"
          />
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
      <div class="btns">
        <el-button type="purple" @click.native="submit">
          提交
        </el-button>
        <el-button type="gray" @click.native="cancel">
          取消
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 接口
import {
  getOrderDetatils
} from '@/api/shoppingmall/order'
import { productDetails } from '@/api/shoppingmall/products'
import { orderGrounpMixin } from '../allOrder/mixins/orderGroupMixins'
/* 常用方法 */
import { characters1_auto } from '@/assets/js/validate'
import stateRcolDetail from './refundDetail/stateRcol-detail' // 售后申请状态
import upload from '@comp/common/updownload/upload'// 文件上传组件
export default {
  name: 'FillAfterSalesInfo',
  components: {
    stateRcolDetail,
    upload
  },
  mixins: [orderGrounpMixin],
  data() {
    return {
      // 订单详情
      orderDetailObj: {},
      orderDetailTestObj: {
        orderBackTraces: [{
          createTime: '2021-12-27',
          status: '06'
        },
        {
          createTime: '2021-12-28',
          status: '02'
        }]
      },
      // return:退货  exchange:换货
      refundTypeRadio: null,
      ruleForm: {
        num: 1
      },
      rules: {
        name: [
          { required: true, validator: characters1_auto, trigger: 'blur' }
        ]
      },
      // 商品信息
      goodsInfo: {},
      // 图片上传
      fileList: [],
      supplierFileType: {
        bizId: '', // 业务主键Id
        fileType: 'ds_supllier_log' // 文件类型
      },
      editFlag: true
    }
  },
  computed: {
    // 面包屑标题
    breadcrumbTitle() {
      return '我的订单'
    }
  },
  watch: {},
  created() {
    this.initData()
  },
  methods: {
    change(val) {
      /* eslint-disable */
      console.log(val)
      /* eslint-enable */
    },
    // 获取商品信息
    getProductDetail() {
      const goodsId = this.$route.query.goodsId
      // 商品详情
      productDetails(goodsId).then((res) => {
        if (res.header.ret === '0') {
          this.goodsInfo = res.data
        }
      })
    },
    // 初始化
    initData() {
      this.refundTypeRadio = this.$route.query.refundType
      this.getOrderDetail()
      this.getProductDetail()
    },
    // 获取订单详情
    getOrderDetail() {
      let status = this.$route.query.status
      const orderId = this.$route.query.id
      // const supplierOrderId = this.$route.query.supplierOrderId
      // const supplierOrderId1 = this.$route.query.supplierOrderId1
      // 00:未拆单 11:拆单
      if (status === '00') {
        status = ''
      }
      getOrderDetatils(orderId, status).then(res => {
        this.orderDetailObj = res.data
      }).catch(() => {
      })
    },
    // 提交
    submit() {
      this.$message.success('提交成功！')
    },
    // 取消
    cancel() {
      this.closePage()
    },
    // 打开商品详情
    goToDetail() {
      const goodsId = this.$route.query.goodsId
      this.$router.push({ path: '/shop/goodsClassDetail', query: { id: goodsId }})
    },
    // 面包屑跳转
    toBack() {
      const type = { path: this.$route.query.from, query: { menuIndex: this.$route.query.menuIndex }}
      return type
    },
    // 返回
    closePage() {
      const params = JSON.parse(JSON.stringify(this.$route.query))
      delete params.refundType
      this.$router.push({
        path: '/personalCenter/selectAfterSalesType',
        query: params
      })
    },
    // 多个图片上传变化
    supplierFileChange(file, fileList) {
      fileList.length > 0 ? this.imgFlag = true : this.imgFlag = false
    }
  }
}
</script>

<style scoped lang="less">
.refund_box {
  box-shadow: 2px 2px 5px #dcd8d8;
  margin: 0px 40px 10px 40px;
  padding: 20px 40px 20px 40px;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #333333;
  line-height: 40px;
  height: 41px;
  padding: 0 12px;
  border-bottom: 1px solid #eee;
  > i:hover {
    color: #007ccc;
  }
}
.btns {
  text-align: center;
}
.m {
  margin-bottom: 20px;
}
.order_title{
  padding-top: 15px;
  margin-bottom: 15px;
  font-size: 16px;
  margin-left: 26px;
}
.ml40 {
  margin-left: 40px;
}
.order-info-mod{
    box-shadow: 2px 2px 5px #dcd8d8;
    margin: 30px 40px 20px 40px;
    .mc{
      border-top-width: 4px;
      background: #fff;
      border: 1px solid #eee;
    }
    .order-info {
      height: 250px;
      display: block;
      position: relative;
      padding: 15px 0;
      .order-info-content{
        // height: 100%;
        width: 30%;
        float: left;
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-style: normal;
        font-size: 12px;
        // border: 1px solid #f1f1f1;
        padding: 0 10px 0 30px;
        margin: 0 0 0 -1px;
        border-width: 0 0 0 1px;
      }
      .order-info-content:nth-child(2) {
        margin-left: 2%;
      }
      .item {
        margin-top: 20px;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
      }
      .label {
        float: left;
        margin-right: 5px;
      }
      .info-rcol{
        cursor: pointer;
        flex: 1;
        float: left;
        max-height: 72px;
        word-break: break-all;
      }
    }
}
.goods_box {
  display: flex;
  height: 104px;
  .img_box {
    border: 1px solid #eee;
    width: 104px;
    height: 104px;
    padding: 7px;
    img {
      width: 90px;
      height: 90px;
    }
  }
  .goodsName_box {
    flex: 1;
    height: 100%;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 15px;
    line-height: 22px;
    >p:hover {
      color: #00aaca;
      font-family: "MicrosoftYaHei";
    }
    >span {
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}
</style>
