<template>
  <div class="isShowSelectScene" style="width: 100%;height: 100%;">
    <a-table
      v-if="ishowTable"
      :columns="sceneColumns"
      :data-source="sceneData"
      :rowKey="(record) => record.sceneId"
      bordered
      :row-selection="rowSelection"
    >
      <!--場(chǎng)景類(lèi)別-->
      <template #type="{ record }">
        <span v-if="record.type == 1">設(shè)備級(jí)</span>
        <span v-else-if="record.type == 2">
          系統(tǒng)級(jí)
        </span>
        <span v-else>
          分系統(tǒng)級(jí)
        </span>
      </template>
      <!--場(chǎng)景內(nèi)容-->
      <template #sceneContent="{ record }">
           <span
             style="display: inline-block;width: 140px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    {{record.sceneContent}}
           </span>
      </template>
    </a-table>
  </div>
</template>


<script setup>
  import {computed, defineEmits, defineExpose, defineProps, onMounted, ref} from 'vue';
  import {getSceneListApi} from "../../../../../../common/api/scene/sceneApi.js"
  // 接收父組件傳遞的方法
  let myEmit = defineEmits(['changeSelectSonSceneId'])
  let isShowSelectScene = ref(true)


  const sceneColumns = [
    {
      title: '場(chǎng)景名稱(chēng)',
      dataIndex: 'sceneName',
      key: 'sceneName',
      // width:'20%',
      // slots: {
      //   title: 'customTitle',
      //   customRender: 'name',
      // },
    },
    {
      title: '場(chǎng)景類(lèi)別',
      dataIndex: 'type',
      key: 'type',
      slots: {customRender: 'type'},
      // width:'10%',
    },
    {
      title: '場(chǎng)景內(nèi)容',
      key: 'sceneContent',
      dataIndex: 'sceneContent',
      width: '20%',
      slots: {customRender: 'sceneContent'},
    },
    {
      title: '創(chuàng)建人',
      dataIndex: 'createUserName',
      key: 'createUserName',
      // width:'10%',
    },
    {
      title: '創(chuàng)建時(shí)間',
      key: 'createTime',
      dataIndex: 'createTime',
      // width:'20%',
    }
  ]

  let sceneData = ref([])

  let dataListSelectionKeys = ref([])
  let selectOnSelectChange = (selectedRowKeys, selectedRows) => {
    myEmit('changeSelectSonSceneId', selectedRowKeys)
    // props.currentSelectSonSceneId = selectedRowKeys
    // console.log(props.currentSelectSonSceneId)
  }

  onMounted(() => {
    let apiData = {
      treeType: '0',
      type:'3'
    }
    getSceneList(apiData)
  })

  let getSceneList = (apiData) => {
    apiData.treeType = apiData.treeType === '0' ? '' : apiData.treeType
    getSceneListApi(apiData).then(res => {
      sceneData.value = res.data
    })
  }

  // 編輯調(diào)用
  let toFatherMethod = (record) => {

  }
  // 暴露給父組件的值
  defineExpose({isShowSelectScene, toFatherMethod})
  // 暴露給父組件的方法

  // 接收父組件的值
  let props = defineProps(
    {
      selectDeptData: {
        type: Object,
        default: () => {
        }
      },
      ishowTable:{
        type:Boolean,
        default:()=>true
      },
      nowSelectLevel: {
        type: String,
        default: () => ""
      },
      currentSelectSonSceneId: {
        type: Array,
        default: () => []
      },
      defaultChecked: {
        type: String,
        default: () => ''
      }

    }
  )
  // 接收父組件傳遞的方法
  // let myEmit = defineEmits(['getSceneList'])

  let submitSceneInfo = () => {

  }



  const rowSelection = computed(() => {
    return {
      type: 'radio', // 是否為單選
      // 設(shè)置了這個(gè)屬性便無(wú)法選中
      // selectedRowKeys: dataListSelectionKeys,
      onChange: (selectedRowKeys, selectedRows, event) => {
        //selectedRowKeys 為你點(diǎn)擊選框時(shí)這一頁(yè)選中的所有key
        //selectedRows 為你點(diǎn)擊選框時(shí)這一頁(yè)選中的所有數(shù)據(jù)
        myEmit('changeSelectSonSceneId', selectedRowKeys)
        // props.currentSelectSonSceneId = selectedRowKeys
        // 是個(gè)數(shù)組
      },
      onSelect: (record, selected, selectedRows, nativeEvent) => {
        //record 點(diǎn)擊某一條的所有數(shù)據(jù)
        //selected 點(diǎn)擊的一條是否被選中
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        //selected 點(diǎn)擊全選是否選中
        //selectedRows 點(diǎn)擊全選判斷所有的選中數(shù)據(jù)
        //changeRows 所有改變選中狀態(tài)的數(shù)據(jù)
      },
      getCheckboxProps: record => {
        console.log(props)
        return {
          // 全部默認(rèn)禁止選中
          disabled: props.defaultChecked ? true : false,
          // 某幾項(xiàng)默認(rèn)禁止選中(R: 當(dāng)state等于1時(shí))
          // disabled: record.state == 1,
          // 某幾項(xiàng)默認(rèn)選中(R: 當(dāng)state等于1時(shí))
          defaultChecked: record.sceneId === props.defaultChecked
        }
      }
    }
  })


</script>

<style lang="less">
  .addSceneModal {

  }

</style>