<template>
  <div>
    <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
      <el-row>
        <el-form-item class="query-form-item">
          <el-input
            v-model="filterQuery.batchNo"
            placeholder="生产批次号"
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item">
          <span style="color: #000; margin-left: 10px; margin-right: 6px"
            >生产日期:</span
          >
          <el-date-picker
            v-model="value"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onReset"
            ></el-button>
            <el-button type="primary" icon="search" @click="onSubmit"
              >查询</el-button
            >
            <el-button
              type="primary"
              icon="search"
              @click="importOrder"
              :loading="mipsLoading"
              >导入mips生产订单</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-row>
    </el-form>

    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%"
      @row-click="intentDetail"
    >
      <el-table-column label="序号" type="index" fixed></el-table-column>
      <el-table-column label="订单编号" prop="orderNo" fixed></el-table-column>
      <el-table-column
        label="生产批次号"
        prop="batchNo"
        fixed
      ></el-table-column>

      <el-table-column
        label="生产日期"
        prop="manufacturingDate"
        fixed
      ></el-table-column>
      <el-table-column
        label="失效日期"
        prop="expirationDate"
        fixed
      ></el-table-column>
      <el-table-column label="订单状态" prop="closeFlag" fixed>
        <!-- <template slot-scope="scope">
          <span>{{ orderFlag[scope.row.closeFlag] }}</span>
        </template> -->
      </el-table-column>

      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.stop="deleteDialog(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="选择mips生产订单"
      :visible.sync="addDialogVisible"
      width="80%"
      v-if="addDialogVisible"
    >
      <selectManu v-on:closeManuDialog="closeManuDialog"></selectManu>
    </el-dialog>
    <el-pagination
      :page-size="filterQuery.limit"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import {
  orderList,
  deleteOrder,
} from "../../api/receipts/mipsOrder";

import {
  productList,
  addProduct,
  deleteProduct,
} from "../../api/receipts/product";

import { getCompany } from "../../api/warehouse/company";
import selectManu from "./selectManuorder";
export default {
  data() {
    return {
      filterQuery: {
        closeFlag: "",
        batchNo: null,
        orderNo: "",
        manufacturingDate: null,
        page: 1,
        limit: 20,
      },
      value: "",
      total: 0,
      orderFlag: {
        0: "未完成",
        1: "已完成",
      },
      list: [],
      mipsLoading: false,
      addDialogVisible: false,
      returnOptions: [
        {
          value: 0,
          label: "未完成",
        },
        {
          value: 1,
          label: "已完成",
        },
      ],
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        BatchNo: "",
        startTime: "",
        endTime: "",
        page: 1,
        limit: 20,
      };
      this.getList();
    },

    intentDetail(row) {
      this.$router.push({
        path: "../warehouse/manuDetail",
        query: { id: row.orderId },
      });
    },
    onSubmit() {
      if (this.value != null) {
        console.log(this.value);

        this.filterQuery.startTime = this.value[0];
        this.filterQuery.endTime = this.value[1];
      }
      this.getList();
    },
    getList() {
      this.loading = true;
      productList(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    closeManuDialog(val) {
      this.addDialogVisible = false;
      if (val) {
        this.$message.success("添加成功！");
        this.getList();
      } else {
        this.$message.error("添加失败！");
      }
    },
    cancelDialog() {
      this.addDialogVisible = false;
    },
    importOrder() {
      getCompany().then((response) => {
        this.loading = false;
        var company = response.data;
        if (company != null && company.name != null) {
          this.filterQuery = {
            BatchNo: "",
            startTime: "",
            endTime: "",
            page: 1,
            limit: 20,
          };
          this.addDialogVisible = true;
        } else {
          this.$message.error("请先填写本企业信息！");
        }
      });
    },

    handleSizeChange(val) {
      this.filterQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },

    deleteOrders(data) {
      this.loading = true;
      let tquery = {
        id: data.id + "",
      };

      deleteProduct(tquery)
        .then((response) => {
          if (response.code == 20000) {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功！",
            });
          }
        })
        .catch(() => {});
    },
    deleteDialog(rowId) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteOrders(rowId);
        })
        .catch(() => {});
    },
  },
  components: {
    selectManu,
  },
  mounted() {},
  created() {
    this.getList();
  },
};
</script>