<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
		<div class="form-wrapper">
		  <el-form
		    :model="formData"
		    label-width="0"
		    :show-message="false"
		    ref="formRef"
			:rules="rules"
		  >
		    <el-descriptions title="" :column="1" border>
		      <el-descriptions-item
		        label="日期方式"
		      >
					<span slot="label" class="label-required">日期方式</span>
					<el-form-item prop="formingNum">
						<DictSelection
							dictName="日期方式"
							clearable
							v-model="formData.dateType"
							@change="changeType"
						>
						</DictSelection>
					</el-form-item>
		      </el-descriptions-item>
		      <el-descriptions-item
				v-if="formData.dateType==2"
		      >
		        <span slot="label" class="label-required"><i>*</i> 指定日期</span>
		        <el-form-item prop="appointTime" class="w100">
		          <el-date-picker
		            class="w100"
		            v-model="formData.appointTime"
		            type="datetime"
		            value-format="yyyy-MM-dd HH:mm:ss"
		          ></el-date-picker> </el-form-item
		      ></el-descriptions-item>
			  <el-descriptions-item
			    label="关闭工单"
			  >
					<span slot="label" class="label-required">关闭工单</span>
					<el-form-item prop="orderClose">
						  <el-radio v-model="formData.orderClose" :label="1">启用</el-radio>
						  <el-radio v-model="formData.orderClose" :label="0">禁用</el-radio>
					</el-form-item>
			  </el-descriptions-item>
			  <el-descriptions-item
			    label="报工操作"
			  >
					<span slot="label" class="label-required">报工操作</span>
					<el-form-item prop="reportWork">
						  <el-radio v-model="formData.reportWork" :label="1">启用</el-radio>
						  <el-radio v-model="formData.reportWork" :label="0">禁用</el-radio>
					</el-form-item>
			  </el-descriptions-item>
			  <el-descriptions-item
			    label="货物移动"
			  >
					<span slot="label" class="label-required">货物移动</span>
					<el-form-item prop="goodsMovement">
						  <el-radio v-model="formData.goodsMovement" :label="1">启用</el-radio>
						  <el-radio v-model="formData.goodsMovement" :label="0">禁用</el-radio>
					</el-form-item>
			  </el-descriptions-item>
		    </el-descriptions>
		  </el-form>
		  <div class="footer">
		    <el-button type="primary" @click="confirm" :loading="saveLoading">保存</el-button>
		  </div>
		</div>
    </el-card>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import dayjs from 'dayjs';
  import {
    getInfo,
    controlSave,
    controlUpdate
  } from '@/api/operationControl/index.js';
  export default {
	mixins: [dictMixins],
    data () {
      return {
		  // 加载状态
		  loading: false,
		  formData:{
			  dateType:1,
			  orderClose:1,
			  reportWork:1,
			  goodsMovement:1,
			  appointTime:''
		  },
		  fnType:1,
		  saveLoading:false,
		  rules:{
			  appointTime: [{ required: true, message: '请选择指定日期', trigger: 'change' }]
		  }
      };
    },
    computed: {
    },
	async created() {
		this.getInfoData()
	},
    methods: {
		changeType(val){
			if(val==2){
				const time = dayjs( new Date().getTime() ).format('YYYY-MM-DD HH:mm:ss');
				this.$set(this.formData,'appointTime',time)
			}
		},
		async getInfoData(){
			const res = await getInfo()
			if(typeof res == 'string'){
				this.fnType = 1
			}else{
				this.formData = res
				this.fnType = 2
			}
		},
		confirm(){
			const saveOrUpdate = this.fnType == 1?controlSave:controlUpdate
			if(this.formData.dateType==1){
				delete this.formData.appointTime
			}
			 this.$refs.formRef.validate((valid) => {
			  if (valid) {
				this.saveLoading = true
				saveOrUpdate(this.formData).then(res=>{
					this.$message.success(res)
					this.saveLoading = false
					this.getInfoData()
				}).catch(()=>{
					this.saveLoading = false
				})
			  } else {
				return false;
			  }
			})
		}
     
    }
  };
</script>

<style lang="scss" scoped>
	.form-wrapper{
		width: 40%;
		margin: 10px auto;
		.el-form-item{
			margin-bottom: 0;
		}
		.w100{
			width: 100%!important;
		}
		.footer{
			width: 100%;
			margin: 20px auto 0;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.label-required{
			i{
				color: red;
				font-style: normal;
			}
		}
	}
</style>
