<script>
import { agentEdit, agentAdd } from '@/api/intelligent-agent/list'
import { VEmojiPicker } from 'v-emoji-picker'
import cropper from '@/components/RenderCropper/components/cropper.vue'
import { uploadImage } from '@/api/generatedApi'
import { agentType } from '@/assets/js/utils/utilOptions'
import otherSelect from '@/views/knowledge/detail/components/otherSelect/otherIndex.vue'
export default {
  name: 'info',
  inject: ['dialog', 'fetchAgentList', 'resetList'],
  components: {
    otherSelect,
    VEmojiPicker,
    cropper
  },
  computed() {
    return {
      copyAgent: item => {
        return this.dialog.agent
      }
    }
  },

  watch: {
    'dialog.agent': {
      handler(val) {
        console.log(val)
        this.image = val.image
        this.imageType = val.imageType
        this.background = val.backgroundColor
      },
      immediate: true,
      deep: true
    }
  },

  data() {
    return {
      isImage: '0',
      image: '',
      imageType: '',
      popover: false,
      background: '',
      chooseBack: [
        '#ffffff',
        '#e4fbcc',
        '#eff1f5',
        '#e0eaf0',
        '#fef7c3',
        '#d5f5f6',
        '#d1e9ff',
        '#d1e0ff',
        '#d5d9eb',
        '#ffe4e8'
      ],
      // 应用类型
      agentType,
      rules: {
        appName: [
          { required: true, message: '请输入智能体名称', trigger: 'blur' }
        ],
        description: [
          { required: false, message: '请输入智能体描述', trigger: 'blur' }
        ],
        appType: [
          { required: true, message: '请选择应用类型', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getFiles(file) {
      let form = new FormData()
      form.append('file', file[0])
      uploadImage(form).then(res => {
        if (res) {
          this.dialog.agent.image = res.content.content.imageUrl
          this.dialog.agent.imageType = 'image'
          this.dialog.agent.backgroundColor = '#fff'
          this.popover = false
        }
      })
    },
    resetImage() {
      this.$refs.cropperImage.reset()
    },
    confirmImage() {
      this.$refs.cropperImage.confirm()
    },
    chooseAgentType(item) {
      if (this.dialog.agent.id) {
        return false
      }
      this.$set(this.dialog.agent, 'appType', item.value)
    },

    chooseGround(colors) {
      this.background = colors
    },

    saveEmoji() {
      this.dialog.agent.image = this.image
      this.dialog.agent.imageType = this.imageType
      this.$set(this.dialog.agent, 'backgroundColor', this.background)

      this.popover = false
    },

    /**
     * 提交表单
     */
    async handleSubmit() {
      let api = this.dialog.type === 'edit' ? agentEdit : agentAdd

      // 更新表单之后重新获取列表，然后退出 dialog
      api(this.dialog.agent).then(res => {
        if (res) {
          this.resetList()
          this.fetchAgentList()
          this.dialog.visible = false
        }
      })
    },
    // 调用保存或者编辑
    validateForm() {
      this.$refs.form.validate(valid => {
        if (valid) this.handleSubmit()
      })
    },
    // 选择emoji
    selectEmoji(e) {
      this.image = e.data
      this.imageType = 'emoji'
      // this.dialog.agent.imageType = 'emoji'
    },
    // 选择是否是上传图片
    changeUploadImage(e) {
      // if (e === '0') {
      //   this.dialog.agent.imageType = 'emoji'
      //   this.dialog.agent.imageType = 'emoji'
      // } else {
      //   this.dialog.agent.imageType = 'image'
      // }
    }
  }
}
</script>

<template>
  <div>
    <el-form
      :model="dialog.agent"
      :rules="rules"
      ref="form"
      label-position="top"
      label-width="80px"
    >
      <div class="flex align-items-c ">
        <el-form-item label="名称与图标" prop="imageId" class="mt30">
          <el-popover trigger="click" v-model="popover">
            <div style="width: 28vw">
              <el-radio-group
                v-model="isImage"
                style="width: 100%;"
                class="flex render-group"
                @change="changeUploadImage"
              >
                <el-radio-button label="0" style="flex:1">表情</el-radio-button>
                <el-radio-button label="1" style="flex:1">图片</el-radio-button>
              </el-radio-group>

              <!--              emoji-->
              <div class="mt10" v-if="isImage === '0'">
                <VEmojiPicker @select="selectEmoji" class="emoji " />
                <div
                  v-if="image"
                  class="flex mt10 back-content justify-content-b"
                >
                  <template
                    v-for="item in chooseBack"
                    v-if="imageType === 'emoji'"
                  >
                    <div
                      class="emoji-background"
                      :style="`background:${item}`"
                      @click="chooseGround(item)"
                      :class="item === background ? 'activeBack' : ''"
                    >
                      {{ image }}
                    </div>
                  </template>
                </div>

                <div class="flex align-items-c justify-content-b">
                  <!--                  <el-button size="medium" style="flex:1">取消</el-button>-->
                  <el-button
                    @click="saveEmoji"
                    size="medium"
                    type="primary"
                    style="flex:1"
                    >确认
                  </el-button>
                </div>
              </div>

              <!--              图片切割-->
              <div v-else class="cropper-image">
                <cropper
                  ref="cropperImage"
                  style="height: calc(100% - 40px);"
                  @getFiles="getFiles"
                ></cropper>
                <div class="mt10 flex align-items-c justify-content-b">
                  <el-button
                    class="render-button"
                    style="flex:1"
                    @click="resetImage"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="medium"
                    style="flex:1"
                    @click="confirmImage"
                    >确认</el-button
                  >
                </div>
              </div>
            </div>

            <div
              class="emoji-content"
              slot="reference"
              :style="`background:${dialog.agent.backgroundColor}`"
            >
              <div v-if="dialog.agent.imageType === 'emoji'">
                {{ dialog.agent.image }}
              </div>
              <div
                v-else
                style="width: 100%;height: 100%;overflow: hidden;border-radius: 8px"
              >
                <img
                  :src="dialog.agent.image"
                  alt=""
                  style="width: 100%;height: 100%"
                />
              </div>
            </div>
          </el-popover>
        </el-form-item>
        <el-form-item label="" prop="appName" style="flex:1" class="mt60">
          <el-input v-model="dialog.agent.appName" size="medium" />
        </el-form-item>
      </div>

      <el-form-item label="选择应用类型" required prop="appType">
        <div class="card-container" style="flex-wrap: wrap;">
          <el-card
            v-for="item in agentType"
            :key="item.value"
            shadow="hover"
            class="card-item"
            @click.native="chooseAgentType(item)"
            :class="
              dialog.agent.appType === item.value
                ? 'appTypeActive'
                : dialog.agent.id
                ? 'disabled'
                : ''
            "
          >
            <div
              class="flex align-items-c lineHeight30"
              style="line-height: 30px"
            >
              <div class="" style="flex:1;overflow: hidden">
                <div class="ellipsis flex">
                  <div
                    class="back-theme-color ph5"
                    style="border-radius: 8px;color:#fff"
                  >
                    <svg-icon
                      :icon-class="item.icon"
                      class="app-type-svg"
                    ></svg-icon>
                  </div>
                  <div class="ml10 fw600">
                    {{ item.label }}
                  </div>
                </div>
                <div class="ellipsis fs12 desc-text-color">
                  {{ item.desc }}
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-form-item>

      <el-form-item label="可见权限" prop="visibleRange">
        <otherSelect :model="dialog.agent" propKey="visibleRange"></otherSelect>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          size="medium"
          type="textarea"
          :rows="6"
          v-model="dialog.agent.description"
        />
      </el-form-item>

      <!--      <el-row type="flex" justify="end">-->
      <!--        <el-button type="primary" @click="validateForm">保存</el-button>-->
      <!--        <el-button type="default" @click="dialog.visible = false">取消</el-button>-->
      <!--      </el-row>-->
    </el-form>
  </div>
</template>
<style>
.emoji {
  width: 100% !important;
  height: 100%;
  & #Categories {
    & .category {
      &.active {
        border-bottom: 3px solid var(--color-primary);
      }
    }
  }
  & #InputSearch {
    & .container-search {
      & input {
        outline: none;
        border: 1px solid var(--color-primary);
        background: #fff;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@import '@/assets/sass/renderSass/theme.scss';
.emoji-content {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  cursor: pointer;
  background: #d1e9ff;
}

.back-content {
  flex-wrap: wrap;
}
.emoji-content + .emoji-content {
  //margin-left: 2%;
}
.emoji-background {
  cursor: pointer;
  flex: 0 0 calc(10% - 10px);
  border-radius: 8px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  //margin-left: 10px;
  margin-bottom: 10px;

  &.activeBack {
    border: 1px dashed #676f83;
  }
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; // 确保卡片之间有间距
}
.grid-emojis {
  grid-template-columns: repeat(10, 10%) !important;
}
.appTypeActive {
  border: 1px solid var(--color-primary);
}
.disabled {
  pointer-events: none;
  //cursor: no-drop;
  opacity: 0.5;
}
.app-type-svg {
  font-size: 20px;
}
.card-item {
  cursor: pointer;
  flex: 0 0 calc(33% - 1%); // 每个卡片占据三分之一的宽度，减去间距
  margin-bottom: 10px; // 卡片之间的垂直间距
  margin-left: 1%;
  & .el-card__body {
    padding: 5px 10px;
  }
  & .ellipsis {
    white-space: nowrap; // 确保文本不换行
    overflow: hidden; // 隐藏超出部分
    text-overflow: ellipsis; // 超出部分显示省略号
    max-width: 100%; // 设置最大宽度以限制文本长度
  }
}

.cropper-image {
  width: 100%;
  height: 45vh;
}
</style>
