<template>
  <div>
    <el-dialog :close-on-click-modal="false"
               top="8vh"
               width="30%"
               :visible.sync="dialogVisible"
               center
               @close="handleCancel"
    >
      <div class="el-dialog-div">
        <el-alert
          title="基本信息"
          type="info"
          :closable="false">
        </el-alert>
        <div style="padding-top: 10px;">
          <el-form
            :rules="rules"
            ref="dataForm"
            :model="temp"
            label-position="right"
            label-width="120px"
            style="height: 90%;"
          >
            <el-form-item label="入库门店" style="wdith:100%;" prop="deptName"  class="is-required">
              {{temp.deptName}}
            </el-form-item>
            <el-form-item label="入库方式" prop="stockInType"  class="is-required">
              <el-select style="wdith:100%;" v-model="temp.stockInType" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark"  >
              <el-input type="textarea" v-model="temp.remark" placeholder="备注" />
            </el-form-item>
          </el-form>
        </div>
        <el-alert
          title="入库商品"
          type="info"
          :closable="false">
        </el-alert>
        <div style="width: 100%;padding-top: 10px">
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              label="操作"
              width="120">
              <template slot-scope="scope">
                <i class="el-icon-circle-plus-outline el-icon-size" @click="chooseProduct(scope.$index)" ></i>
                <i class="el-icon-delete el-icon-size" @click="deleteCon(scope.$index)"  ></i>
              </template>
            </el-table-column>

            <el-table-column
              prop="productName"
              label="商品名"
              width="180">
            </el-table-column>

            <el-table-column
              prop="count"
              label="数量">
              <template slot-scope="scope">
                <el-input
                  :key="scope.row.id"
                  class="product-count"
                  v-model="scope.row.count"
                  @keyup.native="app.clearNoNum"
                  placeholder="请输入数量"></el-input>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <choose-product ref="chooseProductRef" @ok="getCheckedProducts"/>
  </div>
</template>

<script>
  import {addStock} from "@/api/business/stock/stock";
  import {setRequiredFields,isEmpty,accAdd,error,clearNoNum,getLoginUser} from "@/utils";
  import ChooseProduct from "@/views/business/stock/chooseProduct";
  const requiredFields = ['inStockType']
  export default {
    name: "addForm",
    components: {ChooseProduct},
    data() {
      return {
        rules: setRequiredFields(requiredFields),
        options: [{
          value: 1,
          label: '采购入库'
        }, {
          value: 2,
          label: '其他入库'
        }],
        dialogVisible: false,
        temp: {
          remark:'',
          deptName:'',
          StockType: 1,
        },
        tableData: [{
          productNo:'',
          productId:'',
          productName:'',
          count:0,
          categoryName:'',
          amount:'',
        }],
      }
    },
    methods: {
      deleteCon(index){
        if(this.tableData.length==1){
          this.tableData = this.$options.data().tableData
        }else{
          this.tableData.splice(index,1)
        }
      },
      open() {
        this.dialogVisible = true
        const loginUser = getLoginUser()
        this.temp.deptName = loginUser.deptName
      },
      getCheckedProducts(list){
        console.log('getCheckedProducts' + list)
        if(this.tableData.length==1&&isEmpty(this.tableData[0].name)){
          let obj = list[0];
          this.tableData[0] = {
            productId:obj.productId,
            productName:obj.productName,
            categoryName:obj.categoryName,
            amount:obj.amount,
            count:0,
          }
          list.splice(0,1);
        }

        test:for(let i=list.length-1;i>=0;i--){
          let obj = list[i];
          for(let item of  this.tableData){
            if(item.productId==obj.productId){
              item.count = accAdd(item.count,1);
              list.splice(i,1);        //执行后aa.length会减一
              break;
            }
          }
        }
        let tableData = list.map(obj=>{
          return {
            productNo:obj.productNo,
            productId:obj.productId,
            productName:obj.productName,
            categoryName:obj.categoryName,
            amount:obj.amount,
            count:0,
          }
        })
        this.tableData = this.tableData.concat(tableData);
      },
      chooseProduct(){
        this.$refs.chooseProductRef.open()
      },
      submit() {
        if(this.tableData.length==0|isEmpty(this.tableData[0].productId)){
          error('请完善商品信息！');
          return false;
        }
        for(let item of this.tableData){
          if(item.count==0){
            error('请输入正确的数量！');
            return false;
          }
        }
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.temp.productList = this.tableData
            addStock(this.temp).then(response =>{
              this.handleCancel()
              this.$emit('ok', response.data)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleCancel() {
        //初始化
        this.temp = this.$options.data().temp
        this.tableData = this.$options.data().tableData
        this.dialogVisible = false
        this.$refs['dataForm'].resetFields();
      },
      onInput(){
        this.$forceUpdate();
      }
    },
  }
</script>

<style scoped>
  .el-icon-size{
    font-size: 24px;
    margin-left: 12px;
    cursor: pointer;
  }
  .product-count /deep/ input{
    color: red;
  }
</style>
