<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
		<template slot-scope="{activeKey, data}">
			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
			  :operation="operation()" :exportList="exportList">
        <div slot="moreSearch">
          <el-radio-group v-model="examineStatus" size="mini" @change="changeType">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="SEND">已发货</el-radio-button>
            <el-radio-button label="REFUND">已退货</el-radio-button>
            <el-radio-button label="PART_REFUND">部分退货</el-radio-button>
            <el-radio-button label="REFUND_PRICE">仅退款</el-radio-button>
          </el-radio-group>
          <br><br>
        </div>
			</template-page>

      <div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
        <div style="font-weight: 500;">单据信息</div>
        <el-divider></el-divider>

        <el-descriptions border title="" :column="4" :colon="false" labelStyle="width: 8%" contentStyle="width: 17%">
          <el-descriptions-item label="发货状态">
            {{ {SEND: '已发货', REFUND: '已退货', PART_REFUND: '部分退货', REFUND_PRICE: '仅退款'}[detailData.status] }}
          </el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
        </el-descriptions>
        
        <el-descriptions border title="" :column="4" :colon="false" labelStyle="width: 8%" contentStyle="width: 17%" style="margin-top: -1px">
          <el-descriptions-item label="发货方式">
            {{ {YES: '自提', NO: '快递物流'}[detailData.pickType] }}
          </el-descriptions-item>
          <el-descriptions-item label="提货人" v-if="detailData.pickType == 'YES'">
            {{detailData.pickName}}
          </el-descriptions-item>
          <el-descriptions-item label="提货人电话" v-if="detailData.pickType == 'YES'">
            {{detailData.pickPhone}}
          </el-descriptions-item>
          <el-descriptions-item label="物流公司" v-if="detailData.pickType == 'NO'">
            {{detailData.companyName}}
          </el-descriptions-item>
          <el-descriptions-item label="快递单号" v-if="detailData.pickType == 'NO'">
            {{detailData.logisticsNo}}
          </el-descriptions-item>
          <el-descriptions-item label="仓储">
            {{detailData.storageStockName}}
          </el-descriptions-item>
        </el-descriptions>
        <!-- <el-descriptions border title="" :column="4" :colon="false" labelStyle="width: 8%" contentStyle="width: 17%" style="margin-top: -1px">
          <el-descriptions-item label="是否派单">
            {{detailData.saleName}}
          </el-descriptions-item>
          <el-descriptions-item label="是否退还单">
            {{detailData.saleMobile}}
          </el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
        </el-descriptions> -->

        <el-tabs style="margin-top: 20px;" v-model="detailTabs">
          <el-tab-pane label="发货数量" name="a"></el-tab-pane>
          <el-tab-pane label="发货条码" name="b" v-if="joinCode"></el-tab-pane>
        </el-tabs>

        <div style="margin-top: 20px;" v-show="detailTabs == 'a'">
          <el-table :data="detailData.orderDetailSendList" element-loading-text="Loading" border fit highlight-current-row stripe>
            <el-table-column prop="brandName" align="center" label="品牌"></el-table-column>
            <el-table-column prop="mainName" align="center" label="大类"></el-table-column>
            <el-table-column prop="smallName" align="center" label="小类"></el-table-column>
            <el-table-column prop="goodsName" align="center" label="商品名称" width="140"></el-table-column>
            <el-table-column prop="goodsMaterialName" align="center" label="物料名称" width="140"></el-table-column>
            <el-table-column prop="goodsMaterialSpecsName" align="center" label="规格型号" width="140"></el-table-column>
            <el-table-column prop="goodsMaterialUnit" align="center" label="单位">
              <template slot-scope="scope">
                {{scope.row.goodsMaterialUnit == 'C' ? '整套' : scope.row.goodsMaterialUnit == 'I' ? '单个' : ''}}
              </template>
            </el-table-column>
            <el-table-column prop="sendNum" align="center" label="发货数量"></el-table-column>
            <el-table-column prop="refundNum" align="center" label="退货数量"></el-table-column>
            <el-table-column prop="insideNum" align="center" label="内机数量"></el-table-column>
            <el-table-column prop="outNum" align="center" label="外机数量"></el-table-column>
            <el-table-column prop="sendPartsCodeQty" align="center" label="配件数量"></el-table-column>
            <el-table-column prop="insideCodeQty" align="center" label="导入内机条码数量" width="140"></el-table-column>
            <el-table-column prop="outCodeQty" align="center" label="导入外机条码数量" width="140"></el-table-column>
            <el-table-column prop="partsCodeQty" align="center" label="导入配件条码数量" width="140"></el-table-column>
          </el-table>
        </div>

        <div v-show="detailTabs == 'b'">
          <el-table
            class="specTable"
            :data="codeList"
            element-loading-text="Loading"
            border
            highlight-current-row
            stripe
            style="margin-top: 20px">
            <el-table-column align="center" label="品牌" prop="brandName" min-width="120"></el-table-column>
            <el-table-column align="center" label="大类" prop="mainName" min-width="120"></el-table-column>
            <el-table-column align="center" label="小类" prop="smallName" min-width="120"></el-table-column>
            <el-table-column align="center" label="商品名称" prop="goodsMaterialName" min-width="200"></el-table-column>
            <el-table-column align="center" label="规格型号" prop="specsName" min-width="200"></el-table-column>
            <el-table-column align="center" label="物料类型" prop="materialName" min-width="120"></el-table-column>
            <el-table-column align="center" label="物料名称" prop="goodsMaterialName" min-width="120"></el-table-column>
            <el-table-column align="center" label="是否一物一码" prop="uniqueCode" min-width="120">
              <template slot-scope="scope">
                {{scope.row.uniqueCode == 'YES' ? '是' : '否'}}
              </template>
            </el-table-column>
            <el-table-column align="center" label="条码" prop="materialCode" min-width="120"></el-table-column>
            <el-table-column align="center" label="数量" prop="stockQty" min-width="120"></el-table-column>

          </el-table>
        </div>

				<div slot="footer" class="dialog-footer" style="margin-top: 20px;">
				  <el-button size="mini" @click="data.removeTab()">关 闭</el-button>
				</div>
      </div>

    </template>
  </zj-tab-page>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import { getSalesDeliverOrderList, salesDeliverOrderListExport, getSalesDeliverOrderDetail, salesDeliverOrderRefund, getOrderCodeList } from "@/api/order";
import operation_mixin from '@/components/template/operation_mixin.js'
import geographicalPosi from '@/components/geographicalPosi/index.vue'

export default {
  components: { TemplatePage, geographicalPosi },
  mixins: [import_mixin,operation_mixin],
  filters: {
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: { 'x-token': getToken() },
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],

      examineStatus: '',
      detailTabs: 'a',

      detailData: {},
      codeList: [],

      pageType: '',

      joinCode: JSON.parse(localStorage.getItem('greemall_user')).joinCode === "CODE",
    }
  },
  computed: {
    ...mapGetters(['name']),
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth("batchRefund", {
              click: () => {
                if (this.recordSelected.length == 0) {
                  return this.$message.warning('请至少勾选一条数据！');
                }
                this.$confirm('确认要批量退货吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  salesDeliverOrderRefund({
                    deliveryId: this.recordSelected.map(o => o.deliveryId).join(',')
                  }).then(res => {
                    this.$message({ type: 'success', message: `批量退货成功!` })
                    this.$refs.pageRef.refreshList()
                  })
                }).catch(() => {});
              }
            })
          ],
        ]
      ]
    },
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return []
    }
  },

  created() {
		if(this.$route.query.deliverId) {
      this.$nextTick(() => {
        this.openDetail('detail', this.$route.query.deliverId)
      })
    }
  },

  methods: {
    // 列表请求函数
    // getList: getSalesDeliverOrderList,
    getList(p) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        if (this.examineStatus) {
          pam.params.push({ "param": "a.status", "compare": "=", "value": this.examineStatus })
        }
        return getSalesDeliverOrderList(pam)
      } catch (error) {
        console.log(error)
      }
    },
    // 列表导出函数
    exportList: salesDeliverOrderListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 切换状态
    changeType(val) {
      this.$refs.pageRef.refreshList()
    },
    // 表格操作列
    operation() {
      return this.operationBtn({
        refund: {
          conditions: ({ row, index, column }) => {
            return row.status == 'SEND'
          },
          btnType: 'text',
          click: ({ row, index, column }) => {
            this.$router.push({
              name: "sales_return_order_list",
              query: {
                deliverId: row.deliveryId
              }
            })
          }
        },
        refundDetail: {
          conditions: ({ row, index, column }) => {
            return row.status == 'REFUND' || row.status == 'REFUND_PRICE'
          },
          btnType: 'text',
          click: ({ row, index, column }) => {
            if(row.type == 'YES') {
              this.$router.push({
                name: "sales_return_order_list",
                query: {
                  refundId: row.refundId
                }
              })
            }
            else {
              this.$router.push({
                name: "order_refund_detail",
                query: {
                  orderRefundId: row.refundId
                }
              })
            }
          }
        },
        detail: {
          btnType: 'text',
          click: ({ row, index, column }) => {
            this.openDetail('detail', row.deliveryId)
          }
        },
      })
    },

    openDetail(type, id) {
      this.$refs.tabPage.addTab({
      	// 对应显示的模块
      	activeKey: type,
      	// 唯一标识
      	key: type,
      	// 页签名称
      	label: ({ detail: '详情' })[type],
      	// 打开时事件
      	triggerEvent: () => {
          this.pageType = type;
      		this.$nextTick(()=>{
            this.detailTabs = 'a';
            if (type == 'detail') {
      				this.formDialogType = 0
      			} else if(type == 'examine'){
      				this.formDialogType = 1
      			}
            getSalesDeliverOrderDetail({ deliveryId: id }).then(res => {
              this.detailData = res.data;
            })
            getOrderCodeList({ deliveryId: id }).then(res => {
              this.codeList = res.data;
            })
      		})
      	},
      	// 关闭时事件
      	closeEvent: () => {
			    this.detailCancel()
      	}
      })
    },
    detailCancel() {
      this.formVisible = false
    },
    detailConfirm(cancel) {
      salesDeliverOrderRefund({
        id: this.detailData.id,
        examineStatus: 'OK',
      }).then(res => {
        this.$message({ type: 'success', message: `审批成功!` })
        cancel('list')
        this.$refs.pageRef.refreshList()
      })
    },

  }
}
</script>

<style lang="scss">
.specTable .el-table__cell {
  padding: 0 !important;
}

// 图片墙
.el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
}

.el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}
</style>