<template>
  <div>
    <el-card>
      <el-form label-width="110px" v-show="showSearch" size="mini">
        <el-row type="flex">
          <el-col type="flex">
            <el-form-item label="任务类型:" prop="taskType" class="query-form-item">
              <el-input v-model="filterQuery.taskType"
                        style="width: 200px"
                        placeholder="请选择任务类型"
                        @keyup.native="onSubmit"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col type="flex">
            <el-form-item label="任务状态:" prop="status" class="query-form-item">
              <el-input v-model="filterQuery.status"
                        style="width: 200px"
                        placeholder="请选择任务状态"
                        @keyup.native="onSubmit"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col type="flex">
            <el-form-item label="产品名称:" prop="cpmctymc" class="query-form-item">
              <el-input v-model="filterQuery.cpmctymc"
                        style="width: 200px"
                        placeholder="请输入产品名称"
                        @keyup.native="onSubmit"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col type="flex">
            <el-form-item label="规格型号:" prop="ggxh" class="query-form-item">
              <el-input v-model="filterQuery.ggxh"
                        style="width: 200px"
                        placeholder="请输入规格型号"
                        @keyup.native="onSubmit"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col type="flex">
            <el-form-item label="医疗器械注册人:" prop="ylqxzcrbarmc" class="query-form-item">
              <el-input v-model="filterQuery.ylqxzcrbarmc"
                        style="width: 200px"
                        placeholder="请输入医疗器械注册人"
                        @keyup.native="onSubmit"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col type="flex">
            <el-form-item label="批次号:" prop="batchNo" class="query-form-item">
              <el-input v-model="filterQuery.batchNo"
                        style="width: 200px"
                        placeholder="请输入批次号"
                        @keyup.native="onSubmit"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <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"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 90%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item class="query-form-item" label="更新时间:">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="auditDateRange"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 90%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div class="top-right-btn" style="display:flex;">
        <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="onSubmit" size="mini"
          >查询
          </el-button
          >
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>
      <!--                @row-click="handleSelectionChange"-->
      <el-table v-loading="loading" :data="taskList"
                style="width: 100%"
                highlight-current-row border>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="任务类型" prop="taskType" width="120"></el-table-column>
        <el-table-column label="任务状态" prop="status" width="120"></el-table-column>
        <el-table-column label="医疗器械注册人" prop="ylqxzcrbarmc" width="180"></el-table-column>
        <el-table-column label="医疗器械注册人统一社会信用号" prop="creditNum" width="220"></el-table-column>
        <el-table-column label="产品名称" prop="cpmctymc" width="180"></el-table-column>
        <el-table-column label="规格型号" prop="ggxh" width="180"></el-table-column>
        <el-table-column label="批次号" prop="batchNo" width="180"></el-table-column>
        <el-table-column label="生产日期" prop="produceDate" width="180"></el-table-column>
        <el-table-column label="失效日期" prop="expireDate" width="180"></el-table-column>
        <el-table-column label="序列号" prop="serialNo" width="180"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
        <el-table-column label="更新时间" prop="updateTime" width="180"></el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click.native="handleView(scope.row,scope.index)"
            >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="getTaskList"
      ></pagination>
    </el-card>

  </div>
</template>

<script>

import {isBlank} from "@/utils/strUtil";
import {getTraceTaskList} from "@/api/udi/udiTrace";

export default {
  data() {
    return {
      filterQuery: {
        //搜索列表个字段对应的值
        taskType: null,
        status: null,
        cpmctymc: null,
        ggxh: null,
        ylqxzcrbarmc: null,
        page: 1,
        limit: 10,
      },
      total: 0,
      codeRelTotal: 0,
      loading: true,
      manuCodeRelLoading: false,
      taskList: [],
      listCodeRel: [],
      openManuOrder: false,
      openManuCodeRel: false,
      formView: {},
      formViewCodeRel: {},
      showSearch: true,
    }
  },
  methods: {
    //隐藏搜索
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    // //点击一行数据后发送的事件
    // handleSelectionChange(val) {
    //   this.currentRow = val;
    //   this.getManuCodeRel();
    // },
    // getManuCodeRel(){
    //   if (this.currentRow == null || isBlank(this.currentRow.billNo)) {
    //     this.$message.error("请先选择需要查询的单据！")
    //     return;
    //   }
    //   this.manuCodeRelLoading = true;
    //   this.manuCodeRelQuery.manuOrderNo = this.currentRow.billNo;
    //   getManuCodeRelList(this.manuCodeRelQuery).then((res) => {
    //     this.manuCodeRelLoading = false;
    //     if (res.code === 20000) {
    //       this.listCodeRel = res.data.list || [];
    //       this.codeRelTotal = res.data.total || 0;
    //       console.log(this.listCodeRel)
    //     } else {
    //       this.$message.error(res.message);
    //       this.listCodeRel = [];
    //       this.codeRelTotal = 0;
    //     }
    //   }).catch((error) => {
    //     this.manuCodeRelLoading = false;
    //     this.$message.error(error.message);
    //     this.listCodeRel = [];
    //     this.codeRelTotal = 0;
    //   })
    // },
    //详情
    handleView(row){
      this.taskOrder.forEach(obj => {
        if (row.id == obj.id) {
          this.formView = obj
        }
      })
      console.log(this.formView)
      this.openManuOrder = true
    },
    handleViewCoderel(row){
      this.listCodeRel.forEach(obj => {
        if (this.listCodeRel[0]) {
          this.formViewCodeRel = obj
        }
      })
      console.log(this.formViewCodeRel)
      this.openManuCodeRel = true
    },
    //重置
    onReset(){
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        taskType: null,
        status: null,
        cpmctymc: null,
        ggxh: null,
        ylqxzcrbarmc: null,
        page: 1,
        limit: 10,
      };
      this.listCodeRel = null,
        this.getTaskList();
    },
    //查询事件
    onSubmit(){
      this.filterQuery.page = 1;
      this.getTaskList()
    },
    getTaskList() {
      this.loading = true;
      getTraceTaskList(this.filterQuery).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.taskList = res.data.list || [];
          this.total = res.data.total || 0;
          console.log(this.list)
        } else {
          this.$message.error(res.message);
          this.taskList = [];
          this.total = 0;
        }
      }).catch((error) => {
        this.loading = false;
        this.$message.error(error.message);
        this.taskList = [];
        this.total = 0;
      })
    },
  },
  created() {
    this.getTaskList()
  }
}
</script>

<style scoped>
.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
.query-form-item {
  display: block !important;
  margin-right: 10px;
  margin-bottom: 5px;
}

</style>
