<template>
    <div class="app-container">
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #title>
          <p style="font-weight: bold;">执法情况</p>
        </template>
      </van-nav-bar>
      <p class="main_title">基本信息</p>
      <div class="main_box">
        <van-field readonly label="使用权人代表姓名" v-model="jgList.shyqrdbxm" input-align="right" label-width="auto" />
        <field-select
          v-model="jgList.wfydlx"
          label="使用权人证件类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择使用权人证件类型"
          readonly
          remote-url="/open/zdzh/list/zjlx"
          :on-remote-response="'data'"
        />
        <van-field readonly label="使用权人证件号码" v-model="jgList.shyqrzjhm" input-align="right"/>
        <van-field readonly label="宅基地代码" v-model="jgList.zjddm" input-align="right" label-width="auto"/>
        <van-field readonly label="关联任务" :value="jgList.surveyName" input-align="right"/>
        <p class="main_title">违法信息</p>
        <div class="main_box">
          <van-field
            clickable
            label="违法用地类型"
            placeholder="请选择"
            v-model="wfydlx"
            @click="showwfydlx = true"
            input-align="right"
            right-icon="arrow-down"
          />
          <van-popup v-model="showwfydlx" position="bottom">
            <van-picker
              show-toolbar
              :columns="wfydlxDictionaries"
              @confirm="onConfirmWfydlx"
              @cancel="showwfydlx = false"
            />
          </van-popup>
          <van-field v-model="jgList.wfydmj" label="违法用地面积(平方米)" type="number" readonly placeholder="请输入违法用地面积" input-align="right" label-width="auto"/>
          <van-field v-model="jgList.fmkje" label="罚没款金额(元)" type="number" readonly placeholder="请输入罚没款金额" input-align="right" label-width="auto"/>
          <van-field v-model="jgList.msmj" label="没收面积(平方米)" type="number" readonly placeholder="请输入没收面积" input-align="right" label-width="auto"/>
          <van-field v-model="jgList.ccmj" label="拆除面积(平方米)" type="number"  readonly placeholder="请输入拆除面积" input-align="right" label-width="auto"/>
        </div>
        <p class="main_title">执法情况</p>
        <field-select
          v-model="jgList.jglx"
          label="监管类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="选择监管类型"
          readonly
          remote-url="/open/zdzh/list/jglx"
          :on-remote-response="'data'"
        />
        <field-date-picker
          readonly
          v-model="jgList.lasj"
          label="立案时间"
          formatter="yyyy-MM-dd"
        />
        <van-field  label="事件地址" v-model="jgList.fmkje" input-align="right" label-width="auto"/>
        <van-field  label="备注" v-model="jgList.bz" input-align="right" label-width="auto"/>
      </div>

      <div style="padding: 16px 0;">
        <van-row>
          <van-col span="12" align="center">
            <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton" @click="goBack">取<i style="margin-right: 1em;"></i>消</van-button>
          </van-col>
          <van-col span="12" align="center">
            <van-button type="info" native-type="submit" class="submitButton" @click="goAdd">保<i style="margin-right: 1em;"></i>存</van-button>
          </van-col>
        </van-row>
        <div class="clear"></div>
      </div>
    </div>
</template>

<script>
  import { getJg,jgEdit } from "@/api/onlineHome/homestead/reporting";
import FieldSelect from "@/components/form/FieldSelect";
import FieldDatePicker from "@/components/form/FieldDatePicker";
export default {
  name: "supervisionWfxx",
  components: {FieldSelect,FieldDatePicker },
  data() {
    return {
      showSys:false,
      showjglx:false,
      showlasj:false,
      showinspectorTime:false,
      showwfydlx:false,
      showReformDeadline:false,
      showjasj:false,

      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      jgList:{},

      sfzjjzw:'',
      jglx:'',
      wfydlx:'',

      wfydlxDictionaries:[],
      jglxDictionaries:[],
      sysDictionaries:[],

    };
  },
  created() {

    this.getTaskGet();
  },
  methods: {
    getTaskGet(){
      getJg(this.$route.query.id).then(response => {
        this.jgList = response.data;
      });
    },
    onConfirmSys(data){
      this.sfzjjzw = data.text;
      this.jgList.sfzjjzw = data.value;
      this.showSys = false;
    },
    onConfirmJglx(data){
      this.jglx = data.text;
      this.jgList.jglx = data.value;
      this.showjglx = false;
    },
    onConfirmWfydlx(data){
      this.wfydlx = data.text;
      this.jgList.wfydlx = data.value;
      this.showwfydlx = false;
    },
    onConfirmLasj(data){
      this.jgList.lasj = this.getNowFormatDate(data).substr(0,10);
      this.showlasj = false;
    },
    onConfirmInspectorTime(data){
      this.jgList.inspectorTime = this.getNowFormatDate(data).substr(0,10);
      this.showinspectorTime = false;
    },
    onConfirmReformDeadline(data){
      this.jgList.reformDeadline = this.getNowFormatDate(data).substr(0,10);
      this.showReformDeadline = false;
    },
    onConfirmJasj(data){
      this.jgList.jasj = this.getNowFormatDate(data).substr(0,10);
      this.showjasj = false;
    },
    goAdd(){
      this.$set(this.jgList, "status", "1");
      jgEdit(this.jgList).then(response => {
        this.$toast.success('保存成功');
        setTimeout(function(){
          history.go(-1)
        },2000)
      });
    },
    goBack(){
      window.history.go(-1)
    }
  },
}
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;
  }
</style>
