<template>
  <div>
    <el-card class="el-card" style="margin-top: -15px">
      <div>
        <el-form :model="listQuery" size="mini"
                 v-show="showSearch"
                 label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item class="query-form-item" label="单据号:">
                <el-input
                  v-model="listQuery.billNo"
                  placeholder="单据号" style="width: 100%"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="query-form-item" label="往来单位:">
                <el-input
                  v-model="listQuery.corpName"
                  placeholder="往来单位" style="width: 100%"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="6">-->
            <!--              <el-form-item class="query-form-item" label="领用类型">-->
            <!--                <el-select v-model="listQuery.billType" placeholder="请选择领用类型" clearable="true">-->
            <!--                  <el-option-->
            <!--                    v-for="item in originTypes"-->
            <!--                    :key="item.originAction"-->
            <!--                    :label="item.originName"-->
            <!--                    :value="item.originAction">-->
            <!--                    <span style="float: left;font-size: 13px">{{ item.originAction }}</span>-->
            <!--                    <span style="float: right; color: #8492a6; font-size: 13px;margin-left: 10px">{{-->
            <!--                        item.originName-->
            <!--                      }}</span>-->
            <!--                  </el-option>-->
            <!--                </el-select>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--          </el-row>-->
            <el-col :span="8">
              <el-form-item class="query-form-item" label="单据日期:">
                <el-date-picker
                  :picker-options="pickerOptions"
                  v-model="actDateRange"
                  type="daterange"
                  style="width: 100%"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="top-right-btn">
          <el-button-group>
            <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onReset"
            >重置
            </el-button>
            <el-button type="primary" icon="el-icon-search" @click="submitFind">查询</el-button>
            <el-button type="primary" icon="el-icon-check" @click="combine"
            >确定
            </el-button
            >
          </el-button-group>

        </div>
        <el-table
          :data="dataList"
          style="width: 100%"
          border
          highlight-current-row="true"
          v-loading="loading"
          @current-change="handleDetail"
        >
          <el-table-column label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="领用单号" prop="billNo"></el-table-column>
          <el-table-column label="领用仓库" prop="invName"></el-table-column>
          <el-table-column label="往来信息" prop="targetInvName" show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="单据日期" prop="createTime"></el-table-column>
          <el-table-column label="状态" prop="status">
            <template slot-scope="scope">
              <el-tag :type="(scope.row.status) | statusFilterType">
                {{ statusMap[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="listQuery.limit"
          @current-change="handleErpPageChange"
          layout="prev, pager, next"
          :total="pageTotal"
          :current-page="listQuery.page"
        ></el-pagination>
      </div>
    </el-card>

    <el-card class="el-card">
      <el-table v-loading="loading" :data="detailList" style="width: 100%">
        <el-table-column label="序号" type="index" width="120"></el-table-column>
        <el-table-column label="DI/物资编码" prop="nameCode"></el-table-column>
        <el-table-column label="物资名称" prop="cpmctymc" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="规格型号" prop="ggxh" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="批次号" prop="batchNo"></el-table-column>
        <el-table-column label="生产日期" prop="productDate"></el-table-column>
        <el-table-column label="失效日期" prop="expireDate"></el-table-column>
        <el-table-column label="领用数量" prop="count"></el-table-column>
      </el-table>
    </el-card>


    <el-dialog
      v-if="storageVisible"
      title="请选择单据所属仓库信息"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      :visible.sync="storageVisible">

      <selectInvDialog
        :closeInvDialog="closeInvDialog"
        :billData="currentRow"
        :closeSubmitDialog="closeSubmitDialog"
      ></selectInvDialog>

    </el-dialog>
  </div>
</template>

<script>
import {addReceiveOrder, addStockOrder, getCloudErp} from "../../api/inout/erpOrder";
import store from "../../store";
import {filterAllByUser} from "@/api/system/invWarehouse";

import selectInvDialog from "./DialogSelectInv";
import {getOrderDetail, getReceiveOrder} from "@/api/inout/receiveOrder";
import {getBusChange} from "@/api/basic/busTypeChange";

export default {
  name: "closeDialog",
  props: {
    data: {
      type: Object,
      required: true,
    },
    closeDialog: {
      type: Function,
      required: true,
    },
  },

  data() {
    return {
      listQuery: {
        billNo: "",
        corpName: null,
        billAction: null,
        originType: null,
        page: 1,
        limit: 10,
        status: 3,
        customerId: null,
      },
      showSearch: true,
      detailList: [],
      storageVisible: false,
      dataList: [],
      pageTotal: 1,
      total: 1,
      currentRow: null,
      curLocInv: null,
      loading: false,
      multipleUdiSelection: [],
      thirdSys: [],
      thirdSysFk: null,
      originTypes: [],
      storageList: [],
      actDateRange: [],
      statusMap: {
        1: "草稿",
        2: "未审核",
        3: "已审核",
        4: "已拒绝"
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.listQuery = {
        billNo: "",
        billAction: null,
        originType: null,
        page: 1,
        limit: 10,
        status: 3,
        customerId: null,
      };
      this.actDateRange = [];
      this.getList();
    },

    tableRowClassName({row}) {
      if (row.checked) return "warning-row";
      return "";
    },
    checkSelectable(row) {
      return !row.check;
    },
    handleCurrentChange(val) {
      this.unionQuery.page = val;
      this.getList();
    },

    handleDetail(row) {

      this.currentRow = row;
      var query = {};
      query.orderIdFk = row.billNo;
      getOrderDetail(query) //查找该单号下的所有条码
        .then((response) => {
          this.detailList = response.data.list || [];
        })
        .catch(() => {
          this.detailList = [];
        });
    },

    handleErpPageChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    keyup_submit(event) {
      this.getList();
      event.target.select();
    },
    getList() {
      this.loading = true;
      if (this.actDateRange !== null) {
        this.listQuery.startTime = this.actDateRange[0];
        this.listQuery.endTime = this.actDateRange[1];
      } else {
        this.listQuery.startTime = null;
        this.listQuery.endTime = null;
      }
      this.listQuery.customerId = store.getters.customerId;
      getReceiveOrder(this.listQuery)
        .then((response) => {
          console.log(response)
          this.loading = false;
          if (response.code === 20000) {
            this.dataList = response.data.list || [];
            this.pageTotal = response.data.total || 0;
          } else {
            this.$message.error(response.message);
            this.dataList = [];
            this.pageTotal = 0;
          }
        })
        .catch(() => {
          this.loading = false;
          this.dataList = [];
          this.pageTotal = 0;
        });
    },
    intentBack() {
      this.closeDialog();
    },
    combine() {
      if (this.$isBlank(this.currentRow.id)) {
        return;
      }
      let tQuery = {
        id: this.currentRow.id,
      }
      addReceiveOrder(tQuery)
        .then((response) => {
          if (response.code === 20000) {
            this.closeDialog();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
        });
    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },

    submitFind() {
      this.listQuery.page = 1;
      this.getList();
    },
    selectStorage(row) {
      this.curLocInv = row.code;
      let tQuery = {
        id: this.currentRow.id,
        locStorageCode: this.curLocInv,
      }
      addStockOrder(tQuery)
        .then((response) => {
          if (response.code === 20000) {
            this.storageVisible = false;
            this.closeDialog();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
        });
    },

    handleSelectionUdiChange(val) {
      console.log("----" + val);
      this.multipleUdiSelection = val;
    },
    getBusType() {
      let query = {
        enable: true,
      };
      getBusChange(query)
        .then((response) => {
          this.originTypes = response.data.list || [];
        })
        .catch(() => {
        });
    },
    getStorage(event) {
      this.storageList = [];
      filterAllByUser()
        .then((response) => {
          this.storageList = response.data || [];
          if (this.storageList.length == 1) {
            this.curLocInv = this.storageList[0].code;
          }
        })
        .catch(() => {
        });
    },


    closeInvDialog() {
      this.storageVisible = false;
    },

    closeSubmitDialog() {
      this.storageVisible = false;
      this.combine();
    },
  },
  created() {
    this.getBusType();
    this.getStorage();
    this.getList();
  },
  components: {selectInvDialog}

};
</script>

<style scoped>

div /deep/ .el-table .warning-row {
  background: #bebebe;
}

div /deep/ .el-table .success-row {
  background: #ffffff;
}
</style>
