<template>
  <div class="mod-user">
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>

      <el-table-column
        prop="asnNo"
        header-align="center"
        align="center"
        label="入库单号" width="160">
      </el-table-column>
      <el-table-column
        prop="asnLineNo"
        header-align="center"
        align="center"
        label="行号">
      </el-table-column>
      <el-table-column
        prop="sku"
        header-align="center"
        align="center"
        label="物料代码" width="120">
      </el-table-column>
      <el-table-column
        prop="skuName"
        header-align="center"
        align="center"
        label="物料名称">
      </el-table-column>
      <el-table-column
        prop="lineStatusName"
        header-align="center"
        align="center"
        label="行状态" width="80">
      </el-table-column>
      <el-table-column
        prop="expectedQty"
        header-align="center"
        align="center"
        label="预期到货数" width="100">
      </el-table-column>
      <el-table-column
        prop="receivedQty"
        header-align="center"
        align="center"
        label="实际到货数" width="100">
      </el-table-column>
      <el-table-column
        prop="createBy"
        header-align="center"
        align="center"
        label="创建人">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="创建时间" width="160">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableOption"
        :key="index"
        :label="item.label"
        align="center" :prop="item.prop" width="150">
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getDataList"
    />
    <div>
      <el-button type="primary" size="mini" :disabled="viewTag" @click="addHandle()">明细新增</el-button>
      <el-button type="primary" size="mini" :disabled="viewTag" @click="updateHandle()">明细编辑</el-button>
      <el-button type="primary" size="mini" :disabled="viewTag" @click="deleteHandle()">明细删除</el-button>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from './docAsnDetails-add-or-update'
  import { lotattConfigList } from "@/api/ams/config"
  import { queryDocAsnDetails,delDocAsn } from "@/api/docAsn/docAsn"
  import {delDocAsnDetails} from "../../../api/docAsn/docAsn";

  export default {
    data () {
      return {
        choseAsn: '',
        total: 0,
        dataList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          asnNo: ''
        },
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        tableOption: [],
        viewTag: false
      }
    },
    mounted () {
      this.choseAsn = this.choseId
    },
    components: {
      AddOrUpdate
    },
    activated () {
      // s
    },
    methods: {
      // 获取数据列表
      getDataList (asnNo, viewTag) {
        this.viewTag = viewTag
        this.queryParams.asnNo = asnNo
        this.initLotatt()
        queryDocAsnDetails(asnNo).then(response => {
           this.dataList = response.data
        });
      },
      // 多选
      selectionChangeHandle (val) {
          this.dataListSelections = val
      },
      // 新增 / 修改
      addHandle () {
        //控制只能单选
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(this.queryParams.asnNo,'')
        })
      },
      updateHandle () {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          if (this.dataListSelections.length > 1) {
            this.$modal.msgError("编辑操作只能选择一条数据");
            return
          }
          let sel = this.dataListSelections[0]
          if(sel.lineStatus != "00") {
            this.$modal.msgError("只能编辑订单创建状态的单据");
            return
          }
          this.$refs.addOrUpdate.init(sel.asnNo,sel.asnLineNo)
        })
      },
      initLotatt() {
        this.tableOption.length = 0
        lotattConfigList().then(response => {
          let data = response.data
          for(let i=0;i<data.length;i++) {
            let obj = new Object();
            obj.label = data[i].lotattName
            obj.prop = data[i].lotattId
            this.tableOption.push(obj)
          }
        })
      },
      deleteHandle() {
        if(this.dataListSelections && this.dataListSelections.length>0) {
          let dataListSelections = this.dataListSelections
          this.$modal.confirm('是否确认删除入库明细的数据项？').then(function() {
            let arr = []
            for(let i= 0;i<dataListSelections.length;i++) {
              let obj = dataListSelections[i]
              arr.push({"asnNo":obj.asnNo,"asnLineNo":obj.asnLineNo});
            }
            return delDocAsnDetails(arr);
          }).then(response => {
            if(response.code == 200) {
              this.$modal.msgSuccess(response.msg);
            } else {
              this.$modal.msgError(response.msg);
            }
            this.getDataList(this.queryParams.asnNo)
          }).catch(() => {});
        }
      }
    }
  }
</script>
