<template>
  <div class="wrap">
    <div class="searchBox">
      <el-input v-model="keyWord" style="width: 240px" placeholder="请输入关键字" />
      <el-button type="primary" style="margin-left: 15px;" @click="searchHandle">搜索</el-button>
    </div>
    <el-row :gutter="20">

      <el-col :span="10">
        <el-alert :closable="false" title="指标分类" type="success" style="margin-bottom: 5px;" />
        <el-button type="primary" class="filter-item" @click="btn_addType">添加</el-button>
        <el-button type="danger" class="filter-item" @click="btn_deleteType">删除</el-button>
        <el-table :data="categoryData"
          border 
          style="width: 100%" 
          highlight-current-row
          @row-click="handleCurrentChange">
          <el-table-column type="index" width="80" label="编号" align="center" min-width="" />
          <el-table-column prop="categoryName" label="分类名称" align="center" min-width="" />
          <el-table-column prop="score" label="合计分值" align="center" min-width="" />
          <el-table-column fixed="right" align="center" label="操作" min-width="120">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleClick(scope.row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="14">
        <el-alert :closable="false" title="指标列表" type="success" style="margin-bottom: 5px;" />
        <el-button type="primary" class="filter-item" @click="btn_add">添加</el-button>
        <el-button type="danger" class="filter-item" @click="btn_delete">删除</el-button>
        <el-button type="primary" class="filter-item" @click="getIndexbase('0')">所有指标</el-button>
        <el-table :data="indexbaseData" border stripe @row-click="changeSelectss">
          <!-- <el-table-column type="selection" width="40" /> -->
          <el-table-column type="index" width="80" label="编号" align="center" min-width="" />
          <el-table-column prop="categoryName" label="指标分类" align="center" min-width="" />
          <el-table-column prop="title" label="指标标题" align="center" min-width="" />
          <el-table-column prop="score" label="分值" align="center" min-width="" />
          <el-table-column fixed="right" label="操作" align="center" min-width="120">
            <template #default="scope">
              <el-button type="primary" size="small" @click="btn_edit(scope.row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style=" margin-top: 15px;"
          v-show="pageParams.total > 0"
          :total="pageParams.total"
          v-model:page="pageParams.pageindex"
          v-model:limit="pageParams.pageSize"
          @change="changePageHandle"
        />
      </el-col>
    </el-row>
    <!-- 添加分类 -->
		<el-dialog
      v-model="dialogType"
      :title="typeTitle"
      align-center
      width="500"
    >
      <add-edit-type :getDefaultInfo="postDefaultInfo" @updateSuccess="getRefresh"></add-edit-type>
    </el-dialog>
    <!-- 列表添加 -->
    <el-dialog
      v-model="dialoglist"
      :title="listTitle"
      align-center
      width="500"
    >
      <add-edit :getListInfo="postListInfo" @refreshOrder="submitListRefresh"></add-edit>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import addEditType from './addOrEditType';
  import addEdit from './addOrEdit';

  import moment from 'moment';
  const { proxy } = getCurrentInstance();

  import { getPageListData,deletePageData } from '@/api/main/system/system';

  const keyWord = ref('')
  const typeId = ref('')
  const dialogType = ref(false)
  const typeTitle = ref('添加分类')

  const listId = ref('')
  const dialoglist = ref(false)
  const listTitle = ref('添加指标')
  
  const pageParams = ref({
      pageindex: 1, // 当前第几页
      pageSize: 10, // 每页几条数据
      total: 0 // 总共多少数据
  })
  const categoryId = ref()
  const categoryData = ref([])
  const indexbaseData = ref([])
  const postDefaultInfo = ref({})
  const postListInfo = ref({})
  const categoryListId = ref()

  onMounted(() => {
    getCategory() //  左侧数据
    getIndexbase(0) //  右侧数据
  });
  function searchHandle() {
    getCategory() //  左侧数据
    const categorySearchId = categoryId.value?categoryId.value:'0'
    getIndexbase(categorySearchId) //  右侧数据
  }
  function getRefresh() {
    dialogType.value = false
    getCategory() //  左侧数据
  }
  
  function submitListRefresh(val) {
    dialoglist.value = false
    getIndexbase(val) //  右侧数据
    getCategory() //  左侧数据
  }
  function btn_addType() {
    postDefaultInfo.value = {}
    dialogType.value = true
  }
  function handleCurrentChange(data) {
    categoryId.value = data.categoryId
    getIndexbase(data.categoryId)
  }
  function btn_deleteType() {
    if (categoryId.value) {
      proxy.$modal.confirm('确定删除此条记录吗').then((e) => {
        deletePageData('/quality/category/' + categoryId.value).then((data) => {
          proxy.$modal.msgSuccess('操作成功');
          getCategory();
        });
      });
    } else{
      proxy.$modal.msgSuccess('请选择要删除的分类');
    }
  }
  // 分类编辑
  function handleClick(item) {
    postDefaultInfo.value = item
    dialogType.value = true
  }

  // 分类数据
  function getCategory() {
    
    const params = {} 
    getPageListData("/quality/category", params).then((res) => {
      if (res.data.length>0) {
        categoryData.value = res.data
      }else{
        categoryData.value = []
      }
      
    })
  }


  function btn_add() {
    postListInfo.value = {}
    dialoglist.value = true
  }
  function btn_delete() {
    if (categoryListId.value) {
      proxy.$modal.confirm('确定删除此条记录吗').then((e) => {
        deletePageData('/quality/indexbase/' + categoryListId.value).then((data) => {
          proxy.$modal.msgSuccess('操作成功');
          const categorySearchId = categoryId.value?categoryId.value:'0'
          getCategory()
          getIndexbase(categorySearchId)
        });
      });
    } else{
      proxy.$modal.msgSuccess('请选择要删除的分类');
    }
  }
  function btn_edit(item) {
    postListInfo.value = item
    dialoglist.value = true
  }
  function changeSelectss(data) {
    categoryListId.value = data.indexId
  }
  function changePageHandle(data) {
    pageParams.value.pageindex = data
    const categorySearchId = categoryId.value?categoryId.value:'0'
    getIndexbase(categorySearchId)
  }
  // 列表数据
  function getIndexbase(categoryId) {
    const params = {
      categoryId,
      pageNum: pageParams.value.pageindex,
      pageSize: pageParams.value.pageSize,
      title:keyWord.value
    }
    getPageListData("/quality/indexbase", params).then((res) => {
      if (res.data.length>0) {
        indexbaseData.value = res.data
        pageParams.value.total = res.total
      }else{
        indexbaseData.value = []
      }
      
    })
  }
</script>
<style scoped lang="scss">
  .wrap {
    padding: 15px;

    .searchBox {
      margin-bottom: 15px;
    }

    .filter-item {
      margin-bottom: 15px;
    }
  }
</style>