<template>
  <div class="chart-sync-rule">
    <div class="my-b-title">数据归集信息</div>
    <div class="table-a">
      <my-table

        border
        :has-operation="true"
        :headers="chartSyncRuleTableHeader"
        :table-data="tableData"
        :page-size="8"
      >
        <template #operation="{data}">
          <el-button type="info" @click="changeState(data,'1')" :disabled="!(operationType !== 'detail' && currentOpObj.STATE!=='2')" v-if="data.KETTLE_RULE_STATES === '2'">启用</el-button>
          <el-button type="danger" @click="changeState(data,'2')" :disabled="!(operationType !== 'detail' && currentOpObj.STATE!=='2')" v-else>禁用</el-button>
        </template>
        <template #KETTLE_DIRECTION="{data}">
          {{getDataSource(data.KETTLE_DIRECTION)}}
        </template>
        <template #SEGMENT_ID="{data}">
          {{getGjData(data.SEGMENT_ID)}}
        </template>
      </my-table>
    </div>
    <div  class="m-s">
      显示第 1 到第 {{totalCount}} 条记录，总共 {{totalCount}} 条记录
    </div>
    <div class="detail-operation-btn" v-if="operationType!=='detail'">
      <el-button :icon="Select" @click="$emit('back')">保存</el-button>
      <el-button :icon="Close" @click="$emit('back')">返回</el-button>
    </div>
  </div>
</template>

<script>
import MyTable from "@/components/common/MyTable.vue";
import {onBeforeMount, ref} from "vue";
import {chartSyncRuleTableHeader} from "@/data/all-table-header";
import {getBaseQualityRuleTableData} from "@/service/zsk/base-rule/quality-rule";
import {changeSyncDetailState, getSyncDetailTableData} from "@/service/zsk/sync-rule";
import {handleMes} from "@/unit/element-ui/tip";
import {Close, Select} from "@element-plus/icons-vue";

export default {
  name: "ChartSyncRule",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    }
  },
  components: {MyTable},
  props:{
    settingType:{

    },
    operationType:{

    },
    currentOpObj:{

    }
  },
  setup(props) {
    const totalCount = ref(0)
    function getGjData(value, row, index) {
      if (value == '0') {
        return "前置机入共享交换";
      } else if (value == '1') {
        return "共享库入政务信息";
      } else if (value == '2') {
        return "共享库入信用信息";
      } else if (value == '3') {
        return "共享库入大数据中心";
      }else if (value == '4') {
        return "共享库入档案中心";
      }
      else if (value == '5') {
        return "前置机入政务信息";
      }else if (value == '6') {
        return "政务信息入大数据中心";
      }else if (value == '7') {
        return "共享库入一网通办";
      }
    }
    function getDataSource(value) {
      if (value == '0') {
        return "入库";
      } else {
        return "出库";
      }
    }
    function getTableData() {
      getSyncDetailTableData({
        "pageIndex": "1",
        "pageSize": "20000",
        "CATALOG_CID":props.currentOpObj["CATALOG_CODE"],
        "TYPE": "",
        "STATE": "",
      }).then(res => {
        let mapObj = {
          "2":"0",
          "7":"1",
          "8":"2",
          "9":"4",
          "10":"3",
          "15":"5",
          "16":"6",
        }

        tableData.value = res.msg[0].Rows.filter(i => +i.SEGMENT_ID === +mapObj[props.settingType]).map(i => {
          let obj = {...i}
          delete obj.RN
          return obj
        })
        totalCount.value = tableData.value.length
      })
    }
    function changeState(data,state) {
      changeSyncDetailState(data.KETTLE_RULE_ID,state).then(res => {
        handleMes(res,() => {
          getTableData()
        })
      })
    }
    onBeforeMount(() => {
      getTableData()
    })
   const tableData = ref([])
    return {
      tableData,
      chartSyncRuleTableHeader,
      changeState,
      totalCount,
      getDataSource,
      getGjData
    }
  }
}
</script>

<style scoped lang="scss">
.chart-sync-rule{
  padding:0 20px;
}
</style>
