<template>
 <div class="h100">
   <common-layout
     @changeOperation="changeOperationBtn"
     @getCheckedTable="getCheckedTable"
     :is-show-table-btn="true"
     :table-control-btns="allTableBtns"
     :form-attrs="{
     spanAttrs: {
       span:4
     }
     }"

     :filter-form="appArrangeHomeFilterForm"
     :table-attrs="{
       'has-operation':false,
       'operation-width':'max-content',
       'multi-select':true
     }"
     :get-table-list="getTableList"
     :table-header="appArrangeHomeTableHeader"
      ref="layoutRef"
   >
     <template #USE_TYPE="{data}">
       {{getUseType(data.USE_TYPE)}}
     </template>
       <template #operation="{data}">
         <el-button type="info" @click="$emit('changeOperation','detail',data)">详情</el-button>
       </template>
   </common-layout>
 </div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {ref} from "vue";
import {appArrangeHomeTableHeader} from "@/data/all-table-header";
import {appArrangeHomeFilterForm, dataBaseUseTypeOptions, } from "@/data/all-forms";
import {
  deleteAppArrangeWatchData,
  getAppArrangeWatchHomeTableData
} from "@/service/data-process-watch/app-arrange-watch";
import {elAlert, handleMes, showConfirm} from "@/unit/element-ui/tip";
import {useActiveGetTableData} from "@/unit/use-method/usePagination";


export default {
  name: "AppArrangeHome",
  components: {CommonLayout},
  setup(props,{emit}) {
    useActiveGetTableData(getTableList)
    function changeOperationBtn(type){
      console.log(type,'type')
      if (type === 'delete'){
       if (!(checkedTable.value.length ===1)){
          elAlert('请选择一条数据删除')
       }else {
         showConfirm(() => {
           deleteAppArrangeWatchData(checkedTable.value[0].UUID).then(res => {
             handleMes(res,() => {
               getTableList()
             })
           })
         },'确定要删除吗','系统提示',{
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
         })
       }
      }
      else if (type === 'detail'){
        if (!(checkedTable.value.length === 1)){
          elAlert('请选择一条数据查看')
        }else {
          emit('changeOperation','detail',checkedTable.value[0])
        }
      }else if (type === 'add'){
        emit('changeOperation','add')
      }else if (type === 'edit'){
        if (!(checkedTable.value.length === 1)){
          elAlert('请选择一条数据编辑')
        }else {
          emit('changeOperation','edit',checkedTable.value[0])
        }

      }
    }
    const checkedTable = ref([])
    function getUseType(value){
      return dataBaseUseTypeOptions().find(i => i.value === value)?.label
    }
    const allTableBtns =     [
      {
        id:'9af449d8-cdb4-4804-b15e-0f60d866c15f',
        type:'详情',
        className:'glyphicon glyphicon-list-alt'
      },
      {
        id:'c9af72ac-bab5-48a4-b119-a9b82ac053a7',
        type:'刷新',
        className:'glyphicon glyphicon-repeat'
      },
      {
        id:'ff55c172-2676-4379-afe0-b6b181b08767',
        type:'新增',
        className:'glyphicon glyphicon-plus'
      },
      {
        id:'c9af72ac-bab5-48a4-b119-a9b82ac053a7',
        type:'编辑',
        className:'glyphicon glyphicon-pencil'
      },
      {
        id:'ff55c172-2676-4379-afe0-b6b181b08767',
        type:'删除',
        className:'glyphicon glyphicon-trash'
      }
    ]
    function getCheckedTable(checked){
      checkedTable.value = checked
    }
   function getTableList() {

     getAppArrangeWatchHomeTableData({
       pageIndex:layoutRef.value.pageIndex,
       pageSize:layoutRef.value.pageSize,
       HOST_NAME:layoutRef.value.form.HOST_NAME,
       USE_TYPE:layoutRef.value.form.USE_TYPE,
     }).then(res => {
       layoutRef.value.getResData(res.msg[0].Rows||[],res.msg[0].TotalRowCount)
     })

   }
    const layoutRef = ref(null)
    return {
      layoutRef,getTableList,
      appArrangeHomeTableHeader,
      appArrangeHomeFilterForm,
      allTableBtns,
      getCheckedTable,
      checkedTable,
      changeOperationBtn,
      getUseType

    }
  }
}
</script>

<style scoped lang="scss">

</style>
