
<template>
  <layout-form>
    <el-form
      :model="form"
      :loading="loading"
      :rules="rules"
      size='small'
      label-width='120px'
      ref="form"
    >
      <el-row>
        <el-col :span='12'>
          <el-form-item
            label="区域"
            prop="parentId"
          >
            <el-cascader
              @change='treeSelected'
              :options="treeData"
              change-on-select
              v-model="selectedTreeID"
            ></el-cascader>
          </el-form-item>
        </el-col>

        <Field
          label="区域名称"
          prop="name"
          v-model="form.name"
        />
        <Field
          label="区域级别"
          prop="level"
          v-model="form.level"
          :enumData='dict.level'
          type='select'
        />
        <Field
          label="编码"
          prop="code"
          v-model="form.code"
        />
        <!-- <Field label="负责人" prop="contactsPeople" v-model="form.contactsPeople"/>
        <Field label="负责人电话" prop="contactsMobile" v-model="form.contactsMobile"/> -->
        <Field
          label="子区域数量"
          prop="childSize"
          v-model="form.childSize"
        />
        <Field
          label="子区域的最大ID"
          prop="maxChildId"
          v-model="form.maxChildId"
        />
        <Field
          label="是否启用"
          prop="status"
          v-model="form.status"
          :enumData="dict.status"
          type='select'
        />
        <Field
          label="描述"
          prop="remark"
          v-model="form.remark"
          :span='24'
        />
      </el-row>
      <form-buttons @submit='submitForm' />
    </el-form>
  </layout-form>
</template>

<script>
import form from "@/assets/mixins/form";
import { treeCache } from "@/assets/utils/tree";
export default {
  mixins: [form],
  async created() {
    this.treeData = await treeCache.getTree();
    this.form.parentId = this.query.pid;
  },
  methods: {
    afterRender() {
      this.selectedTreeID = treeCache.getPid(this.form.parentId);
    },
    beforeSubmit(form) {
      form.parentId = this.selectedTreeID.slice().pop();
      return form;
    },
    treeSelected(val) {
      this.form.parentId = val.slice().pop();
    }
  },
  data() {
    return {
      toString: ["level", "status"],
      treeData: [],
      selectedTreeID: [],
      rules: {
        name: [{ required: true, message: "请输入区域名称", trigger: "blur" }],
        remark: [{validator: (rule, val, callback) => {
                                        if (val && val.split("").length > 200) {
                                            return callback(new Error('描述不得超过200字'))
                                        }
                                        callback();
                                    }, trigger: ['change','blur']
                           },
        ],
      }
    };
  }
};
</script>
