<template>
  <div class="bg-in-stock">
    <el-form ref="GoodsTransferForm" :model="GoodsTransferForm" label-width="120px" inline style="width:1351px">
      <!-- <h3>调拨单</h3> -->
<!--       <el-form-item label="调出仓库">
        <el-select @change="cleanGoodsList" v-model="GoodsTransferForm.out_warehouse_id" :disabled="type === 'detail' || !GoodsTransferForm.out_dept_id">
          <el-option v-for="item in outWarehouseList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="调出库经手人" prop="out_handled_by_id">
        <el-select v-model="GoodsTransferForm.out_handled_by_id" :disabled="type === 'detail'">
          <el-option v-for="item in adminList" :key="item.id" :label="item.real_name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="调入部门" prop="in_dept_id">
        <el-cascader @change="GET_WarehouseList('inWarehouseList')" v-model="GoodsTransferForm.in_dept_id" :options="deptList" :disabled="type === 'detail'" :props="{
          label: 'name',
          value: 'id',
          emitPath: false,
          checkStrictly: true
        }" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="调入仓库">
        <el-select v-model="GoodsTransferForm.in_warehouse_id" :disabled="type === 'detail' || !GoodsTransferForm.in_dept_id">
          <el-option v-for="item in inWarehouseList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="仓库名称" prop="warehouse_name">
        <el-input v-model="GoodsTransferForm.warehouse_name" :minlength="2" :maxlength="20" clearable
          :disabled="type === 'detail'"></el-input>
      </el-form-item>
      <el-form-item label="库位号" prop="area_name">
        <el-input v-model="GoodsTransferForm.area_name" :minlength="2" :maxlength="20" clearable
          :disabled="type === 'detail'"></el-input>
      </el-form-item>
      <div class="mx">
        <h3>商品明细</h3>
        <el-button class="button" size="mini" type="primary" v-if="type !== 'detail'"
          @click="handleSelectWarehouseEntryBatch">选择</el-button>
      </div>
      <div style="display:block">
        <el-table :data="GoodsTransferForm.product_list" border :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }" style="width: 100%; margin-top: 20px;">
         <!--  <el-table-column label="入库单号">
            <template slot-scope="scope">
              {{ scope.row.warehouse_entry_sn }}
            </template>
          </el-table-column>
          <el-table-column label="批次编号">
            <template slot-scope="scope">
              {{ scope.row.sn }}
            </template>
          </el-table-column> -->
          <el-table-column label="商品编号">
            <template slot-scope="scope">
              {{ scope.row.goods_sn }}
            </template>
          </el-table-column>
          <el-table-column label="sku">
            <template slot-scope="scope">
              {{ scope.row.goods_sku }}
            </template>
          </el-table-column>
          <el-table-column label="序列号">
            <template slot-scope="scope">
              {{ scope.row.goods_sn_code }}
            </template>
          </el-table-column>
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              {{ scope.row.goods_name }}
            </template>
          </el-table-column>
          <el-table-column label="规格型号">
            <template slot-scope="scope">
              {{ scope.row.goods_specification }}
            </template>
          </el-table-column>
          <el-table-column label="单位" width="150">
            <template slot-scope="scope">
              {{ scope.row.goods_unit }}
            </template>
          </el-table-column>
          <el-table-column label="实际库存">
            <template slot-scope="scope">
              {{ scope.row.actual_stock }}
              <!-- <el-input v-model="scope.row.num" clearable :maxlength="20" :disabled="type === 'detail'"></el-input> -->
            </template>
          </el-table-column>
          <el-table-column label="可用库存">
            <template slot-scope="scope">
              {{ scope.row.usable_stock }}
            </template>
          </el-table-column>
          <el-table-column label="在途库存">
            <template slot-scope="scope">
              {{ scope.row.transit_stock }}
            </template>
          </el-table-column>
          <el-table-column label="预警库存">
            <template slot-scope="scope">
              {{ scope.row.warning_stock }}
            </template>
          </el-table-column>
          <el-table-column label="操作" v-if="type !== 'detail'">
            <template slot-scope="scope">
              <el-button size="mini" type="danger"
                @click="GoodsTransferForm.product_list.splice(scope.$index, 1)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <div class="footer">
      <el-button v-if="type !== 'detail'" type="primary" @click="submitGoodsTransferForm">保存
      </el-button>
      <el-button @click="roBack()">返回
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as API_GoodsTransfer from '@/api/goodsTransfer'
import * as API_BasicSetting from '@/api/basicSetting'
import { Foundation } from '~/ui-utils'
import * as API_Setting from '@/api/setting'
import * as API_Auth from '@/api/auth'
export default {
  name: 'goodsTransferAdd',
  data() {
    return {
      adminList: [],
      // 所选部门对应调出仓库
      outWarehouseList: [],
      // 所选部门对应调入仓库
      inWarehouseList: [],
      deptList: [],
      deptListAll: [],
      goodstransferType: [],
      fileList: [],
      id: '',
      /** 调拨单表单*/
      GoodsTransferForm: {
        out_dept_id: '',
        out_handled_by_id: '',
        product_list: []
      },
      type: ''
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  mounted() {
    if (this.$route.name === 'goodsTransferAdd') {
      this.GoodsTransferForm.out_handled_by_id = this.user.uid
      this.GoodsTransferForm.dept_id = this.user.dept_id
      this.$set(this.GoodsTransferForm, 'transfer_time', new Date().getTime())
    } else if (this.$route.name === 'goodsTransferDetail') {
      this.type = 'detail'
    }
    if (this.$route.params.id) {
      this.id = this.$route.params.id
      this.GET_GoodsTransferDetail()
    }
    this.GET_DeptList()
    this.GET_DictDataInfo()
    this.GET_AdministratorList()
  },
  methods: {
    /** 切换调出部门 */
    changeDept() {
      this.GET_WarehouseList('outWarehouseList')
      this.cleanGoodsList()
    },
    /** 清除已选商品明细 */
    cleanGoodsList() {
      // 切换部门或仓库需要清除已选对应仓库下的商品数据
      this.$set(this.GoodsTransferForm, 'product_list', [])
    },
    /** 获取人员列表 */
    GET_AdministratorList() {
      API_Auth.getAdministratorList({
        page_no: 1,
        page_size: 9999,
        user_state: 0
      }).then(response => {
        this.adminList = response.data
      })
    },
    roBack() {
      const { callback } = this.$route.params
      if (typeof callback === 'function') callback()
      this.$store.dispatch('delCurrentViews', {
        view: this.$route,
        $router: this.$router
      })
      this.$router.push({ name: 'goodsUnderstock' })
    },
    // 选择出库单
    async handleSelectWarehouseEntryBatch() {
      if (!this.GoodsTransferForm.out_warehouse_id) {
        this.$message.error('请先选择调出仓库！')
        return
      }
      const goodsData = await this.$EnwarehouseEntryBatch({
        goodsApi: 'admin/erp/warehouseEntryBatch',
        warehouseList: this.outWarehouseList,
        selectedIds: this.id ? this.GoodsTransferForm.product_list && this.GoodsTransferForm.product_list.map(item => item.id) : this.GoodsTransferForm.product_list.map(item => item.id),
        purchasePlanApiParams: { warehouse_id: this.GoodsTransferForm.out_warehouse_id }
      })
      this.GoodsTransferForm.out_warehouse_id = goodsData.warehouse_id
      if (goodsData.purchasePlans || goodsData.purchasePlans.length) {
        this.GoodsTransferForm.product_list = goodsData.purchasePlans.map(item => {
          item.warehouse_entry_batch_id = item.id
          return item
        })
      }
    },
    submitGoodsTransferForm() {
      const { id } = this.GoodsTransferForm
      const params = this.MixinClone(this.GoodsTransferForm)
      params.transfer_time = Math.floor(params.transfer_time / 1000)
      if (id) {
        API_GoodsTransfer.editGoodsTransfer(id, params).then(response => {
          this.$message.success('修改成功！')
          const { callback } = this.$route.params
          if (typeof callback === 'function') callback()
          this.$store.dispatch('delCurrentViews', {
            view: this.$route,
            $router: this.$router
          })
          this.$router.push({ name: 'goodsUnderstock' })
        })
      } else {
        API_GoodsTransfer.addGoodsTransfer(params).then(() => {
          this.$message.success('添加成功！')
          const { callback } = this.$route.params
          if (typeof callback === 'function') callback()
          this.$store.dispatch('delCurrentViews', {
            view: this.$route,
            $router: this.$router
          })
          this.$router.push({ name: 'goodsTransfer' })
        })
      }
    },
    /** 获取部门 */
    GET_DeptList() {
      API_Setting.getDeptList().then(response => {
        this.deptList = Foundation.buildTree(response, '0')
        this.deptListAll = response
      })
    },
    /** 获取仓库 */
    GET_WarehouseList(key) {
      let type = key === 'outWarehouseList' ? 'out_dept_id' : 'in_dept_id'
      const params = {
        dept_id: this.GoodsTransferForm[type]
      }
      API_BasicSetting.getWarehouseListAll(params).then(response => {
        this[key] = response
      })
    },
    GET_DictDataInfo() {
      API_Setting.getDictDataInfo('erp_goodstransfer_type').then(res => {
        this.goodstransferType = res
      })
    },
    /** 库存查看详细信息 */
    GET_GoodsTransferDetail() {
      API_GoodsTransfer.getOne({id:"1754349609506316290"}).then(response => {
        console.log(response);
       this.GoodsTransferForm = response
        /* this.fileList = response.attachment ? [{ name: '附件', url: response.attachment }] : []
        this.GoodsTransferForm.transfer_time = Math.floor(this.GoodsTransferForm.transfer_time * 1000) */
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
/** 底部步骤 */
.footer {
  width: 100%;
  padding: 10px;
  bottom: 0px;
  text-align: center;
  z-index: 999;
}

.mx {
  display: flex;
  align-items: center;

  .button {
    margin-left: 10px;
  }
}

.bg-in-stock {
  background-color: #fff;
  margin: 10px;
  padding: 25px;
}

.goods-info {
  display: flex;

  .goods-name-box {
    text-align: left;

    .goods-name {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 16px;
    }

    .specs {
      color: #999999;
    }
  }
}

/deep/ {
  .el-input--suffix .el-input__inner {
    padding-right: 10px;
  }

  .error-input {
    .el-input__inner {
      border: 1px solid red;
    }
  }
}

/deep/ .el-form-item {
  width: 350px;
}
</style>
