<template>
  <div>
    <el-page-header :content="detailsId?'编辑':'新增'" style=" padding: 20px 20px 0 20px;" @back="handleBack" />
    <return-sales-header ref="header" :details="details" />
    <sales-table :data-list="dataList" :column="column" is-operation is-selection @handleSelection="handleSelection">
      <template #bts>
        <div>
          <el-button type="primary" size="mini" @click="dialogVisible=true">添加</el-button>
          <el-button type="danger" size="mini" @click="delChange">删除</el-button>
        </div>
      </template>
      <template #events>
        <div v-if="!detailsId">
          <el-button type="primary" size="mini" @click="handelSubmit(1)">提交</el-button>
          <el-button size="mini">重置</el-button>
          <el-button size="mini" :disabled="dis" @click="handleInform(2)">通知发货</el-button>
        </div>
        <div v-else>
          <el-button type="primary" size="mini" @click="handelSubmit(2)">保存</el-button>
          <el-button size="mini">重置</el-button>
        </div>

      </template>
      <template v-slot:custom="{item:{row,$index}}">
        <el-radio v-model="row.flag" label="1">增加</el-radio>
        <el-radio v-model="row.flag" label="-1">减少</el-radio>
      </template>
      <template v-slot:operation="{item:{row,$index}}">
        <el-popconfirm
          style="margin-left: 10px"
          title="删除？"
          @onConfirm="handleDel(row,$index)"
        >
          <el-button slot="reference" type="text" size="mini">删除</el-button>
        </el-popconfirm>
      </template>
    </sales-table>
    <sales-dialog :data-list="dataList" :dialog-visible="dialogVisible" :customer-number="customerNumber" :func="getDialogList" @confirm="confirm" />
  </div>
</template>

<script>
import SalesDialog from '@/components/SalesDialog/SalesDialog'
import ReturnSalesHeader from '@/components/ReturnSalesHeader/ReturnSalesHeader'
import SalesTable from '@/components/SalesTable/SalesTable'
import {
  addFrontOrder, detailRefund,
  getFrontOrderDetail,
  addRefund,
  getFrontOrderList,
  sbumitFrontOrder,
  sendRefund,
  updateRefund
} from '@/api/sales'

export default {
  name: 'WarehouseForm',
  components: {
    ReturnSalesHeader,
    SalesTable,
    SalesDialog
  },
  props: ['detailsId', 'pageType'],
  data() {
    return {
      dialogVisible: false,
      customerNumber: '',
      dataList: [],
      selection: [],
      flag: 1,
      dis: true,
      details: {},
      column: [
        {
          prop: 'materialName',
          label: '产品名称',
          width: '180'
        },
        {
          prop: 'materialOldNumber',
          label: '物料编码',
          width: '180'
        },
        {
          prop: 'specification',
          label: '规格型号',
          width: '300'
        },
        {
          prop: 'qty',
          label: '发货数量',
          width: '180'
        },
        {
          prop: 'refundQty',
          label: '退货数量',
          width: '180',
          isInput: true
        },
        {
          prop: 'qty',
          label: '已退数量',
          width: '180'
        },
        {
          prop: 'volume',
          label: '体积',
          width: '180'
        },
        {
          prop: 'totalVolume',
          label: '总体积',
          width: '180'
        },
        {
          prop: 'notes',
          label: '备注',
          width: '180',
          isInput: true,
          type: 'text'
        }
      ]
    }
  },
  created() {
    if (this.detailsId) {
      detailRefund({ id: this.detailsId }).then(res => {
        this.dataList = res.data.orders
        this.details = res.data
        this.details.customerOrderNo = this.dataList[0].id
        this.customerNumber = this.dataList[0].customerNumber
      })
    } else {
      Object.assign(this.$data, this.$options.data())
    }
  },

  methods: {
    getDialogList(p) {
      return getFrontOrderList(...p)
    },
    confirm(selected) {
      console.log(selected)
      // console.log(selected)
      this.dataList = selected
      this.details = this.dataList[0]
      this.details.customerOrderNo = this.dataList[0].id
      this.details.id = ''
      this.customerNumber = this.dataList[0].customerNumber
      // this.$refs.header.details.customerName = this.dataList[0].customerName
      // this.$refs.header.details.customerNumber = this.dataList[0].customerNumber
      // this.$refs.header.details.customerNumber = this.dataList[0].pickTime
      // this.$refs.header.details.customerNumber = this.dataList[0].userName
      // this.$refs.header.details.customerNumber = this.dataList[0].phone
      // this.$refs.header.details.customerNumber = this.dataList[0].stockType
      this.dialogVisible = false
    },
    handleDel(item, index) {
      this.dataList.splice(index, 1)
      if (!this.dataList.length) {
        this.$nextTick(() => {
          this.details = {}
          this.customerNumber = ''
        })
      }
    },
    delChange() {
      this.dataList.forEach((k, i) => {
        this.selection.forEach((l, e) => {
          if (k.id === l.id) {
            this.dataList.splice(i, 1)
            this.selection.splice(e, 1)
          }
        })
      })
      if (!this.dataList.length) {
        this.$nextTick(() => {
          this.details = {}
          this.customerNumber = ''
        })
      }
    },
    handleSelection(data) {
      this.selection = data
    },

    handelSubmit(type, status = 1) {
      if (!this.dataList.length) {
        this.$errorMsg('请添加产品')
        return
      }
      for (let i = 0; i < this.dataList.length; i++) {
        this.dataList[i].id = ''
        this.dataList[i].directFlag = this.dataList[i].flag
        if (Number(this.dataList[i].refundQty) < 0 || !this.dataList[i].refundQty) {
          this.$errorMsg(`第${i + 1}产品退货数量有误`)
          return
        }
      }

      const params = {
        ...this.$refs.header.details,
        orders: this.dataList,
        customerOrderNo: this.details.customerOrderNo,
        status
      }
      if (type === 1) {
        params.id = ''
        addRefund(params).then(res => {
          this.$successMsg('新增成功')
          // this.pageType = 0
          this.dis = false
          this.$forceUpdate()
        })
      } else {
        updateRefund(params).then(res => {
          this.$successMsg('编辑成功')
          this.handleBack()
          this.$forceUpdate()
        })
      }
    },
    handleBack() {
      this.$emit('close')
    },
    handleInform(status = 2) {
      sendRefund({ id: this.$refs.header.details.id, status })
    }

  }
}
</script>

<style scoped>

</style>
