<template>
  <el-dialog
    :model-value="props.modelValue"
    :append-to-body="appendToBody"
    @update:model-value="$emit('update:modelValue', $event)"
    title="安全责任通知区域选择"
    width="800"
    @close="clearData"
  >
    <el-tabs v-model="activeTab">
      <el-tab-pane :disabled="activeTab !== 1" label="公共区域" :name="1" />
      <el-tab-pane :disabled="activeTab !== 2" label="非公共区域" :name="2" />
    </el-tabs>
    <div class="main">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="queryParams.queryParam.nameFunction" placeholder="搜索楼宇/区域" />
        </el-form-item>
        <!-- <el-form-item>
          <el-select v-model="queryParams.queryParam.status" clearable placeholder="状态" style="width: 170px">
            <el-option :value="1" label="未下发" />
            <el-option :value="2" label="待反馈" />
            <el-option :value="3" label="待审核" />
            <el-option :value="4" label="已完成" />
            <el-option :value="5" label="已作废" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button @click="queryTableList" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="table-content">
        <el-table
          row-key="id"
          :data="tableData.data"
          @selection-change="handleSelectionChange"
          v-if="queryParams.queryParam.type === 1"
        >
          <el-table-column type="selection" :reserve-selection="true" width="55" />

          <el-table-column type="index" label="序号" width="80" />
          <el-table-column label="楼宇/区域" prop="buildingArea" width="180" />
          <el-table-column label="楼层/房号" prop="floorRoomNo" width="180" />
          <el-table-column label="名称/功能" prop="nameFunction" width="120" />
          <el-table-column label="安全责任所/中心" prop="safetyResponsibleCenter" width="200" />
          <el-table-column label="安全责任所/中心负责人" prop="safetyCenterManagerName" width="200" />
          <el-table-column label="安全责任部门" prop="safetyResponsibleDepartment" width="180" />
          <el-table-column label="安全责任部门负责人" prop="safetyDepartmentManagerName" width="180" />
          <el-table-column label="安全具体责任人" prop="safetySpecificPersonName" width="180" />
          <el-table-column label="安全具体责任人联系方式" prop="safetyPersonContact" width="230" />
          <el-table-column label="状态" prop="statusName" width="100" />
        </el-table>
        <el-table
          row-key="id"
          :data="tableData.data"
          @selection-change="handleSelectionChange"
          v-if="queryParams.queryParam.type === 2"
        >
          <el-table-column type="selection" :reserve-selection="true" width="55" />
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column label="楼号" prop="buildingNo" width="180" />
          <el-table-column label="楼层" prop="buildingArea" width="100" />
          <el-table-column label="房间/区域" prop="floorRoomNo" width="180" />
          <el-table-column label="功能名称" prop="nameFunction" width="120" />
          <el-table-column label="安全责任所/中心" prop="safetyResponsibleCenter" width="200" />
          <el-table-column label="安全责任所/中心负责人" prop="safetyCenterManagerName" width="200" />
          <el-table-column label="安全责任部门" prop="safetyResponsibleDepartment" width="180" />
          <el-table-column label="安全责任部门负责人" prop="safetyDepartmentManagerName" width="180" />
          <el-table-column label="安全具体责任人" prop="safetySpecificPersonName" width="180" />
          <el-table-column label="安全具体责任人联系方式" prop="safetyPersonContact" width="230" />
          <el-table-column label="变更原因" prop="changeReason" width="170" />
          <el-table-column label="状态" prop="statusName" width="100" />
        </el-table>
      </div>

      <div class="pagination-container" v-if="tableData.total > 0">
        <el-pagination
          background
          :current-page="queryParams.pageNumber"
          :page-size="queryParams.pageSize"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <template #footer>
      <div>
        <el-button type="primary" @click="submitForm" :loading="submitLoading"> 确定 </el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, watch } from 'vue';
  import { areaCheckListQueryPage } from '@/api/production-safety/responsibility-implementation';

  const props = defineProps<{
    type: number;
    modelValue: boolean;
    appendToBody?: boolean;
  }>();
  const emit = defineEmits(['close', 'submit', 'update:modelValue']);
  const submitLoading = ref(false);
  const activeTab = ref(props.type);
  const selectionList = ref([]);
  const queryParams = reactive<any>({
    pageNumber: 1,
    pageSize: 10,
    queryParam: {
      type: activeTab.value,
      nameFunction: '',
      status: 1,
      responsibilityPersonId: '',
    },
  });
  const tableData = reactive({
    data: [],
    total: 0,
  });

  function dialogShow() {}
  function dialogHide() {
    emit('close');
  }
  function clearData() {}

  function submitForm() {
    emit('submit', selectionList.value);
    emit('update:modelValue', false);
  }
  const handleSelectionChange = (val: []) => {
    selectionList.value = val;
    console.log(selectionList.value);
  };

  const queryTableList = () => {
    console.log(queryParams.queryParam.type);
    areaCheckListQueryPage(queryParams).then((res) => {
      tableData.data = res.records;
      tableData.total = res.totalRow;
    });
  };

  const handleCancel = () => {
    selectionList.value = [];
    emit('update:modelValue', false);
  };
  const handleSizeChange = (value) => {};
  const handleCurrentChange = (value) => {
    queryParams.pageNumber = value;
    queryTableList();
  };
  watch(
    () => props.type,
    (a, b) => {
      activeTab.value = a;
    },
  );
  watch(
    () => activeTab.value,
    (a, b) => {
      Object.assign(queryParams, {
        queryParam: {
          ...queryParams.queryParam,
          type: a,
        },
      });
      queryTableList();
    },
  );

  onMounted(() => {
    queryTableList();
  });

  defineExpose({
    submitLoading,
    dialogShow,
    dialogHide,
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/basic-table-action.scss' as *;

  .main {
    display: flex;
    flex-direction: column;
    max-height: 400px;
  }

  .table-content {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
  }

  .pagination-container {
    margin-top: 20px;
  }
</style>
