<template>
  <d2-container>
	<div class="d2-table-view-full" style="overflow: hidden">
	  <div class="d2-table-view-header"></div>
	  <div class="d2-table-view-content">

		<d2-crud
				title="餐别列表"
				ref="d2Crud"
				:options="tableOptions"
				:loading="loading"
				:columns="columns"
				:data="data"
				:rowHandle="rowHandle"
				@edit="handleRowEdit">
		</d2-crud>
	  </div>
	  <div class="d2-table-view-footer">
		<el-pagination
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
						:current-page.sync="currentPage"
						:page-size="tableOptions.pageList[0]"
						:page-sizes="tableOptions.pageList"
						layout="total,sizes, prev, pager, next,jumper"
						:total="pagination.total">
		</el-pagination>
	  </div>
	</div>
	<el-dialog
		:title="diaLogName"
		:visible.sync="operVisible"
		width="28%" 	
		@close="clearForm"
		:close-on-click-modal="false">
		<el-form ref="form" :model="form" label-width="80px" labelPosition="right"  :rules="rules" >
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="餐别编号">
						<el-input disabled v-model="form.mealSerialNo" clearable/>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="餐别名称">
						<el-input   v-model="form.mealName" clearable maxlength="10"/>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="餐别价格" prop="mealPrice">
						<el-input   v-model="form.mealPrice" clearable maxlength="10"/>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="设备状态" prop="enable"  >
						<el-select v-model="form.enable" placeholder="请选择" clearable style="width: 100%;" >
						<el-option label="启用" :value="1"></el-option>
						<el-option label="禁用" :value="0"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="开始时间">
						<el-time-select
						        v-model="form.startTime"
						       :picker-options="{ 
						         start: '00:00',
						         step: '00:01',
						         end: '24:00'
						        }"
						     placeholder="选择时间"
								 style="width: 100%;" >
						</el-time-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="结束时间">
						<el-time-select
							v-model="form.endTime"
							:picker-options="{
								start: '00:00',
								step: '00:01',
								end: '24:00'
								}"
							placeholder="选择时间"
							style="width: 100%;" >
						</el-time-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="备注">
						<el-input type="textarea" maxlength="30" v-model="form.mealRemark" clearable/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<span slot="footer" class="dialog-footer">
	<zl-button @click="operInstance('form')"/> 
</span>
</el-dialog>
  </d2-container>
</template>

<script>
  import {getCostList,updateMeal,getUpdate} from '../../../api/cost/meal'
  import { tableOptions } from '../../../assets/options'
  export default {
    name: 'attendance-meal',
    data () {
			let checkprice = (rule, value, callback) => {
			let reg =  /^(?:[1-9]\d*|0)(?:\.\d+)?$/
				if(!reg.test(value)){
				return callback(new Error('请输入少于10位的正实数')) 
			}else{
				callback ()
			}
			}
      return {
				func:{
					update:false
				},
        tableOptions,
        loading: false,
        operVisible: false,
        currentPage:1,
        diaLogName: '编辑',
        form: {
          mealSerialNo: '',
          mealName: '',
          mealPrice: '',
          startTime: '',
          endTime: '',
		      mealRemark:'',
					enable:'',
					id:'',
					detailId:''
        },
        filter: {
          pageSize: 10,
          pageNum: 1
        },
        pagination: {
          total: 0
        },
        columns: [
          {
            title: '餐别编号',
            key: 'mealSerialNo',
            minWidth: '90'
          },
          {
            title: '餐别名称',
            key: 'mealName',
            minWidth: '150'
          },
          {
            title: '餐别价格',
            key: 'mealPrice',
            minWidth: '90'
          },
          {
            title: '开始时间',
            key: 'startTime',
            minWidth: '150'
          },
		  {
		  title: '结束时间',
		  key: 'endTime',
		  minWidth: '150'
		  },
		  {
		  title: '是否启用',
		  key: 'enable',
		  minWidth: '150',
			formatter(row, column, cellValue, index) {
				if(cellValue === 0){
					return '禁用'
				}else if(cellValue === 1){
					return '启用'
				}
			}
		  },
		  {
		  title: '版本',
		  key: 'version',
		  minWidth: '90'
		  }
        ],
        rowHandle: {
          columnHeader: '操作',
          minWidth: '100',
          align: 'center',
         custom: [
            {
              text: '编辑',
              type: 'primary',
              size: 'small',
              emit: 'edit'
            }
          ],

        },
				rules: {
						mealPrice:[{ validator: checkprice, trigger: 'blur' }]
						},
        data: [],
      }
    },
    methods: {
      handleList (val) {
        if(val){this.filter.pageNum=1
        this.currentPage = 1}
      this.loading = true
        getCostList(this.filter).then(res => {
          this.loading = false
          this.data = res.page.list
          this.pagination.total = res.page.total
        }).catch(err => {
          this.loading = false
        })
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
			handleSizeChange (val) {
			this.filter.pageNum = 1
			this.filter.pageSize = val
			this.handleList()
			},
			handleTreeNode () {
					TreeNode({
						isCompany:0
					}).then(res=>{
						this.treeData = JSON.parse(res.data)
					})
			},
      operInstance(formEquName){
				this.$refs[formEquName].validate((valid) => {
					if (valid) {
						updateMeal(this.form).then(res => {
							this.operVisible = false
							this.$message({
								message:'编辑成功',
								type: 'success'
							})
							this.handleList()
						})
					}
					})
      },
      handleRowEdit ({index, row}) {
		   // this.form = row
			 let detailId = row.detailId
				getUpdate({detailId}).then(res => {
					  this.form = res.update
						this.operVisible=true
				})
      
      },
			clearForm(){
				this.form={
					 mealSerialNo: '',
					mealName: '',
					mealPrice: '',
					startTime: '',
					endTime: '',
					mealRemark:'',
					enable:'',
					id:'',
					detailId:''
				}
			},
	/* 		getFunction () {
			  this.$GetFunction({
			    menuUrl:this.$route.path
			  }).then(res=>{
			    res.data.forEach(item=>{
						console.log(item)
			       if(item.functionType === 'update') {
			        if (item.remarks === 'true') {
			          this.$set(this.rowHandle,'custom',[
			           {
			             text: '编辑',
			             type: 'primary',
			             size: 'small',
			             emit: 'edit'
			           }
			          ])
			        }
			      }  
			    })
			  })
			} */
    },
    mounted () {
			//this.getFunction()
			this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,0)
      this.handleList()
    }
  }
</script>
 