<script setup lang="ts">
import { studentSubmitForm, studentSubmitLog } from '../api'
import type { StudentFollow } from '../types'
import type { FormInstance, FormRules } from 'element-plus'
import Icon from '@/components/ConnectionIcon.vue'
import { Check } from '@element-plus/icons-vue'

const props = defineProps<{ data?: StudentFollow }>()

let step = $ref(1)
let logs = $ref<any>([])
watchEffect(() => {
  if (props.data?.follow_flag) {
    step = 3
  }
  if (props.data?.data) {
    if (props.data?.data?.logs && props.data?.data?.logs !== '') {
      console.log(props.data?.data?.logs, '11')
      logs = JSON.parse(props.data?.data?.logs)
    }
  }
})

interface RuleForm {
  name: string
  mobile: string
  gender: string
  experiment_connection_id: any
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  mobile: '',
  gender: '1',
  experiment_connection_id: '',
})

const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: '请输入', trigger: 'blur' }],
  mobile: [{ required: true, message: '请输入', trigger: 'blur' }],
  gender: [{ required: true, message: '请输入', trigger: 'blur' }],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.experiment_connection_id = props.data?.connect_id
      studentSubmitForm(ruleForm).then((res: any) => {
        if (res.code === 0) {
          step = 3
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

let textarea = $ref('')

const handleKeyUp = function (e: any) {
  if (e.key === 'Enter' && textarea !== '') {
    const currentDate = new Date()
    const currentDateTime = currentDate.toLocaleString()
    console.log(currentDateTime)
    logs.push({ time: currentDateTime, text: textarea })
    studentSubmitLog({
      experiment_connection_id: props.data?.connect_id,
      logs: JSON.stringify([{ time: currentDateTime, text: textarea }]),
    }).then()
    textarea = ''
    setTimeout(() => {
      scrollToBottom()
    }, 10)
  }
}

const scrollToBottom = function () {
  const scrollContainer: any = document.getElementById('scrollContainer')
  if (scrollContainer) {
    scrollContainer.scrollTop = 10000
  }
}

const sendChat = function () {
  step = 4
  setTimeout(() => {
    scrollToBottom()
  }, 10)
}
</script>

<template>
  <el-dialog
    class="data-form"
    title="关注"
    :close-on-click-modal="false"
    :style="`width: fit-content; ${step === 4 ? 'background-color: #f1f1f1;' : 'background-color: #fff;'}`"
    @closed="$emit('update:modelValue', false)">
    <div class="step1" v-if="step === 1">
      <div class="connect-item__icon">
        <Icon w="60" h="60" :multiColor="true" class="svg" :name="props.data?.type || '1'"></Icon>
      </div>
      <p>紫荆教育EDU</p>
      <div class="step1-btn">
        <el-button type="success" style="width: 100px" color="rgb(25, 170, 32)" @click="step = 2">关注</el-button>
      </div>
    </div>
    <div class="step2" v-if="step === 2">
      <el-form
        ref="ruleFormRef"
        style="width: 400px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
        center>
        <p style="color: #ccc; font-size: 12px; text-align: center; margin-bottom: 20px">
          注：填写信息保存之后，关注成功
        </p>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio value="1">男</el-radio>
            <el-radio value="2">女</el-radio>
            <el-radio value="0">未知</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: center; width: 100%">
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="step3" v-if="step === 3">
      <div class="step3-t">
        <Icon w="20" h="20" :multiColor="true" class="svg" :name="props.data?.type || '1'"></Icon>
        <div class="e-name">紫荆教育EDU</div>
      </div>
      <div class="step3-btn">
        <el-button disabled :icon="Check" type="primary"> 已关注 </el-button>
        <el-button type="primary" @click="sendChat"> 发消息 </el-button>
      </div>
    </div>
    <div class="step4" v-if="step === 4">
      <div class="chat-box">
        <div class="chat-view" id="scrollContainer">
          <div class="chat-view_left">
            <!-- <div class="view__time">16:29</div> -->
            <div class="view-left_content">
              <div class="view-left__avatar">
                <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/banner-0420.png" />
              </div>
              <div class="view-left__text">
                欢迎关注“清控紫荆EDU”<br /><br />
                紫荆教育以教育为本、坚持国际化品质标准，通过科技创新、专业创新，为企业、院校及个人学习者，提供国际在线学位教育、国际留学、数字经济产业学院整体解决方案等产品服务，为各行各业培养和输送高质量的国际化和产业化人才。
              </div>
            </div>
          </div>
          <div class="chat-view_right" v-for="(item, index) in logs" :key="index">
            <div class="view__time">{{ item.time }}</div>
            <div class="view-right_content">
              <div class="view-right__text">{{ item.text }}</div>
              <div class="view-right__avatar">
                <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/banner-0420.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="chat-input">
          <el-input @keyup="handleKeyUp" v-model="textarea" style="height: 100%" placeholder="请输入" type="textarea" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<style lang="scss">
.data-form {
  // background-color: #f1f1f1;
  .el-dialog__body {
    padding: 0;
  }
}
.button-flex {
  // margin-top: 40px;
  display: flex;
  justify-content: center;
}
.step1 {
  padding: 20px;
  width: 300px;
  .connect-item__icon {
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }
  p {
    text-align: center;
    font-size: 18px;
    color: #333;
  }
  .step1-btn {
    padding: 100px 0 50px;
    text-align: center;
  }
}
.step2 {
  padding: 20px;
}
.step3 {
  padding: 20px;
  width: 300px;
  .step3-t {
    display: flex;
    justify-content: center;
    .e-name {
      margin-left: 5px;
    }
  }
  .step3-btn {
    padding-top: 20px;
    text-align: center;
  }
}
.step4 {
  width: 550px;
  .chat-view {
    height: 300px;
    // background-color: #000;
    border-bottom: 1px solid #ccc;
    overflow-y: scroll;
    padding-bottom: 30px;
    box-sizing: border-box;
    .view__time {
      color: #ccc;
      text-align: center;
      font-size: 12px;
      padding-top: 20px;
    }
    .chat-view_left {
      padding-left: 20px;
      .view-left_content {
        margin-top: 10px;
        display: flex;
        img {
          width: 30px;
          height: 30px;
          border-radius: 3px;
        }
        .view-left__text {
          background-color: #fff;
          margin-left: 10px;
          padding: 10px;
          border-radius: 3px;
          max-width: 300px;
        }
      }
    }
    .chat-view_right {
      padding-right: 20px;
      .view-right_content {
        margin-top: 10px;
        display: flex;
        justify-content: right;
        img {
          width: 30px;
          height: 30px;
          border-radius: 3px;
        }
        .view-right__text {
          background-color: #b7e687;
          margin-right: 10px;
          padding: 10px;
          border-radius: 3px;
          max-width: 300px;
        }
      }
    }
  }
  .chat-input {
    height: 150px;
    padding-top: 5px;
    box-sizing: border-box;
    .el-textarea__inner {
      height: 100%;
      background-color: rgba(0, 0, 0, 0);
      border: none;
      resize: none;
      box-shadow: none;
      &:focus {
        box-shadow: none;
      }
    }
  }
}
</style>
