<script setup name="Dictionary">
import { onMounted, ref, toRefs } from 'vue'
import { Split } from 'view-ui-plus';
import { ElMessage } from "element-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' // 上传模块

import { dictinaryTypes, query, delDictionaryType, delValue, exportExcel } from '@/api/ruleConfig/dictionary'

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

const data = reactive({
  queryParams: {
    pageno: 1,
    pagesize: 20,
    typecode: '',
    typename: '',
    value: '',
    parvalue: ''
  },
  addClassForm: {},
  addValueForm: {},
  delData: {}
});

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

const classList = ref([])
const modalData = reactive({
  show: false,
  text: '',
  icon: 'error',
  cancel: false,
  type: ''
})

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

const tableData = reactive({
  list: [],
  total: 0
})


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

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

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

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

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

// 提示回调
const modalConfirm = () => {
  if (modalData.type === 'class') {
    const { value, text } = delData.value
    const data = {
      dictionaryTypeCode: value,
      dictionaryTypeName: text
    }
    delDictionaryType(data).then(res => {
      const { flag } = res
      if (flag) {
        ElMessage.success('删除成功')
      } else {
        ElMessage.error('删除失败')
      }
      if (value === queryParams.value.typecode) {
        getData()
      } else {
        getData('class')
      }
    })
  } else if (modalData.type === 'value') {
    const { id, name } = delData.value
    const data = {
      dicId: id,
      dicName: name
    }
    delValue(data).then(res => {
      const { flag } = res
      if (flag) {
        ElMessage.success('删除成功')
      } else {
        ElMessage.error('删除失败')
      }
      getTableData()
    })
  }
  modalData.show = false
}

// 分类查看
const classView = (item) => {
  if (queryParams.value.typecode === item.value) return
  queryParams.value.typecode = item.value
  queryParams.value.typename = item.text
  getTableData()
}

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

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

// 获取分类名称
const getClassName = (value) => {
  const item = classList.value.find(item => item.value === value)
  return item ? item.text : ''
}

// 获取列表数据
const getData = (type) => {
  dictinaryTypes({}).then(res => {
    const { data } = res;
    classList.value = data
    if (classList.value.length <= 0) return
    if (type === 'class') {
      getTableData()
    } else {
      queryParams.value.typecode = classList.value[0].value
      queryParams.value.typename = classList.value[0].text
      getTableData()
    }
  })
}

// 获取列表table数据
const getTableData = () => {
  query(queryParams.value).then(res => {
    const { data } = res;
    tableData.list = data.list
    tableData.total = data.total
  })
}

// 导出excel
const exportExcelFunc = () => {
  exportExcel({ typecode: queryParams.value.typecode }).then(response => {
    const blob = new Blob([response], { type: 'application/vnd.ms-excel,charset=utf-8' });
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = `${queryParams.value.typename}知识库.xlsx`
    link.click()
    URL.revokeObjectURL(link.href)
    ElMessage.success('导出成功')
  })
}


onMounted(() => {
  getData()
})

</script>
<template>
  <div class="app-container scroller">
    <div class="app-container__body">
      <div class="pageTitle">
        <img class="icon" src="@/assets/images/ruleConfig/dictionaryPage.png" alt="">
        <span>知识库</span>
      </div>
      <div class="box">
        <div class="left">
          <div style="width: 100%;flex: 1;overflow: auto;">
            <el-scrollbar>
              <div class="left_item" :class="queryParams.typecode === item.value ? 'active' : ''"
                v-for="(item, index) in classList" :key="index" @click="classView(item)">
                <div class="index">{{ index + 1 }}</div>
                <span>{{ item.text }}</span>
                <div class="left_item_btn" v-if="queryParams.typecode === item.value">
                  <img class="edit" src="@/assets/images/ruleConfig/edit.png" mode="scaleToFill" @click.stop="addClassClick('edit', item)" />
                  <el-icon color="rgba(212, 48, 48, 1)" :size="16" @click.stop="classDelete(item)">
                    <circle-close-filled />
                  </el-icon>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="right">
          <div class="line"></div>
          <div class="right-content">
            <div style="display: flex;justify-content: space-between;">
              <el-form-item label="值：">
                <el-input placeholder="" v-model="queryParams.value" class="input-with-select">
                  <template #append>
                    <el-button icon="Search" @click="getTableData"></el-button>
                  </template>
                </el-input>
              </el-form-item>
              <div style="display: flex;">
                <el-button class="but" icon="Plus" type="primary" style="background: rgba(0, 186, 173, 1);border-color:rgba(0, 186, 173, 1);" @click="addClassClick('add')">新增分类</el-button>
                <el-button class="but" icon="Plus" type="primary" style="background: rgba(0, 189, 207, 1);border-color:rgba(0, 189, 207, 1);" @click="addValueClick('add')">新增值</el-button>
                <el-button class="but" icon="Upload" type="primary" @click="importClick">导入</el-button>
                <el-button class="but" icon="Download" type="success" style="background: rgba(11, 136, 251, 1);border-color:rgba(11, 136, 251, 1);" @click="exportExcelFunc">导出</el-button>
              </div>
            </div>
            <el-table :data="tableData.list" stripe style="width: 100%;flex:1;">
              <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
              <el-table-column prop="date" label="分类" align="center">
                <template #default="scope">
                  {{ getClassName(scope.row.typecode) }}
                </template>
              </el-table-column>
              <el-table-column prop="typecode" label="分类编码" align="center"></el-table-column>
              <el-table-column prop="value" label="值" align="center"></el-table-column>
              <el-table-column prop="name" label="名称" align="center"></el-table-column>
              <el-table-column prop="parentvalue" label="父值" align="center"></el-table-column>
              <el-table-column label="操作" align="center" width="180">
                <template #default="scope">
                  <el-button type="primary" icon="Edit" link @click="addValueClick('edit',scope.row)">编辑</el-button>
                  <el-button type="primary" icon="Delete" link @click="valueDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="tableData.total>0" :total="tableData.total" :isTextShow="true"
              v-model:page="queryParams.pageno" v-model:limit="queryParams.pagesize" @pagination="getTableData" />
          </div>
        </div>
      </div>
    </div>

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

    <!-- 新增分类 / 新增值 -->
    <el-dialog :title="modalPopData.title" v-model="modalPopData.show" :before-close="modalPopCancel" width="600">
      <div style="padding: 30px;">
        <AddClass :itemData="addClassForm" :type="modalPopData.operation" @cancel="modalPopCancel"
          @confirm="AddDomainConfirm" v-if="modalPopData.type === 'class'" />
        <AddValue :itemData="addValueForm" :type="modalPopData.operation" :classDict="classList"
          @cancel="modalPopCancel" @confirm="AddDomainConfirm" v-if="modalPopData.type === 'value'" />
        <uploadModule @cancel="modalPopCancel" @confirm="AddDomainConfirm" v-if="modalPopData.type === 'upload'" />
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.app-container__body {
  padding: 20px 0 0 0;
  .pageTitle {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 22px;
    color: rgba(53, 64, 79, 1);

    .icon {
      margin-right: 6px;
      width: 16px;
      height: 16px;
    }
  }
  .box {
    display: flex;
    width: 100%;
    flex: 1;
    overflow: hidden;
    .left {
      display: flex;
      flex-direction: column;
      width: 282px;
      overflow: auto;
      height: 100%;
      .left_item {
        position: relative;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px dashed rgba(186, 193, 204, 1);
        padding: 0 13px 0 22px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        cursor: pointer;
        font-size: 14px;
        color: rgba(53, 64, 79, 1);
        display: flex;
        align-items: center;
        .index{
          margin-right: 6px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: linear-gradient(180deg, rgba(68, 129, 235, 1) 0%, rgba(4, 190, 254, 1) 100%);
          font-size: 12px;
          font-weight: 700;
          line-height: 18px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
        }
        .left_item_btn {
          position: absolute;
          right: 8px;
          top: 0;
          height: 100%;
          display: flex;
          align-items: center;
          .edit{
            margin-right: 11px;
            width: 14px;
            height: 14px;
            cursor: pointer;
          }
        }
      }
      .active {
        background: rgba(255, 255, 255, 1);
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 1);
      .line {
        width: 100%;
        height: 2px;
        border-radius: 5px 5px 0px 0px;
        background: linear-gradient(
          90deg,
          rgba(33, 103, 217, 1) 0%,
          rgba(17, 200, 250, 1) 34.03%,
          rgba(33, 103, 217, 1) 64.58%,
          rgba(48, 128, 255, 1) 100%
        );
      }
      &-content{
        flex: 1;
        overflow: hidden;
        padding: 32px 18px 20px 18px;
        display: flex;
        flex-direction: column;
        .input-with-select{
          height: 40px;
        }
        .but{
          height: 40px;
        }
        :deep(.el-form-item__label){
          line-height: 40px;
        }
        :deep(.el-table .el-table__header-wrapper th) {
          background-color: rgba(235, 242, 255, 1) !important;
          color: rgba(53, 64, 79, 1);
        }
        :deep(.el-table__cell) {
          height: 46px;
        }
      }
    }
  }
}
</style>