<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>产品类目管理</el-breadcrumb-item>
    <el-breadcrumb-item to="/product_type/list">产品类目列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 搜索 -->
  <el-form inline :model="params">

    <el-form-item :label-width="labelWidth" label="语言类型" prop="i18n_lang_type">
      <el-select style="width:150px" v-model="params.i18n_lang_type_guid" clearable placeholder="请选择">
        <el-option v-for="item in i18n_lang_type" :key="item.i18n_lang_type_guid" :label="item.i18n_lang_type_code"
          :value="item.i18n_lang_type_guid"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="产品类目标题">
      <el-input v-model='params.product_type_name' placeholder='请输入产品类目标题'></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getList()" icon="ElIconSearch">
        搜索
      </el-button>
    </el-form-item>
  </el-form>
  <el-space style="margin-bottom: 10px;">
    <!-- 添加产品类目 -->
    <el-col :span="1">
      <el-button type="primary" @click="addProductTypeDialogVisible = true"> 添加 </el-button>
    </el-col>

    <!-- 导入 -->
    <el-upload class="upload-demo" :action="importExcel" :headers="headers" :on-success="handleExcelSuccess"
      :on-progress="uploadLoading" :on-error="closeUploadLoading" style="margin-left: 10px" :show-file-list="false">
      <el-button type="primary">导入</el-button>
    </el-upload>

    <!-- 导出 -->
    <el-button icon="ElIconDocument" @click="exportExcel(params)">导出</el-button>

    <!-- 下载导入模板 -->
    <el-button icon="ElIconDownload" @click="downloadTemplate()">下载导入模板</el-button>


    <!-- 下拉操作 -->
    <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>
  <!-- 数据表格 -->
  <el-table v-loading="loading" :data="dataList" ref="tableRef" highlight-current-row
    :onSelectionChange="data => (selectionData = data)" :default-expand-all="tableExpandAll" row-key="product_type_guid"
    :tree-props="{ children: 'children' }">
    <el-table-column type="selection" width="50" align="center" />
    <!-- <el-table-column prop="i18n_lang_type_code" width="150" label="语言类型code" :show-overflow-tooltip="true">
      <template #default="scope">
        <el-tag type="primary">{{ scope.row.i18n_lang_type_code }}</el-tag>
      </template>
    </el-table-column> -->
    <el-table-column prop="product_type_name" width="200" label="产品类目名称" :show-overflow-tooltip="true">
    </el-table-column>
    <el-table-column prop="product_type_title" width="200" label="产品类目标题" :show-overflow-tooltip="true">
    </el-table-column>
    <el-table-column prop="product_type_icon" width="200" label="产品类目图标" :show-overflow-tooltip="true">
      <template #default="scope">
        <el-image :src="scope.row.product_type_icon" :preview-src-list="[scope.row.product_type_icon]"
          :preview-teleported="true"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="product_type_order" width="200" label="排序" sort>
      <template #default="scope">
        <el-input-number v-model='scope.row.product_type_order' controls-position="right"
          @change="handleEditProductType(scope.row)"></el-input-number>
      </template>
    </el-table-column>



    <el-table-column label="操作" align="center" width="250" fixed='right'>
      <template #default="scope">
        <!-- <el-button size="small" type="primary" @click="handleAdd(scope.row)">添加</el-button> -->
        <el-button size="small" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete([scope.row])">删除</el-button>
        <!-- <el-button size="small" type="info" @click="handleDetail(scope.row)">查看</el-button> -->
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加产品类目 -->
  <AddProductTypeDialog v-model="addProductTypeDialogVisible" :data="AddProductTypeDialogRow" :done="() => getList()">
  </AddProductTypeDialog>
  <!-- 编辑产品类目 -->
  <EditProductTypeDialog v-model="EditProductTypeDialogVisible" :data="EditProductTypeDialogRow"
    :done="() => getList()">
  </EditProductTypeDialog>
  <!-- 产品类目详情 -->
  <DetailProductTypeDialog v-model="DetailProductTypeDialogVisible" :data="DetailProductTypeDialogRow">
  </DetailProductTypeDialog>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive, onMounted, watch } from 'vue';
import { useLoginStore } from "~/store";
import { getProductTypeTree, editProductType, deleteProductType, exportExcel, downloadTemplate, importExcel } from '~/service/product_type';
import { getI18nLangTypeList } from '~/service/i18n_lang_type';
import AddProductTypeDialog from './components/AddProductTypeDialog.vue';
import EditProductTypeDialog from './components/EditProductTypeDialog.vue';
import DetailProductTypeDialog from './components/DetailProductTypeDialog.vue';
import createDraw from 'hyw-drag'


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

const addProductTypeDialogVisible = ref(false);
const AddProductTypeDialogRow = ref({});
const EditProductTypeDialogVisible = ref(false);
const EditProductTypeDialogRow = ref({});
const DetailProductTypeDialogVisible = ref(false);
const DetailProductTypeDialogRow = ref({});

const tableExpandAll = ref(false)

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



// 查询参数
const params = reactive({
  product_type_name: "",
  i18n_lang_type_guid: ""
});

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 deleteProductType({
      product_type_guid: data.map(v => v.product_type_guid).join()
    });
    if (res) {
      getList();
    }
  });
};

// 添加
function handleAdd(row) {
  addProductTypeDialogVisible.value = true
  AddProductTypeDialogRow.value = row
}

// 修改
function handleUpdate(row) {
  EditProductTypeDialogVisible.value = true
  EditProductTypeDialogRow.value = row
}

// 详情
function handleDetail(row) {
  DetailProductTypeDialogVisible.value = true
  DetailProductTypeDialogRow.value = row
}

//排序
async function handleEditProductType(data) {
  loading.value = true
  await editProductType(data);
  getList();
}


// 导入方法
let loadingImoprt = null;
const uploadLoading = () => {
  loadingImoprt = ElLoading.service({
    lock: true,
    text: "正在导入中...",
    background: "rgba(255, 255, 255, 0.7)",
  });
};
const closeUploadLoading = () => loadingImoprt.close();
const handleExcelSuccess = (value) => {
  if (value.code == 0) {
    ElMessageBox.alert(value.msg, "导入信息", {
      dangerouslyUseHTMLString: true,
      confirmButtonText: "确定",
    });
  } else {
    ElMessage.error(value.msg);
  }
  closeUploadLoading();
  tableRef.value.reload();
};

const loading = ref(false)
const dataList = ref([])
//排序
let drag = ref(false)
// 查询数据
function getList() {
  loading.value = true
  getProductTypeTree(params).then((res) => {
    if (res.code == 0) {
      dataList.value = res.data
      setTimeout(() => {
        [...document.getElementsByClassName('el-table__row')].map(item => { item.classList.add('row1') });
        [...document.getElementsByClassName('el-table__row--level-1')].map(item => { item.classList.remove('row1') })
        drag.value === false && (drag.value = createDraw(document.getElementsByClassName('el-table__row')[0].parentElement))
      })
      loading.value = false
    }
  })

}

// watch(drag, () => {
//   drag.value.start(() => {
//     dataList.value.map(item => {
//       tableRef.value.toggleRowExpansion(item, false)
//     })
//     tableExpandAll.value = false
//   })
//   drag.value.drop((info) => {
//     // console.log(info)
//     let targetIdx = [...document.getElementsByClassName('row1')].indexOf(info.el)
//     let sourceIdx = [...document.getElementsByClassName('row1')].indexOf(info.info.source.el)
//     let orderIdx = dataList.value[sourceIdx]['product_type_order']
//     dataList.value[targetIdx]['product_type_order'] = orderIdx
//     handleEditProductType(dataList.value[targetIdx])
//   })
// })
getList()

const i18n_lang_type = ref();
async function geti18n_lang_typeList() {
  getI18nLangTypeList({ limit: 9999 }).then((res) => {
    if (res.code == 0) {
      i18n_lang_type.value = res.data
    }
  })
}
geti18n_lang_typeList()

</script>
