<template>
  <div class="clue-oper-info">
    <CardTitle :data="data" />
    <div :class="`content-wrap ${showMore ? '' : 'pick-up'}`" ref="contentWrap">
      <div class="content">
        <div v-for="item in clue_list" :key="item.title" class="content-item">
          <p class="title">{{ item.title }}</p>
          <div v-for="subItem in item.children" :key="subItem.label" class="info">
            <span class="label">{{ subItem.label }}</span>
            <span class="text">{{ subItem.value }}</span>
          </div>
        </div>
      </div>
      <div class="more" @click.stop="showMore = true" v-if="!showMore">
        <span class="iconfont icon-card-xiala icon"></span>
      </div>
    </div>
    <CardFooter :data="data" />
  </div>
</template>

<script>
import Api from "@RecordCard/api/index";
import { isEmpty } from "@RecordCard/utils/utils";
import Store from "@RecordCard/utils/store.js";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import CardFooter from "@RecordCard/components/Common/CardFooter/index.vue";
export default {
  name: "ClueOperInfo",
  components: { CardFooter, CardTitle },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      showMore: true,
      // clue_dict: [],
      dict: [],
    };
  },
  computed: {
    userName() {
      const { clue_history_record = {} } = this.data;
      const { user_name = "" } = clue_history_record;
      return user_name;
    },
    clue_list() {
      const { clue_history_record = {} } = this.data;
      let temp_obj = (this.dict??[]).reduce((acc, item) => {
        if (isEmpty(acc[item.remark])) acc[item.remark] = [];
        if (clue_history_record[item.key] !== undefined) {
          let value = clue_history_record[item.key];
          //如果是性别，要做下过滤
          if (item.key === "gender") {
            const gender_dict = {
              0: "未知",
              1: "男",
              2: "女",
            };
            value = gender_dict[clue_history_record[item.key]];
          }
          acc[item.remark].push({
            label: item.value,
            value: value,
          });
        }
        return acc;
      }, {});
      const list = Object.keys(temp_obj).reduce((acc, title) => {
        if (temp_obj[title].length > 0) {
          acc.push({
            title,
            children: temp_obj[title],
          });
        }
        return acc;
      }, []);
      this.onHandleShowMore();
      return list;
    },
  },
  methods: {
    onHandleShowMore() {
      this.$nextTick(() => {
        this.showMore = this.$refs.contentWrap.offsetHeight < 200;
      });
    },
    onHandleData(data) {
      const { clue_history_record = {} } = this.data;
      this.userName = clue_history_record?.user_name;
      let temp_obj = data.reduce((acc, item) => {
        if (isEmpty(acc[item.remark])) acc[item.remark] = [];
        if (clue_history_record[item.key] !== undefined) {
          let value = clue_history_record[item.key];
          //如果是性别，要做下过滤
          if (item.key === "gender") {
            const gender_dict = {
              0: "未知",
              1: "男",
              2: "女",
            };
            value = gender_dict[clue_history_record[item.key]];
          }
          acc[item.remark].push({
            label: item.value,
            value: value,
          });
        }
        return acc;
      }, {});
      return Object.keys(temp_obj).reduce((acc, title) => {
        if (temp_obj[title].length > 0) {
          acc.push({
            title,
            children: temp_obj[title],
          });
        }
        return acc;
      }, []);
    },
  },
  created() {
    if (isEmpty(Store.clue_dict)) {
      Api.getClueDict({ name: "clue" }).then((res) => {
        Store.clue_dict = res.data;
        this.dict = Store.clue_dict;
        // this.clue_dict = this.onHandleData(res.data);
      });
    } else {
      this.dict = Store.clue_dict;
      // this.clue_dict = this.onHandleData(Store.clue_dict);
      // this.onHandleShowMore();
    }
  },
};
</script>

<style lang="scss" scoped>
.clue-oper-info {
  width: 100%;
  .card-header-user {
    padding-left: j(7);
    margin-left: $left-right-spacing;
    position: relative;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: j(2);
      height: j(15);
      margin: auto;
      background-color: var(--wl-line-color-dark, #dce1e5);
    }
  }
  .content-wrap {
    position: relative;
    overflow: hidden;
    @extend %flex-direction-column;
    &.pick-up {
      height: j(200);
    }
    .content {
      flex: 1;
      width: 100%;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      font-size: $small-font-size;
      &-item {
        padding: j(10px);
        background: var(--wl-primary-color-lightest, #f7fbfe);
        border-radius: j(10px);
        &:not(:last-child) {
          margin-bottom: j(10);
        }
        .title {
          position: relative;
          padding-left: $left-right-spacing;
          color: var(--wl-text-color-title-1, #0e0e0e);
          font-weight: $font-weight;
          margin-bottom: j(3px);
          &:after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: j(2);
            height: j(12);
            border-radius: j(3);
            background-color: $theme-blue-color;
          }
        }
        .info {
          padding-left: j(4px);
          box-sizing: border-box;
          font-size: j(12px);
          margin-top: j(6px);
          @extend %flex-middle;
          align-items: flex-start;
          .label {
            color: var(--wl-text-color-secondary-2, #919699);
            flex-shrink: 0;
            width: j(70);
          }
          .text {
            flex: 1;
            color: var(--wl-text-color-title-1, #18191a);
            word-break: break-all;
          }
        }
      }
    }
    .more {
      position: relative;
      z-index: 1;
      bottom: j(18);
      width: 100%;
      height: j(18);
      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), #fff);
      @extend %flex-middle-center;
      .icon {
        position: absolute;
        bottom: j(-15);
        color: rgba(145, 150, 153, 1);
        font-size: j(14px);
        cursor: pointer;
      }
    }
  }
}
</style>
