<template>
 <div class="h100">
   <common-layout
     :form-attrs="{
    spanAttrs: {
      span:4
    }
   }"
     ref="layoutRef"
     :filter-form="formConfig"
     :table-header="interfaceOrderHomeTableHeader"
     :table-attrs="{
   'has-operation':true
   }"
     :get-table-list="getTableList"
   >
     <template #RESOURCE_TYPE="{data}">
       {{getResourceType(data.RESOURCE_TYPE)}}
     </template>
     <template #operation="{data}">
       <el-button type="info" @click="$emit('changeOperation','detail',data)">详情</el-button>
       <el-button v-if="+data.AUDIT_STATE === 1" type="info" @click="$emit('changeOperation','check',data)">审核</el-button>
       <el-button v-else-if="+data.AUDIT_STATE === 3" type="info" disabled @click="$emit('changeOperation','check',data)">已审核</el-button>
       <template v-else-if="+data.AUDIT_STATE === 2 && +data['STATE'] === 1">
         <el-button  type="danger" @click="changeState(data,'2')">禁用</el-button>
       </template>
       <template v-else-if="+data.AUDIT_STATE === 2 && +data['STATE'] === 2">
         <el-button type="info"  @click="changeState(data,'1')">启用</el-button>
       </template>
     </template>
     <template #AUDIT_STATE="{data}">
       {{getApplyState(data.AUDIT_STATE)}}
     </template>
<!--   <template #operation="{data}">-->
<!--     <el-button type="info" @click="$emit('changeOperation','detail',data)">详情</el-button>-->
<!--     <el-button  type="info">审核</el-button>-->
<!--   </template>-->
   </common-layout>
 </div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {onActivated, onBeforeMount, ref} from "vue";
import {interfaceOrderHomeTableHeader} from "@/data/all-table-header";
import {interfaceOrderHomeFilterForm} from "@/data/all-forms";
import {changeInterfaceOrderState, getInterfaceOrderHomeTableData} from "@/service/system-manage/interface-order";
import {getToolTypeOptions} from "@/service/system-manage/interface-manage";
import {isEmptyCheck} from "@/unit/validate";
import {handleMes} from "@/unit/element-ui/tip";
import {useActiveGetTableData} from "@/unit/use-method/usePagination";

export default {
  name: "InterFaceOrderHome",
  components: {CommonLayout},
  setup() {
    useActiveGetTableData(getTableList)
    const layoutRef =ref(null)
    const formConfig = ref({...interfaceOrderHomeFilterForm})
    function changeState(data,state){
      changeInterfaceOrderState({
        APPLY_UUID:data.APPLY_UUID,
        CID:data.UUID,
        STATE:state
      }).then(res => {
        handleMes(res,() => {
          getTableList()
        })
      })
    }
    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 getApplyState(value, row, index) {
      if (isEmptyCheck(value)) {
        return "";
      }
      if(value == "2"){
        return "审核通过";
      }else if(value == "3"){
        return "审核不通过";
      }else{
        return "待审核";
      }
    }
    function getTableList() {
      getInterfaceOrderHomeTableData({
        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)
      })

    }
    function getResourceType(value){
      switch (value) {
        case "1":
          return "空间应用工具";
        case "2":
          return "综合应用工具";
        case "3":
          return "政务数据工具";
        default:
          return ''
      }
    }
    return {
      getTableList,
      layoutRef,
      interfaceOrderHomeTableHeader,
      interfaceOrderHomeFilterForm,
      formConfig,
      getResourceType,
      getApplyState,
      changeState
    }
  }
}
</script>

<style scoped lang="scss">

</style>
