<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog title="历史记录" v-model="visible" width="800px" append-to-body draggable :close-on-click-modal="false">
    <el-row>
   
      <el-form  :model="queryParams" ref="queryRef" label-width="120px">
        <el-form-item label="客户名称：">
         <span style="font-size: 12px;">{{currentMember}}</span>
        </el-form-item>
        <el-form-item label="所属期：" prop="year">
          <el-date-picker size="small" v-model="queryParams.currentMonth" type="month" format="YYYY年MM月" style="width: 130px"
            value-format="YYYY-MM-01" 
            :clearable="true" @change="getList" />
        </el-form-item>

        <el-form-item prop="dateFilter" label="操作时间：">
          <el-date-picker size="small" v-model="queryParams.dateFilter" type="daterange" clearable
            format="YYYY - MM - DD " value-format="YYYY-MM-DD" range-separator="至" start-placeholder="业务日期"
            end-placeholder="业务日期" style="width: 70%;" @change="getList"></el-date-picker>
        </el-form-item>
  
      </el-form>
    </el-row>
    <div style="padding: 8px 24px 16px 24px">


      <!-- 列表区 -->
      <el-table v-loading="loading" :data="detailList" size="small" border>

        <el-table-column label="所属期" align="center" prop="belongPeriod" />
        <el-table-column label="操作" align="center" prop="event" min-width="130" />
        <el-table-column label="说明" align="center" width="100" prop="reason" />
        <el-table-column label="操作时间" align="center" min-width="120" prop="createTime" />
        <el-table-column label="操作人" align="center" prop="userName" min-width="100" />
        <el-table-column label="操作机构" align="center" prop="tenantName" min-width="100" :show-overflow-tooltip="true" />

      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>
  </el-dialog>
</template>


<script setup>
  import {
    list,
  } from "@/api/business/history";
  const { proxy } = getCurrentInstance();


  /** 父组件传参 */
  const props = defineProps({
    currentMember: {
      type: String,
      default: () => { },
    }
  });
  const {currentMember} = toRefs(props);
  /** 字典数组区 */
  const { develop_type } = proxy.useDict("develop_type");
  /** 表单抽屉 页变量 */
  const detailList = ref([]);
  const title = ref("");
  const total = ref(0);
  const loading = ref(false);
  const multiple = ref(true);
  const visible = ref(false);
  const editStatus = ref(false);
  const content = ref("");
  const isFullscreen = ref(false);
  const addDetailNum = ref(1);
  const cities = ref([]);
  const districts = ref([]);
  const sourceCategories = ref([]);
  const companyId = ref([]);

  const queryParams = ref({
    pageNum: 1,
    pageSize: 20,
    companyId: null,
    tableName:"biz_social_security_declare"
  });
  const webHost = import.meta.env.VITE_APP_BASE_API;

  const followQuery = ref({});

  /***********************  表单页方法 ****************************/

  /** 抽屉打开 */
  function open(companyId) {
    queryParams.value.companyId = companyId
    visible.value = true;
    getList()
  }
  function getList() {
    loading.value = true;
    list(queryParams.value).then((response) => {
      detailList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    });
  }

  function init() { }

  // 暴露给父组件的方法
  defineExpose({
    open,
  });
  init();
</script>

<style scoped>
  ::v-deep .el-dialog .el-dialog-body {
    height: 800px;
    overflow-y: auto;
  }

  .pagination-container {
    background: #fff;
  }
</style>