<template>
  <div class="app-container">
    <el-card class="box-card" style="margin: 0 auto;">
      <div class="refund-item">
        <el-row :gutter="24" class="box-row">
          <el-table :data="params.orderProducts" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            el-table-column label="商品名" align="center" prop="name" />
            <el-table-column label="商品图片" align="center" prop="productImage">
              <template slot-scope="{row}">
                <el-popover
                  placement="top-start"
                  title=""
                  width="120"
                  trigger="hover"
                >
                  <img :src="row.productImage" alt="" style="width:100px;height:100px;">
                  <img slot="reference" :src="row.productImage" alt="" style="width:50px;height:50px;">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="规格" align="center" prop="unit" />
            <el-table-column label="供应商" align="center" prop="shopName" />
            <el-table-column label="购买数量" align="center" prop="num" />
            <el-table-column label="已发数量" align="center" prop="sendOutNum">
              <template slot-scope="{row}">
                <span>{{ row.sendOutNum?row.sendOutNum:0 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="本次发货" align="center" prop="deliveryNum" />
          </el-table>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card" style="margin: 10px auto;">
      <div class="refund-item">
        <el-form ref="logisticFrom" :model="params" :rules="rules" label-width="120px">
          <el-row v-for="(logistic,index) in params.transportations" :key="index" :gutter="24" class="box-row">
            <el-col :span="8">
              <el-form-item label="快递公司：" :prop="`transportations.${index}.logisticsCompanyName`" :rules="rules.logisticsCompanyName">
                <el-select v-model="logistic.logisticsCompanyName" style="width:250px;" clearable size="mini" @change="hanldeCompny($event,index)">
                  <el-option value="" label="请选择物流公司" />
                  <el-option v-for="item in kuaiduLisrt" :key="item.id" :label="item.label" :value="item" />
                </el-select>
                <el-button v-if="index === 0" type="primary" icon="el-icon-plus" size="mini" style="margin-left: 10px;" @click="hanldeAddlogis(logistic,index)" />
                <el-button v-if="(index+1) > 1" type="danger" icon="el-icon-minus" size="mini" style="margin-left: 10px;" @click="handeleDelete(index)" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div v-for="(sticsNu,numIndex) in logistic.logisticsNu" :key="numIndex">
                <el-form-item label="物流编号：" :prop="`transportations.${index}.logisticsNu.${numIndex}.num`" :rules="rules.num">
                  <el-input :key="numIndex" v-model="sticsNu.num" placeholder="请输入物流单号" style="width: 250px" size="mini" />
                  <el-button v-if="numIndex === 0" type="primary" icon="el-icon-plus" size="mini" style="margin-left: 10px;" @click="hanldeAddNumber(logistic,numIndex)" />
                  <el-button v-if="(numIndex+1) > 1" type="danger" icon="el-icon-minus" size="mini" style="margin-left: 10px;" @click="handeleDeleteNumber(logistic,numIndex)" />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-form-item label="图片备注:" prop="logImage">
              <div class="form-el-upload" style="height: 148px;">
                <el-upload
                  class="avatar-uploader"
                  :action="actionUrl"
                  :headers="getToken"
                  list-type="picture-card"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                >
                  <i class="el-icon-plus" />
                </el-upload>
              </div>
              <p style="margin: 0;line-height: 20px;font-size: 14px;color: red;">注意：请上传jpg / png格式的图片，最大不超过5M，最多可上传10张</p>
            </el-form-item>
            <el-form-item label="备注：" prop="name">
              <el-input v-model="params.remark" type="textarea" show-word-limit placeholder="请输入备注文字，200字以内" maxlength="200" :autosize="{ minRows: 5, maxRows: 6}" style="width: 600px;" />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <div class="filter-container" style="text-align: right;margin-top: 20px;">
      <el-button plain @click="backToList">取消</el-button>
      <el-button type="primary" :disabled="disabled" @click="hanldeConfirm('logisticFrom')">确认发货</el-button>
    </div>
  </div>
</template>

<script>
import { confirmDeliver, deliverShipCompany } from '@/api/order'
const defaultForm = () => {
  return {
    logisticsCompanyCode: '',
    logisticsCompanyName: '',
    logisticsNu: [
      { num: '' }
    ]
  }
}
export default {
  name: 'PaymentDetails',
  filters: {
  },
  data() {
    return {
      params: {
        images: [], // 发货图片备注
        orderProducts: [],
        remark: '',
        transportations: [
          {
            logisticsCompanyCode: '',
            logisticsCompanyName: '',
            logisticsNu: [
              { num: '' }
            ]
          }
        ]
      },
      islogisticsCompany: false,
      islogisticsNumber: false,
      productList: [],
      kuaiduLisrt: [],
      fileImageList: [], // 上传图片列表
      rules: {
        logisticsCompanyName: [{ required: true, message: '请选择物流公司', trigger: 'blur' }],
        num: [{ required: true, message: '请输入物流单号', trigger: 'blur' }]
      }
    }
  },
  computed: {
    getToken() {
      return {
        'token': this.$store.getters.token
      }
    },
    actionUrl() {
      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
    },
    orderId: function() {
      return this.$route.query.orderId * 1
    },
    disabled() {
      return this.params.transportations[0] === ''
    }
  },
  created() {
    if (this.$route.query.products) {
      this.params.orderProducts = JSON.parse(this.$route.query.products)
    }
    this.deliverShipCompany()
    console.log('productList', this.params.orderProducts)
  },
  methods: {
    // 付款单详情
    async deliverShipCompany() {
      try {
        const res = await deliverShipCompany()
        console.log('res', res)
        this.kuaiduLisrt = res.data
      } catch (error) {
        console.log('error', error)
      }
    },
    //  选择物流公司
    hanldeCompny(value, index) {
      console.log('value', value)
      this.params.transportations[index].logisticsCompanyName = value.label
      this.params.transportations[index].logisticsCompanyCode = value.value
      this.islogisticsCompany = false
    },
    // 添加一条物流公司
    hanldeAddlogis() {
      this.params.transportations.push(defaultForm())
    },
    // 删除 一条物流公司
    handeleDelete(index) {
      this.params.transportations.splice(index, 1)
    },
    // 添加物流单号
    hanldeAddNumber(logistic, num, numIndex) {
      logistic.logisticsNu.push({ num: '' })
    },
    // 删除一条物流编号
    handeleDeleteNumber(logistic, numIndex) {
      logistic.logisticsNu.splice(numIndex, 1)
    },
    checkedParams() { // 校验参数信息
      const _this = this
      this.params.transportations.forEach(function(pros) {
        pros.logisticsNu.forEach(function(item) {
          const transpor = {
            logisticsCompanyCode: pros.logisticsCompanyCode,
            logisticsCompanyName: pros.logisticsCompanyName,
            num: item.num
          }
          if (transpor.logisticsCompanyCode === '' && transpor.logisticsCompanyName === '') {
            _this.islogisticsCompany = true
          } else {
            _this.islogisticsCompany = false
          }
          if (transpor.num === '') {
            console.log('1111111111')
            _this.islogisticsNumber = true
          } else {
            _this.islogisticsNumber = false
          }
        })
      })
    },
    hanldeConfirm(formName) {
      // 保存编辑
      // this.checkedParams()
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.fileImageList.forEach((image) => {
            this.params.images.push(image.response.data)
          })
          this.confirmDeliver(this.params)
        } else {
          return false
        }
      })
    },
    async confirmDeliver(params) {
      try {
        await confirmDeliver(params)
        this.$message.success('操作成功')
        this.backToList()
      } catch (error) {
        console.log('error', error)
      }
    },
    // 上传图片事件
    handleSuccess(res, file, fileList) {
      this.fileImageList = fileList
      console.log('images', this.fileImageList)
    },
    // 删除图片事件
    handleRemove(file, fileList) {
      this.fileImageList = fileList
      console.log('images', this.fileImageList)
    },
    reloadImage() {
      this.loadImgLoading = true
      setTimeout(() => {
        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
      }, 1000 * 2)
    },
    loadSucess() {
      this.loadImgLoading = false
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/order/list'
          })
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .app-title{
    line-height: 36px;
    font-size: 26px;
    font-weight: bold;
    color: #409EFF;
    text-align: center;
    margin: 0;
  }
  .box-card{
    margin-top: 20px;
    font-size: 14px;
  }
  .box-row{
    padding: 10px 0;
  }
  .box-row .dropdown{
    margin-top: -10px;
  }
  .refund-item{
    padding: 10px 0;
  }
  .order-item{
    background:#f7f7f7;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 5px;
  }
  .product-row{
    padding: 10px 0;
    background: #EBEEF5;
    border-top: 1px dashed #DCDFE6;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
  .avatar img {
    width: 148px;
    height: 148px;
    display: block;
  }
  .el-upload--picture-card{
    width: 148px !important;
    height: 148px !important;
  }
  .el-form-item__label{
      text-align: right !important;
  }
  .el-upload__tip{
    line-height: 20px;
    color: red;
    text-align: left;
    position: absolute;
    right: -50%;
    bottom: 0;
  }
  .span_tip{
    font-size: 12px;
    color: red;
    margin-left: 5px;
  }
  .filter-item-temp{
    width: 100px;
  }
  .op-item{
    padding: 5px 0;
  }
  .el-span-warning{
    color: #E6A23C;
  }
  .el-span-success{
    color: #67C23A;
  }
  .el-span-danger{
    color: #F56C6C;
  }
</style>

