<template>
  <div class="app-container" style="height: 95vh;">
    <div style=" display: flex;justify-content:space-between; background: #fff;margin:16px 16px 16px;border-radius: 8px;padding: 32px 0 0 0;">
      <el-form ref="form" :model="form" label-width="80px" style="width: 70%">
        <el-form-item label="频道ID">
          <el-input style="width: 400px" v-model="form.chatId"></el-input>
        </el-form-item>
        <el-form-item label="消息类型">
          <el-radio v-model="form.type" label="image">图片</el-radio>
          <el-radio v-model="form.type" label="video">视频</el-radio>
          <el-radio v-model="form.type" label="text">文本</el-radio>
        </el-form-item>
        <el-form-item label="图片">
          <UploadOneImage v-model="form.image"/>
        </el-form-item>
        <el-form-item label="消息文本">
          <el-input style="width: 400px" type="textarea" v-model="form.text"></el-input>
        </el-form-item>
        <el-form-item label="视频">
          <UploadOneImage v-model="form.video"/>
        </el-form-item>

        <div style="display: flex">
          <el-form-item label="是否发送">
            <el-switch v-model="form.isSend"/>
          </el-form-item>
          <el-form-item label="是否置顶">
            <el-switch v-model="form.isTop"/>
          </el-form-item>
        </div>

        <el-form-item>
          <div v-for="(item,index) in form.button" :key="index" style=" margin-bottom: 10px; display: flex;">
            <div v-for="(tow,idex) in item" :key="idex" style="margin-bottom: 10px;margin-right: 10px;display: flex">
              <el-input placeholder="按钮" style="width: 100%" v-model="tow.text"></el-input>
              <el-input placeholder="链接" style="width: 100%" v-model="tow.url"></el-input>
              <i class="el-icon-remove" style="font-size: 28px;cursor: pointer;margin-top: 5px"
                 @click="item.splice(idex,1)"
              ></i>
              <i class="el-icon-circle-plus" style="font-size: 28px;cursor: pointer;margin-top: 5px"
                 v-if="idex==item.length-1&&form.button[index].length <= 2"
                 @click="add_line(index)"
              ></i>
            </div>
          </div>
          <el-button @click="form.button.push([{
          'text': '',
          'url': ''
        }])"
          >添加
          </el-button>
          <!--          <el-button @click="dialogVisible=true"> 预览</el-button>-->
        </el-form-item>
        <el-form-item>
          <el-button v-if="show" type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>

      <div style="width: 30%;display: flex;flex-direction: column;align-items: center;margin-left: -80px">
        <el-image style="width: 100%" v-if="form.type=='image'&&form.image" :src="form.image"></el-image>
        <video v-if="form.type=='video'&&form.video" :src="form.video" class="video" controls>
          <source :src="form.video" type="video/mp4">
        </video>
        <div style="margin: 10px 0;width: 100%" v-html="formatText(form.text)"></div>
        <div v-for="(item,index) in form.button" :key="index"
             style=" margin-bottom: 5px; display: flex;width: 100%"
        >
          <div v-for="(tow,idex) in item" :key="idex"
               style="margin-right: 5px;display: flex;width: 100%"
          >
            <div class="buttom-r">{{ tow.text }}</div>
          </div>
        </div>
      </div>

    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"

    >
      <span>
        <div v-for="(item,index) in form.button" :key="index" style=" margin-bottom: 10px; display: flex;">
          <div v-for="(tow,idex) in item" :key="idex"
               style="margin-bottom: 10px;margin-right: 10px;display: flex;width: 100%"
          >
            <el-button>{{ tow.text }}</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import UploadOneImage from '@/components/UploadOneImage/index.vue'
import { configget, menucheck, sendChannelMessage } from '@/api/data'

export default {
  components: {
    UploadOneImage
  },
  data() {
    return {
      show: true,
      dialogVisible: false,
      form: {
        chatId: '',
        image: '',
        video: '',
        type: '',
        text: '',
        isSend: false,
        isTop: false,
        button: []
      }
    }
  },
  watch: {
    // form.button
  },
  mounted() {
    configget({
      field: 'channel_message'
    })
      .then(res => {
        if (res.data.channel_message.button) {
          this.form = res.data.channel_message
        } else {
          this.form = res.data.channel_message
          this.form.button = [
            [
              {
                'text': '',
                'url': 'https://'
              },
              {
                'text': '',
                'url': 'https://'
              }
            ]]
        }

      })

    menucheck('Message')
      .then(({ code }) => {
        this.show = code === 0
      })
  },
  methods: {
    add_line(index) {
      this.form.button[index].push({ 'text': '', 'url': '' })
    },
    onSubmit() {
      this.form.button = this.form.button.filter(item =>
        item && Array.isArray(item) && item.length > 0
      )
      sendChannelMessage(this.form)
        .then(res => {
          this.$message({
            message: '保存成功！',
            type: 'success'
          })
        })
    },
    // 将文本转换为HTML格式（保留换行）
    formatText(text) {
      if (!text) return ''
      return text
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;')
        .replace(/\n/g, '<br>')
        .replace(/\s/g, '&nbsp;')
    }
  }
}

</script>
<style scoped lang="scss">
/* 或者更具体的选择器 */
.buttom-r {
  width: 100%;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  text-align: center;
  color: #252c25;
  border-radius: 16px;
  background-color: rgba(137, 192, 137, 0.2);
}

.video {
  z-index: 1;
  width: 100% !important;
  max-height: 500px !important;
  display: block !important;
  border-radius: 16px;
}
</style>
