<template>
  <div>
    <div class="btn-container">
      <el-button type="primary" @click="openDialog">配置语料</el-button>
    </div>
    <el-table :data="selectList" height="260">
      <el-table-column
        label="语料名称"
        align="center"
        prop="corpusName"
        width="150"
        show-overflow-tooltip />
      <el-table-column
        label="语音文本"
        align="center"
        prop="textContent"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column label="音色" align="center" prop="voiceType" />
      <el-table-column label="语种" align="center" prop="dialect" />
    </el-table>

    <el-dialog title="选择语料" v-model="open" width="700px">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="语料名称" prop="corpusName">
          <el-input
            v-model="queryParams.corpusName"
            placeholder="请输入语料名称"
            clearable
            @keyup.enter="getList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="tableRef"
        :data="corpusList"
        :tree-props="{ checkStrictly: true }"
        :row-key="rowKey"
        :height="400"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          v-show="false"
          :selectable="selectable"
        />
        <el-table-column
          label="语料名称"
          align="center"
          prop="corpusName"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          label="语音文本"
          align="center"
          prop="textContent"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column label="音色" align="center" prop="voiceType" />
        <el-table-column label="语种" align="center" prop="dialect" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { listCorpus, getBatchCorpus } from "@/api/vi/corpus";

const props = defineProps({
  type: {
    type: String,
    default: "1",
  },
  corpusIds: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(["updateSelectRows"]);

const selectList = ref([]);
const corpusList = ref([]);

const open = ref(false);
const openDialog = () => {
  open.value = true;
  setTimeout(() => {
    toggleRowSelection();
  }, 100);
};

const toggleRowSelection = () => {
  if (selectList.value.length > 0) {
    corpusList.value.forEach((row) => {
      selectList.value.forEach((item) => {
        if (
          item.parentId + (item?.corpusId || "") ===
          row.parentId + (row?.corpusId || "")
        ) {
          tableRef.value.toggleRowSelection(row, true);
        }
      });
    });
  }
};

const rowKey = (row) => {
  return row.parentId + (row?.corpusId || "");
};

const selectable = (row) => {
  if (row.continuous + "" === "0") {
    return false;
  } else {
    return true;
  }
};

const queryParams = ref({
    pageNum: 1,
    pageSize: 100000,
    type: "TEST",
    corpusName: '',
    continuous: 1
})
const getList = () => {
  if (props.type === "1") {
    queryParams.value.continuous = 1
    listCorpus(queryParams.value)
      .then((response) => {
        corpusList.value = response.rows;
      })
      .catch((err) => {});
  } else {
    queryParams.value.continuous = 0
    getBatchCorpus(queryParams.value)
      .then((response) => {
        corpusList.value = response.rows;
      })
      .catch((err) => {});
  }
};

const resetForm = () => {
  queryParams.value.corpusName = ''
  getList()
}

const tableRef = ref();
const submitForm = () => {
  const rows = tableRef.value.getSelectionRows();
  selectList.value = rows;
  open.value = false;
  emits("updateSelectRows", rows);
  resetForm()
};

const cancel = () => {
  open.value = false;
  resetForm()
};

const getSelectList = (corpusIds) => {
  if (props.type === "1") {
    listCorpus({
      pageNum: 1,
      pageSize: 100000,
      type: "TEST",
      continuous: 1,
      parentIds: corpusIds,
    })
      .then((response) => {
        selectList.value = response.rows;
      })
      .catch((err) => {});
  } else {
    getBatchCorpus({
      pageNum: 1,
      pageSize: 100000,
      type: "TEST",
      continuous: 0,
      parentIds: corpusIds,
    })
      .then((response) => {
        selectList.value = response.rows;
      })
      .catch((err) => {});
  }
};

onMounted(() => {
  getList();
  if (props.corpusIds) {
    getSelectList(props.corpusIds.split(","));
  }
});
</script>
<style lang="scss" scoped>
.btn-container {
  text-align: right;
  margin-bottom: 12px;
}
</style>
