<!-- 常住人口 -->
<template>
  <view class="card">
    <view class="title">常住人口</view>
    <u--form labelPosition="left" :model="residents" :rules="rules" ref="residentsForm">
      <block value="人口">
        <block value="人员信息" v-for="(item, family_index) in residents.family" :key="'user'+family_index">
          <u-form-item label="姓名" required prop="family.name" borderBottom>
            <u--input v-model="item.name" :readonly="readonly" placeholder="请输入姓名"></u--input>
          </u-form-item>
          <picker mode="date" value="1990-01-01" @change="changebirth_time" :disabled="readonly" :data-index="index">
            <u-form-item labelWidth="auto" label="出生日期" required prop="family.birth_time" borderBottom>
              <u--input :value="item.birth_time" placeholder="请选择出生日期" readonly></u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </picker>
          <picker mode="selector" :range="situationList" @change="changesituation" :disabled="readonly" :data-index="index">
            <u-form-item labelWidth="auto" label="就业情况" required prop="family.situation" borderBottom>
              <u--input :value="situationList[item.situation]" placeholder="请选择就业情况" readonly></u--input>
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </picker>
          <u-form-item labelWidth="auto" label="技能特长" required prop="family" borderBottom>
            <u--input v-model="item.skills" :readonly="readonly" placeholder="请输入技能特长"></u--input>
          </u-form-item>
          <button v-if="!readonly" class="delete"
            @click="removeFamily(index)">删除以上信息</button>
        </block>
        <button v-if="!readonly" class="plus" @click="pushFamily">添加常住人口</button>
      </block>
      <block value="婴幼儿信息">
        <u-form-item labelWidth="auto" label="是否存在学生、婴幼儿" required prop="child" borderBottom>
          <u-radio-group v-model="residents.child" :disabled="readonly" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <block value="是" v-if="residents.child>0" v-for="(item,child_arr_index) in residents.child_arr" :key="'child'+child_arr_index">
          <u-form-item label="年龄" required prop="child_arr.age" borderBottom>
            <u--input v-model="item.age" :readonly="readonly" placeholder="请输入年龄" type="number" maxlength="2"></u--input>
          </u-form-item>
          <block v-if="item.age<4">
            <u-form-item labelWidth="auto" label="喂养方式" borderBottom>
              <u-radio-group v-model="item.feeding" :disabled="readonly" style="margin: 16rpx;">
                <u-radio :customStyle="{marginRight: '16px'}"
                  v-for="(item, index) in [{value:1,label:'母乳'},{value:0,label:'奶粉'}]" :key="index" :label="item.label"
                  :name="item.value">
                </u-radio>
              </u-radio-group>
            </u-form-item>
          </block>
          <block v-else>
            <u-form-item label="年级" borderBottom>
              <u--input v-model="item.grade" :readonly="readonly" placeholder="请输入年级"></u--input>
            </u-form-item>
            <u-form-item labelWidth="auto" label="是否补课" borderBottom>
              <u-radio-group v-model="item.is_lesson" style="margin: 16rpx;" :disabled="readonly">
                <u-radio :customStyle="{marginRight: '16px'}"
                  v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
                  :name="item.value">
                </u-radio>
              </u-radio-group>
            </u-form-item>
            <u-form-item v-if="item.is_lesson>0" label-width="auto" labelPosition="top" label="补课内容" borderBottom>
              <u--textarea v-model="item.lessons" :disabled="readonly" autoHeight placeholder="请输入需要的课程" border="surround"
                count></u--textarea>
            </u-form-item>
          </block>
          <u-form-item label-width="auto" labelPosition="top" label="备注" borderBottom>
            <u--textarea v-model="item.notes" autoHeight :disabled="readonly"placeholder="请输入备注" border="surround" count></u--textarea>
          </u-form-item>
          <button v-if="residents.child_arr.length>1&&!readonly" class="delete"
            @click="removeChildArr(index)">删除以上信息</button>
        </block>
        <button v-if="residents.child>0&&!readonly" class="plus" @click="pushChildArr">添加学生、婴幼儿</button>
      </block>

    </u--form>
  </view>
</template>

<script>
  
    import { Toast } from "../../libs/uniApi"
  export default {
    props:{
      readonly: {
        type: Boolean,
        default: false
      },
      datas: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        situationList: [ "做工地的","厂里打工","公司职员","政府上班","种地","在家赋闲","其他"],
        // 常住人口
        residents: {
          family: [
            // {
            //   name: '',
            //   birth_time: '',
            //   situation: '', // 工作
            //   skills: '', // 技能
            // }
          ],
          child: '', //是否存在婴幼儿
          child_arr: [ //婴幼儿列表
            {
              age: '',
              feeding: '', //喂养方式
              grade: '', //年级
              is_lesson: '', //是否补课
              lessons: '', //课程
              notes: '' //备注
            }
          ],
          // family: [{
          //   name: '超出',
          //   birth_time: '1988-08-08',
          //   situation: 1, // 工作
          //   skills: '豆腐干大锅饭', // 技能
          // }],
          // child: 1, //是否存在婴幼儿
          // child_arr: [ //婴幼儿列表
          //   {
          //     age: '3',
          //     feeding: 1, //喂养方式
          //     grade: '三', //年级
          //     is_lesson: 1, //是否补课
          //     lessons: '数学', //课程
          //     notes: '没有' //备注
          //   }
          // ],
        },
        rules: {
          family: {
            validator: (rule, value, callback ) => {
              if (Array.isArray(value) && value.length > 0) {
                for (let i = 0; i < value.length; i++) {
                  const item = value[i];
                  for (const key in item) {
                    // 检查每个属性值是否为空
                    if (!item[key]&&item[key]!==0) {
                      callback(new Error('以上四项基本信息必填'));
                      return;
                    }
                  }
                }
                // 数组每个属性都不为空，校验通过
                callback();
              } else {
                // 数组为空，校验未通过
                callback(new Error('数组不能为空'));
              }
            },
            trigger: ['change', 'blur']
          },
          child: {
            validator: (rule, value, callback )=>{
              typeof value==='number'?callback():callback('不能为空')
            },
            trigger: ['change', 'blur']
          },
        }
      }
    },
    watch:{
      datas(newValue, oldValue){
        if(this.$props.readonly&&newValue){
          this.residents = this.$props.datas;
          if(!isNaN(this.residents.child))this.residents.child = +this.residents.child;
          this.residents.family.forEach(item=>{
            if(!isNaN(item.situation))item.situation = +item.situation;
          })
          this.residents.child_arr.forEach(item=>{
            if(!isNaN(item.feeding))item.feeding = +item.feeding;
            if(!isNaN(item.is_lesson))item.is_lesson = +item.is_lesson;
          })
        }
      }
    },
    mounted() {
      if(this.$props.readonly){
        this.residents = this.$props.datas;
        if(!isNaN(this.residents.child))this.residents.child = +this.residents.child;
        this.residents.family.forEach(item=>{
          if(!isNaN(item.situation))item.situation = +item.situation;
        })
        this.residents.child_arr.forEach(item=>{
          if(!isNaN(item.feeding))item.feeding = +item.feeding;
          if(!isNaN(item.is_lesson))item.is_lesson = +item.is_lesson;
        })
      }
    },
    methods: {
      async validate() {
        let flag = false;
        if(this.residents.child) this.residents.child_arr.forEach(item=>{
          if(item.age==''||item.age<0||item.age>200) flag = true;
        })
        if(flag){
          Toast('请输入年龄');
          await this.$u.sleep(500);
          return Promise.reject();
        }
        return this.$refs.residentsForm.validate();
      },
      // 选择生日
      changebirth_time(e) {
        let index = e.currentTarget.dataset.index;
        this.residents.family[index].birth_time = e.detail.value;
      },
      // 选择就业
      changesituation(e) {
        let index = e.currentTarget.dataset.index;
        this.residents.family[index].situation = e.detail.value;
      },
      // 添加人口
      pushFamily() {
        this.residents.family.push({
          name: '',
          birth_time: '',
          situation: '', // 工作
          skills: '', // 技能
        })
      },
      // 删除人口
      removeFamily(index) {
        uni.showModal({
          confirmColor: '#f56c6c',
          content: '确定删除吗?',
          success: (res) => {
            if (res.confirm) {
              this.residents.family.splice(index, 1);
            }
          }
        })
      },
      // 添加婴幼儿
      pushChildArr() {
        this.residents.child_arr.push({
          age: '',
          feeding: '', //喂养方式
          grade: '', //年级
          is_lesson: '', //是否补课
          lessons: '', //课程
          notes: '' //备注
        })
      },
      // 删除婴幼儿
      removeChildArr(index) {
        uni.showModal({
          confirmColor: '#f56c6c',
          content: '确定删除吗?',
          success: (res) => {
            if (res.confirm) {
              this.residents.child_arr.splice(index, 1);
            }
          }
        })
      },

    },
  }
</script>

<style lang="scss">
  .card {

    background-color: #fff;

    margin: 28rpx;

    padding: 28rpx;

    margin-top: 0;

    padding-top: 0;

    border-radius: 0 0 14rpx 14rpx;

  }



  .tit {

    margin: 28rpx 28rpx 0 28rpx;

    padding: 28rpx 28rpx 0 28rpx;

    border-radius: 14rpx 14rpx 0 0;

    background-color: $theme-oa-color;

    color: white;

    height: 100rpx;

    display: flex;

    justify-content: space-between;

  }
  .title {
    font-weight: 500;
    font-size: 34rpx;
  
    &::before {
      width: 8rpx;
      height: 26rpx;
      border-radius: 4rpx;
      background-color: #0122c7;
      content: "";
      display: inline-block;
      margin-right: 8rpx;
    }
  }
  .delete {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: #f56c6c;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .plus {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: $theme-oa-color;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }
</style>