<template>
  <div class="result-container">
    <h2 class="title search-title">幼儿信息查询</h2>
    <el-form
      :model="queryParams"
      ref="queryForm"
      label-width="70px"
      class="search-form"
    >
      <el-row :gutter="10">
        <el-col :xs="24" :ms="12" :md="5">
          <el-form-item label="幼儿姓名" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入幼儿姓名"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="12" :md="5">
          <el-form-item label="联系方式" prop="phone">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入联系方式"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :ms="12" :md="4">
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery"
              >查询</el-button
            >
            <el-button size="mini" @click="cancel">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="main" v-show="hide">
      <h2 class="title">幼儿信息维护</h2>
      <div class="result-form">
        <!-- <p class="form-title">提交核对幼儿信息</p> -->
        <el-tabs type="border-card">
          <el-tab-pane label="幼儿基础信息">
            <el-row :gutter="15">
              <el-form
                class="form"
                ref="form"
                :rules="rules"
                :model="form"
                label-width="110px"
              >
                <el-col :xs="24" :sm="12">
                  <el-form-item label="家长联系方式" prop="phone">
                    <el-input
                      v-model="form.phone"
                      placeholder="请输入联系方式"
                      :disabled="hide"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="幼儿姓名" prop="name">
                    <el-input
                      v-model="form.name"
                      placeholder="请输入幼儿姓名"
                      :disabled="hide"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="英文名" prop="enName">
                    <el-input
                      v-model="form.enName"
                      placeholder="请输入联系方式"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="小名" prop="infantName">
                    <el-input
                      v-model="form.infantName"
                      placeholder="请输入联系方式"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="性别" prop="xb">
                    <el-select v-model="form.xb" placeholder="请选择性别">
                      <el-option
                        v-for="dict in sexOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="民族" prop="mz">
                    <el-select v-model="form.mz" placeholder="请选择民族">
                      <el-option
                        v-for="dict in mzOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="证件号码" prop="zjhm">
                    <el-input
                      v-model="form.zjhm"
                      placeholder="请输入证件号码"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="幼儿出生日期" prop="csrq">
                    <el-date-picker
                      clearable
                      size="small"
                      v-model="form.csrq"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择幼儿出生日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="出生地" prop="birthProvincename">
                    <v-distpicker
                      v-model="form.birthProvincename"
                      :placeholders="placeholders"
                      :province="diglogForm.province"
                      :city="diglogForm.city"
                      :area="diglogForm.area"
                      @selected="onSelected_brith"
                    ></v-distpicker>
                    <el-input v-model="form.birthProvince" v-if="false" />
                    <el-input v-model="form.birthCity" v-if="false" />
                    <el-input v-model="form.birthArea" v-if="false" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="户口地" prop="registeredProvincename">
                    <v-distpicker
                      v-model="form.registeredProvincename"
                      :placeholders="placeholders"
                      :province="diglogForm1.province"
                      :city="diglogForm1.city"
                      :area="diglogForm1.area"
                      @selected="onSelected_registered"
                    ></v-distpicker>
                    <el-input v-model="form.registeredProvince" v-if="false" />
                    <el-input v-model="form.registeredCity" v-if="false" />
                    <el-input v-model="form.registeredArea" v-if="false" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="现住址" prop="addrProvincename">
                    <v-distpicker
                      v-model="form.addrProvincename"
                      :placeholders="placeholders"
                      :province="diglogForm2.province"
                      :city="diglogForm2.city"
                      :area="diglogForm2.area"
                      @selected="onSelected_addr"
                    ></v-distpicker>
                    <el-input v-model="form.addrProvince" v-if="false" />
                    <el-input v-model="form.addrCity" v-if="false" />
                    <el-input v-model="form.addrArea" v-if="false" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="详细地址" prop="addrDetail">
                    <el-input
                      v-model="form.addrDetail"
                      placeholder="请输入详细地址"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="曾就读园" prop="everSchool">
                    <el-input
                      v-model="form.everSchool"
                      placeholder="请输入曾经就读幼儿园"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="学习英语" prop="learnEnglish">
                    <el-radio-group v-model="form.learnEnglish">
                      <el-radio
                        v-for="dict in ynOptions"
                        :key="dict.dictValue"
                        :label="dict.dictValue"
                        >{{ dict.dictLabel }}</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="入园渠道" prop="source">
                    <el-select
                      v-model="form.source"
                      placeholder="请选择入园渠道"
                    >
                      <el-option
                        v-for="dict in sourceOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="状态">
                    <el-radio-group v-model="form.status">
                      <el-radio
                        v-for="dict in statusOptions"
                        :key="dict.dictValue"
                        :label="dict.dictValue"
                        >{{ dict.dictLabel }}</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="第一语言" prop="firstLanguage">
                    <el-input
                      v-model="form.firstLanguage"
                      placeholder="请输入第一语言"
                      maxlength="2"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="第二语言" prop="seconderLanguage">
                    <el-input
                      v-model="form.seconderLanguage"
                      placeholder="请输入第二语言"
                      maxlength="2"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="其他语言" prop="otherLanguage">
                    <el-input
                      v-model="form.otherLanguage"
                      placeholder="请输入其他语言"
                    />
                  </el-form-item>
                </el-col>

                <div></div>
              </el-form>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="监护人信息">
            <el-form ref="form_jhr" :model="form_jhr" label-width="110px">
              <el-row :gutter="15">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="父亲姓名" prop="fathername">
                    <el-input
                      v-model="form_jhr.fathername"
                      placeholder="请输入父亲姓名"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="联系电话" prop="fphone">
                    <el-input
                      v-model="form_jhr.fphone"
                      placeholder="请输入父亲联系电话"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="办公电话" prop="foffphone">
                    <el-input
                      v-model="form_jhr.foffphone"
                      placeholder="请输入父亲办公电话"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="母亲姓名" prop="mothername">
                    <el-input
                      v-model="form_jhr.mothername"
                      placeholder="请输入父亲姓名"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="联系电话" prop="mphone">
                    <el-input
                      v-model="form_jhr.mphone"
                      placeholder="请输入母亲姓名"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="办公电话" prop="moffphone">
                    <el-input
                      v-model="form_jhr.moffphone"
                      placeholder="请输入母亲办公电话"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="其他联系人姓名" prop="grandfathername">
                    <el-input
                      v-model="form_jhr.grandfathername"
                      placeholder="请输入其他联系人姓名"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="与幼儿关系" prop="gfgx">
                    <el-select
                      v-model="form_jhr.gfgx"
                      placeholder="请选择与幼儿关系"
                      @input="onInput()"
                    >
                      <el-option
                        v-for="dict in jtgxOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="联系电话" prop="gfphone">
                    <el-input
                      v-model="form_jhr.gfphone"
                      placeholder="请输入联系电话"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="办公电话" prop="gfoffphone">
                    <el-input
                      v-model="form_jhr.gfoffphone"
                      placeholder="请输入办公电话"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="住址" prop="gfaddress">
                    <el-input
                      v-model="form_jhr.gfaddress"
                      placeholder="请输入住址"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :xs="24" :sm="12">
                  <el-form-item label="其他联系人姓名" prop="grandmothername">
                    <el-input
                      v-model="form_jhr.grandmothername"
                      placeholder="请输入其他联系人姓名"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="与幼儿关系" prop="gmgx">
                    <el-select
                      v-model="form_jhr.gmgx"
                      placeholder="请选择与幼儿关系"
                      @input="onInput()"
                    >
                      <el-option
                        v-for="dict in jtgxOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="联系电话" prop="gmphone">
                    <el-input
                      v-model="form_jhr.gmphone"
                      placeholder="请输入联系电话"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12">
                  <el-form-item label="办公电话" prop="gmoffphone">
                    <el-input
                      v-model="form_jhr.gmoffphone"
                      placeholder="请输入办公电话"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="住址" prop="gmaddress">
                    <el-input
                      v-model="form_jhr.gmaddress"
                      placeholder="请输入住址"
                      @input="onInput()"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">提 交</el-button>
          <el-button @click="cancelSub">取 消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getChild_query, updateChild_jz } from "@/api/benyi/child";
import {
  getContactpeople,
  updateContactpeople_jz,
} from "@/api/benyi/contactpeople";

import { listClass } from "@/api/system/class";
import { getToken } from "@/utils/auth";
//导入省市区三级联动库
import VDistpicker from "v-distpicker";

export default {
  name: "result",
  data() {
    return {
      activeNames: ["1"],
      placeholders: {
        province: "请选择省",
        city: "请选择市",
        area: "请选择区",
      },
      diglogForm: {
        province: null,
        city: null,
        area: null,
      },
      diglogForm1: {
        province: null,
        city: null,
        area: null,
      },
      diglogForm2: {
        province: null,
        city: null,
        area: null,
      },
      hide: false,
      ishf: true,
      hfrn: "",
      yzzs: "",
      tynrcontent: "",
      href_tynr: "",
      // 是否显示弹出层
      open: false,
      // 幼儿信息表格数据
      childList: [],
      // 性别状态字典
      sexOptions: [],
      // 状态数据字典
      statusOptions: [],
      // 性别状态字典
      sexOptions: [],
      // 民族字典
      mzOptions: [],
      //是否字典
      ynOptions: [],
      //入园渠道
      sourceOptions: [],
      //班级
      classOptions: [],
      //家庭关系
      jtgxOptions: [],
      // 查询参数
      queryParams: {
        name: undefined,
        phone: undefined,
      },
      // 表单参数
      form: {
        // csrq: [
        //   { required: true, message: "出生日期不能为空", trigger: "blur" },
        // ],
      },
      rules: {
        csrq: [
          { required: true, message: "幼儿生日不能为空", trigger: "blur" },
        ],
      },  
      // 监护人表单参数
      form_jhr: {},
    };
  },
  created() {},
  components: {
    //省市区三级联动全局组件
    VDistpicker,
  },
  methods: {
    // 强制输入刷新
    onInput() {
      this.$forceUpdate();
    },

    // 字典翻译
    classFormat(row, column) {
      // return this.selectDictLabel(this.classOptions, row.classid);
      var actions = [];
      var datas = this.classOptions;
      Object.keys(datas).map((key) => {
        if (datas[key].bjbh == "" + row.classid) {
          actions.push(datas[key].bjmc);
          return false;
        }
      });
      return actions.join("");
    },
    /** 查询幼儿信息 */
    getInfo() {
      getChild_query(this.queryParams).then((response) => {
        if (response.code == "200") {
          this.hide = true;
          this.childList = response.rows;
          this.form = response.data;
          this.sexOptions = response.sexAll;
          this.statusOptions = response.statusAll;
          this.mzOptions = response.mzAll;
          this.ynOptions = response.ynAll;
          this.sourceOptions = response.sourceAll;
          this.jtgxOptions = response.jtgxAll;
          this.form_jhr.fathername =
            response.data.byChildContactpeople.fathername;
          this.form_jhr.mothername =
            response.data.byChildContactpeople.mothername;
          this.form_jhr.fphone = response.data.byChildContactpeople.fphone;
          this.form_jhr.foffphone =
            response.data.byChildContactpeople.foffphone;
          this.form_jhr.mphone = response.data.byChildContactpeople.mphone;
          this.form_jhr.moffphone =
            response.data.byChildContactpeople.moffphone;
          this.form_jhr.grandfathername =
            response.data.byChildContactpeople.grandfathername;
          this.form_jhr.gfgx = response.data.byChildContactpeople.gfgx;
          this.form_jhr.gfphone = response.data.byChildContactpeople.gfphone;
          this.form_jhr.gfoffphone =
            response.data.byChildContactpeople.gfoffphone;
          this.form_jhr.gfaddress =
            response.data.byChildContactpeople.gfaddress;
          this.form_jhr.grandmothername =
            response.data.byChildContactpeople.grandmothername;
          this.form_jhr.gmgx = response.data.byChildContactpeople.gmgx;
          this.form_jhr.gmoffphone =
            response.data.byChildContactpeople.gmoffphone;
          this.form_jhr.gmaddress =
            response.data.byChildContactpeople.gmaddress;
          this.form_jhr.gmoffphone =
            response.data.byChildContactpeople.gmoffphone;
          this.form_jhr.createTime =
            response.data.byChildContactpeople.createTime;

          this.diglogForm.province = response.data.birthProvincename;
          this.diglogForm.city = response.data.birthCityname;
          this.diglogForm.area = response.data.birthAreaname;

          this.diglogForm1.province = response.data.registeredProvincename;
          this.diglogForm1.city = response.data.registeredCityname;
          this.diglogForm1.area = response.data.registeredAreaname;

          this.diglogForm2.province = response.data.addrProvincename;
          this.diglogForm2.city = response.data.addrCityname;
          this.diglogForm2.area = response.data.addrAreaname;
        }
      });
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updateChild_jz(this.form).then((response) => {
              if (response.code === 200) {
                this.form_jhr.childid = this.form.id;
                updateContactpeople_jz(this.form_jhr).then((response) => {
                  if (response.code === 200) {
                    this.msgSuccess("修改成功");
                    // this.hide = false;
                  }
                });
                this.hide = false;
              }
            });
          }
        }
      });
    },
    // 取消按钮
    cancelSub() {
      this.hide = false;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      if (
        this.queryParams.name == undefined ||
        this.queryParams.name.trim() == ""
      ) {
        this.msgError("请输入幼儿姓名");
        return false;
      }
      if (
        this.queryParams.phone == undefined ||
        this.queryParams.phone.trim() == ""
      ) {
        this.msgError("请输入联系方式");
        return false;
      }
      this.getInfo();
    },
    //所在省市区触发联动方法
    onSelected_brith(data) {
      if (
        data.province.code == undefined ||
        data.city.code == undefined ||
        data.area.code == undefined
      ) {
        this.form.birthProvincename = undefined;
      } else {
        this.form.birthProvincename = data.province.value;
        this.form.birthProvince = data.province.code;
        this.form.birthCityname = data.city.value;
        this.form.birthCity = data.city.code;
        this.form.birthAreaname = data.area.value;
        this.form.birthArea = data.area.code;
      }
    },
    //户口所在地
    onSelected_registered(data) {
      if (
        data.province.code == undefined ||
        data.city.code == undefined ||
        data.area.code == undefined
      ) {
        this.form.registeredProvincename = undefined;
      } else {
        this.form.registeredProvincename = data.province.value;
        this.form.registeredProvince = data.province.code;
        this.form.registeredCityname = data.city.value;
        this.form.registeredCity = data.city.code;
        this.form.registeredAreaname = data.area.value;
        this.form.registeredArea = data.area.code;
      }
    },
    //住址所在地
    onSelected_addr(data) {
      if (
        data.province.code == undefined ||
        data.city.code == undefined ||
        data.area.code == undefined
      ) {
        this.form.addrProvincename = undefined;
      } else {
        this.form.addrProvincename = data.province.value;
        this.form.addrProvince = data.province.code;
        this.form.addrCityname = data.city.value;
        this.form.addrCity = data.city.code;
        this.form.addrAreaname = data.area.value;
        this.form.addrArea = data.area.code;
      }
    },
    // 返回按钮
    cancel() {
      this.queryParams = {
        name: undefined,
        phone: undefined,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.result-container {
  padding: 30px 15px 0;
  .search-title {
    font-size: 22px;
    text-align: center;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 15px;
    margin: 0 auto 20px;
  }
  .main {
    padding-top: 10px;
    border-top: 1px solid #eee;
    .title {
      text-align: center;
      font-size: 18px;
    }
    .dialog-footer {
      margin: 10px auto 40px;
      text-align: center;
    }
    .el-select {
      width: 100%;
    }
    .result-form {
      .form-title {
        display: flex;
        align-items: center;
        text-align: left;
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        &::before {
          content: "";
          width: 3px;
          height: 14px;
          background: #0a56ca;
          display: inline-block;
          margin: 1px 5px 0 0;
        }
      }
      .form {
        // width: 500px;
        margin: 30px auto 0;
      }
    }
    .result-info {
      .title {
        display: flex;
        align-items: center;
        text-align: left;
        font-size: 14px;
        font-weight: 700;
        &::before {
          content: "";
          width: 3px;
          height: 14px;
          background: #0a56ca;
          display: inline-block;
          margin: 1px 5px 0 0;
        }
      }
      .info {
        padding: 0 20px;
      }
    }
  }
}
@media screen and (max-width: 768.89px) {
  .result-container {
    .search-form {
      div {
        margin-bottom: 5px;
      }
    }
    .main {
      .result-form {
        .form {
          width: 100%;
        }
      }
      ::v-deep .distpicker-address-wrapper {
        select {
          width: 100%;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>