<template>
  <div>
    <el-dialog
      title="宝宝信息"
      custom-class="customer-dialog baby-info-dialog"
      :visible.sync="visible"
      :close-on-click-modal="false"
      @close="cancel"
      width="636px"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="(item,index) in fieldsList"
          :key="index"
          :label="item.form.name||item.bName"
          :name="`${index}`"
        />
      </el-tabs>
      <el-form
        v-if="fieldsList[activeName]"
        ref="form"
        :model="fieldsList[activeName].form"
        label-width="122px"
        :inline="true"
        :disabled="true"
      >
        <el-form-item label="宝宝名称：" prop="name">
          <el-input
            type="text"
            maxlength="10"
            show-word-limit
            v-model="fieldsList[activeName].form.name"
            style="width: 160px;"
          />
        </el-form-item>
        <el-form-item label="宝宝生日：" prop="birthDay">
          <el-date-picker
            style="width: 160px;"
            v-model="fieldsList[activeName].form.birthDay"
            type="date"
          />
        </el-form-item>
        <el-form-item label="宝宝性别：" prop="sex">
          <el-select v-model="fieldsList[activeName].form.sex" style="width: 160px;">
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="宝宝身高（cm）：" prop="height">
          <el-input
            v-model="fieldsList[activeName].form.height"
            type="text"
            show-word-limit
            style="width: 160px;"
          />
        </el-form-item>
        <el-form-item label="宝宝体重（kg）：" prop="weight">
          <el-input
            v-model="fieldsList[activeName].form.weight"
            type="text"
            show-word-limit
            style="width: 160px;"
          />
        </el-form-item>
        <el-form-item label="鞋码（码）：" prop="shoeSize">
          <el-input
            v-model="fieldsList[activeName].form.shoeSize"
            type="text"
            show-word-limit
            style="width: 160px;"
          />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'BabyinfoDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    childFieldsList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data () {
    return {
      visible: false,
      fieldsList: [],
      activeName: '0',
    };
  },
  watch: {
    dialogVisible (n, o) {
      this.visible = n;
      if (n) {
        const filterObj = {
          '宝宝名称': 'name',
          '宝宝性别': 'sex',
          '宝宝生日': 'birthDay',
          '宝宝身高(cm)': 'height',
          '宝宝体重(kg)': 'weight',
          '鞋码(码)': 'shoeSize',
        };
        const fieldList = this.childFieldsList.map(el => {
          el.form = {
            name: '',
            sex: '',
            birthDay: '',
            height: '',
            weight: '',
            shoeSize: '',
          };
          el.sonFields.map(field => (el.form[filterObj[field.fieldName]] = field.fieldValue));
          return el;
        });
        this.fieldsList = JSON.parse(JSON.stringify(fieldList));
      }
    },
  },
  methods: {
    cancel () {
      this.$emit('update:dialogVisible', false);
    },
  },
};

</script>
<style lang="less">
// 去除dailog-footer上边框
.customer-dialog .el-dialog__footer {
  padding-top: 0;
  padding-bottom: 20px;
  border-top: none !important;
}
.customer-dialog .el-dialog__body {
  padding-bottom: 0;
  .el-tabs__header {
    margin-bottom: 30px;
    .el-tabs__item {
      max-width: 190px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .el-form-item__label {
    padding-right: 0;
  }
}
.customer-dialog.baby-info-dialog .el-dialog__body{
  padding-top: 5px;
  padding-bottom: 30px;
  .el-form--inline{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    >div{
      margin: 0;
    }
  }
}
</style>
