<template>
  <el-dialog
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
		:append-to-body="true"
    @close="cancelHandle"
    custom-class="update-newsetdata-dialog"
    center
    v-dialogDrag
    :title="edbinfo&&edbinfo.DataInsertConfig.Date?'编辑最新值':'添加最新值'"
		width="600px"
  >
    <el-form
      ref="diaForm"
      class="form-cont"
      inline
      label-position="left"
      label-width="80px"
      :model="formData"
      :rules="formRules"
    >
			<el-form-item label="指标名称" prop="oldEdb" style="width:45%">
				<span class="label">{{formData.edbName}}</span>
			</el-form-item>
			<el-form-item label="频度" prop="newEdb" style="width:45%">
				<span class="label">{{formData.frequency}}</span>
			</el-form-item>
			<el-form-item label="最新日期" prop="newEdb" style="width:45%">
				<span class="label">{{formData.lastDate}}</span>
			</el-form-item>
			<el-form-item label="最新值" prop="newEdb" style="width:45%">
				<span class="label">{{formData.lastValue}}</span>
			</el-form-item>
			<el-form-item label="预测日期" prop="newEdb" style="width:45%">
				<el-date-picker
          v-model="formData.date"
          type="date"
          style="width: 140px"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期"
          :picker-options="timePickerOptions"
        />
			</el-form-item>
			<el-form-item label="预测值" prop="newEdb" style="width:45%">
				<el-input
          v-model="formData.value"
          placeholder="输入值"
          style="width:120px;"
          type="number"
        />
			</el-form-item>
    </el-form>
    <div class="dia-bot">
      <el-button
        type="primary"
        style="margin-right: 20px"
        @click="saveHandle"
        >保存</el-button
      >
      <el-button type="primary" plain @click="cancelHandle">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js'; 
export default {
  props: {
		isShow: {
			type: Boolean,
		},
    edbinfo: {
      type: Object
    },
    dataList: {
      type: Array
    }
  },
  computed: {
    timePickerOptions() {
      let that=this
      let obj={
        disabledDate(time) {
          return time.getTime() < new Date(that.formData.lastDate).getTime();
        }
      }
      return obj
    }
  },
	watch: {
		isShow: {
			handler(newValue) {
				if(newValue) {
          const { EdbName,EdbInfoId,Frequency,LatestDate,LatestValue,DataInsertConfig } = this.edbinfo;
          this.formData.edbName =  EdbName;
          this.formData.edbId =  EdbInfoId;
          this.formData.frequency =  Frequency;
          this.formData.lastDate =  this.dataList.filter(_ => _.DataTime !== DataInsertConfig.Date)[0].DataTime;
          this.formData.lastValue =  this.dataList.filter(_ => _.DataTime !== DataInsertConfig.Date)[0].Value;

          if(DataInsertConfig.Date) {
            this.formData.date = DataInsertConfig.Date;
            this.formData.value = DataInsertConfig.Value;
          }else {
            this.setDefaultDate(this.edbinfo)
          }
        }
			},
			deep: true,
		}
	},
  data() {
    return {
			formData: {
        edbName: '',
        edbId: '',
        frequency: '',
        lastDate:'',
        lastValue: '',
				date:'',
				value: ''
			},
			formRules: {
				date:[
					{ required: true, message: '日期不能为空', trigger: 'blur' },
				],
				value:[
					{ required: true, message: '值不能为空', trigger: 'blur' },
				],
			},
		};
  },
  methods: {

    setDefaultDate({Frequency,LatestDate}) {
      const frequencyMap = {
        '日度': 1,
        '周度':7,
        '月度': 30,
        '旬度': 10,
        '季度': 90,
        '年度': 365
      }
      this.formData.date = this.$moment(LatestDate).add(frequencyMap[Frequency]||1,'d').format('YYYY-MM-DD')
    },

    cancelHandle() {
      this.$refs.diaForm.resetFields();
      this.formData= {
        edbName: '',
        edbId: '',
        frequency: '',
        lastDate:'',
        lastValue: '',
				date:'',
				value: ''
			}
      this.$emit('update:isShow',false);
    },

    async saveHandle() {
      await this.$refs.diaForm.validate();
      const { edbId,date,value } = this.formData;
      const res = await dataBaseInterface.insertData({
        EdbInfoId: edbId,
        Date: date,
        value: Number(value)
      })

      if(res.Ret !== 200) return
      this.$message.success('保存成功')
      this.cancelHandle()
      this.$emit('success')
    },
  },
  mounted() {},
};
</script>
<style lang="scss">
.update-newsetdata-dialog {
  .el-form-item__content {
    margin-left: 0;
  }
  .el-input {
    width: 80%;
  }
  /* .el-form-item__content,.el-form-item__label {
    line-height: 25px;
  } */
  .dia-bot {
    margin: 52px 0 50px;
    display: flex;
    justify-content: center;
  }
	.tip {
		margin-bottom: 30px;
	}
  .label {
    display: inline-block;
    width: 160px;
    line-height: 25px;
    padding-top: 8px;
  }
}
</style>
