<template>
  <layout-card>
    <layout-table
      :data="list"
      @get-data="fnGetData"
      v-model:pagination="pagination"
    >
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ serialNumber(pagination, $index) }}
        </template>
      </el-table-column>
      <el-table-column prop="DEPTNAME" label="部门" />
      <el-table-column prop="POST_NAME" label="岗位" />
      <el-table-column prop="USERNAME" label="人员" />
      <el-table-column prop="SIGNTIME" label="签署时间" />
      <el-table-column label="状态">
        <template v-slot="{ row }">
          {{ row.ISSIGN === 0 ? "未签署" : "已签署" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="fnView(row.PROMISEPEOPLE_ID)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </layout-table>
    <view-info
      v-model:visible="data.viewDialog.visible"
      :info="data.viewDialog.info"
    />
  </layout-card>
</template>

<script setup>
import { useRoute } from "vue-router";
import useListData from "@/assets/js/useListData.js";
import {
  getAdministrationDetailsList,
  getAdministrationDetailsView,
} from "@/request/security_commitment_pro.js";
import { serialNumber } from "@/assets/js/utils.js";
import { reactive } from "vue";
import ViewInfo from "../template/components/view.vue";

const route = useRoute();
const { PROMISE_ID } = route.query;
const { list, pagination, fnGetData } = useListData(
  getAdministrationDetailsList,
  { otherParams: { PROMISE_ID } }
);
const data = reactive({
  viewDialog: {
    visible: false,
    info: {},
  },
});
const fnView = async (PROMISEPEOPLE_ID) => {
  const resData = await getAdministrationDetailsView({
    PROMISEPEOPLE_ID,
    PROMISE_ID,
  });
  const DETAIL = resData.COLLATERAL.map((item) => ({
    value: item.COLLATERAL,
    id: item.PROMISEDETAIL_ID,
  }));
  data.viewDialog.info = {
    ...resData.varList,
    DETAIL,
    FILEPATH: resData.ISGN.FILEPATH,
    SIGNTIME: resData.ISGN.SIGNTIME,
    COVERPEOPLE: resData.COVERPEOPLE[0].USERNAME,
  };
  data.viewDialog.visible = true;
};
</script>

<style scoped lang="scss"></style>
