<template>
  <div>
    <el-dialog top="5vh" :title="title" width="60%" center :close-on-click-modal="false" :visible.sync="visible" :before-close="close">
      <div v-loading="loading">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" inline @keyup.enter.native="dataFormSubmit('dataForm')" label-width="120px">
          <h3>商品信息</h3>
          <el-table :data="dataForm.tableData" style="width: 100%">
            <el-table-column label="商品图片" align="center">
              <template slot-scope="scoped">
                <div>
                  <!-- <el-popover placement="top-start" trigger="hover">
                    <a :href="scoped.row.productCover" target="_blank" title="查看最大化图片"><img :src="scoped.row.goods_img" style="width: 300px; height: 300px" /></a>
                    <img slot="reference" :src="scoped.row.productCover" @click="$openImg(scoped.row.goods_img)" style="width: 50px; height: 50px; cursor: pointer" />
                  </el-popover> -->
                  <el-image class="table-img" :src="scoped.row.productCover" :preview-src-list="[scoped.row.productCover]">
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="productTitle" align="center">
            </el-table-column>
            <el-table-column label="价格" prop="realPrice" align="center" />
            <el-table-column label="属性" prop="skuSetName" align="center">
            </el-table-column>
            <el-table-column label="数量" prop="productNum" align="center">
            </el-table-column>
            <el-table-column label="待发货数量" align="center">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.productNum - scope.row.shipedNum }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="已发货数量" prop="shipedNum" align="center">
            </el-table-column>
            <el-table-column label="发货数量" align="center">
              <template slot-scope="scope">
                <div class="flex">
                  <el-form-item :prop="'tableData.' + scope.$index + '.number'">
                    <el-input-number v-model="scope.row.number" controls-position="right" :min="0" :step="1" :max="scope.row.productNum - scope.row.shipedNum" :precision="0" style="width: 100%"></el-input-number>
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <h3>物流信息</h3>
          <template v-if="kdType == 'pt'">
            <el-form-item label="快递公司" prop="expressCode">
              <el-select class="w-100" v-model="dataForm.expressCode" @change="selectChange" placeholder="请选择快递公司" clearable filterable>
                <el-option v-for="item in options" :key="item.companyCode" :label="item.companyName" :value="item.companyCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物流单号" prop="logisticCode">
              <el-input maxlength="50" v-model="dataForm.logisticCode" placeholder="请输入快递单号"></el-input>
            </el-form-item>
          </template>
          <!-- <template v-else>
            <el-form-item label="快递公司名称" prop="logisticscompanyId">
              <el-select v-model="dataForm.logisticscompanyId" placeholder="请选择">
                <el-option v-for="item in logisticscompanyOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否云打印" prop="cloudPrint">
              <el-select v-model="dataForm.cloudPrint" placeholder="请选择" @change="handleCloudPrint">
                <el-option v-for="item in cloudPrintOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="云端打印设备" prop="cloudPrintDeviceId" v-if="dataForm.cloudPrint">
              <el-select v-model="dataForm.cloudPrintDeviceId" placeholder="请选择">
                <el-option v-for="item in cloudPrintOptions" :key="item.cloud_print_device_id" :label="item.device_name" :value="item.cloud_print_device_id">
                </el-option>
              </el-select>
            </el-form-item>
          </template> -->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit('dataForm')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import orderService from '@/api/orderService.js'
// import cloudPrintApi from '@/api/cloudPrint.js'
// import expressApi from '@/api/sender.js'
import { expressCompanyList } from '@/api/operating.js'
import { shopOrderPackageShip } from '@/api/order'
export default {
  name: 'subpackageDetail',
  data () {
    var validatorNum = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error('请输入发货数量'))
      } else {
        callback()
      }
    }
    return {
      title: '分包发货',
      visible: true,
      loading: false,
      dataForm: {
        expressCode: '',
        logisticCode: '',
        tableData: [],
        logisticscompanyId: undefined,
        cloudPrint: false,
        cloudPrintDeviceId: undefined,
      },
      options: [],
      dataRule: {
        expressCode: [
          {
            required: true,
            message: '请先选择快递公司',
            trigger: 'change'
          }
        ],
        logisticCode: [
          {
            required: true,
            message: '快递单号不能为空',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '发货数量不能为空',
            validator: validatorNum,
            trigger: 'blur'
          }
        ],
        logisticscompanyId: [
          {
            required: true,
            message: '请选择快递公司名称',
            trigger: 'change'
          }
        ],
        cloudPrintDeviceId: [
          {
            required: true,
            message: '请选择云端打印设备',
            trigger: ['blur', 'change']
          }
        ]
      },
      logisticscompanyOptions: [],
      cloudPrintOptions: [],
      cloudPrintOptions: [
        {
          label: '是',
          value: true
        },
        {
          label: '否',
          value: false
        }
      ],
      kdType: 'pt'
    }
  },
  created () {
    this.goodStreamList()
  },
  methods: {
    init (obj, kdType) {
      this.kdType = kdType
      this.dataForm.tableData = obj.orderDetails
      this.dataForm.orderId = obj.orderId
      for (let item of this.dataForm.tableData) {
        this.$set(item, 'number', 0)
      }
      // if (kdType == 'pt') {
      this.title = '分包发货'
      this.goodStreamList()
      // } else {
      //   this.title = '快递100分包发货'
      //   this.getKDCompany()
      // }
    },
    goodStreamList () {
      expressCompanyList().then((res) => {
        this.options = res.data
      })
    },
    selectChange (e) {
      for (let item of this.options) {
        if (e == item.companyCode) {
          this.dataForm.expressName = item.companyName
          break
        }
      }
    },
    dataFormSubmit (e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          // 判断至少发货数量有一个有值
          let flag = false
          let arr = this.dataForm.tableData.map(v => {
            if (v.number > 0) {
              flag = true
            }
            return {
              number: v.number,
              orderDetailId: v.orderDetailId
            }
          })
          if (!flag) {
            this.$message.error('请选择发货数量！')
            return false
          }
          this.dataForm.all = false;
          this.dataForm.packageItems = arr
          delete this.dataForm.tableData
          console.log(this.dataForm, 1111)
          let Api
          if (this.kdType == 'pt') {
            Api = shopOrderPackageShip
          }
          // else {
          //   Api = orderService.orderKDSubpackageShip
          // }
          Api(this.dataForm).then((res) => {
            if (res && res.code == 200) {
              this.dataForm.expresscode = ''
              this.dataForm.logisticCode = ''
              this.dataForm.tableData = []
              this.dataForm.logisticscompanyId = undefined
              this.dataForm.cloudPrint = false
              this.dataForm.cloudPrintDeviceId = undefined
              this.$message.success('发货成功！')
              this.$emit('result', res.data)
            } else {
              this.$message.error(res.msg)
            }
          })
          // }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close (e) {
      this.dataForm.expresscode = ''
      this.dataForm.logisticCode = ''
      this.dataForm.tableData = []
      this.dataForm.logisticscompanyId = undefined
      this.dataForm.cloudPrint = false
      this.dataForm.cloudPrintDeviceId = undefined
      // this.$refs.dataForm.resetFields()
      this.$emit('result')
    },
    // 获取快递100公司
    getKDCompany () {
      expressApi.expressList_Api().then((res) => {
        if (res && res.data && res.data.code == 200) {
          this.logisticscompanyOptions = res.data.list
        }
      })
    },
    // 获取云打印设备
    getCloudPrintDevice () {
      cloudPrintApi.cloudPrintList_Api().then((res) => {
        if (res && res.data && res.data.code == 200) {
          this.cloudPrintOptions = res.data.list
        }
      })
    },
    handleCloudPrint (e) {
      if (e) {
        this.getCloudPrintDevice()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  .el-form-item {
    // margin-bottom: 0;
  }
}
.flex {
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
}
.table-img {
  width: 100px;
  height: 100px;
}
</style>
