<template>
  <div class="app-container search-table-box aidex-table">
    <el-card shadow="never" v-loading="loading" element-loading-text="拼命加载中">
      <el-row :gutter="10" class="mb8">
        <el-alert
          title="使用状态为“使用中”的空间才可以被使用，有且仅有一个空间为“使用中”。"
          type="warning"
          class="search_card_desc"
          :closable="false"
          show-icon/>
      </el-row>
      <el-row :gutter="12">
        <div style="height: calc(100vh - 155px)">
          <el-col :xs="12" :md="8" v-for="(item,index) of workspacesSetList">
            <el-card shadow="hover" class="custom-card">
              <div class="switch-container">
                <el-switch :value="item.status===1" @change="handleSwitchChange(item)"/>
              </div>
              <div class="spaces-card" >
                <div class="image-name-row">
                  <image-preview :src="item.workspace.icon_url" :width="50" :height="50"/>
                  <span>{{ item.workspace.name }}</span>
                </div>
                <div class="spaces-div">
                  <span>空间 ID：</span><span class="spaces-div-value">{{ item.workspace.id }}</span>
                </div>
                <div class="spaces-div">
                  <span>空间类型：</span>
                  <span class="spaces-div-value">{{ item.workspace.workspace_type === 'personal' ? '个人空间' : '团队空间' }}</span>
                </div>
                <div class="spaces-div">
                  <span>使用状态：</span>
                  <span v-if="item.status===1" class="spaces-div-value" c style="color: #00afff;">使用中</span>
                  <span v-else class="spaces-div-value" style="color: crimson">未使用</span>
                </div>

                <div class="spaces-div" style="margin-top: 15px">
                  <div class="inner">
                    <span>智能体：</span>
                    <span v-if="item.status===1 && item.botSet!=null" class="spaces-div-value" c style="color: #00afff;">{{item.botSet.simpleBot.bot_name}}</span>
                    <span v-else class="spaces-div-value" style="color: crimson">未设置</span>
                  </div>
                  <div class="inner">
                    <el-button v-if="item.status===1" type="primary" plain size="mini" @click="handleSpacesBot(item)">设置智能体</el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </div>
      </el-row>
    </el-card>


    <el-drawer
      title="选择智能体"
      :visible.sync="openDrawer"
      direction="rtl"
      custom-class="demo-drawer"
      size="56%">
      <div class="demo-drawer__content">
        <el-table :data="botListData" size="small"  v-loading="updateSpacesBotLoading">
          <el-table-column property="name" label="头像" width="80">
            <template slot-scope="scope">
              <image-preview :src="scope.row.simpleBot.icon_url" :width="50" :height="50"/>
            </template>
          </el-table-column>
          <el-table-column property="date" label="智能体标识" width="180">
            <template slot-scope="scope">
              {{ scope.row.simpleBot.bot_id }}
            </template>
          </el-table-column>
          <el-table-column property="name" label="智能体的名称" width="180">
            <template slot-scope="scope">
              {{ scope.row.simpleBot.bot_name }}
            </template>
          </el-table-column>
          <el-table-column property="address" label="智能体的描述" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ scope.row.simpleBot.description }}
            </template>
          </el-table-column>
          <el-table-column property="address" label="最近一次发布" width="150">
            <template slot-scope="scope">
              {{ unixTimestampToReadable(scope.row.simpleBot.publish_time) }}
            </template>
          </el-table-column>
          <el-table-column property="address" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 1" type="success">使用中</el-tag>
              <el-tag v-else type="danger">未使用</el-tag>
            </template>
          </el-table-column>
          <el-table-column property="address" label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-video-play"
                @click="enableBot(scope.row)"
                v-hasPermi="['system:workspacesSet:edit']"
                v-if="scope.row.status === 2"
              >启用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import {listWorkspacesSet, getWorkspacesSet, updateWorkspacesSet,setEnableBot} from "@/api/business/coze/workspacesSet";

export default {
  name: "WorkspacesSet",
  dicts: ['qt_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 空间设置表格数据
      workspacesSetList: [],
      // 是否显示弹出层
      openDrawer: false,
      //智能体列表
      botListData: [],
      form:{},
      //智能体loading
      updateSpacesBotLoading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询空间设置列表 */
    getList() {
      this.loading = true;
      listWorkspacesSet().then(response => {
        this.workspacesSetList = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 切换空间
    handleSwitchChange(item) {
      item.status = item.status === 1 ? 2 : 1;
      console.log('开关状态改变，当前项状态：', item.status);
      console.log('开关状态改变，当前项状态 spacesId：', item.workspace.id);
      this.loading = true
      this.form.spacesId = item.workspace.id;
      console.log("=====>222>");
      console.log("=====>>",this.form.spacesId);
      this.form.status = item.status;
      console.log(this.form);
      console.log("111111");
      updateWorkspacesSet(this.form).then(response => {
        this.$modal.msgSuccess(response.msg);
        this.loading = false
        this.getList();
      }).catch(() => {
        this.loading = false
        this.getList();
        this.$modal.msgError(response.msg);
      });
    },

    handleSpacesBot(item) {
      this.openDrawer = true;
      this.loading = true;
      getWorkspacesSet(item.spacesId).then(response => {
        this.botListData = response.data;
        this.loading = false;
      });
    },
    //格式化时间戳
    unixTimestampToReadable(timestamp) {
      const date = new Date(timestamp * 1000);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    //启用智能体
    enableBot(row){
      this.updateSpacesBotLoading = true;
      console.log(row.simpleBot.bot_id);
      console.log(row.spaceId);
      var data = {
        botId: row.simpleBot.bot_id,
        spaceId: row.spaceId
      };
      setEnableBot(data).then(response => {
        this.$modal.msgSuccess(response.msg);
        this.updateSpacesBotLoading = false;
        this.openDrawer = false;
        this.getList();
      });
    }

  }
};
</script>
<style scoped>
.search_card_desc {
  margin: 0px 0px 20px 0px;
}

.spaces-card {
  padding: 10px 0px 20px 10px;
  height: 220px;

  .image-name-row {
    display: flex;
    align-items: center;
    gap: 15px; /* 图片和名称之间的间距 */
    margin-bottom: 15px;

    span {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .spaces-div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;

    .spaces-div-value {
      color: #8d8d8d;
    }

    .inner:last-child {
      margin-left: auto;
    }
  }
}

.custom-card {
  position: relative;

  .switch-container {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

.demo-drawer__content{
  padding: 20px;
}

</style>
