<template>
  <v-dialog
    :title="title"
    :close-on-click-modal="false"
	width="1300px"
    v-model="visible">
<!--	  <el-form  :inline="true" class="query-form m-b-10"  v-if="searchVisible" ref="searchForm" :model="searchForm" @keyup.enter="refreshList()" @submit.prevent>-->
<!--		  &lt;!&ndash; 搜索框&ndash;&gt;-->
<!--		  <el-form-item label="工作时间" prop="workDates">-->
<!--			  <el-date-picker-->
<!--				  style="width:50%;"-->
<!--				  v-model="searchForm.workDates"-->
<!--				  type="datetimerange"-->
<!--				  value-format="YYYY-MM-DD HH:mm:ss"-->
<!--				  placeholder="请选择日期"-->
<!--			  />-->
<!--		  </el-form-item>-->
<!--		  <el-form-item>-->
<!--			  <el-button type="primary" @click="refreshList()"  icon="search">查询</el-button>-->
<!--			  <el-button type="default" @click="resetSearch()"  icon="refresh-right">重置</el-button>-->
<!--		  </el-form-item>-->
<!--	  </el-form>-->
	  <el-table :data="gridData">
		  <el-table-column property="name" label="姓名" width="150"/>
		  <el-table-column property="title" label="职位" width="150"/>
		  <el-table-column property="workDate" label="工作日" width="200"/>
		  <el-table-column property="userCheckTime" label="打卡时间" width="200" />
		  <el-table-column property="locationResult" label="考勤类型" width="200" >
			  <template #default="scope">
				  <span v-if="scope.row.locationResult === 'Normal'">范围内</span>
				  <span v-else-if="scope.row.locationResult === 'Outside'">范围外</span>
				  <span v-else-if="scope.row.locationResult === 'NotSigned'">未打卡</span>
			  </template>
		  </el-table-column>
		  <el-table-column property="checkType" label="考勤类型" width="200" >
			  <template #default="scope">
				  <span v-if="scope.row.checkType === 'OnDuty'">上班</span>
				  <span v-else-if="scope.row.checkType === 'OffDuty'">下班</span>
			  </template>
		  </el-table-column>
		  <el-table-column property="timeResult" label="打卡结果" width="160">
			  <template #default="scope">
				  <span v-if="scope.row.timeResult === 'Normal'">正常</span>
				  <span v-else-if="scope.row.timeResult === 'Early'">早退</span>
				  <span v-else-if="scope.row.timeResult === 'Late'">迟到</span>
				  <span v-else-if="scope.row.timeResult === 'SeriousLate'">严重迟到</span>
				  <span v-else-if="scope.row.timeResult === 'Absenteeism'">旷工迟到</span>
				  <span v-else-if="scope.row.timeResult === 'NotSigned'">未打卡</span>
			  </template>
		  </el-table-column>
	  </el-table>

    <template #footer>
        <span class="dialog-footer">
          <el-button @click="close()" icon="circle-close">关闭</el-button>
        </span>
    </template>
  </v-dialog>
</template>

<script>
	import ddService from "@/api/test/dd/dd.js"
  export default {
    data () {
      return {
      	userId:"",
      	userName:"",
      	userTitle:"",
        title: '',
        method: '',
        visible: false,
        loading: false,
	    gridData:[],
	    searchVisible: true,
	    searchForm:{
			workDates:[]
	    },
      }
    },
    components: {
    },
    created () {
    },
    methods: {
      init (id,name,title,workDate) {
		  this.title = '考勤列表'
		  this.visible = true
		  this.userId = id
		  this.userName = name
		  this.userTitle = title
        this.loading = false
        this.$nextTick(() => {
			this.loading = true
			console.log('workDate',workDate)
			ddService.getWorkListCord({userId:id,workDateFrom:workDate,workDateTo:workDate}).then((data) => {
				console.log('data',data)
				this.gridData = data.recordresult
				this.gridData.forEach((item)=>{
					item.name = name
					item.title = title
				})
				this.loading = false
			})
        })
      },
		refreshList(){
			this.loading = true
			ddService.getWorkListCord({userId:this.userId,workDateFrom:this.searchForm.workDates[0],workDateTo:this.searchForm.workDates[1]}).then((data) => {
				console.log('data',data)
				this.gridData = data.recordresult
				this.gridData.forEach((item)=>{
					item.name = this.userName
					item.title = this.userTitle
				})
				this.loading = false
			})
		},
		resetSearch () {
			this.$refs.searchForm.resetFields()
			this.searchForm.workDates = [] // 重置时清空供应商筛选
			this.refreshList()
		},
		close(){
			this.visible = false
			this.searchForm.workDates = []
		}
    }
  }
</script>


