<template>
  <div>
    <el-card class="el-card">
      <el-form :model="filterQuery" label-width="100px">
        <el-row>
          <el-form-item label="单据号">
            <el-input v-model="filterQuery.recordKey" style="width: 100%" placeholder="请输入单据号"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="单据日期">
            <el-date-picker
                style="width: 100%"
                :picker-options="pickerOptions"
                v-model="actDateRange"
                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 style="display:flex;">
              <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
              <el-button type="primary" icon="search" @click="onSubmitFind">查询</el-button>
              <el-button type="primary" icon="search" @click="newDistributionForm()" :loading="loading">
                新增打印单
              </el-button>
            </el-button-group>

          </el-form-item>
        </el-row>
      </el-form>
      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row="true"
                @current-change="handleDetail">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="单据号" prop="recordKey"></el-table-column>
        <el-table-column label="创建日期" prop="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createByName"></el-table-column>
        <el-table-column label="备注说明" prop="remark"></el-table-column>
        <el-table-column label="打印状态" prop="printStatus">
          <template slot-scope="scope">
            <el-tag :type="(scope.row.genStatus) | statusFilterType">
              {{ statusPrintMap[scope.row.genStatus] }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.native.stop="newDistributionForm(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="text" size="small" @click.native="printQRCodeText(scope.row)">打印</el-button>
            <el-button type="text" size="small" @click.native.stop="deleteDialog(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
          :limit.sync="filterQuery.limit"
          :page.sync="filterQuery.page"
          @pagination="handleCurrentChange"
      ></pagination>

    </el-card>
    <el-card class="el-card">
      <el-table v-loading="loading" :data="detailList" style="width: 100%" border highlight-current-row>
        <el-table-column label="序号" type="index" width="120"></el-table-column>
        <el-table-column label="物资编码" prop="productId"></el-table-column>
        <el-table-column label="物资名称" prop="productName" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="规格型号" prop="spec" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="批次号" prop="batchNo" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="生产日期" prop="productDate" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="失效日期" prop="expireDate" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="生产企业" prop="manufactory" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="计量单位" prop="measname" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="打印数量" prop="count"></el-table-column>
      </el-table>
    </el-card>

    <el-dialog
        :title="formMap[formName]"
        :visible.sync="newSpDistributionVisible"
        width="80%"
        v-if="newSpDistributionVisible"
        @close='closeDialog'
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <pureApplyEdit
          :closeDialog="closeDialog"
          :idQuery="idQuery"
      ></pureApplyEdit>
    </el-dialog>


    <el-dialog
        title="内部码标签打印"
        :visible.sync="qrcodeExportVisible"
        width="80%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="qrcodeExportVisible"
        @close='closeQRCodeExportDialog'
    >
      <innerCodeDetail
          :closeDialog="closeQRCodeExportDialog"
          :inQuery="inQuery"
      ></innerCodeDetail>
    </el-dialog>

  </div>
</template>
<script>
import pureApplyEdit from "./innerOrderEditDialog";
import innerCodeDetail from "./innerCodeDetail";

import {delInnerOrder, inserThrOrderWeb, listInnerOrder, listInnerOrderDetail} from "@/api/inventory/innerOrder";

export default {
  data() {
    return {
      filterQuery: {
        recordKey: "",
        page: 1,
        limit: 10,
        editStatus: 1,
      },
      formName: null,
      formMap: {
        add: "新增打印单据",
        update: "编辑打印单据",
      },
      statusMap: {
        1: "未生成",
        2: "已生成",
      },
      statusPrintMap: {
        1: "未打印",
        2: "已打印",
      },
      idQuery: {},
      inQuery: {},
      total: 0,
      thirdSys: [],
      thirdSysDetail: null,
      busTypes: [],
      originTypes: [],
      list: [],
      detailList: [],
      loading: false,
      actDateRange: [],
      newSpDistributionVisible: false,
      qrcodeExportVisible: false,
      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.filterQuery = {
        recordKey: "",
        page: 1,
        limit: 10,
        editStatus: 1,
      };
      this.actDateRange = [];
      this.detailList = []
      this.getList();
    },

    onSubmitFind() {
      this.filterQuery.page = 1;
      this.getList();
    },

    getList() {
      if (this.actDateRange != null) {
        this.filterQuery.startDate = this.actDateRange[0];
        this.filterQuery.endDate = this.actDateRange[1];
      } else {
        this.filterQuery.startDate = null;
        this.filterQuery.endDate = null;
      }

      listInnerOrder(this.filterQuery)
          .then((response) => {
            if (response.code == 20000) {
              this.list = response.data.list || [];
              this.total = response.data.total || 0;
            } else {
              this.$message.error(response.message);
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
            this.list = [];
            this.total = 0;
          });
    },
    handleDetail(row) {
      let query = {orderIdFk: row.recordKey};
      this.loading = true;
      listInnerOrderDetail(query) //查找该单号下的所有条码
          .then((response) => {
            this.detailList = response.data.list || [];
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
            this.detailList = [];
          });
    },
    submitOrder(row) {
      this.loading = true;
      let tQuery = {
        editStatus: 2,
        purApplyEntity: row,
      }
      inserThrOrderWeb(tQuery)
          .then(response => {
            this.loading = false;
            if (response.code === 20000) {
              this.$message.success("提交成功！");
              this.getList();
            } else {
              this.$message.error(response.message);
            }
          })
          .catch(() => {
            this.loading = false;
          })
    },
    deleteDialog(row) {
      this.$confirm("此操作将永久删除该单据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            delInnerOrder(row.id)
                .then((response) => {
                  this.loading = false;
                  if (response.code == 20000) {
                    this.$message.success("删除成功");
                    this.getList();
                    this.detailList = "";
                  } else {
                    this.$message.error(response.message);
                  }
                })
                .catch(() => {
                  this.loading = false;
                });

          })
          .catch(() => {
          });
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page;
      this.getList();
    },

    closeDialog() {
      this.newSpDistributionVisible = false;
      this.getList();
      this.detailList = [];
    },


    closeQRCodeExportDialog() {
      this.qrcodeExportVisible = false;
    },


    printQRCodeText(row) {
      this.inQuery.id = '';
      if (this.$isNotBlank(row.id)) {
        this.inQuery.id = row.recordKey;
        this.inQuery.formData = row;
        this.qrcodeExportVisible = true;
      }
    },

    newDistributionForm(index, row) {
      this.idQuery.id = '';
      if (this.$isNotBlank(row) && this.$isNotBlank(row.id)) {
        this.idQuery.id = row.id;
        this.idQuery.formData = row;
        this.formName = "update";
      } else
        this.formName = "add";
      this.newSpDistributionVisible = true;
    },

  }
  ,
  components: {
    pureApplyEdit, innerCodeDetail
  }
  ,
  filters: {
    statusFilterType(status) {
      const statusMap = {
        1: "warning",
        2: "success",
      };
      return statusMap[status];
    }
    ,
  }
  ,
  mounted() {
  }
  ,
  created() {
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    this.actDateRange = [start, end];
    this.getList();
  }
  ,
}
;
</script>
<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 25%;
}

.text {
  font-size: 13px;
  font-family: "Microsoft YaHei";
}


.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>

