<script setup lang="ts">
import {computed, onMounted, reactive, ref} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {cloneDeep} from '@vben/utils';
import {
  Form,
  FormItem,
  Input,
  Row,
  Col,
  Switch,
  DatePicker,
  Empty,
  Divider,
  Rate,
  Popover,
  Badge
} from 'ant-design-vue'
import {PlusOutlined, DeleteOutlined} from '@ant-design/icons-vue';
import {renderDictValue} from "#/utils/render";
import {getDictOptions} from "#/utils/dict";

const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
  return isUpdate.value ? '编辑问卷' : '新增问卷';
});

// const [BasicForm, formApi] = useVbenForm({
//   commonConfig: {
//     // 默认占满两列
//     formItemClass: 'col-span-1',
//     // 默认label宽度 px
//     labelWidth: 80,
//     // 通用配置项 会影响到所有表单项
//     componentProps: {
//       class: 'w-full',
//     }
//   },
//   schema: modalSchema(),
//   showDefaultActions: false,
//   wrapperClass: 'grid-cols-2',
// });

// const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
//   {
//     initializedGetter: defaultFormValueGetter(formApi),
//     currentGetter: defaultFormValueGetter(formApi),
//   },
// );

const [BasicModal, modalApi] = useVbenModal({
  // 在这里更改宽度
  fullscreenButton: false,
  fullscreen: true,
  onClosed: handleClosed,
  onConfirm: handleConfirm,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);
    const {id} = modalApi.getData() as { id?: number | string };
    isUpdate.value = !!id;

    if (isUpdate.value && id) {
      // const record = await contingenPlanInfo(id);
      // await formApi.setValues(record);
    }
    // await markInitialized();

    modalApi.modalLoading(false);
  },
});

async function handleConfirm() {
  try {
    modalApi.lock(true);
    // const {valid} = await formApi.validate();
    // if (!valid) {
    //   return;
    // }
    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
    // const data = cloneDeep(await formApi.getValues());
    // await (isUpdate.value ? contingenPlanUpdate(data) : contingenPlanAdd(data));
    // resetInitialized();
    emit('reload');
    modalApi.close();
  } catch (error) {
    console.error(error);
  } finally {
    modalApi.lock(false);
  }
}

async function handleClosed() {
  // await formApi.resetForm();
  // resetInitialized();
}

const initialState = {
  username: '',
  password: '',
  questionList: [],
};

const badgeCounts = {
  inputCount: 0,
  textareaCount: 0,
  radioCount: 0,
  checkboxCount: 0,
  rateCount: 0,
  datePickerCount: 0,
}

const counts = reactive({...badgeCounts})
const formState = reactive({
  ...initialState
});

async function handleCancel() {
  Object.assign(formState, initialState);
  Object.assign(counts, badgeCounts);
  formState.questionList = [];
  await modalApi.close();
}

function handleAddQuestion(type: number) {
  formState.questionList.push({type})
  switch (type) {
    case 1:
      counts.inputCount++;
      break;
    case 2:
      counts.textareaCount++;
      break;
    case 3:
      counts.radioCount++;
      break;
    case 4:
      counts.checkboxCount++;
      break;
    case 5:
      counts.rateCount++;
      break;
    case 6:
      counts.datePickerCount++;
      break;
  }
}

function addOptions(val: any) {

}

function deleteOptions(index: number, type: number) {
  formState.questionList.splice(index, 1)
  switch (type) {
    case 1:
      counts.inputCount--;
      break;
    case 2:
      counts.textareaCount--;
      break;
    case 3:
      counts.radioCount--;
      break;
    case 4:
      counts.checkboxCount--;
      break;
    case 5:
      counts.rateCount--;
      break;
    case 6:
      counts.datePickerCount--;
      break;
  }
}

async function handleSave(type: number) {
  await modalApi.close();
}

onMounted(()=>{
  getDictOptions('wy_wtsjlx')
})

</script>

<template>
  <BasicModal :title="title" :footer="false" class="modal-container">
    <Row :gutter="24">
      <Col class="gutter-row" :span="3">
        <div class="left-options">
          <div class="header-title">问题设计</div>
          <Badge :count="counts.inputCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion(1)">单行文本</a-button>
          </Badge>
          <Badge :count="counts.textareaCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion(2)">多行文本</a-button>
          </Badge>
          <Badge :count="counts.radioCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion(3)">单选题</a-button>
          </Badge>
          <Badge :count="counts.checkboxCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion(4)">多选题</a-button>
          </Badge>
          <Badge :count="counts.rateCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion(5)">评分题</a-button>
          </Badge>
          <Badge :count="counts.datePickerCount" :number-style="{ backgroundColor: '#3996f3' }">
            <a-button size="large" @click="handleAddQuestion(6)">日期选择</a-button>
          </Badge>
        </div>
      </Col>
      <Col class="gutter-row" :span="21">
        <div class="right-question">
          <div class="header-title">基本信息</div>
          <Form
            :model="formState"
            name="basic"
          >
            <FormItem
              label="问卷标题"
              name="username"
              :rules="[{ required: true, message: '问卷标题不能为空' }]"
            >
              <Input v-model:value="formState.username"/>
            </FormItem>

            <FormItem
              label="问卷描述"
              name="password"
              :rules="[{ required: true, message: 'Please input your password!' }]"
            >
              <Input v-model:value="formState.password"/>
            </FormItem>
            <div v-if="formState.questionList.length">
              <div v-for="(item,index) in formState.questionList">
                <Divider orientation="left">
                  问题{{ (index + 1) + '\xa0' + renderDictValue(item.type, 'wy_wtsjlx') }}
                  <Popover placement="top">
                    <template #content>
                      <p>删除当前问题</p>
                    </template>
                    <a-button type="link" @click="deleteOptions(index,item.type)">
                      <template #icon>
                        <DeleteOutlined style="color: red"/>
                      </template>
                    </a-button>
                  </Popover>
                </Divider>
                <FormItem
                  label="问题标题"
                  name="username"
                  :rules="[{ required: true }]"
                >
                  <Input v-model:value="formState.username"/>
                </FormItem>
                <FormItem
                  label="问题描述"
                  name="password"
                  :rules="[{ required: true }]"
                >
                  <Input v-model:value="formState.password"/>
                </FormItem>
                <Row :gutter="24" v-if="item.type==3||item.type==4">
                  <Col class="gutter-row" :span="12">
                    <FormItem
                      label="选项设置"
                      name="password"
                      :rules="[{ required: true }]"
                    >
                      <Input style="margin-bottom: 10px" v-model:value="formState.password"
                             placeholder="选项1"/>
                      <Input v-model:value="formState.password" placeholder="选项1"/>
                    </FormItem>
                  </Col>
                  <Col class="gutter-row" :span="12">
                    <a-button @click="addOptions(item)">
                      <template #icon>
                        <PlusOutlined/>
                      </template>
                      添加选项
                    </a-button>
                  </Col>
                </Row>
                <FormItem
                  v-if="item.type==5"
                  label="评分预览"
                  name="password"
                >
                  <Rate v-model:value="formState.username"/>
                </FormItem>
                <FormItem
                  v-if="item.type==6"
                  label="日期选择预览"
                  name="password"
                >
                  <DatePicker style="width: 180px" v-model:value="formState.username"/>
                </FormItem>
                <FormItem
                  label="是否必填"
                  name="password"
                  :rules="[{ required: true, message: 'Please input your password!' }]"
                >
                  <Switch v-model:checked="formState.username"/>
                </FormItem>
              </div>
            </div>
            <div class="empty-box" v-else>
              <Empty description="还没有添加问题，点击左侧按钮开始创建"/>
            </div>
            <div class="header-title">发布设计</div>
            <Row :gutter="24">
              <Col class="gutter-row" :span="6">
                <FormItem
                  label="匿名收集"
                  name="username"
                  :rules="[{ required: true, message: '匿名收集不能为空' }]"
                >
                  <Switch v-model:checked="formState.username"/>
                </FormItem>
              </Col>
              <Col class="gutter-row" :span="6">
                <FormItem
                  label="允许多次提交"
                  name="username"
                  :rules="[{ required: true, message: '多次提交不能为空' }]"
                >
                  <Switch v-model:checked="formState.username"/>
                </FormItem>
              </Col>
              <Col class="gutter-row" :span="12">
                <FormItem
                  label="截至日期"
                  name="username"
                  :rules="[{ required: true, message: '截止日期不能为空' }]"
                >
                  <DatePicker style="width: 180px" v-model:value="formState.username"/>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </Col>
    </Row>
    <div class="footer-button">
      <a-button type="primary" @click="handleSave(1)">保存并发布</a-button>
      <a-button @click="handleSave(2)">保存为草稿</a-button>
      <a-button @click="handleCancel">取消</a-button>

    </div>
  </BasicModal>
</template>
<style lang="scss" scoped>
.modal-container {
  position: relative;

  .header-title {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
  }

  .left-options {
    display: flex;
    flex-direction: column;

    :deep(.ant-badge .ant-badge-count) {
      position: absolute;
      top: 40px;
    }

    .ant-btn {
      width: 150px;
      margin-top: 40px;
    }
  }

  .right-question {
    max-height: 87vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .footer-button {
    width: 100%;

    .ant-btn {
      float: right;
      margin: 0 15px 10px 0;
    }

    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: #ffffff;
  }

  .empty-box {
    height: 50vh;
    border: 2px dashed #dce0e6;
    border-radius: 10px;

    :deep(.ant-empty .ant-empty-image) {
      margin-top: 15vh;
    }

    margin-bottom: 10px;
    margin-left: 80px;
  }

  .question-item-title {
    font-weight: bold;
    margin: 5px 12px;
  }
}
</style>

