<template>
  <div class="reply-dialog" :style="{ '--dialogMaxHeight': dialogMaxHeight }">
    <div class="header">
      <div class="avatar-wrap">
        <WlPic class="avatar" :src="avatar_url" />
      </div>
      <span v-if="text" class="text">{{ text }}</span>
      <span v-else class="text">会话中提到 [{{ keyWords.join(",") }}]</span>
    </div>
    <div class="close" @click.stop="onClose">
      <span class="iconfont icon-mobile-ui-close-line icon"></span>
    </div>
    <div class="title">
      {{ title }}
    </div>
    <div class="content">
      <span class="subtitle">{{ subtitle }}</span>
      <div class="scroll">
        <div v-for="(item, index) in list" :key="index">
          <MtReplyCard
            @onSend="onSend(item)"
            @onClickFilePreview="(d) => onClickFilePreview(item, d)"
            @onClickFile="(d) => onClickFile(item, d)"
            @onClickImg="(d) => onClickImg(item, d)"
            @onClickPreview="(d) => onClickPreview(item, d)"
            :data="item"
            :isPc="isPc"
            v-bind="$attrs"
          >
            <span slot="footer-left" v-if="item[sendKey]">已发送该回答</span>
          </MtReplyCard>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
import MtReplyCard from "@packages/components/Material/MtReplyCard/src/index.vue";

/*
 * @Author: yangxin
 * @Date: 2021-09-22 20:21:19
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-06-02 20:26:15
 */
export default {
  name: "MtReplyDialog",
  components: { MtReplyCard, WlPic },
  props: {
    keyWords: {
      type: Array,
      default: () => [],
    },
    text: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    avatar_url: {
      type: String,
      default: "https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg",
    },
    list: {
      type: Array,
      default: () => [],
    },
    subtitle: {
      type: String,
      default: "建议你回复：",
    },
    replyTextKey: {
      type: String,
      default: "text",
    },
    replyPicKey: {
      type: String,
      default: "pic",
    },
    replyFileKey: {
      type: String,
      default: "file",
    },
    isPc: {
      type: Boolean,
      default: false,
    },
    sendKey: {
      type: String,
      default: "send",
    },
    dialogMaxHeight: {
      type: String,
      default: "70%",
    },
  },
  methods: {
    onClickPreview(item, url) {
      this.$emit("onClickPreview", { item, url });
    },
    onClickImg(item, url) {
      this.$emit("onClickImg", { item, url });
    },
    onSend(item) {
      this.$emit("onSend", item);
    },
    onClose() {
      this.$emit("onClose");
    },
    onInput(e, index) {
      const data = this.list;
      data[index][this.replyTextKey] = e;
      this.$emit("list:update", data);
    },
    onClickFile(item, url) {
      this.$emit("onClickFile", { item, url });
    },
    onClickFilePreview(item, url) {
      this.$emit("onClickFilePreview", { item, url });
    },
  },
};
</script>

<style lang="scss" scoped>
.reply-dialog {
  background-color: white;
  padding: j(33) j(10) j(10);
  border-radius: j(15);
  margin: 0 j(17);
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: var(--dialogMaxHeight);
  box-sizing: border-box;
  width: calc(100% - 0.34rem);
  z-index: 3;
  background-image: url("https://wlmvp-1304040775.cos.ap-shanghai.myqcloud.com/frontend/images/xiaowei_reply_recommend.png");
  background-size: cover;
  .header {
    width: fit-content;
    top: 0;
    left: j(-10.5);
    transform: translateY(-50%);
    z-index: 10;
    position: absolute;
    @extend %flex-middle;
    .avatar-wrap {
      width: j(54);
      height: j(54);
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      left: j(10);
      padding: j(2);
      background-image: linear-gradient(
        to right,
        rgb(55, 170, 248) 0%,
        rgb(55, 170, 248) 30%,
        rgb(55, 170, 248) 60%,
        rgb(203, 232, 255) 90%
      );
      .avatar {
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .text {
      padding: j(7) j(13);
      border-top-right-radius: 999px;
      border-bottom-right-radius: 999px;
      background-image: linear-gradient(
        to right,
        rgb(232, 249, 255) 0%,
        rgb(221, 244, 255) 30%,
        rgb(232, 249, 255) 70%
      );
      font-size: j(14);
      line-height: j(24);
      color: #1c9fff;
      @extend %flex-middle-center;
    }
  }
  .close {
    width: j(25);
    height: j(25);
    border-radius: 50%;
    background-color: white;
    color: #c1c1c1;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(30%, -30%);
    flex-shrink: 0;
    cursor: pointer;
    @extend %flex-middle-center;
    .icon {
      font-size: j(16);
      font-weight: 800;
    }
  }
  .title {
    padding: j(8) j(10);
    border: j(1) solid rgba(28, 159, 255, 0.3);
    box-sizing: border-box;
    border-radius: j(10);
    color: #1c9fff;
    flex-shrink: 0;
    @include textEllipsis(4);
    overflow: auto;
  }
  .content {
    margin-top: j(18);
    overflow: auto;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;

    .subtitle {
      border-left: j(3) solid #1c9fff;
      padding-left: j(6);
      font-size: j(14);
      // line-height: j(24);
      font-weight: 550;
      flex-shrink: 0;
    }
    .scroll {
      // max-height: j(300);
      overflow: auto;
      flex: 1;
      height: 1005;
    }
  }
}
</style>
