<script>
import { agentList, agentDelete, agentDetail } from '@/api/intelligent-agent/list'
import Info from '@/views/intelligent-agent/components/info'

export default {
  name: 'intelligent-agent',
  components: {
    Info
  },
  data() {
    return {
      searchOption: {
        nameLike: '',
        handleSearch: async () => {
          this.fetchAgentList({ nameLike: this.searchOption.nameLike })
        }
      },
      /**
       * @type {{name: string, url: string, id: string}[]}
       */
      list: [],
      dialog: {
        visible: false,
        title: '',
        agent: void 0,
        component: 'info',
        type: "edit"
      }
    }
  },
  provide() {
    return {
      dialog: this.dialog,
      fetchAgentList: this.fetchAgentList
    }
  },
  methods: {
    /**
     * 获取所有的智能体列表
     */
    async fetchAgentList(params = {}) {
      const { content } = await agentList(params)
      this.list = content.content
    },
    /**
     * 编辑智能体
     */
    async handleEditAgent(id) {
      const { content } = await agentDetail(id)
      this.dialog.agent = content.content
      this.dialog.type = "edit"
      this.dialog.title = "编辑智能体"
      // 获取数据之后打开内容详情
      this.dialog.visible = true
    },
    /**
     * 删除智能体
     */
    async handleDeleteAgent(id) {
      // 删除之后重新获取内容
      await agentDelete([id])
      this.fetchAgentList()
    },
    /**
     * 创建智能体
     */
    async createdIntelligentAgent() {
      this.dialog.type = "add"
      // 重置状态，防止其他状态影响导致表单内容异常
      this.dialog.agent = { name: '', description: '' }
      this.dialog.title = "创建智能体"
      this.dialog.visible = true
    },

  },
  created() {
    this.fetchAgentList()
  }
}
</script>

<template>
  <div class="container">

    <!-- header 头部 -->
    <nav v-if="true">
      <div class="flex align-items-c justify-content-b">
        <el-input placeholder="输入智能体名称" clearable v-model="searchOption.nameLike" size="medium" class="underBorder"
          @keydown.enter.native="searchOption.handleSearch">
          <template slot="prepend">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </template>
        </el-input>
        <el-button class="render-button line-button pv8 ph10" icon="el-icon-plus"
          @click="createdIntelligentAgent()">创建智能体</el-button>
      </div>
      <h3>智能体</h3>

    </nav>

    <!-- 智能体的列表 -->
    <article>
      <el-row class="agent-item" :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="listItem in list" :key="listItem.id">
          <el-card>
            <section class="agent-item__info">
              <el-avatar shape="square" :src="listItem.url">{{ listItem.name[0] }}</el-avatar>
              <span>
                <h4>{{ listItem.name }}</h4>
                <p class="dataset-desc">{{ listItem.description }}</p>
              </span>
            </section>

            <el-row type="flex" justify="end">
              <el-button class="default render-button" size="small" icon="el-icon-delete"
                @click.stop="handleDeleteAgent(listItem.id)">删除</el-button>
              <el-button class="render-button line-button" size="small" icon="el-icon-edit"
                @click.stop="handleEditAgent(listItem.id)" type="primary">修改</el-button>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </article>

    <!-- dialog 内容。 现在主要是编辑 -->
    <el-dialog :visible.sync="dialog.visible" :title="dialog.title" :close-on-click-modal="false">
      <component :is="dialog.component" />
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.container {
  font-family: PingFangSC, PingFang SC;

  * {
    transition: all 0.3s ease;
  }
}

.agent-item {


  &>.el-col {
    margin: 7px auto;
  }

  &__info {
    display: flex;

    &>span:nth-child(2) {
      margin-left: 15px;

      &>p {
        margin-top: 10px;
        font-size: 12px;
      }
    }
  }
}

.dataset-desc {

  font-weight: 400;
  font-size: 13px;
  color: #666666;
  line-height: 18px;
  text-align: left;
  font-style: normal;

  height: 35px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
</style>