<template>
  <div class="submit-form">
    <CardTitle :data="filterData" />
    <div class="content">
      <div class="content-html">
        <p v-for="(item, index) in form_list" :key="index" class="content-html-word">
          <span class="content-html-label">{{ item.key }}：</span>
          <span v-html="item.val"></span>
        </p>
      </div>
    </div>
    <div class="card-footer">
      <p class="from-desc" v-if="filterData.desc">{{ filterData.desc }}</p>
      <div class="invite-person">
        <template v-if="need_invite_person">
          <p class="invite-person-name">邀约人：</p>
          <div class="invite-person-user">
            <User :data="filterData.user_info" size="small" />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { isEmpty } from "@RecordCard/utils/utils";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import User from "@RecordCard/components/Common/User/index.vue";
import useGetEmployeeUrl from "@RecordCard/hooks/useGetEmployeeUrl";
export default {
  name: "SubmitEnrollForm",
  components: { CardTitle, User },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      form_list: [],
    };
  },
  computed: {
    filterData() {
      const { mid_up_region = {}, title = "", user_info = {}, state = "" } = this.data;
      const { name } = mid_up_region;
      const { head_img_url = "", nick_name = "", user_id, userid_third } = user_info;
      const subTitle = isEmpty(name) ? "" : `【${name}】`;
      return {
        ...this.data,
        title: `${title}${subTitle}`,
        user_info: {
          desc: "",
          nick_name,
          userid_third,
          href: useGetEmployeeUrl(user_id),
          qrcode_name: state,
          head_img_url,
        },
      };
    },
    need_invite_person() {
      const { user_info = {} } = this.data;
      const { nick_name = "" } = user_info;
      return !isEmpty(nick_name);
    },
  },
  watch: {
    data: {
      handler(val) {
        const { materials = [] } = val;
        const { kvs } = materials[0]?.kv_material;
        this.form_list = kvs;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.submit-form {
  width: 100%;
  .content {
    @include cardContent(false);
    @extend %flex-middle;
    &-html {
      flex: 1;
      word-break: break-all;
      &-word {
        @extend %flex-middle;
        align-items: flex-start;
        .content-html-label {
          flex-shrink: 0;
        }
      }
    }
  }
  .card-footer {
    font-size: j(12);
    padding-bottom: $up-down-spacing;
    .from-desc {
      padding-top: $up-down-spacing;
      @include textEllipsis(1);
    }
    .invite-person {
      min-height: j(10);
      padding-top: $up-down-spacing;
      @extend %flex-middle;
      &-name {
        flex-shrink: 0;
      }
      &-user {
        flex: 1;
      }
    }
  }
}
</style>
