<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>多语言类型管理</el-breadcrumb-item>
    <el-breadcrumb-item to="/i18n_lang_type/list">多语言类型列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 搜索 -->
  <el-form inline :model="params">

    <el-form-item label="语言类型名称">
      <el-input v-model='params.i18n_lang_type_name' placeholder='请输入语言类型名称'></el-input>
    </el-form-item>
    <el-form-item label="语言类型code码">
      <el-input v-model='params.i18n_lang_type_code' placeholder='请输入语言类型code码'></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="tableRef.reload()" icon="ElIconSearch">
        搜索
      </el-button>
    </el-form-item>
  </el-form>
  <el-space style="margin-bottom: 10px;">
    <!-- 添加多语言类型 -->
    <el-col :span="1">
      <el-button type="primary" @click="addI18nLangTypeDialogVisible = true"> 添加 </el-button>
    </el-col>



    <!-- 下拉操作 -->
    <el-dropdown v-if="selectionData.length">
      <el-button type="primary">
        批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleDelete(selectionData)">
            批量删除
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-space>
  <!-- 数据表格 -->
  <DataTable ref="tableRef" style="width: 100%" :onSelectionChange="data => (selectionData = data)" :column="column"
    :params="params" :request="params => getI18nLangTypeList(params)">





    <template #chaoz="scope">
      <el-space>
        <el-button size="small" @click="handleUpdate(scope.row)">
          编辑
        </el-button>
        <el-dropdown @command="handleCommand">
          <el-button type="primary" size="small">
            更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="{ type: 'detail', row: scope.row }">
                详情
              </el-dropdown-item>
              <el-dropdown-item :command="{ type: 'delete', row: scope.row }">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-space>
    </template>
  </DataTable>

  <!-- 添加多语言类型 -->
  <AddI18nLangTypeDialog v-model="addI18nLangTypeDialogVisible" :done="() => tableRef.reload()"></AddI18nLangTypeDialog>
  <!-- 编辑多语言类型 -->
  <EditI18nLangTypeDialog v-model="EditI18nLangTypeDialogVisible" :data="EditI18nLangTypeDialogRow"
    :done="() => tableRef.reload()"></EditI18nLangTypeDialog>
  <!-- 多语言类型详情 -->
  <DetailI18nLangTypeDialog v-model="DetailI18nLangTypeDialogVisible" :data="DetailI18nLangTypeDialogRow">
  </DetailI18nLangTypeDialog>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive, watch } from 'vue';
import { useLoginStore } from "~/store";
import { getI18nLangTypeList, editI18nLangType, deleteI18nLangType } from '~/service/i18n_lang_type';
import AddI18nLangTypeDialog from './components/AddI18nLangTypeDialog.vue';
import EditI18nLangTypeDialog from './components/EditI18nLangTypeDialog.vue';
import DetailI18nLangTypeDialog from './components/DetailI18nLangTypeDialog.vue';

const tableRef = ref();
const selectionData = ref([]);
const store = useLoginStore();

const addI18nLangTypeDialogVisible = ref(false);
const EditI18nLangTypeDialogVisible = ref(false);
const EditI18nLangTypeDialogRow = ref({});
const DetailI18nLangTypeDialogVisible = ref(false);
const DetailI18nLangTypeDialogRow = ref({});

const headers = {
  Accept: "application/json",
  ...store.headers,
};

// 查询参数
const params = reactive({
  i18n_lang_type_name: "",
  i18n_lang_type_code: "",
});
const column = [

  {
    fixed: true,
    type: 'selection'
  },
  {
    prop: "i18n_lang_type_name",
    label: '名称',
  },
  {
    prop: "i18n_lang_type_code",
    label: 'code码',
  },
  {
    prop: "i18n_lang_type_sort",
    sortable: true,
    label: '排序',
  },
  {
    label: '操作',
    prop: 'chaoz',
    width: '250',
    fixed: 'right'
  }
];


const handleCommand = ({ type, row }) => {
  switch (type) {
    case "detail":
      handleDetail(row);
      break;
    case 'delete':
      handleDelete([row]);
      break;
  }
};

// 删除数据
const handleDelete = data => {
  ElMessageBox.confirm(`您确定要删除该多语言类型吗？`).then(async () => {
    const res = await deleteI18nLangType({
      i18n_lang_type_guid: data.map(v => v.i18n_lang_type_guid).join()
    });
    if (res) {
      tableRef.value.reload();
    }
  });
};

// 修改
function handleUpdate(row) {
  EditI18nLangTypeDialogVisible.value = true
  EditI18nLangTypeDialogRow.value = row
}

// 详情
function handleDetail(row) {
  DetailI18nLangTypeDialogVisible.value = true
  DetailI18nLangTypeDialogRow.value = row
}






</script>
