<template>
  <div class="app-container">
    <el-row  :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
              v-model="dasset"
              placeholder="请输入数据资产名称"
              clearable
              prefix-icon="Search"
              style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
              :data="dassetOptions"
              :props="{ label: 'dassetName', children: 'children' }"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="deptTreeRef"
              node-key="onum"
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
          >
            <template #default="{ data }">
              <div class="custom-tree-node" @mouseenter="data.show = true" @mouseleave="data.show = false">
                <span>{{ data.dassetName }}</span>
                <div v-if="data.parentCode === '0' && data.show">
                  <el-link :underline="false" style="font-size: 16px;margin: 5px" type="primary" icon="Plus" @click="handleAddTree(data)"></el-link>
                  <el-link :underline="false" style="font-size: 16px;margin: 5px" type="success" icon="Edit" @click="handleEditTree(data)"></el-link>
                </div>
                <div v-if="data.parentCode !== '0' && data.show">
                  <el-link :underline="false" style="font-size: 16px;margin: 5px" type="success" icon="Edit" @click="handleEditTree(data)"></el-link>
                  <el-link :underline="false" style="font-size: 16px;margin: 5px" type="danger" icon="Delete" @click="handleDeleteTree(data)"></el-link>
                </div>
              </div>
            </template>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-form inline :model="queryParams">
          <el-form-item label="关键词:">
            <el-input v-model="queryParams.keyword"></el-input>
          </el-form-item>
          <el-form-item label="类型:">
            <el-input v-model="queryParams.type"></el-input>
          </el-form-item>
          <el-form-item label="字段状态:">
            <el-select v-model="queryParams.status" style="width: 200px" clearable>
              <el-option label="正常" key="sscf-query-status-1" value="1"></el-option>
              <el-option label="弃用" key="sscf-query-status-2" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
            >新增</el-button>
          </el-col>
          <!--      <el-col :span="1.5">-->
          <!--        <el-button-->
          <!--            type="success"-->
          <!--            plain-->
          <!--            icon="Edit"-->
          <!--            @click="handleEdit"-->
          <!--        >修改</el-button>-->
          <!--      </el-col>-->
          <el-col :span="1.5">
            <el-button
                type="danger"
                plain
                icon="Minus"
                @click="multDelete"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
                type="info"
                plain
                icon="Upload"
                @click="handleImport"
            >导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
                type="warning"
                plain
                icon="Download"
                @click="handleExport"
            >导出</el-button>
          </el-col>
        </el-row>
        <el-table :data="dataList" @selection-change="handleSelection">
          <el-table-column type="selection" width="50" align="center" />
          <!--      <el-table-column label="序号" align="center" prop="onum"></el-table-column>-->
          <el-table-column label="关键词" align="center" prop="keyword"></el-table-column>
          <el-table-column label="算法" align="center" prop="algorithm"></el-table-column>
          <el-table-column label="按顺序匹配标志" align="center" prop="order"></el-table-column>
          <el-table-column label="整句" align="center" prop="wholeSentence"></el-table-column>
          <el-table-column label="类型" align="center" prop="type"></el-table-column>
          <el-table-column label="补充说明" align="center" prop="suppExpl" width="200">
            <template #default="scope">
              <el-popover
                  class="box-item"
                  :popper-style="{width:'300px'}"
                  :content="scope.row.suppExpl"
                  placement="right-start"
              >
                <template #reference>
                  <span>{{scope.row.suppExpl.substring(0, 20) + (scope.row.suppExpl && scope.row.suppExpl.length >= 20?"...":"")}}</span>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
              <el-switch v-model="scope.row.status"
                         active-value="1"
                         inactive-value="0" @change="changeStatus(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="负责人员" align="center" prop="updateBy"></el-table-column>
          <el-table-column label="更新时间" align="center" prop="updateTime">
            <template #default="scope">
              <span>{{scope.row.updateTime.replace("T"," ")}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" prop="operation">
            <template #default="scope">
              <el-link type="primary" @click="handleEdit(scope.row)" :underline="false">修改</el-link>
              <el-link type="danger" style="margin-left: 10px" @click="handleDelete([scope.row.onum])" :underline="false">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
        />
      </el-col>
    </el-row>
    <el-dialog
        v-model="showDialog"
        :title="currentForm.operate === 'ADD'?'新增字段':'编辑字段'"
        width="500"
    >
      <el-form
          v-if="showDialog"
          :model="currentForm"
          ref="formRef"
          :rules="rules"
          label-width="125px">
        <el-form-item label="归属资产名:" prop="dassetId">
          <el-select v-model="currentForm.dassetId" style="width: 100%;" clearable>
            <el-option v-for="item in dassetList" :key="item.onum" :value="item.onum" :label="item.dassetName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词:" prop="keyword">
          <el-input
              v-model="currentForm.keyword" clearable
          />
        </el-form-item>
        <el-form-item label="字段状态:">
          <el-radio-group v-model="currentForm.status">
            <el-radio value="1" size="large">正常</el-radio>
            <el-radio value="0" size="large">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="算法:">
          <el-radio-group v-model="currentForm.algorithm">
            <el-radio value="包含" size="large">包含</el-radio>
            <el-radio value="等于" size="large">等于</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="按顺序匹配标志:">
          <el-switch v-model="currentForm.order"
                     active-value="True"
                     inactive-value="False"  />
        </el-form-item>
        <el-form-item label="整句:">
          <el-switch v-model="currentForm.wholeSentence"
                     active-value="True"
                     inactive-value="False"  />
        </el-form-item>
        <el-form-item label="类型:">
          <el-radio-group v-model="currentForm.type">
            <el-radio value="补充" size="large">补充</el-radio>
            <el-radio value="替换" size="large">替换</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="补充说明:">
          <el-input
              v-model="currentForm.suppExpl" clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSave">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
        v-model="showTreeDialog"
        :title="currentTreeNode.operate === 'ADD'?'新增目录':'编辑目录'"
        width="500"
    >
      <el-form
          v-if="showTreeDialog"
          :model="currentTreeNode"
          ref="formRef"
          :rules="dassetRules"
          label-width="125px">
        <el-form-item label="目录编码:" prop="dassetCode">
          <el-input
              v-model="currentTreeNode.dassetCode" clearable :disabled="currentTreeNode.dassetCode === 'root'"
          />
        </el-form-item>
        <el-form-item label="目录名称:" prop="dassetName">
          <el-input
              v-model="currentTreeNode.dassetName" clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showTreeDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSaveTree">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, nextTick, computed, watch, reactive, onMounted } from 'vue'
import { getSscfList, saveSscf, deleteSscf, get_dasset_tree, saveDassetTreeNode } from "@/api/dataint/sscf"


const { proxy } = getCurrentInstance();

const queryParams = ref({
  dassetId:'',
  keyword:'',
  type:'',
  status:'',
  pageNum:1,
  pageSize:10
})
const currentForm = ref({
  operate: 'ADD',
  dassetId:'',
  status:'1',
  keyword:'',
  algorithm:'包含',
  order:'True',
  wholeSentence:'True',
  type:'补充',
  suppExpl:''
})
const dassetList = ref([])
const rules = ref({
  dassetId: [{required: true, message: '归属资产不能为空！', trigger: 'change',},],
  keyword: [{required: true, message: '关键词不能为空！', trigger: 'change',},],
})
const dassetRules = ref({
  dassetCode: [{required: true, message: 'code不能为空！', trigger: 'change',},],
  dassetName: [{required: true, message: '名称不能为空！', trigger: 'change',},],
})
const multSelection =ref([])
const dassetOptions = ref([])
const dasset =ref('')
const dataList = ref([])
const total = ref(0)
const showDialog = ref(false)
const showTreeDialog = ref(false)
const currentTreeNode = ref({})
function handleAddTree(){
  showTreeDialog.value = true
  currentTreeNode.value = {
    operate: 'ADD',
    dassetCode: '',
    dassetName: ''
  }
}
function handleEditTree(data){
  currentTreeNode.value = data
  currentTreeNode.value.operate = 'UPDATE'
  showTreeDialog.value = true
}
function handleSaveTree(){
  let param = {
    operate: currentTreeNode.value.operate,
    dassetCode: currentTreeNode.value.dassetCode,
    dassetName: currentTreeNode.value.dassetName,
    onum: currentTreeNode.value.onum
  }
  saveDassetTreeNode(param).then(res=>{
    proxy.$modal.msgSuccess("操作成功")
    showTreeDialog.value = false
    get_tree_data()
  })
}
function handleDeleteTree(data){
  let param = {
    onum: data.onum,
    dassetCode: data.dassetCode,
    operate: 'DELETE'
  }
  saveDassetTreeNode(param).then(res=>{
    proxy.$modal.msgSuccess("操作成功")
    get_tree_data()
  })
}
function handleQuery(){
  queryParams.value.pageNum = 1;
  getList()
}
function getList(){
  getSscfList(queryParams.value).then(res=>{
    dataList.value = res.data.rows
    total.value = res.data.total
  })
}
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.dassetId = data.onum;
  handleQuery();
}
function resetQuery(){
  queryParams.value = {
    pos:'',
    type:'',
    stdRplStr:'',
    status:'',
    pageNum:1,
    pageSize:10
  }
  handleQuery()
}
function handleAdd(){
  showDialog.value = true
  currentForm.value ={
    operate: 'ADD',
    dassetId:'',
    status:'1',
    keyword:'',
    algorithm:'包含',
    order:'True',
    wholeSentence:'True',
    type:'补充',
    suppExpl:''
  }
}
function handleEdit(row){
  currentForm.value = JSON.parse(JSON.stringify(row))
  currentForm.value.operate = 'UPDATE'
  showDialog.value = true
}
function changeStatus(row){
  let param = {
    onum: row.onum,
    status: row.status
  }
  saveSscf(param).then(res=>{
    proxy.$modal.msgSuccess("操作成功");
    getList()
  })
}
function handleSave(){
  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      saveSscf(currentForm.value).then(res=>{
        proxy.$modal.msgSuccess("操作成功");
        showDialog.value = false
        getList()
      })
    }
  });
}
function multDelete(){
  let array = []
  if (multSelection.value.length>0){
    for (let i = 0; i < multSelection.value.length; i++) {
      array.push(multSelection.value[i].onum)
    }
    handleDelete(array)
  }else{
    proxy.$modal.msgWarning("请至少选择一条数据")
  }

}
function handleDelete(array){
  deleteSscf(array).then(res=>{
    proxy.$modal.msgSuccess("操作成功");
    getList()
  })
}
function handleImport(){

}
function handleExport(){

}
function handleSelection(val){
  multSelection.value= val
}
function get_tree_data(){
  get_dasset_tree().then(res=>{
    let treeList = res.data
    if(treeList.length > 0){
      let children = []
      dassetOptions.value = []
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].dassetCode === "root"){
          dassetOptions.value.push(treeList[i])
        }else {
          children.push(treeList[i])
        }
      }
      dassetOptions.value[0].children = children
      dassetList.value = children
    }
  })
}
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

onMounted(() => {
  get_tree_data()
  handleQuery()
})
</script>
<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tree-node__action {
    padding: 0 8px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>