<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="8">
            <el-form-item label="处方单号:" class="query-form-item">
              <el-input v-model="query.billNo" placeholder="查询条件" clearable style="width: 80%">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="达标标志:" class="query-form-item">
              <el-select
                v-model="query.storard"
                filterable
                remote
                clearable
                style="width: 80%"
              >
                  <el-option label="达标" :value="1"></el-option>
                  <el-option label="未达标" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <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-row :gutter="20">-->
        <!--  <el-col :span="8">-->
        <!--    <el-form-item label="业务类型:" class="query-form-item">-->
        <!--      <el-select-->
        <!--        v-model="query.workPlaceIdFk"-->
        <!--        filterable-->
        <!--        remote-->
        <!--        clearable-->
        <!--        style="width: 80%"-->
        <!--      >-->

        <!--      </el-select>-->
        <!--    </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="billNo" ></el-table-column>
        <el-table-column label="结算时间" prop="billTime" ></el-table-column>
        <el-table-column label="业务名称" prop="busTypeName" ></el-table-column>
        <el-table-column label="单据扫码数量" prop="shouldCount"></el-table-column>
        <el-table-column label="应扫码数量" prop="scanCount"></el-table-column>
        <el-table-column label="扫码率" prop="scanRate"></el-table-column>
        <el-table-column label="达标标志" prop="storard">
          <template slot-scope="scope">
            <el-tag :type="scope.row.storard == 1 ? 'success' : 'danger'">{{ storardMap[scope.row.storard] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="updateTime" ></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 { orderStats } from '@/api/collect/collectOrder'

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

  },
  data() {
    return {
      loading:false,
      showSearch:true,
      orderList:[],
      query: {
        page: 1,
        limit: 10,
        startTime:null,
        endTime: null,
        billNo:"",
        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(){
      orderStats(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>
