<template>
  <div class="submit-form" @click="onClickSubmitForm">
    <CardTitle :data="filterData" />
    <div :class="`content ${clickBool ? 'curosr' : ''}`">
      <div class="content-html">
        <div v-for="(item, index) in form_list" :key="index" class="content-html-item">
          <p class="content-html-item-label">{{ item.key }}：</p>
          <p class="content-html-item-value" v-html="item.val"></p>
        </div>
      </div>
      <p class="more-container" v-if="need_arrow">
        <WlPic :src="require('@RecordCard/assets/images/arrow.png')" />
      </p>
    </div>
    <CardFooter :data="filterData" />
  </div>
</template>

<script>
import { isEmpty } from "@RecordCard/utils/utils";
import WlPic from "weiling-mobile-ui/lib/WlPic";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
export default {
  name: "SubmitForm",
  components: { WlPic, CardFooter, CardTitle },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      form_list: [],
      need_arrow: true,
    };
  },
  computed: {
    //是否可点击
    clickBool() {
      return this.form_list.length > 5 && this.data.history_type === "ADD_FORM";
    },
    filterData() {
      const { mid_up_region = {}, title = "", user_info = {}, state = "" } = this.data;
      const { name } = mid_up_region;
      const { head_img_url = "", nick_name = "", userid_third } = user_info;
      const subTitle = isEmpty(name) ? "" : `【${name}】`;
      return {
        ...this.data,
        title: `${title}${subTitle}`,
        user_info: {
          desc: "",
          nick_name,
          userid_third,
          qrcode_name: state,
          head_img_url,
        },
      };
    },
  },
  methods: {
    onClickSubmitForm() {
      if (this.clickBool) this.$emit("onClickSubmitForm", this.data);
    },
  },
  watch: {
    data: {
      handler(val) {
        const { materials = [] } = val;
        const { kvs, count } = materials[0]?.kv_material;
        this.form_list = kvs;
        this.need_arrow = count > 5;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.submit-form {
  width: 100%;
  .content {
    @include cardContent(false);
    @extend %flex-middle;
    &.curosr {
      cursor: pointer;
    }
    &-html {
      flex: 1;
      word-break: break-all;
      &-item {
        color: var(--wl-text-color-primary-2, #494b4d);
        &:not(:last-child) {
          margin-bottom: j(5);
        }
        &-label {
          margin-bottom: j(2);
        }
        &-value {
          font-weight: 500;
        }
      }
    }
    .more-container {
      width: j(20px);
      height: j(20px);
      border-radius: 50%;
      background-color: white;
      border: 1px solid #e3e3e3;
      margin: 0 j(10);
    }
  }
}
</style>
