<template>
  <div>
    <el-card>
      <el-form :model="filterQuery" label-width="100px" size="mini">
        <el-row>
          <el-col :span="4">
            <el-form-item label="单据号:" class="query-form-item">
              <el-input v-model="filterQuery.name" placeholder="请输入单据号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="仓库:" class="query-form-item">
              <el-input v-model="filterQuery.code" placeholder="请输入仓库" clearable></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="4">-->
<!--            <el-form-item label="单据时间:" class="query-form-item">-->
<!--              <el-input v-model="filterQuery.code" placeholder="请输入模板编码" clearable></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="8">
            <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="handleAddClick">新增</el-button>
              </el-button-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table v-loading="loading" :data="list" @current-change="handleDetail" border highlight-current-row
                style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="单据号" prop="billNo" width="260"></el-table-column>
        <el-table-column label="唯一编码" prop="destinyNo" width="260"></el-table-column>
        <el-table-column label="当前仓库" prop="invName" width="260"></el-table-column>
        <el-table-column label="单据时间" prop="billDate" width="260"></el-table-column>
        <el-table-column label="状态" prop="status" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="statusFilterType(scope.row.status)">{{ statusMap[scope.row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createName" width="260"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="260"></el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" :disabled="scope.row.status==2" @click.native.stop="handleModifyClick(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>
      <el-tabs type="border-card" style="margin-top: 50px">
        <el-tab-pane label="定数包详情">
          <div>
            <el-table v-loading="loading" :data="delectList" border highlight-current-row style="width: 100%">
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column label="产品DI" prop="nameCode" width="260"></el-table-column>
              <el-table-column label="产品编码" prop="thirdId" width="260"></el-table-column>
              <el-table-column label="产品名称" prop="cpmctymc" width="260"></el-table-column>
              <el-table-column label="规格型号" prop="ggxh"></el-table-column>
              <el-table-column label="计量单位" prop="measname"></el-table-column>
              <el-table-column label="单据数量" prop="count"></el-table-column>
              <el-table-column label="扫码数量" prop="reCount"></el-table-column>
              <el-table-column label="生产企业" prop="ylqxzcrbarmc"></el-table-column>
              <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"></el-table-column>
            </el-table>
            <pagination
              v-show="delectTotal>0"
              :total="delectTotal"
              :limit.sync="delectQuery.limit"
              :page.sync="delectQuery.page"
              @pagination="handleCurrentDelectChange"
            ></pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="扫码详情">
          <div>
            <el-table v-loading="loading" :data="codeList" border highlight-current-row style="width: 100%">
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column label="UDI码" prop="code" width="200"></el-table-column>
              <el-table-column label="产品DI" prop="nameCode" width="200"></el-table-column>
              <el-table-column label="产品名称" prop="cpmctymc" width="200"></el-table-column>
              <el-table-column label="规格型号" prop="ggxh"></el-table-column>
              <el-table-column label="批次号" prop="batchNo"></el-table-column>
              <el-table-column label="生产日期" prop="productDate" width="100"></el-table-column>
              <el-table-column label="失效日期" prop="expireDate" width="100"></el-table-column>
              <el-table-column label="序列号" prop="serialNo"></el-table-column>
              <el-table-column label="扫码数量" prop="count"></el-table-column>
              <el-table-column label="实际数量" prop="reCount"></el-table-column>
            </el-table>
            <pagination
              v-show="codeTotal>0"
              :total="codeTotal"
              :limit.sync="codeQuery.limit"
              :page.sync="codeQuery.page"
              @pagination="handleCurrentCodeChange"
            ></pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

<!--    <el-card>-->
<!--      <el-table v-loading="loading" :data="delectList" border highlight-current-row style="width: 100%">-->
<!--        <el-table-column label="序号" type="index"></el-table-column>-->
<!--        <el-table-column label="产品DI" prop="nameCode" width="260"></el-table-column>-->
<!--        <el-table-column label="产品编码" prop="thirdId" width="260"></el-table-column>-->
<!--        <el-table-column label="产品名称" prop="cpmctymc" width="260"></el-table-column>-->
<!--        <el-table-column label="规格型号" prop="ggxh"></el-table-column>-->
<!--        <el-table-column label="计量单位" prop="measname"></el-table-column>-->
<!--        <el-table-column label="数量" prop="count"></el-table-column>-->
<!--        <el-table-column label="生产企业" prop="ylqxzcrbarmc"></el-table-column>-->
<!--        <el-table-column label="注册/备案号" prop="certCode"></el-table-column>-->
<!--      </el-table>-->
<!--      <pagination-->
<!--          v-show="delectTotal>0"-->
<!--          :total="delectTotal"-->
<!--          :limit.sync="delectQuery.limit"-->
<!--          :page.sync="delectQuery.page"-->
<!--          @pagination="handleCurrentDelectChange"-->
<!--      ></pagination>-->
<!--    </el-card>-->

    <el-dialog
        :title="formMap[formName]"
        :visible.sync="formVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="80%"
        :before-close="closeDialog"
        v-if="formVisible"
    >
      <addDestinyProcess
          :editQuery="editQuery"
          :closeDialogpr="closeDialog"
      ></addDestinyProcess>
    </el-dialog>



  </div>
</template>

<script>
import {
  delectModeldestiny,
  filterDestinyDelect,
  getBasicDestinyfilter
} from "@/api/basic/basicDestinyRel";
import addDestinyProcess from "@/views/basic/destiny/addDestinyProcess";
import {delectDestinyProcess, filterDestinyProcess ,filterDestinyProcessCode,filterDestinyProcessDelectFy } from "@/api/inout/ioDestinyProcess";


export default {
  data() {
    return {
      filterQuery: {
        name: "",
        code: "",
        type: 1,
        page: 1,
        limit: 20
      },
      editType: "",
      formVisible: false,
      loading: false,
      formName: "",
      total: 0,
      list: [],
      delectList: [],
      codeList: [],
      codeArray: [],
      editQuery: {},
      formMap: {
        "add": "新增定数包",
        "edit": "编辑定数包"
      },
      statusMap: {
        0: "草稿",
        1: "未提交",
        2: "已提交",
      },
      delectQuery: {
        billNo: null,
        page: 1,
        limit: 20
      },
      codeQuery: {
        billNo: null,
        page: 1,
        limit: 20
      },
      delectTotal: 0,
      codeTotal: 0,
    };
  },
  methods: {
    onReset() {
      this.$router.push({
        path: ""
      });
      this.filterQuery = {
        name: "",
        code: "",
        type: 1,
        page: 1,
        limit: 20
      };
      this.getList();
    },
    statusFilterType(status) {
      const statusMap = {
        0: "warning",
        1: "warning",
        2: "danger",
        3: "success",
      };
      return statusMap[status];
    },
    onSubmit() {
      this.$router.push({
        path: "",
      });
      this.filterQuery.page = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      filterDestinyProcess(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;
        this.roles = [];
      });
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val.page;
      this.getList();
    },
    handleCurrentDelectChange(val) {
      this.delectQuery.page = val.page;
      this.filterDestinyDelect()
    },
    handleCurrentCodeChange(val) {
      this.codeQuery.page = val.page;
      this.filterDestinyCode()
    },
    handleAddClick() {
      this.formName = "add";
      this.formVisible = true;
    },
    handleModifyClick(row) {
      this.formName = "edit";
      this.formVisible = true;
      this.editQuery = row;
    },
    deleteDialog(row) {
      delectDestinyProcess(row).then(res => {
        if (res.code == 20000) {
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.$message.error("删除失败！");
      });
    },
    closeDialog() {
      this.formVisible = false;
      this.getList();
      this.delectList=[]
      this.editQuery = {}
    },
    handleDetail(row) {
      this.delectQuery.billNo = row.billNo
      this.codeQuery.billNo = row.billNo
      this.filterDestinyDelect()
      this.filterDestinyCode()
    },
    filterDestinyDelect() {
      filterDestinyProcessDelectFy(this.delectQuery)
          .then((response) => {
            this.loading = false;
            if (response.code === 20000) {
              this.delectList = response.data.list || [];
              this.delectTotal = response.data.total || 0;
            } else {
              this.$message.error(response.message);
              this.delectList = [];
              this.delectTotal = 0;
            }
          })
          .catch(() => {
            this.loading = false;
            this.delectList = [];
            this.delectTotal = 0;
          });
    },
    filterDestinyCode() {
      filterDestinyProcessCode(this.codeQuery)
        .then((response) => {
          this.loading = false;
          if (response.code === 20000) {
            this.codeList = response.data.list || [];
            this.codeTotal = response.data.total || 0;
          } else {
            this.$message.error(response.message);
            this.codeList = [];
            this.codeTotal = 0;
          }
        })
        .catch(() => {
          this.loading = false;
          this.codeList = [];
          this.codeTotal = 0;
        });
    },
  }
  ,
  mounted() {
  }
  ,
  components: {
    addDestinyProcess
  }
  ,
  created() {
    this.getList();
  }
}
;
</script>
