<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:39:47
-->
<template>
  <dialogBox title="土地用途信息" width="60%" isMain v-model="myValue" :isFullscreen="false" @submitForm="submitForm"
    @closeDialog="closeDialog" :isButton="showButton">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="138px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="土地用途" prop="tdyt">
            <el-input v-model="ruleForm.tdyt"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="土地使用权限" prop="syqx">
            <el-input v-model="ruleForm.syqx"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="土地使用结束时间" prop="jssj">
            <el-date-picker
               v-model="ruleForm.jssj"
               type="daterange"
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
              value-format="yyyy-MM-dd">>
            </el-date-picker>
          </el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="土地使用起止时间" prop="qzsj">
              <el-date-picker
               v-model="ruleForm.qzsj"
               type="daterange"
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
              value-format="yyyy-MM-dd">>
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </dialogBox>
</template>z x  addTdyt
<script>
  import { mapGetters } from "vuex";
  export default {
    props: {
      value: { type: Boolean, default: false },
      details: { type: Object, default: {} },
      showButton: { type: Boolean, default: false }
    },
    data () {
      return {
        myValue: this.value,
        ruleForm: {
             tdyt:"",
             syqx:"",
             jssj:"",
             qzsj:""
        },
        rules: {
          tdyt: [{ required: true, message: "土地用途", trigger: "blur" }],
          syqx: [{ required: true, message: "土地使用权限", trigger: "blur" }],
          jssj: [{ required: true, message: "土地使用结束时间", trigger: "blur" }],
          qzsj: [{ required: true, message: "土地使用起止时间", trigger: "blur" }],
        },
      };
    },
    watch: {
      value (val) {
        console.log("val",val);
        this.myValue = _.cloneDeep(val);
      },
      details: {
        handler: function (val, oldVal) {
           console.log("val2",val);
          this.ruleForm = val;
        },
        deep: true,
      },
    },
    methods: {
      closeDialog () {
        this.$emit("input", false);
        this.$refs["ruleForm"].resetFields();
      },
      submitForm () {
        console.log("this.ruleForm",this.ruleForm);
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.$emit("input", false);
            this.$emit("updateDetail", _.cloneDeep(this.ruleForm));
          } else {
            return false;
          }
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/dialogBoxheader.scss";
  .submit-button {
    text-align: center;
    height: 52px;
    padding-top: 10px;
    background-color: #fff;
  }
</style>