<template>
  <div>
    <el-card style="margin: 5px;">
      <el-form :model="inputQuery" label-width="110px" style="margin-bottom: -15px">
        <el-row>
          <el-col :span="17">
            <el-form-item label="UDI:">
              <el-input v-model="inputQuery.udiCode" :disabled="detailList.length>0" placeholder="请输入UDI" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="单据号:">
              <el-input v-model="inputQuery.orderIdFk" :disabled="true" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标记:">
              <el-input v-model="inputQuery.mark" :disabled="true" placeholder="请输入标记" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="物资名称:">
              <el-input v-model="inputQuery.cpmctymc" :disabled="true" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格型号:">
              <el-input v-model="inputQuery.ggxh" :disabled="true" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="总使用次数:">
              <el-input v-model="inputQuery.totalCount" :disabled="true" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="已使用次数:">
              <el-input v-model="inputQuery.useCount" :disabled="true" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card style="margin: 5px;">
      <el-table :data="detailList" style="width: 100%" border highlight-current-row>
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="当前次数" prop="curIndex"></el-table-column>
        <el-table-column label="往来单位" prop="fromCorp" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="使用人" prop="createUserName" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="使用时间" prop="useTime" show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </el-card>


    <el-dialog
      :title="tableName"
      :visible.sync="orderMutiDelectVisible"
      width="60%"
      :append-to-body="true"
      v-if="orderMutiDelectVisible"
      @close='closeDialog'
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <ioOrderMutiEditSelectDialog
        :closeDialogDelect="closeDialogDelect"
        :filterQuery="inputQuery"
      ></ioOrderMutiEditSelectDialog>
    </el-dialog>

  </div>
</template>

<script>
import {
  addMuti,
  addMutiDetail,
  addOrderMuti, auditMuti,
  checkUdi, delectMutiDelect,
  filterMutiList, getMark,
  selectMutiDetailList,
  updateMuti,
  updateOrderMuti
} from "@/api/inout/orderMuti";
import ioOrderMutiEditSelectDialog from "@/views/inout/muti/ioOrderMutiEditSelectDialog"

export default {
  name: "ioOrderMutiAuditDialog",
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    formName: {
      type: Object,
      required: true,
    },
    filterQuery: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      inputQuery: {
        udiCode: null,
        orderIdFk: null,
        mark: null,
        cpmctymc: null,
        ggxh: null,
        totalCount: null,
        useCount: null,
        supId: null,
      },
      pId: null,
      orderMutiDelectVisible: false,
      tableName: '使用记录选择',
      invList: [],
      fromInvOptions: [],
      busTypes: [],
      detailList: [],
    }
  },
  methods: {
    addFromCorp() {
      var query = {
        mutiIdFk: this.pId,
        fromCorp: this.inputQuery.fromCorp
      }
      addMutiDetail(query).then((response) => {
        if (response.code == 20000) {
          this.selectMutiDetailList();
        } else {
          this.$message.error(response.message);
        }
      })
        .catch(() => {
          this.$message.error("添加失败");
        });
    },
    selectMutiDetailList() {
      selectMutiDetailList({mutiIdFk:this.pId}).then((response) => {
        if (response.code == 20000) {
          this.detailList = response.data || [];
          this.inputQuery.useCount=this.detailList.length
        }
      })
    },
    filterMutiList() {
      filterMutiList({id: this.pId}).then((response) => {
        if (response.code == 20000) {
          this.inputQuery.cpmctymc = response.data.data.cpmctymc
          this.inputQuery.mark = response.data.data.mark
          this.inputQuery.ggxh = response.data.data.ggxh
          this.inputQuery.totalCount = response.data.data.totalCount
          this.inputQuery.useCount = response.data.data.useCount
          this.detailList = response.data.detailList
          this.inputQuery.useCount=this.detailList.length
        } else {
          this.$message.error(response.message);
        }
      });
    },
    closeDialogDelect(row){
      this.orderMutiDelectVisible=false;
      this.pId=row.id;
      this.filterMutiList();
    },
    saveOrder(status){
      var query={
        id:this.pId,
        status:status
      }
      auditMuti(query).then((response) => {
        if (response.code == 20000) {
          this.closeDialog()
        } else {
          this.$message.error(response.message);
        }
      });
    },
    deleteDialog(row){
      delectMutiDelect({id:row.id}).then((response) => {
        if (response.code == 20000) {
          this.selectMutiDetailList()
        } else {
          this.$message.error(response.message);
        }
      });
    }
  },
  components: {ioOrderMutiEditSelectDialog},
  created() {
    this.inputQuery = this.filterQuery
    this.pId=this.inputQuery.id
    this.selectMutiDetailList()
  },
}
</script>

<style scoped>

</style>
