<template>
  <div>

    <el-dialog
      title="入仓-货物入仓"
      :visible.sync="opened"
      width="960px"
    >
      <el-descriptions border :column="2">
        <el-descriptions-item label="中文品名">{{ warehousing.prodTitleZh }}</el-descriptions-item>
        <el-descriptions-item label="英文品名">{{ warehousing.prodTitleEn }}</el-descriptions-item>
        <el-descriptions-item label="品牌">
          <span v-if="warehousing.orderWarehouseInBackItemDoList && warehousing.orderWarehouseInBackItemDoList.length">{{ form.brand || '无' }}</span>
          <el-select
            v-else v-model="form.brand"
            placeholder="可修改"
            filterable
            allow-create>
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.titleZh"
              :value="item.id">
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="是否备案">{{ isBeian }}</el-descriptions-item>
        <el-descriptions-item label="填单参数">
          箱数：{{ warehousing.num }}<br>
          体积：{{ warehousing.volume }}m³<br>
          重量：{{ warehousing.weight }}Kg
        </el-descriptions-item>
      </el-descriptions>
      <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px">
        <el-form-item label="材质">
          <dict-selector :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" v-model="form.material"></dict-selector>
        </el-form-item>
        <el-form-item label="入仓时间">
          <el-date-picker v-model="form.inTime" type="datetime" placeholder="请选择入仓时间"></el-date-picker>
        </el-form-item>
      </el-form>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>入仓记录</span>
          <el-button style="float: right;margin-left: 15px" size="mini" type="primary" icon="el-icon-minus" circle @click="handleDelete"></el-button>
          <el-button style="float: right" size="mini" type="primary" icon="el-icon-plus" circle @click="handleAdd()"></el-button>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column label="箱数">
            <template v-slot="{r,c,$index}">
              <span v-if="tableData[$index].id">{{ tableData[$index].cartonsNum }}</span>
              <el-input v-else v-model="tableData[$index].cartonsNum" placeholder=""></el-input>
              <span>{{ getDictDataLabel(DICT_TYPE.ECW_PACKAGE_TYPE, tableData[$index].unit) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="包装类型">
            <template v-slot="{r,c,$index}">
              <span v-if="tableData[$index].id">{{ getDictDataLabel(DICT_TYPE.ECW_PACKAGE_TYPE, tableData[$index].unit) }}</span>
              <dict-selector v-else :type="DICT_TYPE.ECW_PACKAGE_TYPE" v-model="tableData[$index].unit"></dict-selector>
            </template>
          </el-table-column>
          <el-table-column label="长(cm)">
            <template v-slot="{r,c,$index}">
              <span v-if="tableData[$index].id">{{ tableData[$index].boxGauge ? tableData[$index].boxGauge.split('*')[0] : '' }}</span>
              <el-input v-else v-model.number="tableData[$index].boxGauge1" placeholder="" @blur="handleVolume($index)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="宽(cm)">
            <template v-slot="{r,c,$index}">
              <span v-if="tableData[$index].id">{{ tableData[$index].boxGauge ? tableData[$index].boxGauge.split('*')[1] : '' }}</span>
              <el-input v-else v-model.number="tableData[$index].boxGauge2" placeholder="" @blur="handleVolume($index)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="高(cm)">
            <template v-slot="{r,c,$index}">
              <span v-if="tableData[$index].id">{{ tableData[$index].boxGauge ? tableData[$index].boxGauge.split('*')[2] : '' }}</span>
              <el-input v-else v-model.number="tableData[$index].boxGauge3" placeholder="" @blur="handleVolume($index)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="体积(m³)">
            <template v-slot="{r,c,$index}">
              <span v-if="tableData[$index].id">{{ tableData[$index].volume }}</span>
              <el-input v-else v-model.number="tableData[$index].volume" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="重量(Kg)">
            <template v-slot="{r,c,$index}">
              <span v-if="tableData[$index].id">{{ tableData[$index].weight }}</span>
              <el-input v-else v-model.number="tableData[$index].weight" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="130px">
            <template v-slot="{r,c,$index}">
              <span v-if="tableData[$index].id">{{ tableData[$index].quantityAll }}</span>
              <el-input v-else v-model.number="tableData[$index].quantityAll" placeholder="">
                <template slot="append">个</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="快递单号">
            <template v-slot="{r,c,$index}">
              <span v-if="tableData[$index].id">{{ tableData[$index].expressNo }}</span>
              <el-input v-else v-model="tableData[$index].expressNo" placeholder=""></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-card>


      <div v-if="edit">
        <h2>审批流程</h2>
        <work-flow xmlkey="free_apply" v-model="selectedUsers"  />
        <!--        <div>选择的用户：{{selectedUsers}}</div>-->
      </div>

      <span slot="footer">
        <el-button @click="opened = false">关 闭</el-button>
        <el-button type="primary" @click="handleSubmit()">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dictSelector from "@/components/DictSelector"
import {DICT_TYPE, getDictDataLabel} from "@/utils/dict"
import { orderWarehouseIn, orderWarehouseInUpdateApply } from '@/api/ecw/order'
import {getProductBrankPage} from "@/api/ecw/productBrank"
import WorkFlow from "@/components/WorkFlow"
import elSelect from '@/components/render/slots/el-select'

export default {
  name: 'editDialog',

  components: {
    dictSelector,
    WorkFlow
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 入仓修改
    edit: {
      type: Boolean,
      default: false
    },
    warehousing: {
      type: Object,
      default: () => {
        return {
          material: undefined,
          inTime: undefined,
          orderWarehouseInBackItemDoList: []
        }
      }
    }
  },

  mounted() {
    getProductBrankPage({pageSize: 100000}).then(r => {
      this.brandList = [
        {
          "titleZh":"无",
          "titleEn":"",
          "id":'0'
        },
        ...r.data.list.map(e => {
          if(e.id){
            e.id = e.id.toString()
          }
          const boxGauge = e.boxGauge
          if (boxGauge && boxGauge.length > 0) {
            const boxGaugeList = boxGauge.split('*')
            const [boxGauge1, boxGauge2, boxGauge3] = boxGaugeList
            return {...e, boxGauge1, boxGauge2, boxGauge3}
          }
          return e
        })
      ]
    })
  },

  data() {
    return {
      DICT_TYPE,
      getDictDataLabel,
      opened: false,
      brandList: [],
      form: {
        "brand": "",
        "brandType": 0,
        "inTime": "",
        "material": "",
        "orderId": 0,
        "orderItemId": 0,
        "orderNo": "",
        "orderWarehouseInItemDoList": [],
        "prodAttrIds": "",
        "prodId": 0,
        "prodTitleEn": "",
        "prodTitleZh": "",
        "prodType": 0,
        "type": 0
      },
      // orderItem: {},

      selectedUsers: undefined
    };
  },

  watch: {
    visible(val) {
      if (val) {
        this.opened = true
        if (this.warehousing) {
          // this.orderItem = this.warehousing
          this.inTime = this.warehousing.inTime
        }
      } else {
      }
    },
    opened(val) {
      if (val) {
        this.form.material = this.warehousing.material
        this.form.brand = this.warehousing.brand
      } else {
        this.$emit('update:visible', false)
      }
    }
  },

  methods: {
    handleVolume(index){
      const {boxGauge1, boxGauge2, boxGauge3} = this.tableData[index]
      if (boxGauge1 && boxGauge2 && boxGauge3) {
        this.tableData[index].volume = ((boxGauge1 * boxGauge2 * boxGauge3) / 1000000).toFixed(2)
      } else {
        this.tableData[index].volume = 0
      }
    },
    handleSubmit() {
      const orderWarehouseInItemDoList = [
        ...this.warehousing.orderWarehouseInBackItemDoList,
        ...this.form.orderWarehouseInItemDoList.map(e => {
          return {
            ...e,
            boxGauge: e.boxGauge1 + '*' + e.boxGauge2 + '*' + e.boxGauge3
          }
        })
      ]
      if (this.edit)
        return orderWarehouseInUpdateApply({
          ...this.form,
          brandType: this.form.brand ? 1 : 0,
          orderId: this.warehousing.orderId,
          orderItemId: this.warehousing.orderItemId,
          orderNo: this.warehousing.orderNo,
          "orderWarehouseInUpdateItemDoList": orderWarehouseInItemDoList,
          copyUserId: this.selectedUsers
        }).then(r => {
          if (r.data){
            this.$message.success('入仓修改发起成功')
            this.handleClose()
          }else {
            this.$message.success('入仓修改发起失败')
          }
        })
      else
        return orderWarehouseIn({
          ...this.form,
          brandType: this.form.brand ? 1 : 0,
          orderId: this.warehousing.orderId,
          orderItemId: this.warehousing.orderItemId,
          orderNo: this.warehousing.orderNo,
          orderWarehouseInItemDoList
        }).then(r => {
          if (r.data){
            this.$message.success('入仓成功')
            this.handleClose()
          }else {
            this.$message.success('入仓失败')
          }
        })
    },
    handleClose() {
      this.form.orderWarehouseInItemDoList = []
      this.opened = false
    },
    handleDelete() {
      this.form.orderWarehouseInItemDoList.pop()
    },
    handleAdd() {
      this.form.orderWarehouseInItemDoList.push({
        "boxGauge1": "",
        "boxGauge2": "",
        "boxGauge3": "",
        "cartonsNum": "",
        "expressNo": "",
        "quantityAll": "",
        "unit": "",
        "volume": '',
        "weight": ''
      })
    }
  },

  computed: {
    tableData() {
      return [...this.warehousing.orderWarehouseInBackItemDoList, ...this.form.orderWarehouseInItemDoList]
    },
    isBeian(){
      return this.brandList.find(e => e.titleZh === this.form.brand) ? '有备案' : '无备案'
    }
  }
}
</script>

<style scoped>

</style>
