<template>
  <div>
    <el-dialog top="5vh" title="物流信息" width="60%" center :close-on-click-modal="false" :visible.sync="visible" :before-close="close">
      <div v-loading="loading">
        <h3>包裹信息</h3>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand" align="center">
            <template slot-scope="scope">
              <el-table :data="scope.row.packageItems" border>
                <el-table-column label="商品图片" align="center">
                  <template slot-scope="scoped">
                    <div>
                      <!-- <el-popover placement="top-start" trigger="hover">
                        <a :href="scoped.row.goods_img" target="_blank" title="查看最大化图片"><img :src="scoped.row.goods_img" style="width: 300px; height: 300px" /></a>
                        <img slot="reference" :src="scoped.row.goods_img" @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="sale_price" align="center">
                </el-table-column> -->
                <el-table-column label="属性" prop="skuSetName" align="center">
                </el-table-column>
                <el-table-column label="发货数量" prop="number" align="center">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="包裹名称" align="center">
            <template slot-scope="scope">
              <span>包裹{{ scope.$index + 1 }} </span>
            </template>
          </el-table-column>
          <el-table-column label="发货时间" prop="createTime" align="center">
          </el-table-column>
          <el-table-column label="快递名称" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.packageExpressVo.expressName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="快递单号" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.packageExpressVo.logisticCode }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <div>
                <el-button type="text" @click="updateShipments(row)">修改</el-button>
                <el-button type="text" @click="viewLogistics(row)">查看物流信息</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 物流详情 -->
    <goodStreamDetail @result="goodStreamVisible = false" v-if="goodStreamVisible" ref="goodStream"></goodStreamDetail>
    <!-- 发货 核销 -->
    <deliverGoods @result="result('deliverGoods')" v-if="deliverGoods" ref="deliverGoods"></deliverGoods>
    <!-- <el-dialog title="提示" :visible.sync="dialogVisibleShimpCancelOrCloudPrint" width="50%" :before-close="handleCloseShimpCancelOrCloudPrint" :close-on-click-modal="false">
      <el-form :model="shimpCancelOrCloudPrintForm" :rules="shimpCancelOrCloudPrintFormRule" ref="shimpCancelOrCloudPrintFormRef" inline label-width="120px">
        <template v-if="shimpCancelOrCloudPrintType == 'cancel'">
          <el-form-item label="取消原因：" prop="reason">
            <el-input type="textarea" v-model="shimpCancelOrCloudPrintForm.reason" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入"></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="云端打印设备：" prop="cloudPrintDeviceId">
            <el-select v-model="shimpCancelOrCloudPrintForm.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>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseShimpCancelOrCloudPrint">取 消</el-button>
        <el-button type="primary" @click="handleSureShimpCancelOrCloudPrint" :loading="cancelLoading">{{ cancelLoading ? '提交中' : '确 定' }}</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { shopOrderInfo } from '@/api/order.js'
// import orderService from '@/api/orderService.js'
// import cloudPrintApi from '@/api/cloudPrint.js'
import goodStreamDetail from './goodStreamDetail.vue'
// 发货
import deliverGoods from './deliverGoods.vue'
export default {
  components: {
    goodStreamDetail,
    deliverGoods
  },
  name: 'subpackageDetail',
  data () {
    return {
      visible: true,
      loading: false,
      tableData: [],
      goodStreamVisible: false, // 物流详情
      deliverGoods: false, // 发货
      id: null,
      dialogVisibleShimpCancelOrCloudPrint: false,
      shimpCancelOrCloudPrintType: 'cancel',
      currentClickPackageObj: null,
      reason: undefined,
      cancelLoading: false,
      shimpCancelOrCloudPrintForm: {
        reason: undefined,
        cloudPrintDeviceId: undefined
      },
      shimpCancelOrCloudPrintFormRule: {
        reason: [
          {
            required: true,
            message: '请输入取消原因',
            trigger: 'blur'
          }
        ],
        cloudPrintDeviceId: [
          {
            required: true,
            message: '请选择云端打印设备',
            trigger: ['blur', 'change']
          }
        ]
      },
      cloudPrintOptions: [],
      orderId: undefined,
      details: {}
    }
  },
  methods: {
    init (obj) {
      if (!obj.orderId) return
      this.orderId = obj.orderId;
      this.searchDetail(obj.orderId)
    },
    searchDetail (id) {
      this.loading = true
      shopOrderInfo(id)
        .then((res) => {
          if (res && res.code == 200) {
            this.details = res.data;
            this.tableData = res.data.orderPackages
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
        })
        .catch((res) => {
          this.loading = false
        })
    },
    /* 查看物流信息 */
    viewLogistics (item) {
      this.goodStreamVisible = true
      this.$nextTick(() => {
        this.$refs.goodStream.init(item)
      })
    },
    /**
     * 修改物流信息
     * */
    updateShipments (item) {
      this.deliverGoods = true
      this.$nextTick(() => {
        item.businessId = this.details.businessId
        this.$refs.deliverGoods.init(item, 'update')
      })
    },
    // 取消发货 云打印复打
    // handleCancelShimpOrCloudPrintAgain (item, type) {
    //   console.log(item, 1111)
    //   if (type == 'cloudPrintAgain') {
    //     this.getCloudPrintDevice()
    //   }
    //   this.currentClickPackageObj = JSON.parse(JSON.stringify(item))
    //   this.shimpCancelOrCloudPrintType = type
    //   this.dialogVisibleShimpCancelOrCloudPrint = true
    // },
    // handleCloseShimpCancelOrCloudPrint () {
    //   this.shimpCancelOrCloudPrintForm = {
    //     reason: undefined,
    //     cloudPrintDeviceId: undefined
    //   }
    //   this.currentClickPackageObj = null
    //   this.shimpCancelOrCloudPrintType = null
    //   this.dialogVisibleShimpCancelOrCloudPrint = false
    // },
    // // 获取云打印设备
    // getCloudPrintDevice () {
    //   cloudPrintApi.cloudPrintList_Api().then((res) => {
    //     if (res && res.data && res.data.code == 200) {
    //       this.cloudPrintOptions = res.data.list
    //     }
    //   })
    // },
    // handleSureShimpCancelOrCloudPrint () {
    //   this.$refs.shimpCancelOrCloudPrintFormRef.validate((valid) => {
    //     if (valid) {
    //       if (this.shimpCancelOrCloudPrintType == 'cancel') {
    //         this.cancelShimp()
    //       } else {
    //         this.handleCloudPrintAgain()
    //       }
    //     } else {
    //       return this.$message.error('请将表单填写完整')
    //     }
    //   })
    // },
    // cancelShimp () {
    //   orderService
    //     .orderCancelShip({
    //       order_id: this.currentClickPackageObj.order_id,
    //       orderPackageId: this.currentClickPackageObj.id,
    //       reason: this.shimpCancelOrCloudPrintForm.reason
    //     })
    //     .then((res) => {
    //       if (res && res.data && res.data.code == 200) {
    //         this.$message.success('取消发货成功')
    //         this.handleCloseShimpCancelOrCloudPrint()
    //         this.$nextTick(() => {
    //           this.searchDetail(this.orderId)
    //         })
    //       }
    //     })
    // },
    // handleCloudPrintAgain () {
    //   orderService
    //     .orderCloudPrintAgain({
    //       order_id: this.currentClickPackageObj.order_id,
    //       orderPackageId: this.currentClickPackageObj.id,
    //       cloudPrintDeviceId:
    //         this.shimpCancelOrCloudPrintForm.cloudPrintDeviceId
    //     })
    //     .then((res) => {
    //       if (res && res.data && res.data.code == 200) {
    //         this.$message.success('云打印复打成功')
    //         this.handleCloseShimpCancelOrCloudPrint()
    //         this.$nextTick(() => {
    //           this.searchDetail(this.orderId)
    //         })
    //       }
    //     })
    // },
    close (e) {
      this.$emit('result')
    },
    result () {
      this.deliverGoods = false
      this.searchDetail(this.orderId)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  ::v-deep .el-table__body {
    .el-table__expand-icon {
      font-size: 20px;

      .el-icon {
        margin-top: -10px;
        margin-left: -10px;
      }
    }
  }
}
.table-img {
  width: 100px;
  height: 100px;
}
</style>
