<template>
 <div class="h100">
   <common-layout
     @getCheckedTable="getCheckedTable"
     @changeOperation="changeOperation"
     :table-control-btns="topBtns"
     :is-show-table-btn="true"
     :table-header="interfaceManageHomeTableHeader"
     :filter-form="formConfig"
     :form-attrs="{
       spanAttrs:{
         span:4
       }
     }"
     ref="layoutRef"
     :table-attrs="{
     'has-operation':true,
     'multi-select':true,
     }"
    :get-table-list="getTableList"
   >
     <template #RESOURCE_TYPE="{data}">
       {{getResourceType(data.RESOURCE_TYPE)}}
     </template>
     <template #INTERFACE_STATE="{data}">
       {{getState(data.INTERFACE_STATE)}}
     </template>
    <template #operation="{data}">
      <el-button type="info" @click="$emit('changeOperation','detail',data)">详情</el-button>
      <el-button v-if="+data.INTERFACE_STATE===2" type="danger" @click="changeState(data,'3')" >停止</el-button>
      <el-button v-else type="info" @click="changeState(data,'2')">启用</el-button>
    </template>
   </common-layout>
 </div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {onActivated, onBeforeMount, ref} from "vue"
import {interfaceManageHomeFilterForm} from "@/data/all-forms";
import {interfaceManageHomeTableHeader} from "@/data/all-table-header";
import {
  changeHomeDataState,
  deleteHomeTableData,
  getInterfaceHomeTableData,
  getToolTypeOptions
} from "@/service/system-manage/interface-manage";
import {elAlert, handleMes, showConfirm, showMessage} from "@/unit/element-ui/tip";
import {deleteProcessMb} from "@/service/zsk/process-mb";
import {useActiveGetTableData} from "@/unit/use-method/usePagination";
export default {
  name: "InterfaceManageHome",
  components: {CommonLayout},
  setup(props,{emit}) {
    useActiveGetTableData(getTableList)
    const checkedTable = ref([])

    function getCheckedTable(checked){
      checkedTable.value = checked
    }
    function changeState(data,state){
      changeHomeDataState(data.UUID,state).then(res => {
        handleMes(res,() =>{
          getTableList()
        })
      })
    }
    function changeOperation(operation){
      if (operation === 'delete'){
        if (!(checkedTable.value.length === 1)) {
          elAlert('请选择一条数据删除')
        }else {
          showConfirm(() => {
            deleteHomeTableData(checkedTable.value[0].UUID).then(res => {

              if (+checkedTable.value[0].INTERFACE_STATE===2){
                showMessage({
                  type:'error',
                  message:'正在使用，不能删除'
                })
              }else {
                handleMes(res,() => {
                  getTableList()
                })
              }
            })
          },'确定要删除吗','系统提示',{
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })

        }
      }
      else if (operation ==='add'){
        emit('changeOperation','add')
      } else if (operation ==='edit'){
        if (!(checkedTable.value.length === 1)) {
          elAlert('请选择一条数据编辑')
        }else {
          emit('changeOperation','edit',checkedTable.value[0])
        }

      }

    }
    const layoutRef = ref(null)
    const formConfig = ref({...interfaceManageHomeFilterForm})
    function getResourceType(value){
      switch (value) {
        case "1":
          return "空间应用工具";
        case "2":
          return "综合应用工具";
        case "3":
          return "政务数据工具";
        default:
          return ''
      }
    }
    onActivated(() => {
    //   获取工具类型下拉框
      getToolTypeOptions().then(res => {
        const findToolType = formConfig.value.formItemsArr.find(i => i.modelValue === 'TYPE')
        findToolType.options = [{value:'',label:'请选择'}].concat(res.msg[0].Rows.map(i => {
          return {
            label:i.NAME,
            value:i.CODE,
          }
        }))
      })
    })
   function getState(value){
        if (!value){
          return ''
        }
     if(value === "2"){
       return "启动";
     }else{
       return "停止";
     }
   }
    const topBtns =   [
      {
        id:'9af449d8-cdb4-4804-b15e-0f60d866c15f',
        type:'新增',
        className:'glyphicon glyphicon-plus'
      },
      {
        id:'9af449d8-cdb4-4804-b15e-0f60d866c15f',
        type:'编辑',
        className:'glyphicon glyphicon-pencil'
      },
      {
        id:'c9af72ac-bab5-48a4-b119-a9b82ac053a7',
        type:'刷新',
        className:'glyphicon glyphicon-repeat'
      },
      {
        id:'ff55c172-2676-4379-afe0-b6b181b08767',
        type:'删除',
        className:'glyphicon  glyphicon-trash'
      }
    ]
    function getTableList() {
      getInterfaceHomeTableData({
        pageIndex:layoutRef.value.pageIndex,
        pageSize:layoutRef.value.pageSize,
        TYPE:layoutRef.value.form.TYPE,
        RESOURCE_NAME:layoutRef.value.form.RESOURCE_NAME,
        RESOURCE_TYPE:layoutRef.value.form.RESOURCE_TYPE,
      }).then(res => {
        layoutRef.value.getResData(res.msg[0].Rows,res.msg[0].TotalRowCount)
      })

    }
    return {
      layoutRef,
      getTableList,
      formConfig,
      interfaceManageHomeTableHeader,
      getResourceType,
      getState,
      topBtns,
      changeOperation,
      getCheckedTable,
      changeState
    }
  }
}
</script>

<style scoped lang="scss">

</style>
