<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
import { queryvisionExamineItemTree,addVisionExamineItem,updateVisionExamineItem,delVisionExamineItem } from "@/api/regionmodule/VisionExamineItem";
//定义表格数据
const tableData: any = ref([]);
function gteTabledata() {
  const params = {
    name: '',
  }
  loading.value = true
  queryvisionExamineItemTree(params).then((res) => {
    tableData.value = res.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
const itemInfoRef = ref();
const loading = ref(false);
//定义搜索框文本
const menuname = ref('')
//点击搜索
function search() {
  menuname.value = menuname.value.replace(/\s+/g, "");
  let params = {
    name: menuname.value
  }
  queryvisionExamineItemTree(params).then((res:any) => {
    tableData.value = res.data
  })

}
//目录添加
const title = ref('')
const itemInfo: any = ref({
  item_code: '',
  item_name: '',
  parentid: '00'
})
const dialogVisible = ref(false)
//关闭目录
function handleClose() {
  dialogVisible.value = false;
  isConclusion.value = false
  if (itemInfoRef.value != null) itemInfoRef.value.resetFields();
}

//表格规则定义
const rules = ref({
  item_code: [
    { required: true, message: '请输入编码', trigger: 'blur' }
  ],
  item_name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ]
})
//添加子目录
function addchilder(row: any) {
  regiontitle.value = '新增项目指标'
  isSwitch.value = false
  itemInfo.value = {
    item_code: '',
    item_name: '',
    parentid: row.id,
    parentname: row.item_name
  }
  dialogVisible.value = true
}
//新增目录-确认按钮
function expertsubmit(formEl: any) {
  formEl.validate((valid: any) => {
    if (valid) {
      if(isSwitch.value == true){
        return
      }
      isSwitch.value = true
      if (itemInfo.value.id) {
        let params = {
          id:itemInfo.value.id,
          itemCode: itemInfo.value.item_code,
          itemName: itemInfo.value.item_name,
          introduction: itemInfo.value.introduction,
          parentid: itemInfo.value.parentid
        }
        updateVisionExamineItem(params).then(() => {
          gteTabledata()
          dialogVisible.value = false
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        }).catch(()=>{
          isSwitch.value = false
        })
      } else {
        let params = {
          itemCode: itemInfo.value.item_code,
          itemName: itemInfo.value.item_name,
          parentid: itemInfo.value.parentid,
          introduction: itemInfo.value.introduction
        }
        addVisionExamineItem(params).then(() => {
          gteTabledata()
          dialogVisible.value = false
          ElMessage({
            message: '新建成功',
            type: 'success',
          })
        }).catch(()=>{
          isSwitch.value = false
        })
      }
      
    }
  })

}
const regiontitle = ref('')

//修改信息
function handleEdit(row: any, type:any) {
  isSwitch.value = false
  itemInfo.value = JSON.parse(JSON.stringify(row))
  regiontitle.value = type
  dialogVisible.value = true
}
//新增信息
function addClick() {
  isSwitch.value = false
  regiontitle.value = '新增项目'
  itemInfo.value = {
    code: '',
    name: '',
    parent_id: '0',
    type: '2',
    education_bureau: '',
    status: '01'
    }
    dialogVisible.value = true
}
//删除
function handleDelete(row: any) {
  ElMessageBox.confirm('确定删除此条信息吗？', '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const params = {
      ids: row.id
    }
    delVisionExamineItem(params).then(() => {
      gteTabledata()
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    })

  })
}
const isSwitch = ref(false) // 提交开关
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
onMounted(() => {
  gteTabledata()
})

const itemResultsData: any = ref([])// 结论列表
const isConclusion:any = ref(false)
// 打开项目结论
function resultsClick(row:any){
  isSwitch.value = false
  regiontitle.value = row.item_name + '指标判定规则'
  itemInfo.value = JSON.parse(JSON.stringify(row));
  itemResultsData.value = []
  if(row.item_results !=null && row.item_results != ''){
    itemResultsData.value = JSON.parse(row.item_results);
  }
  isConclusion.value = true
}
//新增参数
function addparameter() {
    itemResultsData.value.push({
      code:'',
      name:'',
      rule:''
    })
}
//修改数据
function delectparams(index: any) {
  itemResultsData.value.splice(index,1)
}

//指标判定规则
function saveparam() {
  if(itemResultsData.value.length <=0){
    ElMessage({
    message: '请添加结论！',
    type: 'warning',
  })
    return
  }
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
    let params = {
      id:itemInfo.value.id,
      itemResults:JSON.stringify(itemResultsData.value) ,
    }
    updateVisionExamineItem(params).then(() => {
      gteTabledata()
      isConclusion.value = false
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
    }).catch(()=>{
      isSwitch.value = false
    })
}

</script>
<template>
  <div class="collectiontemplate-box">
    <section class="detail-box">
      <div  style="display: flex;display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;  margin-bottom:10px">
        <div style="display: flex;display: -webkit-flex;">
          <el-input v-model="menuname" placeholder="请输入名称" clearable style="width:200px;margin-right:10px"
            @keyup.enter="search()" />
          <el-button type="primary" @click="search()">搜索</el-button>
        </div>
        <div>
         
          <el-button type="primary" @click="addClick">
          <img src="@/assets/MenuIcon/jscz_xz.png" alt="" style="margin-right: 4px;">新增项目</el-button>
        </div>
      </div>
      <div class="draggable">
        <el-table v-loading="loading" ref="multipleTable" :data="tableData" default-expand-all tooltip-effect="dark"
          style="width: 100%;height: calc(100vh - 190px)" row-key="id" border
          :header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }">
          <el-table-column label="编号" width="250" prop="item_code" show-overflow-tooltip>
            <template #default="scope">
              <div style="margin-left: 20px;">{{ scope.row.item_code }}</div>
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="item_name" width="120" show-overflow-tooltip />
          <el-table-column label="说明" prop="introduction" min-width="200" />
          <el-table-column prop="creator" label="创建人" width="100" align="center"></el-table-column>
          <el-table-column prop="create_time" label="创建日期" width="180" align="center">
            <template #default="scope">
              {{ dateFormat(scope.row.create_time) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" fixed="right" align="center"
            style="display: flex; display: -webkit-flex;">
            <template #default="scope">
              <span
                style="display: flex;display: -webkit-flex; justify-content: space-around;-webkit-justify-content: space-around; ">
                <img src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改" v-if="scope.row.parentid=='00'"
                  @click="handleEdit(scope.row,'修改项目')" style="cursor: pointer;">
                <img  v-else src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改"
                  @click="handleEdit(scope.row,'修改项目指标')" style="cursor: pointer;">
                <img v-if="scope.row.parentid =='00'" src="@/assets/tableicon/u213.png" alt=""
                  title="新增项目指标" @click="addchilder(scope.row)" style="cursor: pointer;">
                <img v-else src="@/assets/tableicon/u213_disabled.png" alt=""
                  title="新增项目指标" style="cursor: pointer;">

                <img v-if="scope.row.parentid !='00'" src="@/assets/tableicon/u215.png" alt=""
                  title="判断规则" @click="resultsClick(scope.row)" style="cursor: pointer;">
                <img v-else src="@/assets/tableicon/u215_disabled.png" alt=""
                  title="判断规则" style="cursor: pointer;">

                <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" v-if="scope.row.status == '09'"
                  title="删除">
                <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" v-else title="删除"
                  @click="handleDelete(scope.row)" style="cursor: pointer; ">
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- </div> -->
    </section>
    <!-- 新增目录 -->
    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="regiontitle " draggable
      append-to-body width="620px" class="dialogClass">
      <el-form ref="itemInfoRef" :model="itemInfo" :rules="rules" label-width="90px">
        <div v-if="regiontitle == '新增项目' || regiontitle == '修改项目' ">
        <el-form-item label="编码" prop="item_code">
          <el-input v-model="itemInfo.item_code" placeholder=""  style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="item_name">
          <el-input v-model="itemInfo.item_name" placeholder="" style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="项目介绍" prop="introduction">
          <el-input type="textarea"  v-model="itemInfo.introduction" placeholder="" style="width: 100%;"></el-input>
        </el-form-item>
        </div>
        <div v-else>
        <el-form-item label="所属项目" prop="code">
          <el-input v-model="itemInfo.parentname" placeholder=""  style="width: 100%;" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="编码" prop="item_code">
          <el-input v-model="itemInfo.item_code" placeholder=""  style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="指标名称" prop="item_name">
          <el-input v-model="itemInfo.item_name" placeholder="" style="width: 100%;"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="introduction">
          <el-input type="textarea"  v-model="itemInfo.introduction" placeholder="" style="width: 100%;"></el-input>
        </el-form-item>
        </div>
       
      </el-form>
      <span class="dialog-footer"
        style="display: flex; display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="expertsubmit(itemInfoRef)">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog v-model="isConclusion" :close-on-click-modal="false" :before-close="handleClose" :title="regiontitle " draggable
      append-to-body width="800px" class="dialogClass">
      <el-table border :data="itemResultsData" v-loading="loading" class="w-full  !h-[400px]"
        :header-cell-style="{ background: '#f8f8f8', color: '#505050', height: '43px' }">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="code" label="结论编号"  width="100">
          <template #default="scope">
              <el-input class="!w-full" clearable v-model="scope.row.code" placeholder=" " />
          </template>
        </el-table-column>
        <el-table-column prop="code" label="结论名称"  width="170">
          <template #default="scope">
              <el-input class="!w-full" clearable v-model="scope.row.name" placeholder=" " />
          </template>
        </el-table-column>
        <el-table-column prop="rule" label="区间范围">
          <template #default="scope">
              <el-input class="!w-full" clearable v-model="scope.row.rule" placeholder=" " />
          </template>
        </el-table-column>

        <el-table-column label="操作" width="90" align="center" fixed="right">
          <template #header>
            <div style="display: flex; align-items: center;">
              <div>操作</div>
              <el-button class="ml-[4px] !text-[16px] font-blod" type="primary" size="small" circle
                @click="addparameter">+</el-button>
            </div>
          </template>
          <template #default="scope">
            <div style="display: flex;justify-content: space-around;">
              
              <img title="删除" @click="delectparams(scope.$index)" style="cursor: pointer;" src="@/assets/tableicon/del.svg">
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <span class="dialog-footer" style="margin-top:10px ;">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="saveparam">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.detail-box {
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 3px;
  padding: 5px 20px 0px;
  box-sizing: border-box;
}

:deep(.el-tooltip) {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  position: relative;
}

.delicon {
  width: 20px;
  height: 25px;
  position: relative;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  // margin-left: 20px;

}

.delicon:hover {
  // background-color: red;

  .delIcon {
    display: block !important;
    color: #fff;
    cursor: pointer;
  }

}


:deep(.el-table__expand-icon) {
  margin-left: 15px;
  margin-right: -10px !important;
}
.dialog-footer {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

</style>