<template>
<div class="report-mb h100">
  <common-layout
    @getCheckedTable="getC"
    @changeOperation="changeOperation"
    ref="layoutRef"
    :get-table-list="getTableList"
    :table-attrs="{
    'has-operation':true,
    'multi-select':true

    }"
    :is-show-table-btn="true"
    :table-control-btns="btns"
    :form-attrs="{
      spanAttrs: {
        span:5
      }
      }"
    :filter-form="reportMbHomeFilterForm"
    :table-header="reportMbHomeTableHeader"

  >
    <template #TYPE="{data}">
      {{data['TYPE'].split(',').map(i => reportMbTypeArr.find(it => i === it.value)?.label).join(',')}}
    </template>
    <template #STATE="{data}">
      {{getMbState(data)}}
    </template>
    <template #operation="{data}">
      <template v-if="data['STATE'] !== '5'">
        <el-button type="info" @click="changeMbState(data)">启用</el-button>
        <el-button type="info" @click="$emit('changeOperation','edit',data)">修改</el-button>
      </template>
      <template v-else>

        <el-button type="danger" @click="changeMbState(data)">禁用</el-button>
      </template>
      <el-button type="info" @click="$emit('changeOperation','detail',data)">详情</el-button>
    </template>
  </common-layout>
  <template v-if="isChhoceDialogIsShow">
    <chooce-report-mb-dialog @chooceTemplate="chooceTemplate" v-model:dialog-visible="isChhoceDialogIsShow"/>
  </template>
</div>
</template>

<script>
import CommonLayout from "@/components/CommonLayout.vue";
import {reportMbHomeFilterForm, reportMbTypeArr} from "@/data/all-forms";
import {reportMbHomeTableHeader} from "@/data/all-table-header";
import {ref} from "vue";
import {deleteReportMb, disableReportMb, enableReportMb, getReportMbHomeTableData} from "@/service/zsk/report-mb";
import {elAlert, handleMes, showConfirm} from "@/unit/element-ui/tip";
import {delSyncRule} from "@/service/zsk/sync-rule";
import ChooceReportMbDialog from "@/view/other/c-views/data-handle/zsk/process-mb/ChooceProcessMbDialog.vue";
import {useActiveGetTableData} from "@/unit/use-method/usePagination";


export default {
  name: "ReportMbHome",
  components: {ChooceReportMbDialog, CommonLayout},
  props:{
    reportMbType:{

    }
  },
  setup(props,{emit}) {
    useActiveGetTableData(getTableList)
    const isChhoceDialogIsShow = ref(false)
    const layoutRef = ref(null)
    const checkedTable = ref([])
    function chooceTemplate(type){
      emit('update:reportMbType',type)
      emit('changeOperation','add')
    }
    function changeOperation(type,item) {
      if (type === 'add'){
        isChhoceDialogIsShow.value = true
        // if (!layoutRef.value.form.TYPE){
        //   elAlert('请选择报告模板类型')
        //   return
        // }
        // emit('update:reportMbType',layoutRef.value.form.TYPE)
        // emit('changeOperation',type,item || {})
      }else if (type === 'delete'){
        delData()
      }

    }
    function getTableList() {
      getReportMbHomeTableData({
        NAME:layoutRef.value.form.NAME,
        TYPE:layoutRef.value.form.TYPE,
        pageSize:layoutRef.value.pageSize,
        pageIndex:layoutRef.value.pageIndex,
      }).then(res => {
        layoutRef.value.getResData(res.msg[0].Rows,res.msg[0].TotalRowCount)
      })

    }
    function getC(checked) {
      checkedTable.value = checked

    }

    function changeMbState(data) {
      if (data.STATE === '5'){
      //   需要禁用
        disableReportMb(data.UUID).then(res => {
          handleMes(res,() => {
            getTableList()
          },() =>{},'已禁用')
        })
      }
      else{
        //   需要禁用
        enableReportMb(data.UUID).then(res => {
          handleMes(res,() => {
            getTableList()
          },() =>{},'已启用')
        })
      }
    }

   function delData() {
      if (checkedTable.value.length !== 1){
        elAlert('只能选择一条数据删除')
      }else {
        showConfirm(() => {
          deleteReportMb(checkedTable.value[0].UUID).then(res => {
            handleMes(res,() => {
              getTableList()
            })
          })
        },'确定要删除吗','系统提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })



      }
   }
    function getMbState(item){
      let obj = {
        "0":'删除',
        "1":'保存',
        "5":'使用中',
      }
      return obj[item['STATE']]||'-'
    }
    const btns =   [
      {
        id:'9af449d8-cdb4-4804-b15e-0f60d866c15f',
        type:'新增',
        className:'glyphicon glyphicon-plus'
      },
      {
        id:'c9af72ac-bab5-48a4-b119-a9b82ac053a7',
        type:'刷新',
        className:'glyphicon glyphicon-repeat'
      },
      {
        id:'ff55c172-2676-4379-afe0-b6b181b08767',
        type:'删除',
        className:'glyphicon  glyphicon-trash'
      }
    ]
    return {
      reportMbHomeFilterForm,
      reportMbHomeTableHeader,
      getTableList,layoutRef,
      getMbState,
      btns,
      changeMbState,
      changeOperation,
      reportMbTypeArr,
      getC,
      delData,
      isChhoceDialogIsShow,
      chooceTemplate


    }
  }
}
</script>

<style scoped lang="scss">

</style>
