<template>
  <van-popup
    v-model:show="show"
    :close-on-click-overlay="false"
    position="bottom"
    :style="{ height: '40%' }"
  >
    <div class="van-hairline--bottom">
      <van-row>
        <van-col span="4">
        </van-col>
        <van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
          <span v-if="type === 'comment'">留言</span>
          <span v-else>回复</span>
        </van-col>
        <van-col span="4" @click="closeBtn">
          <div style="padding: 1rem;">
            <van-icon :name="icon_y" size="1.25rem" />
          </div>
        </van-col>
      </van-row>
    </div>
    <div style="background-color: #F7F7F7; font-size: 0.9rem;">
      <p style="color: #777777; padding: 1rem;">您的留言评论将会展示在页面中，请谨慎发表留言评论</p>
      <van-row>
        <van-col span="16">
          <p v-if="type === 'comment'" style="padding: 1rem; padding-top: 0;">请写下你友善的留言：</p>
          <p v-else style="padding: 1rem; padding-top: 0;">回复<span style="color: #0B3A72;">@{{ replayUser }}：</span></p>
        </van-col>
        <van-col span="8">
          <div class="button-primary-comment" @click="submitComment">发送</div>
        </van-col>
      </van-row>
    </div>
    <div>
      <van-cell-group inset>
        <van-field
          v-model="message"
          rows="2"
          autosize
          label=""
          type="textarea"
          maxlength="200"
          :placeholder="type === 'comment' ? '请输入留言内容' : '请输入回复内容'"
          show-word-limit
        />
      </van-cell-group>
    </div>
  </van-popup>
</template>

<script setup>
import icon_y from '@images/y.png'
import { Toast } from 'vant';

import { ref, watch } from 'vue'

const props = defineProps({
  showPopup: Boolean,
  type: String,
  replayUser: String
})

const emit = defineEmits(['on-close', 'on-submit']);

const show = ref(false)
const message = ref('')

const closeBtn = () => {
  emit('on-close', false)
  show.value = false;
}

const submitComment = () => {
  if (message.value) {
    show.value = false;
    emit('on-submit', message.value);
    message.value = '';
  } else {
    Toast.fail('留言不能为空');
  }
}

// 监听弹出框
watch(() => props.showPopup, (v) => {
  show.value = v
})
</script>

<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
  },
  watch: {
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.comment-wrapper {
  color: #999999;
  padding: 1rem;
  line-height: 1.75;

  .reply-wrapper {
    background: #F7F7F7;
    border-radius: 10px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    color: #0B3A72;

    .content {
      color: #222222;
    }
  }
}

.button-primary-comment {
  width: 5rem;
  height: auto;
  text-align: center;
  padding: 0.2rem;
  // margin: 0.25rem;
  font-size: 0.9rem;
  background: @base-color;
  border-radius: 24px;
  border: 1px solid @base-color;
  color: @base-font-color;
  font-weight: bold;
  margin-left: 1rem;
  margin-bottom: 1rem;
}
.text {
  text-align: center;
  padding: 0.7rem;
  margin: 0.8rem;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 24px;
  // border: 1px solid F7F7F7;
  color: #713610;
  background-color: @base-color;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
}
</style>