<template>
  <el-form
    v-if="errorMessages.length"
    :model="dynamicForm"
    label-position="left"
    label-width="90px"
  >
    <el-form-item
      v-for="(msg, index) in dynamicForm.inputs"
      :key="msg.path"
      :label="findLabel(msg.path)"
    >
      <el-input v-model="msg.path" :placeholder="msg.path" />
      <small>{{ msg.value }}</small>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      dynamicForm: {
        inputs: []
      },
      res: {
        status: "OK",
        messages: [
          {
            type: "ERROR",
            context: "FIELD",
            path: "tin_number",
            value: "Number incorrect"
          },
          {
            type: "ERROR",
            context: "FIELD",
            path: "documents.guid12345.number",
            value: "Selfie is incorrect"
          },
          {
            type: "ERROR",
            context: "FIELD",
            path: "documents.guid1234567.expired_at",
            code: "sfddsf",
            value: "Expire date is incorrect"
          },
          {
            type: "INFO",
            context: "FIELD",
            path: "last_name",
            value: "PROCESS"
          },
          {
            type: "INFO",
            context: "FIELD",
            path: "place_of_birth",
            value: "PROCESS"
          },
          {
            type: "INFO",
            context: "FIELD",
            path: "source_of_funds",
            value: "PROCESS"
          },
          {
            type: "INFO",
            context: "FIELD",
            path: "addresses.ohUhNk-h-vjgjaQx7-3.address_type",
            value: "PROCESS"
          },
          {
            type: "INFO",
            context: "FIELD",
            path: "addresses.ohUhNk-h-vjgjaQx7-3.country",
            value: "PROCESS"
          }
        ],
        data: [
          {
            verification_status: "NEED_ADDITIONAL_INFO",
            first_name: "MikS",
            middle_name: "Val",
            last_name: "Nokia",
            phone: "639305236773",
            email: "test@gmail.com",
            date_of_birth: "1990-05-30",
            place_of_birth: "Ekb",
            gender: "MALE",
            source_of_funds_id: 10,
            source_of_funds: "Others",
            nationality_id: 171,
            nationality: "Russian",
            addresses: [
              {
                guid: "ohUhNk-h-vjgjaQx7-3",
                country_id: 178,
                country: "Reunion (French)",
                province_id: 13,
                province: "REGION XII (SOCCSKSARGEN)",
                municipality_id: 118,
                municipality: "NUEVA ERA",
                barangay_id: 2200,
                barangay: "Salanap",
                street: "SomeStreet",
                house: "House100",
                zip_code: "2905",
                address_type: "PRESENT"
              }
            ],
            tin_number: "12324-352523",
            documents: [
              {
                guid: "guid12345",
                type_id: 1,
                number: "1234-5466",
                expired_at: "2020-10-23"
              },
              {
                guid: "guid1234567",
                type_id: 2,
                number: "1257-6424",
                expired_at: "2019-08-23"
              }
            ],
            photos: [
              {
                guid: "guid123",
                type: "SIGNATURE"
              }
            ]
          }
        ]
      }
    };
  },
  created() {
    this.dynamicForm.inputs = this.errorMessages;
    this.dynamicForm.inputs.forEach((item) => {
      const label = this.findLabel(item.path);
    });
  },
  methods: {
    findMessage(path, guid) {
      if (guid) {
        path = guid + "." + path;
      }
      const message = this.messages.find((msg) => msg.path === path);
      return message ? message.type : message;
    },
    findLabel(path) {
      path = path.slice(path.lastIndexOf(".") + 1);
      const field = this.IDs[0].find((item) => item.source === path);
      if (field !== undefined) {
        return field.name;
      }
    }
  },
  computed: {
    errorMessages() {
      return this.messages.filter((msg) => msg.type === "ERROR");
    },
    userData() {
      return this.res.data[0];
    },
    messages() {
      return this.res.messages;
    },
    IDs() {
      const ID = [];
      this.userData.documents.forEach((item, index) => {
        // const idType = this.idList.find((id) => id.id === item.type_id)
        //   .long_name;
        const guid = "documents" + "." + item.guid;
        ID[index] = [
          {
            name: "Document",
            value: item.type_id,
            guid: item.guid,
            source: "type_id"
          },
          {
            name: "ID Number",
            value: item.number,
            guid: item.guid,
            source: "number"
          },
          {
            name: "Expire date",
            value: item.expired_at,
            guid: item.guid,
            source: "expired_at"
          },
          {
            name: "TIN Number",
            value: this.userData.tin_number,
            guid: item.guid,
            source: "tin_number"
          }
        ];
      });
      return ID;
    }
  }
};
</script>