<template>
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    <el-breadcrumb-item to="/system/dictionary">数据字典</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row :gutter="20">
    <el-col :span="12">
      <template v-if="checkData.length">
        <el-button type="danger" @click="handleCheckDeleteClick">
          批量删除
        </el-button>
      </template>
      <el-input v-model="filterText" placeholder="搜索数据字典" />
      <el-row style="margin: 15px 0;">
         <!-- 导入 -->
        <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 style="margin-left: 10px" icon="ElIconDownload" @click="downloadTemplate()">下载导入模板</el-button>
      </el-row>
      
      <el-tree
        ref="treeRef"
        :filter-node-method="filterNode"
        :data="treeData"
        show-checkbox
        draggable
        :default-expanded-keys="treeExpandData"
        :highlight-current="true"
        :expand-on-click-node="true"
        node-key="id"
        @node-drop="handleDrop"
        @check="handleCheck"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span>
              <a @click="handleTreeClick('create', data)"> 添加 </a>
              <a v-if="data.allow == 1" @click="handleTreeClick('edit', data)">
                编辑
              </a>
            </span>
          </span>
        </template>
      </el-tree>
    </el-col>
    <el-col :span="12">
      <div v-if="model.dictionary_guid">
        <el-form ref="formRef" :model="model" :rules="rules">
          <el-form-item label="名称" prop="dictionary_name">
            <el-input v-model="model.dictionary_name" type="text"></el-input>
          </el-form-item>
          <el-form-item label="值" prop="dictionary_value">
            <el-input v-model="model.dictionary_value" type="text"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="dictionary_order">
            <el-input v-model="model.dictionary_order" type="number"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="dictionary_status">
            <el-switch
              v-model="model.dictionary_status"
              active-text="启用"
              inactive-text="停用"
            />
          </el-form-item>
          <el-form-item label="允许更新" prop="dictionary_allow_update">
            <el-switch
              v-model="model.dictionary_allow_update"
              active-text="启用"
              inactive-text="停用"
            />
          </el-form-item>
          <el-form-item label="回显样式" prop="dictionary_list_class">
          <el-select v-model="model.dictionary_list_class">
            <el-option
              v-for="item in listClassOptions"
              :key="item.value"
              :label="item.label + '(' + item.value + ')'"
              :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSaveClick">
              保存
            </el-button>
            <el-button
              v-if="model.dictionary_guid && model.dictionary_guid != 'create'"
              type="danger"
              @click="handleDeleteClick"
            >
              删除
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <el-empty description="请选择字典" />
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import {
  getDictionaryTree,
  addDictionary,
  updateDictionary,
  deleteDictionary,
  downloadTemplate,
  importExcel
} from '~/service/dictionary';
import { useLoginStore } from "~/store";

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

const formRef = ref();
const treeRef = ref();
const filterText = ref('');
const treeData = ref([]);
const treeExpandData = ref([]);
const checkData = ref([]);
const model = reactive({
  dictionary_guid: '',
  dictionary_parent_guid: '',
  dictionary_name: '',
  dictionary_value: '',
  dictionary_status: true,
  dictionary_index: 0,
  dictionary_order: 0,
  dictionary_allow_update: 0,
  dictionary_list_class: 'default',
});
// 数据标签回显样式
const listClassOptions = ref([
  {
    value: 'default',
    label: '默认'
  },
  {
    value: 'primary',
    label: '主要'
  },
  {
    value: 'success',
    label: '成功'
  },
  {
    value: 'info',
    label: '信息'
  },
  {
    value: 'warning',
    label: '警告'
  },
  {
    value: 'danger',
    label: '危险'
  }
])

const rules = {
  dictionary_name: [
    {
      required: true,
      message: '请输入字典名称'
    }
  ],
  dictionary_order: [
    {
      required: true,
      message: '请输入字典排序'
    }
  ]
};

const loadTree = async () => {
  const { code, data } = await getDictionaryTree();
  if (code == 0) {
    treeData.value = data;
    data.forEach(element => {
        treeExpandData.value.push("0")
    });
  }
};

loadTree();

watch(filterText, v => {
  treeRef.value.filter(v);
});
// 搜索树组件
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
// 拖拽排序
const handleDrop = async (current, to, action) => {
  const currentData = current.data;
  const toData = to.data;
  console.log({
    current: currentData,
    to: toData,
    action
  });
  const data = {
    dictionary_guid: current.data.id,
    dictionary_parent_guid: '',
    dictionary_index: '',
    dictionary_order: ''
  };
  switch (action) {
    case 'before':
      data.dictionary_parent_guid = toData.parent_id;
      data.dictionary_index = toData.index;
      data.dictionary_order = toData.order + 1;
      break;
    case 'after':
      data.dictionary_parent_guid = toData.parent_id;
      data.dictionary_index = toData.index;
      data.dictionary_order = toData.order - 1;
      break;
    case 'inner':
      data.dictionary_parent_guid = toData.id;
      data.dictionary_index = toData.index + 1;
      data.dictionary_order = 0;
      break;
  }
  const { code } = await updateDictionary(data);
  if (code == 0) {
    loadTree();
  }
};
// 选中菜单
const handleCheck = (_, { checkedKeys }) => {
  checkData.value = checkedKeys;
};
// 表单提交
const handleSaveClick = async () => {
  try {
    await formRef.value.validate();
    const data = {
      ...model,
      dictionary_status: model.dictionary_status ? 1 : 2,
      dictionary_allow_update: model.dictionary_allow_update ? 1 : 2
    };
    if (model.dictionary_guid === 'create') {
      const { code } = await addDictionary(data);
      if (code == 0) {
        loadTree();
      }
      model.dictionary_guid = '';
    } else {
      const { code } = await updateDictionary(data);
      if (code == 0) {
        loadTree();
        model.dictionary_guid = '';
      }
    }
  } catch (error) {}
};
// 批量删除
const handleCheckDeleteClick = () => {
  ElMessageBox.alert('您确定要删除该字典吗？', '删除字典', {
    confirmButtonText: '确定'
  }).then(async () => {
    const { code } = await deleteDictionary({
      dictionary_guid: checkData.value.join()
    });
    if (code == 0) {
      loadTree();
      checkData.value = [];
    }
  });
};
// 删除字典
const handleDeleteClick = () => {
  ElMessageBox.alert('您确定要删除该字典吗？', '删除字典', {
    confirmButtonText: '确定'
  }).then(async () => {
    const { code } = await deleteDictionary(model);
    if (code == 0) {
      loadTree();
      model.dictionary_guid = '';
    }
  });
};

const handleTreeClick = (type, data) => {
  switch (type) {
    case 'create':
      model.dictionary_guid = 'create';
      model.dictionary_parent_guid = data.id;
      model.dictionary_index = data.index + 1;
      model.dictionary_name = '';
      model.dictionary_value = '';
      model.dictionary_order = 0;
      model.dictionary_status = true;
      model.dictionary_allow_update = true;
      model.dictionary_list_class = "default";
      break;
    case 'edit':
      model.dictionary_guid = data.id;
      model.dictionary_parent_guid = data.parent_id;
      model.dictionary_index = data.index;
      model.dictionary_name = data.label;
      model.dictionary_value = data.value;
      model.dictionary_order = data.order;
      model.dictionary_status = data.status == 1;
      model.dictionary_allow_update = data.allow == 1;
      model.dictionary_list_class = data.list_class;
      break;
  }
};

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


</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
