<template>
  <n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse">
    <n-drawer-content closable title="问题列表">
      <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" />
      <DataTable
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        @fetch-success="getTableData"
      />

      <MapDrawer v-model:visible="mapDrawer" :data="rowData" />

      <PreviewModal v-if="previewModal" v-model:visible="previewModal" :data="pageData" :select-row="rowData" />

    </n-drawer-content>
  </n-drawer>

</template>

<script>
import table from '../tools/quesTable.js'
import { search } from '../tools/quesSearch.js'
import HeadSearch from '@/components/Search/index.vue'
import DataTable from '@/components/DataTable/index.vue'
import { defineComponent, reactive, unref, toRefs, computed, watch } from 'vue'
import PreviewModal from './PreviewModal.vue'
import MapDrawer from './MapDrawer.vue'
import { getOrderQuesList } from '@/api/order/index.js'

export default defineComponent({
  name: 'LiveDrawer',
  components: { HeadSearch, DataTable, MapDrawer, PreviewModal },
  props: {
    /* 可见 */
    visible: {
      type: Boolean,
      default: false
    },
    /* 选中的数据 */
    data: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null
  },
  setup(props, { emit }) {
    const data = reactive({
      search,
      ...toRefs(table),
      pageData: []
    })

    /* 获取抽屉的信息 */
    const getDrawerOptions = computed(() => {
      return {
        show: props.visible,
        width: '100%',
        placement: 'right'
      }
    })
    /* 关闭抽屉 */
    function handleDrawerColse() {
      emit('update:visible', false)
    }
    watch(() => [props.visible, props.data],
      ([val1, val2]) => {
        // if (val1 && val2.id) {

        // }
      })
    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        workOrderId: props.data.id,
        ...res
      }
      if (_params.questionType === 'all') _params.questionType = null
      if (_params.status === 'all') _params.status = null
      return await getOrderQuesList(_params)
    }

    function getTableData(list) {
      data.pageData = list.items
    }

    return {
      ...toRefs(data),
      getDrawerOptions,
      handleDrawerColse,
      loadDataTable,
      getTableData
    }
  }
})
</script>

<style scoped lang='scss'>
.report__container{
  width: 900px;
  margin: 0 auto 40px auto;
  .report__item{
    margin-bottom: 40px;
    .report__item--title{
      font-size: 18px;
      color: #333333;
      line-height: 44px;
    }
    .n-grid{
      border-top: 1px solid rgba(216, 216, 216, 1);
      border-left: 1px solid rgba(216, 216, 216, 1);
      >div{
        position: relative;
        text-align: center;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        padding: 6px 12px;
        word-wrap: break-word;
        word-break: normal;
        border-right: 1px solid rgba(216, 216, 216, 1);
        border-bottom: 1px solid rgba(216, 216, 216, 1);
        &:nth-child(2n-1){
          span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
          }
          background: rgba(228, 231, 237, 1);
        }
      }
    }
  }
  .report__operate{
    text-align: center;
  }
}
::v-deep(.n-image){
  width: 100%;
  img{
    width: 100%;
  }
}
</style>
