<template>
  <div class="app-container">
    <el-card >
      <div slot="header" class="clearfix">
        <i class="el-icon-back" @click="goToAbout">返回  |  </i>
        <!--        <el-link icon="el-icon-edit" :underline="false" @click="goToAbout">编辑</el-link>-->
        <span>交班详情</span>
      </div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
        <el-form-item label="交班方式" prop="status">
          <el-select v-model="queryParams.status" style="width: 150px" placeholder="交班方式" clearable>
            <el-option
              v-for="option in shiftHandoverList"
              :key="option.dictCode"
              :label="option.dictLabel"
              :value="option.dictLabel"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交班状态">
          <el-select v-model="queryParams.type" style="width: 150px" placeholder="交班状态" clearable>
            <el-option  label="交班" value="0">交班</el-option>
            <el-option  label="未交班" value="1">未交班</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交班时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            size="medium"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            clearable
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px"   class="box-card">
      <el-table
        style="width: 1500px"
        ref="tables"
                v-loading="loading"
                :data="dataList"
                :default-sort="defaultSort">
        <el-table-column label="班次员工" align="center" prop="staffName"/>
        <el-table-column label="开始时间" align="center" prop="startTime"/>
        <el-table-column label="结束时间" align="center" prop="endTime" />
        <el-table-column label="交班状态" align="center" prop="status" width="">
          <template slot-scope="scope">
            <el-tag  effect="plain" v-if="scope.row.type =='0'"> 已交班</el-tag>
            <el-tag type="success" effect="plain" v-else-if="scope.row.type =='1'">未交班</el-tag>
          </template>
        </el-table-column>

<!--        <el-table-column label="创建时间" align="center" prop="createTime" width=""/>-->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDetail(scope.row)"
            >交班数据</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDetail(scope.row)"
            >补打交班单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog title="订单详情" :visible.sync="openDetail" width="600px" append-to-body :close-on-click-modal="false">
<!--      <detail :dataForm = "recordData"></detail>-->
      <HandoverOnly :recordData = "recordData"></HandoverOnly>
    </el-dialog>

  </div>
</template>

<script>
import {getHandoverListApi} from "@/api/cashier/handover";

import {getOrderApi,getStatisticsApi } from "@/api/cashier/integralOrder/order";
import Detail  from '@/views/cashier/NewComponents/integralOrder/detail'
import {getDicts} from "@/api/dict/data";
import HandoverOnly from "@/views/cashier/NewComponents/HandoverOnly";

export default {
  name: "pointsCashier",
  components: {HandoverOnly, Detail },

  // dicts: ['zhzt'],

  data() {
    return {
      openDetail:false,
      dataForm:{},
      dataList:[],
      recordData:'',
      zhztList:'',
      shiftHandoverList:'',
      queryParams: {

        status: '',
        type: '',

        page:null,
        pageSize:null
      },
      loading: false,
      dateRange: [],
      defaultSort: {prop: 'createTime', order: 'descending'},

      total: 0,

      statisticsForm: {
        num:0,
        exchangeQuantity:0,
        integral:0,
        amount:0
      }
    }
  },
  created() {
    this.getList();
    this.getStatistics();
    this.getStatus();
  },
  methods: {
    getList(){
      getHandoverListApi(this.addDateRange(this.queryParams, this.dateRange)).then(res=>{
        this.dataList = res.data.records
        this.total = res.data.total

      })
    },
    getStatistics() {
      getStatisticsApi().then(res=>{
        this.statisticsForm = res.data
      })
      console.log("123123123",this.statisticsForm)
    },

    // 获取支付方式
    getZhzt() {
      getDicts("zhzt").then(response => {
        this.zhztList = response.data;
      })
    },
    getStatus() {
      getDicts("handover").then(response => {
        this.shiftHandoverList = response.data;
      })
    },

    handleUpdate(){},
    handleQuery(){
      this.getList();

    },
    resetQuery(){
      this.queryParams = {
        giftName: '',
        status: '',
        mobile: '',
        orderNumber: '',
        page:1,
        pageSize:10
      },
        this.dateRange = []
    },
    handleDetail(data){
      this.openDetail = true
      this.recordData = data.recordData;
      // JSON.parse(this.recordData )
      console.log("data.recordData;",this.recordData)

    },
    goToAbout() {
      this.$router.push({
        path:'/Handover',
        query:{
          id:9
        }
      });
    }
  }
}
</script>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
  background: #f6f8f9;
  padding-top: 0px;
  padding: 0px
}
.box {
  padding: 10px;
  height: 80px;
  width: 150px;
  margin-right: 0px;
  background-color: rgba(204, 204, 204, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
}
.box-card{
  width: 100%;
  margin-bottom: 15px;
}
.font-chinese {
  font-size: 15px;
  font-family:Microsoft YaHei;
  font-weight: bold;
  line-height:1.5
}
.font-number {
  font-size: 20px;
  font-family: PingFang SC,sans-serif;
  font-weight: bold;
  line-height:1.3
}
.table-box{
  width: 100%;
}
</style>
