<template>
  <el-drawer
    v-model="showModal"
    title="减免申请"
    :size="800"
    direction="rtl"
    :before-close="onHide"
  >
    <div class="h-full overflow-auto flex-col flex mydrawer">
      <el-form
        ref="formRef"
        inline
        :model="form"
        :rules="rules"
        label-width="110px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item class="w-full" label="减免类型：" prop="name" label-width="82px">
              <el-select v-model="form.relation" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="减免申请时间：" prop="code">
              <el-date-picker v-model="form.datetime" type="datetime" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="减免到期时间：" prop="code">
              <el-date-picker v-model="form.datetime" type="datetime" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="减免金额(总计)：" prop="name" label-width="120px">
              4444
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="减免案件数：" prop="role"> 1 </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="应还金额：" prop="relation">
              <div>
                <p>3000</p>
                <p class="text-red-600 leading-3">*应还金额</p>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div>
        <ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="false">
          <template #table_top>
            <p class="font-bold">关联案件：</p>
          </template>
        </ProTable>
      </div>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="showModal = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="jsx" name="reduceDrawer">
  import dayjs from 'dayjs';
  import { computed } from 'vue';
  import { reactive, ref } from 'vue';
  const showModal = ref(false);
  const tabledata = ref([]);
  const form = reactive({
    name: '',
    relation: '',
    datetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  });
  const currentAccount = ref({ people: 0, case: 0, money: 0 });
  const onHide = (done) => {
    currentAccount.value = { people: 0, case: 0, money: 0 };
    done();
  };
  const options = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ];
  const config = reactive({
    minHeight: 200,
    columns: [
      {
        field: 'code',
        title: '案件ID',
      },
      {
        field: 'code',
        title: '产品',
      },
      {
        field: 'code',
        title: '借款机构',
      },
      {
        field: 'code',
        title: '委案金额',
      },
      {
        field: 'code',
        title: '累计减免金额',
      },
      {
        field: 'code',
        title: '累计还款金额',
      },
      {
        field: 'code',
        title: '剩余待还金额',
      },
    ],
    toolbarConfig: { enabled: false },
  });
  tabledata.value = [
    { name: 'admin', code: 'admin', role: 'superadmin', num: 1 },
    { name: 'account1', code: 'account1', role: 'user', num: 1 },
    { name: 'account2', code: 'account2', role: 'user', num: 1 },
    { name: 'account3', code: 'account3', role: 'user', num: 1 },
  ];
  const openModal = (account) => {
    showModal.value = true;
    currentAccount.value = { people: 333, case: 44, money: 1111 };
  };
  const submitForm = () => {};
  defineExpose({
    openModal,
  });
</script>
<style lang="scss" scoped>
  .mydrawer {
    :deep(.card) {
      padding: 0;
      border: none;
    }
  }
</style>
