<template>
  <el-drawer
    v-model="showModal"
    title="分期申请"
    :size="850"
    direction="rtl"
    :before-close="onHide"
  >
    <div class="h-full flex-col flex mydrawer pb-2">
      <div>
        <ProTable :config="config" :data="tabledata" :showPagination="false" :showToolBar="false">
          <template #table_top>
            <p class="font-bold">关联案件：</p>
          </template>
        </ProTable>
      </div>
      <div class="flex">
        <div class="mt-3 pr-8 w-2/5">
          <el-form
            ref="formRef"
            inline
            :model="form"
            :rules="rules"
            label-width="110px"
            label-position="left"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item class="w-full" label="剩余待还总额：" prop="name">
                  {{ form.sum }}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="w-full" label="还款总额：" prop="code">
                  <el-input v-model="form.num" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="w-full" label="分期申请时间：" prop="code">
                  <el-date-picker
                    v-model="form.datetime"
                    class="w-full"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="w-full" label="还款期数：" prop="name">
                  <el-select v-model="form.splitnum" 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="24">
                <el-form-item class="w-full" label="首期还款日：" prop="code">
                  <el-date-picker
                    class="w-full"
                    v-model="form.datetime"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="w-full" label="非首期还款日：" prop="code">
                  <el-date-picker
                    v-model="form.datetime"
                    class="w-full"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="w-full" label="分期生效时间：" prop="code">
                  <el-date-picker
                    v-model="form.datetime"
                    class="w-full"
                    format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="w-3/5">
          <ProTable :config="splitconfig" :data="splitdata" :showPagination="false">
            <template #right_tools>
              <el-button type="primary" @click="editFirst = !editFirst" class="mr-1">{{
                editFirst ? '确定' : '修改'
              }}</el-button>
            </template>
          </ProTable>
          <div class="flex">
            <div class="ml-auto text-gray-400">总计： xxxxx</div>
          </div>
        </div>
      </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';
  import { ElInputNumber } from 'element-plus';

  const showModal = ref(false);
  const editFirst = ref(false);
  const tabledata = ref([]);
  const splitdata = ref([]);

  const form = reactive({
    sum: 0,
    num: 0,
    splitnum: 2,
    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 selectdList = ref([]);
  const onCheckboxChange = (row) => {
    selectdList.value = row.records;
  };
  const config = reactive({
    minHeight: 200,
    columns: [
      { type: 'checkbox', width: 50 },
      {
        field: 'code',
        title: '案件ID',
      },
      {
        field: 'code',
        title: '产品',
      },
      {
        field: 'code',
        title: '借款机构',
      },
      {
        field: 'code',
        title: '委案金额',
      },
      {
        field: 'code',
        title: '累计减免金额',
      },
      {
        field: 'code',
        title: '累计还款金额',
      },
      {
        field: 'code',
        title: '剩余待还金额',
      },
    ],
    onCheckboxChange: onCheckboxChange,
    toolbarConfig: { enabled: false },
  });
  const splitconfig = computed(() => {
    return {
      minHeight: 200,
      columns: [
        { type: 'seq', width: 50, title: '期次' },
        {
          field: 'code',
          title: '到期日',
        },
        {
          field: 'code',
          title: '状态',
          width: 70,
        },
        {
          field: 'num',
          title: '金额',
          slots: {
            default: ({ row, rowIndex }) => {
              if (editFirst.value && rowIndex === 0) {
                return (
                  <>
                    <ElInputNumber v-model={row.num} />
                  </>
                );
              } else {
                return <>{row.num}</>;
              }
            },
          },
        },
      ],
      onCheckboxChange: onCheckboxChange,
    };
  });
  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 },
  ];
  splitdata.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;
    }
    :deep(.el-date-editor) {
      width: 100%;
    }
  }
</style>
