<template>
  <div>
    <el-card>
      <el-form :model="query" label-width="auto" v-show="showSearch" size="mini" class="order-el-form">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="是否无码申报:" class="query-form-item">
              <el-select
                v-model="query.storard"
                filterable
                remote
                clearable
                style="width: 80%"
              >
                <el-option label="是" :value="0"></el-option>
                <el-option label="否" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="目录编码:" class="query-form-item">
              <el-input v-model="query.ybbm" placeholder="目录编码" clearable style="width: 80%">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="结算时间:" class="query-form-item">
              <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="结束日期"
              ></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="onSubmit">查询</el-button>
        </el-button-group>
      </div>
      <el-table v-loading="loading" :data="orderList" style="width: 100%" :row-style="{height: '32px' }"
                highlight-current-row @current-change="handCurrentChange"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="目录编码" prop="ybbm" width="240"></el-table-column>
        <el-table-column label="目录名称" prop="cpmctymc" width="240"></el-table-column>
        <el-table-column label="去重追溯码医保采集数量" prop="busTypeName" width="220"></el-table-column>
        <el-table-column label="出库销售追溯码采集数" prop="shouldCount" width="240"></el-table-column>
        <el-table-column label="应扫码结算药品总数" prop="scanCount" width="240"></el-table-column>
        <el-table-column label="无码类型" prop="scanRate" width="120"></el-table-column>
        <el-table-column label="上传率" prop="scanRate" width="120"></el-table-column>
        <el-table-column label="结算开始时间" prop="scanRate" width="220"></el-table-column>
        <el-table-column label="结算结束时间" prop="scanRate" width="220"></el-table-column>
        <!--<el-table-column label="所属工位" prop="workplaceName"></el-table-column>-->
        <!--<el-table-column label="操作" fixed="right" width="240">-->
        <!--  <template slot-scope="scope">-->
        <!--    <el-button-->
        <!--      type="text"-->
        <!--      size="small"-->
        <!--      @click.native.stop="handleEdit(scope.row)"-->
        <!--    >编辑-->
        <!--    </el-button>-->
        <!--    <el-button-->
        <!--      type="text"-->
        <!--      size="small"-->
        <!--      @click.native.stop="handleDel(scope.row)"-->
        <!--    >删除-->
        <!--    </el-button-->
        <!--    >-->
        <!--  </template>-->

        <!--</el-table-column>-->
      </el-table>
      <pagination
        :total="total"
        :limit.sync="query.limit"
        :page.sync="query.page"
        @pagination="getList"
      >
      </pagination>
    </el-card>


  </div>
</template>

<script>






import { getOrderDetails } from '@/api/biz/traceQuery'

export default {
  name: "retraceCode",
  props: {

  },
  data() {
    return {
      loading:false,
      showSearch:true,
      orderList:[],
      query: {
        page: 1,
        limit: 10,
        startTime:null,
        endTime: null,
        ybbm:"",
        storard:null,

      },
      total:0,
      storardMap:{
        1 : "是",
        0 : "否"
      },
      actDateRange: [],
      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])
            }
          }
        ]
      },
    }
  },

  components: {

  },
  methods: {
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    onReset() {
      this.$router.push({
        path: "",
      });
      this.query = {
        page: 1,
        limit: 10
      };
      this.actDateRange = [];
      this.getList();
    },
    onSubmit() {
      if (this.actDateRange !== null) {
        this.query.orderStartTime = this.actDateRange[0];
        this.query.orderEndTime = this.actDateRange[1];
      } else {
        this.query.startTime = null;
        this.query.endTime = null;
      }
      this.query.page = 1
      this.getList();
    },
    getList(){
      getOrderDetails(this.query).then(res => {
        if (res.code == 20000){
          this.orderList = res.data.list
          this.total = res.data.total
        }else {
          return this.$message.error(res.message)
        }
      })
    }

  },
  created() {
    this.getList()
  }

}
</script>

<style scoped>

</style>
