<script setup name="Dictionary">
import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus';

import ModalPop from "@/components/EditPop/ModalPop.vue"
import AddClass from './modules/AddClass.vue' // 分类
import AddValue from './modules/AddValue.vue' // 值
import uploadModule from './modules/uploadModule.vue' // 上传模块

const splitNum = ref(0.31) // 左右分割比例

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  addClassForm: {
    name: "",
  },
  addValueForm: {
    name: "",
  }
});

const { addClassForm, addValueForm, queryParams } = toRefs(data);

const total = ref(4)
const modalData = reactive({
  show: false,
  text: '',
  icon: 'error',
  cancel: false,
  type: ''
})

const modalPopData = reactive({
  show: false,
  title: '',
  type: '',
  operation: ''
})

const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄',
  },
  {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄',
  },
  {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄',
  },
  {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄',
  },
])


// 新增关闭
const modalPopCancel = () => {
  modalPopData.show = false
}

// 新增/编辑 分类
const addClassClick = (type, item) => {
  modalPopData.operation = type
  if (modalPopData.operation === 'add') {
    addClassForm.value = {}
  } else if (modalPopData.operation === 'edit') {
  }
  modalPopData.title = '字典分类'
  modalPopData.type = 'class'
  modalPopData.show = true
}

// 新增/编辑 值
const addValueClick = (type, item) => {
  modalPopData.operation = type
  if (modalPopData.operation === 'add') {
    addValueForm.value = {}
  } else if (modalPopData.operation === 'edit') {
  }
  modalPopData.title = '字典数据'
  modalPopData.type = 'value'
  modalPopData.show = true
}

// 删除值
const valueDelete = (item) => {
  console.log('删除值', item)
  modalData.type = 'value'
  modalData.icon = 'error'
  modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
  modalData.show = true
}

// 删除分类
const classDelete = (item) => {
  console.log('删除分类事件', item)
  modalData.type = 'class'
  modalData.icon = 'error'
  modalData.text = '删除后无法恢复，是否确认删除[' + item.name + ']?'
  modalData.show = true
}

// 提示回调
const modalConfirm = () => {
  if (modalData.type === 'class') {
    console.log('删除分类确认')
  } else if (modalData.type === 'value') {
    console.log('删除值确认')
  }
  modalData.show = false
}

// 分类查看
const classView = (item) => {
  // editDomainForm.value = item
}

// 新增确认
const AddDomainConfirm = (item) => {
  if (modalPopData.type === 'class') {
    console.log('新增分类确认', item)
  } else if (modalPopData.type === 'value') {
    console.log('新增值确认', item)
  } else if (modalPopData.type === 'upload') {
    console.log('导入', item)
  }
  modalPopData.show = false
}

// 导入功能
const importClick = () => {
  modalPopData.title = '上传文件'
  modalPopData.type = 'upload'
  modalPopData.show = true
}

// 获取列表数据
const getList = () => { 

}

onMounted(() => {
  
})

</script>
<template>
  <div class="app-container scroller">
    <PageTitle>
      <template #title>
        知识库
      </template>
    </PageTitle>
    <div class="app-container__body">
      <Split v-model="splitNum">
        <template #left>
          <div class="left">
            <div class="mb20" style="display: flex;flex-direction: row-reverse;">
              <el-button icon="Plus" type="primary" @click="addClassClick('add')">新增分类</el-button>
            </div>
            <div style="width: 100%;flex: 1;overflow: auto;">
              <el-scrollbar>
                <div class="left_item" @click="classView">
                  <span>单姓1(1)</span>
                  <div class="left_item_btn">
                    <el-icon :size="16" @click.stop="addClassClick('edit')">
                      <edit />
                    </el-icon>
                    <el-icon :size="16" style="margin-left: 10px;" @click.stop="classDelete">
                      <delete />
                    </el-icon>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </template>
        <template #right>
          <div class="right">
            <div style="display: flex;justify-content: space-between;">
              <el-form-item label="值：">
                <el-input placeholder="" v-model="input3" class="input-with-select">
                  <template #append>
                    <el-button icon="Search"></el-button>
                  </template>
                </el-input>
              </el-form-item>
              <div style="display: flex;">
                <el-button icon="Upload" type="primary" @click="importClick">导入</el-button>
                <el-button icon="Download" type="success">导出</el-button>
                <el-button icon="Plus" type="primary" @click="addValueClick('add')">新增值</el-button>
              </div>
            </div>
            <el-table :data="tableData" stripe style="width: 100%;flex:1;">
              <el-table-column prop="date" label="分类" align="center"></el-table-column>
              <el-table-column prop="name" label="分类编码" align="center"></el-table-column>
              <el-table-column prop="address" label="值" align="center"></el-table-column>
              <el-table-column prop="address" label="名称" align="center"></el-table-column>
              <el-table-column prop="address" label="父值" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template #default="scope">
                  <el-button type="primary" link @click="addValueClick('edit')">编辑</el-button>
                  <el-divider direction="vertical"></el-divider>
                  <el-button type="danger" link @click="valueDelete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :isTextShow="true"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </template>
      </Split>
    </div>

    <!-- 提示框 -->
    <Modal v-model="modalData.show" :icon="modalData.icon" :cancel="modalData.cancel" :text="modalData.text"
      @confirm="modalConfirm"></Modal>

    <!-- 新增分类 / 新增值 -->
    <ModalPop :width="'600'" v-model="modalPopData.show" :title="modalPopData.title" @cancel="modalPopCancel">
      <template #content>
        <AddClass v-model="addClassForm" :type="modalPopData.operation" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
          v-if="modalPopData.type === 'class'" />
        <AddValue v-model="addValueForm" :type="modalPopData.operation" @cancel="modalPopCancel" @confirm="AddDomainConfirm"
          v-if="modalPopData.type === 'value'" />
        <uploadModule @cancel="modalPopCancel" @confirm="AddDomainConfirm" v-if="modalPopData.type === 'upload'" />
      </template>
    </ModalPop>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {
  height: calc(
    100vh - var(--navbar-height) - var(--container-pd) - var(--container-pd)
  ) !important;
  .left {
    display: flex;
    flex-direction: column;
    padding: 0 38px 10px 0;
    width: 100%;
    overflow: auto;
    height: 100%;
    .left_item {
      position: relative;
      height: 38px;
      line-height: 38px;
      border-bottom: 1px solid #dce5eb;
      padding: 0 10px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      cursor: pointer;
      font-size: 14px;
      color: #7a8495;
      .left_item_btn {
        position: absolute;
        right: 8px;
        top: 2px;
        z-index: 0;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        opacity: 0;
      }
    }
    .left_item:hover {
      .left_item_btn {
        z-index: 10;
        opacity: 1;
      }
    }
    .active {
      background: #f4faff;
    }
  }
  .right {
    padding-left: 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    :deep(.el-table .el-table__header-wrapper th){
      background-color: #e9f5fe !important;
      color: #2c9ef7;
    }
  }
}
</style>