<template>
  <layout-card>
    <layout-table :data="list" :show-pagination="false">
      <el-table-column label="序号" width="60" type="index" />
      <el-table-column prop="CORP_NAME" label="企业名称" />
      <el-table-column label="离岗是否审批" width="260">
        <template #default="{ row }">
          <el-switch
            v-model="SETUP_STATE"
            active-text="是"
            inactive-text="否"
            active-value="2"
            inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="fnChange(row)"
          />
        </template>
      </el-table-column>
    </layout-table>
  </layout-card>
</template>

<script setup>
import useListData from "@/assets/js/useListData.js";
import {
  getSettingList,
  setSettingChange,
} from "@/request/off_duty_management.js";
import { ref } from "vue";
import { debounce } from "throttle-debounce";
import { ElMessage } from "element-plus";

const SETUP_STATE = ref("");
const { list, fnResetPagination } = useListData(getSettingList, {
  usePagination: false,
  callbackFn: (list) => {
    if (list.length > 0) SETUP_STATE.value = list[0].SETUP_STATE;
  },
});
const fnChange = debounce(
  1000,
  async (row) => {
    await setSettingChange({
      OFFDUTY_SETUP_ID: row.OFFDUTY_SETUP_ID,
      CORPINFO_ID: row.CORPINFO_ID,
      SETUP_STATE: SETUP_STATE.value,
    });
    ElMessage.success("设置成功");
    fnResetPagination();
  },
  { atBegin: true }
);
</script>

<style scoped></style>
