<template>
  <div class="technologicalprocess-modal-container">
    <template v-if="props.modalData.type === 'bind'">
      <BasicTable @register="registerTable" rowKey="id"> </BasicTable>
    </template>
    <template v-else>
      <a-form
        ref="formRef"
        :model="props.modalData.data"
        :rules="rules"
        labelAlign="right"
        :label-col="{ span: 5 }"
      >
        <a-form-item label="流程名称" name="name">
          <a-input v-model:value="props.modalData.data.name" />
        </a-form-item>
        <a-form-item label="流程排序" name="sort">
          <a-input-number v-model:value="props.modalData.data.sort"></a-input-number>
        </a-form-item>
        <a-form-item label="流程状态" name="status">
          <a-radio-group v-model:value="props.modalData.data.status" button-style="solid">
            <a-radio-button :value="0">启用</a-radio-button>
            <a-radio-button :value="1">禁用</a-radio-button>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </template>
    <div class="modal-footer">
      <a-button style="margin-right: 10px" @click="closeModal">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, ref, onMounted, onBeforeUnmount } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { GetRolesList, GetBindRolesList, BindRolesList } from '@/api/sys/technologicalprocess';
  import { modalColumns } from '../util';
  import { message } from 'ant-design-vue';

  const formRef = ref();
  const props = defineProps(['modalData']);
  const emit = defineEmits(['closeModal', 'submit']);
  const rules = {
    name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
    sort: [{ required: true, message: '流程排序不能为空', trigger: 'blur' }],
  };
  const data = ref([]);
  const [registerTable, { setSelectedRowKeys, getSelectRowKeys }] = useTable({
    api: GetRolesList,
    columns: modalColumns,
    pagination: false,
    showIndexColumn: false,
    rowSelection: {
      type: 'checkbox',
    },
    afterFetch: (res) => {
      setSelectedRowKeys(data.value);
      return res.map((item) => {
        return { ...item, id: item.id.toString() };
      });
    },
  });
  const closeModal = () => {
    emit('closeModal');
    formRef?.value?.resetFields();
  };
  const submit = () => {
    if (props.modalData.type === 'bind') {
      BindRolesList({
        id: props.modalData.data.id,
        roleids: getSelectRowKeys(),
      })
        .then((res) => {
          message.success('绑定成功');
          closeModal();
        })
        .catch((err) => {
          console.log(err);
        });
      return;
    }
    formRef.value
      .validate()
      .then(() => {
        emit('submit');
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  const clearModalData = () => {
    formRef?.value?.resetFields();
  };

  onMounted(() => {
    if (props.modalData.type === 'bind') {
      GetBindRolesList({
        id: props.modalData.data.id,
      })
        .then((res) => {
          data.value = res;
          // setSelectedRowKeys(res)
        })
        .catch((err) => {
          console.log(err);
        });
    }
  });
  onBeforeUnmount(() => {
    clearModalData();
  });
  defineExpose({
    clearModalData,
  });
</script>

<style lang="scss" scoped>
  .technologicalprocess-modal-container {
    padding: 10px 25px;
    .modal-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
</style>
<style lang="scss">
  .technologicalprocess-modal-container {
    .ant-table-body {
      height: initial !important;
      max-height: 400px !important;
    }
  }
</style>
