<template>
  <div class="scriptManagement">
    <div class="wordslist">
      <!-- 话术列表 -->
      <div class="wordscontent" ref="containerRef">
        <div
          class="words"
          v-for="(item, index) in LanguageData"
          :key="index"
          :id="item.language"
        >
          <div class="wordsname">{{ item.language }}</div>
          <div class="wordscontents">
            <div
              class="wordscontentstext"
              v-for="(items, indexs) in item.content"
              :key="index"
            >
              <div>{{ indexs + 1 + ".&nbsp;" + items.content }}</div>
              <div class="wordscontentstextbtn">
                <div style="margin-right: 10px" @click="handleEditor(items.id)">编辑</div>
                <div @click="handleDelete(items.id)">删除</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Languagelist">
      <div class="Languagecontent">
        <!-- 话术添加 -->
        <div class="addwords" @click="wordsAddStatus = true">
          <img class="addwordsimg" src="@/assets/plus.png" />
        </div>
        <!-- 语言选择 -->
        <el-anchor
          class="Languageanchor"
          :container="containerRef"
          direction="vertical"
          type="default"
          :offset="30"
          @click="handleClick"
        >
          <el-anchor-link
            class="anchorLink"
            v-for="(item, index) in getLanguageListData"
            :href="'#' + item.language"
            :title="item.language"
            :key="index"
          />
        </el-anchor>
      </div>
    </div>
  </div>
  <!-- 话术编辑 -->
  <el-drawer v-model="dialogVisible" :with-header="false">
    <div class="dialog-content">
      <div class="dialog-title">话术编辑</div>
      <el-input
        v-model="handletextareadeta.content"
        style="width: 100%; margin-top: 20px"
        :rows="25"
        type="textarea"
        placeholder="请输入话术内容"
      />
      <div class="dialog-btn">
        <div class="dialogSave" @click="handleSave">保存</div>
        <div class="dialogCancel" @click="dialogVisible = false">取消</div>
      </div>
    </div>
  </el-drawer>
  <!-- 话术添加 -->
  <el-drawer v-model="wordsAddStatus" :with-header="false">
    <div class="dialog-content">
      <div class="dialog-title">话术编辑</div>
      <el-select v-model="wordsAddData.language" placeholder="请选择语言">
        <el-option
          v-for="item in LanguageData"
          :key="item.language"
          :label="item.language"
          :value="item.language"
        />
      </el-select>
      <el-input
        v-model="wordsAddData.content"
        style="width: 100%; margin-top: 20px"
        :rows="25"
        type="textarea"
        placeholder="请输入话术内容"
      />
      <div class="dialog-btn">
        <div class="dialogSave" @click="handleSaveWordsAdd">保存</div>
        <div class="dialogCancel" @click="wordsAddStatus = false">取消</div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import {
  getDialogList,
  getLanguageList,
  editDialog,
  deleteDialog,
  addDialog,
} from "@/api/account";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
const refname = ref("");
const containerRef = ref(null);
const getDialogListData = ref([]);
const getLanguageListData = ref([]);
const LanguageData = ref([]);
const wordsAddStatus = ref(false);
const wordsAddData = ref({
  language: "",
  content: "",
});

const handleClick = (e) => {
  e.preventDefault();
};

//数据处理
function mergeArrays(arr1, arr2) {
    const result = [];
    const languages = new Set([...arr1.map(i => i.language), ...arr2.map(i => i.language)]);
    
    for (const lang of languages) {
        const contents = arr1.filter(item => item.language === lang)
                             .map(item => ({ id: item.id, content: item.content }));
        
        result.push({
            language: lang,
            content: contents
        });
    }

    return result;
}

const dialogVisible = ref(false);
const handletextareadeta = ref({});
//添加话术
function handleSaveWordsAdd() {
  console.log("handleSaveWordsAdd",wordsAddData.value);
  if (wordsAddData.value.language === "" || wordsAddData.value.content === "") {
    ElMessage({
      type: "error",
      message: "请填写完整信息",
    });
    return;
  }
  wordsAddStatus.value = false;
  addDialog(wordsAddData.value)
    .then(() => {
      ElMessage({
        type: "success",
        message: "添加成功",
      });
      getLanguageListDataFn();
    })
    .catch(() => {
      ElMessage({
        type: "error",
        message: "添加失败",
      });
    });
}
// 编辑
function handleEditor(id) {
  dialogVisible.value = true;
  handletextareadeta.value = getDialogListData.value.find((item) => item.id === id);
}

// 保存
function handleSave() {
  editDialog({
    id: handletextareadeta.value.id,
    content: handletextareadeta.value.content,
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "保存成功",
      });
      getLanguageListDataFn();
      dialogVisible.value = false;
    })
    .catch(() => {
      ElMessage({
        type: "error",
        message: "保存失败",
      });
    });
}
// 删除
function handleDelete(id) {
  ElMessageBox.confirm("您确认要删除这条话术吗？")
    .then(() => {
      deleteDialog({ id })
        .then(() => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getLanguageListDataFn();
        })
        .catch(() => {
          ElMessage({
            type: "error",
            message: "删除失败",
          });
        });
    })
    .catch(() => {});
}
function getLanguageListDataFn() {
  getDialogList().then((res) => {
    getDialogListData.value = res;
    getLanguageList().then((res) => {
    getLanguageListData.value = res;
    LanguageData.value = mergeArrays(
      getDialogListData.value,
      getLanguageListData.value
    );
    console.log("LanguageData", LanguageData.value);
  });
  });
}
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
onMounted(() => {
  getLanguageListDataFn();
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
</script>

<style scoped>
.scriptManagement {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  display: flex;
}
.wordslist {
  width: 87%;
  height: 97%;
  padding: 1% 1%;
  /* background-color: #00ff40; */
}
.Languagelist {
  height: 97%;
  width: 10%;
  padding: 1% 1% 1% 0%;
  /* background-color: #8d0000; */
}
.wordscontent {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background-color: rgb(243, 243, 243);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  scrollbar-width: none;
}
.Languagecontent {
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background-color: rgb(243, 243, 243);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none; /* 隐藏滚动条 */
}
.addwords {
  width: 100%;
  height: 50px;
  background-color: rgb(226, 226, 226);
  display: flex;
  justify-content: center;
  align-items: center;
}
.addwords:hover {
  background-color: rgb(214, 214, 214);
}
.addwordsimg {
  width: 30px;
  height: 30px;
}
.Language {
  height: 50px;
  width: 100%;
  background-color: rgb(226, 226, 226);
  margin-top: 20px;
}
.words {
  width: 95%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.Languageanchor {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(243, 243, 243);
}
.anchorLink {
  width: 100px;
  height: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  border-radius: 5px;
  margin-left: -0.875vw;
}
.wordsname {
  font-size: 18px;
  color: #c9c9c9;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}
.wordscontents {
  width: 95%;
  /* min-height: 200px; */
  /* background-color: #ffffff; */
  border-radius: 10px;
  margin-left: 30px;
}
.wordscontentstext {
  font-size: 16px;
  color: #7a7a7a;
  line-height: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  word-wrap: break-word;
  word-break: break-all;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wordscontentstextbtn {
  display: flex;
}
.dialog-content {
  width: 100%;
  height: 100%;
}
.dialog-title {
  width: 100%;
  height: 50px;
  font-size: 25px;
  color: #b4b4b4;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.dialog-btn {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.dialogSave {
  width: 45%;
  height: 50px;
  background-color: #d6d6d6;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  font-size: 16px;
  color: #ffffff;
}
.dialogSave:hover {
  background-color: #b4b4b4;
}
.dialogCancel {
  width: 45%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  font-size: 16px;
  color: #d6d6d6;
  border: 1px solid #d6d6d6;
}
.dialogCancel:hover {
  background-color: #e7e6e6;
  color: #ffffff;
}
/* 样式定义 */
</style>
