？<template>
  <layout-form>
    <el-form
      :model="form"
      :loading="loading"
      :rules="rules"
      size="small"
      style="width: 100%"
      label-width="120px"
      ref="form"
    >
      <el-row>
        <Field
          label="入驻系统名称"
          prop="eventName"
          v-model="form.eventName"
          placeholder="请输入入驻系统名称"
        />
        <Field
          label="入驻系统编码"
          prop="sysCode"
          v-model="form.sysCode"
          placeholder="请输入入驻系统编码"
        />
        <Field
          label="申请并受理接口地址"
          prop="acceptAdress"
          v-model="form.acceptAdress"
          placeholder="请输入申请并受理接口地址"
        />
        <Field
          label="审批接口地址"
          prop="reviewAdress"
          v-model="form.reviewAdress"
          placeholder="请输入审批接口地址"
        />
        <Field
          label="办结接口地址"
          prop="decideAdress"
          v-model="form.decideAdress"
          placeholder="请输入办结接口地址"
        />

        <el-col :span="12">
          <el-form-item label="选择区域" prop="id">
            <el-cascader
              @change="treeSelected"
              @active-item-change="handleAreaChange"
              :options="treeData"
              change-on-select
              v-model="selectedTreeID"
              placeholder="请选择区域"
            ></el-cascader>
          </el-form-item>
        </el-col>

        <Field
          label="街道"
          prop="address"
          v-model="form.address"
          placeholder="请输入街道"
        />
        <!-- <Field
          label="地区编码"
          prop="areaCode"
          v-model="form.areaCode"
          placeholder="请输入地区编码"
        /> -->
      </el-row>
      <form-buttons @submit="submitForm" />
    </el-form>
  </layout-form>
</template>

<script>
let id = 0;
import form from "@/assets/mixins/form";
export default {
  created() {
    this.$post("/data/area/list", { "query.id": 1431 }, {})
      .then((res) => {
        const data = res.data.result.map((i) => {
          return {
            value: i.id,
            label: i.areaName,
            level: i.areaLevel,
            children: [],
          };
        });
        this.treeData = data;
      })
      .catch((error) => {
        this.$message.error(error.message);
      });
  },
  methods: {
     beforeSubmit(form) {
      form.parentId = this.selectedTreeID.slice().pop();
      return form;
    },
    handleAreaChange(val) {
      this.loading = true;
      if (val.length <= 1) {
        this.$post("/data/area/list", { "query.parentAreaId": val[0] }, {})
          .then((res) => {
            console.log(res);
            for (let area of this.treeData) {
              if (val[0] === area.value) {
                const data = res.data.result.map((i) => {
                  return {
                    value: i.id,
                    label: i.areaName,
                    level: i.areaLevel,
                    children: [],
                  };
                });

                area.children = data;
                break;
              }
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      } else if (val.length <= 2) {
        this.$post("/data/area/list", { "query.parentAreaId": val[1] }, {})
          .then((res) => {
            for (let area of this.treeData) {
              if (val[0] === area.value) {
                for (let temp of area.children) {
                  if (val[1] === temp.value) {
                    const data = res.data.result.map((i) => {
                      return {
                        value: i.id,
                        label: i.areaName,
                        level: i.areaLevel,
                        children: [],
                      };
                    });

                    temp.children = data;
                    break;
                  }
                }
              }
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      } else if (val.length <= 3) {
        this.$post("/data/area/list", { "query.parentAreaId": val[2] }, {})
          .then((res) => {
            for (let area of this.treeData) {
              if (val[0] === area.value) {
                for (let temp of area.children) {
                  if (val[1] === temp.value) {
                    for (let temp1 of temp.children) {
                      if (val[2] === temp1.value) {
                        const data = res.data.result.map((i) => {
                          return {
                            value: i.id,
                            label: i.areaName,
                            level: i.areaLevel,
                           
                          };
                        });

                        temp1.children = data;
                        break;
                      }
                    }
                  }
                }
              }
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      }
      this.loading = false;
    },
    treeSelected(val) {
      console.log(val);

      let id=val.slice().pop();

       console.log(id);

       this.$post("/data/area/view", { "id": [val.slice().pop()] }, {}).then((res) => {
            console.log(res);

            let areaCode=res.data.entity.areaCode;
            let areaName=res.data.entity.areaName;

            this.form.areaCode=areaCode;
            this.form.compartment=areaName;


            console.log("areaCode:"+areaCode);
        
          })
          .catch((error) => {
            this.$message.error(error.message);
          });

      this.form.parentId = val.slice().pop();
    },
  },

  mixins: [form],
  data() {
    return {
      treeData: [],
      selectedTreeID: [],


      areaData: [
        {
          value: "510000000",
          id: "",
          label: "四川省",
        },
      ],
      rules: {
        eventName: [
          { max: 1024, message: "最多只能录入1024个字符", trigger: "blur" },
        ],
        sysCode: [
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        acceptAdress: [
          { max: 256, message: "最多只能录入256个字符", trigger: "blur" },
        ],
        reviewAdress: [
          { max: 256, message: "最多只能录入256个字符", trigger: "blur" },
        ],
        decideAdress: [
          { max: 256, message: "最多只能录入256个字符", trigger: "blur" },
        ],
        createDate: [],
        updateDate: [],
        compartment: [
          { max: 1024, message: "最多只能录入1024个字符", trigger: "blur" },
        ],
        address: [
          { max: 1024, message: "最多只能录入1024个字符", trigger: "blur" },
        ],
        thresholdValue: [
          { max: 256, message: "最多只能录入256个字符", trigger: "blur" },
        ],
        creatorId: [
          { max: 256, message: "最多只能录入256个字符", trigger: "blur" },
        ],
        areaCode: [
          { max: 256, message: "最多只能录入256个字符", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
  },
};
</script>