<template>
  <el-dialog

    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"



    title="系统图标"
    :model-value="dialogVisible"

    :before-close="handleClose"

  >
    <my-table
      ref="tableRef"
      @getSingleCheckedChange="getSingleCheckedChange"
      :is-single-select="true"
      :table-data="tableData"
      :headers="systemIconDialogTableHeader"
    :page-size="8">
      <template #ICON="{data}">
        <span class="iconfont" :class="data.ICON_CODE"></span>
      </template>
    </my-table>
    <template #footer>
      <el-button :icon="Select" @click="saveS">保存</el-button>
      <el-button :icon="Close" @click="handleClose">返回</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {nextTick, onBeforeMount, ref, watch} from "vue";
import MyTable from "@/components/common/MyTable.vue";
import {systemIconDialogTableHeader} from "@/data/all-table-header";
import {getSystemIconTableData} from "@/service/system-manage/root-manage";
import {Close, Select} from "@element-plus/icons-vue";

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

    },
    dialogObj:{}
  },
  setup(props,{emit}){
    const tableRef = ref([])
    function saveS(){
      emit('changeIcon',checkedT.value)
    }
    watch(() => props.dialogVisible,(val) => {
      if (!val){
        tableRef.value.changeE({},false)
      }else {
        nextTick(()=> {
          let isF = tableData.value.find(i => props.dialogObj.O_LCON && (i.ICON_CODE ===props.dialogObj.O_LCON.replace('iconfont','').trim()))
          if (isF){
            tableRef.value.changeE(isF,true)
          }
        })
      }
    })
    function getSingleCheckedChange(checked){
      checkedT.value = checked
    }
    const checkMyt = ref([])
    const checkedT = ref([])
    const tableData = ref([])
    onBeforeMount(() => {
      getSystemIconTableData().then(res => {
        tableData.value = res.msg[0].Rows
      })
    })
    function handleClose(){
      emit('update:dialogVisible',false)
    }
    return {
      handleClose,
      tableData,
      systemIconDialogTableHeader,
      checkedT,
      getSingleCheckedChange,
      saveS,
      checkMyt,
      tableRef
    }
  }
}
</script>

<style scoped lang="scss">

</style>
