<template>
  <n-modal v-model:show="state.dialogModal" :mask-closable="false">
    <n-card
      style="width: 1050px"
      :bordered="false"
      role="dialog"
      aria-modal="true"
    >
      <template #header>
        <div class="col-12 row justify-center relative">
          <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
            新增岗位
          </div>
        </div>
      </template>
      <template #header-extra>
        <n-button @click="handleDialogBack" text style="font-size: 24px">
          <n-icon>
            <close-icon />
          </n-icon>
        </n-button>
      </template>

      <div class="row justify-center fl-pb-md" style="color: #333639">
        <div class="col-12 row">
          <div class="search-item fl-mb-sm row items-center">
            <div>*岗位名</div>
            <fln-form-item
              style="width: 180px; margin-left: 45px"
              type="text"
              :config="{
                placeholder: '请输入岗位名',
                field: 'name',
              }"
              :val="state.formData.name"
              @triggerValChange="handleValChange"
            />
          </div>

          <div class="search-item fl-mb-sm row items-center">
            <div style="margin-left: 16px">岗位描述</div>
            <fln-form-item
              style="width: 180px; margin-left: 38px"
              type="text"
              :config="{
                placeholder: '请输入岗位描述',
                field: 'remark',
              }"
              :val="state.formData.remark"
              @triggerValChange="handleValChange"
            />
          </div>

          <div class="search-item fl-mb-sm row items-center">
            <div style="margin-left: 16px">标签颜色</div>
            <fln-form-item
              style="width: 122px; margin-left: 38px"
              type="colorpicker"
              :val="state.formData.color"
              :config="{
                field: 'color',
              }"
              @triggerValChange="handleValChange"
            />
          </div>

          <div class="search-item fl-mb-sm row items-center">
            <fln-form-item
              style="margin-left: 38px"
              type="checkbox"
              :val="state.formData.isOwner"
              :config="{
                field: 'isOwner',
                options: [
                  {
                    label: '设为部门负责人',
                    value: 'true',
                  },
                ],
              }"
              @triggerValChange="handleValChange"
            />
          </div>
        </div>
        <div class="row col-12 fl-mt-sm">
          <div class="col-12 row justify-between fl-mt-md fl-mb-sm">
            <div>请选择以下模板进行新增岗位：</div>
            <div>
              可将该岗位模板加入到审批中，<span
                class="cursor"
                style="color: #6c00ff"
                @click="state.dialogApproval = true"
                >去试试</span
              >
            </div>
            <fl-about-approval
              :show="state.dialogApproval"
              @triggerCalcApproval="handleApproval"
            />
          </div>
          <div>
            <div class="col-12 row">
              <div
                v-for="(temp, tempidx) in state.tempList"
                :key="tempidx"
                class="fl-py-xs text-center cursor fl-mr-sm fl-mb-sm row justify-center items-center"
                :style="[
                  state.selectTemplate === temp.name
                    ? { border: '1px solid #46299d' }
                    : {},
                ]"
                style="
                  border-radius: 3px;
                  min-width: 176px;
                  background: #f7efff;
                  color: #8352b4;
                "
                @click="handleTempClick(temp)"
              >
                {{ temp.name }}
              </div>
            </div>
          </div>
        </div>

        <div class="fl-my-lg row col-12">
          <div class="col-2 font-14 fl-mb-md">已选模版：</div>
          <div class="col-10 row items-center fl-mb-md">
            <div
              class="fl-py-xs text-center row justify-center items-center"
              style="
                border-radius: 3px;
                min-width: 193px;
                background: #f7f7f7ff;
                border: solid 1px #e0e0e5ff;
              "
            >
              {{ state.selectTemplate }}
            </div>
          </div>
          <div class="col-2 font-14">
            *所选页面
            <span style="color: #1f2225ff">{{
              state.selectedRows.length
            }}</span>
            个：
          </div>
          <n-spin
            class="fl-ml-md"
            v-if="state.dataLoading"
            v-show="state.dataLoading"
            description="获取中..."
            style="color: #1f2225ff"
          />
          <div v-else class="col-10 row">
            <div
              v-for="(select, idx) in state.selectedRows"
              :key="idx"
              class="fl-py-xs text-center fl-mr-sm fl-mb-sm row justify-center items-center"
              style="
                border-radius: 3px;
                min-width: 193px;
                background: #f7f7f7ff;
                border: solid 1px #e0e0e5ff;
              "
            >
              <n-tooltip trigger="hover">
                <template #trigger>
                  {{ select.name }}
                </template>
                {{ select.name }}
              </n-tooltip>
              <close-circle-outlined
                class="fl-ml-md"
                @click="handleClearPage(select)"
              />
            </div>
            <div class="row items-center fl-mr-sm fl-mb-sm">
              <div
                style="
                  border-radius: 50%;
                  background: #e0e0e5;
                  width: 27px;
                  height: 27px;
                "
                class="row items-center justify-center fl-mr-sm cursor"
                @click="handleEditSelectTemp"
              >
                <n-icon>
                  <ChevronUpOutline v-if="state.showTempRuleListData" />
                  <ChevronDownOutline v-else />
                </n-icon>
              </div>

              <span style="color: rgba(0, 0, 0, 0.3)">点击展开可进行编辑</span>
            </div>
          </div>
        </div>
        <div
          v-if="state.showTempRuleListData"
          style="max-height: 40vh"
          class="overflow-auto col-12 row"
        >
          <div
            v-for="(row, rowIdx) in state.listData"
            :key="rowIdx"
            class="col-12 fl-mb-md row items-center fl-pb-xs"
            style="min-height: 40px"
          >
            <div
              class="col-12 row justify-between items-center fl-px-md"
              style="min-height: 40px; background: #46299dff"
              :style="{ borderRadius: row.showChild ? '3px 3px 0 0' : '3px' }"
            >
              <div class="color-white">
                <n-checkbox
                  v-model:checked="row.selected"
                  @update:checked="(e) => handlePageSelectChange(e)"
                >
                </n-checkbox>
                {{ row.name }}
              </div>

              <n-button
                tertiary
                v-if="!row.showChild"
                style="background: #ffffffff; color: #46299dff"
                icon-placement="right"
                round
                secondary
                strong
                size="small"
                @click="row.showChild = true"
              >
                <template #icon>
                  <n-icon>
                    <ChevronDownOutline />
                  </n-icon>
                </template>
                展开
              </n-button>
              <n-button
                tertiary
                v-if="row.showChild"
                style="background: #ffffffff; color: #46299dff"
                icon-placement="right"
                round
                secondary
                strong
                size="small"
                @click="row.showChild = false"
              >
                <template #icon>
                  <n-icon>
                    <ChevronUpOutline />
                  </n-icon>
                </template>
                收起
              </n-button>
            </div>
            <div
              v-if="row.showChild"
              style="border: 1px solid #1f2225ff; border-radius: 0 0 3px 3px"
              class="col-12 row"
            >
              <div
                class="col-12 row"
                style="padding: 11px 0; background: #dfd7f2"
              >
                <div class="col-3 text-center">按钮权限</div>
                <div class="col-3 text-center">列表权限</div>
                <div class="col-3 text-center">数据范围权限</div>
                <div class="col-3 text-center">列表字段权限</div>
              </div>
              <div class="col-12 row">
                <div class="col-3 fl-py-md">
                  <div class="" style="margin-left: 30%">
                    <div
                      v-if="
                        Array.isArray(row.buttonList) &&
                        row.buttonList.length > 1
                      "
                      class="row"
                    >
                      <n-checkbox
                        v-model:checked="row.btnSelectedAll"
                        :indeterminate="row.btnIndeterminate"
                        @update:checked="
                          (e) => handleBtnSelectAllChange(e, rowIdx)
                        "
                      >
                        全选
                      </n-checkbox>
                    </div>
                    <n-checkbox-group
                      v-model:value="row.btnSelected"
                      @update:value="(e) => handleBtnSelectChange(e, rowIdx)"
                    >
                      <div
                        class="col-12"
                        v-for="(btn, btnIdx) in row.buttonList"
                        :key="btnIdx"
                      >
                        <n-checkbox :value="btn.ID">
                          {{ btn.name }}
                        </n-checkbox>
                      </div>
                    </n-checkbox-group>
                  </div>
                </div>

                <div class="col-9 row">
                  <div
                    v-for="(list, listIdx) in row.interfaceList"
                    :key="listIdx"
                    class="col-12 row"
                    :style="{
                      'border-left':
                        row.interfaceList.length > 1 ? '1px solid #C1B2E5' : '',
                      'border-bottom':
                        listIdx !== row.interfaceList.length - 1
                          ? '1px solid #C1B2E5'
                          : '',
                    }"
                  >
                    <div class="col-4 row fl-pa-md justify-center">
                      <n-checkbox
                        v-model:checked="list.selected"
                        @update:checked="
                          (e) => handleListSelectChange(e, rowIdx, listIdx)
                        "
                      >
                        {{ list.name }}
                      </n-checkbox>
                    </div>

                    <div class="col-4 row fl-pa-md justify-center">
                      <n-radio-group v-model:value="list.limitSelected">
                        <n-radio
                          :style="radioStyle"
                          v-for="(limit, limitIdx) in list.limit"
                          :key="limitIdx"
                          :value="limit.value"
                        >
                          <div class="relative">
                            {{ limit.label }}
                            <n-button
                              tertiary
                              v-if="
                                list.limitSelected === 5 && limit.value === 5
                              "
                              size="small"
                              style="
                                position: absolute;
                                right: -120px;
                                width: 70px;
                                background: #ffffff;
                                color: #6d5c9c;
                                border: 1px solid #8a67ef;
                              "
                              @click.stop="
                                handleChangeSelfLimitData(rowIdx, listIdx, list)
                              "
                              >设置</n-button
                            >
                          </div>
                        </n-radio>
                      </n-radio-group>
                    </div>

                    <div class="col-4 row fl-pa-md justify-center">
                      <n-checkbox-group
                        v-if="Array.isArray(list.positionRuleFields)"
                        v-model:value="list.fieldsSelected"
                      >
                        <div class="col-12">
                          <n-button
                            tertiary
                            class="fl-ml-md"
                            size="small"
                            style="
                              width: 70px;
                              background: #ffffff;
                              color: #6d5c9c;
                              border: 1px solid #8a67ef;
                            "
                            @click="handleEditField(rowIdx, listIdx)"
                            >设置</n-button
                          >
                          <n-button
                            tertiary
                            class="fl-ml-md"
                            size="small"
                            style="
                              width: 70px;
                              background: #ffffff;
                              color: #6d5c9c;
                              border: 1px solid #8a67ef;
                            "
                            @click="handleEditFieldSort(rowIdx, listIdx)"
                            >排序</n-button
                          >
                        </div>
                        <div
                          class="col-12"
                          v-for="(field, fieldIdx) in list.positionRuleFields"
                          :key="fieldIdx"
                        >
                          <n-checkbox :value="field.ID">
                            {{ field.fieldCnName }}
                          </n-checkbox>
                        </div>
                      </n-checkbox-group>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 row justify-center fl-mt-md">
          <n-button
            tertiary
            style="width: 161px; background: #c7c7c9ff; color: #fff"
            class="fl-mr-md"
            @click="handleDialogBack"
            >返回</n-button
          >

          <n-button
            tertiary
            style="width: 161px; background: #46299dff; color: #fff"
            :loading="state.btnLoading"
            @click="handleDialogSubmit"
            >保存</n-button
          >
        </div>
      </div>
    </n-card>
  </n-modal>

  <fl-limit-data
    v-if="state.dialogSelfLimtiData"
    :fatherData="state.dataDepartmentIds"
    @triggerLimitData="handleLimitData"
  />
</template>
<script setup>
// 岗位新建方式选择 弹窗
import {
  UpOutlined,
  DownOutlined,
  CloseCircleOutlined,
  PlusOutlined,
  DragOutlined,
} from "@ant-design/icons-vue";
import { Close as CloseIcon } from "@vicons/ionicons5";
import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
import flAboutApproval from "./aboutApproval.vue";
import draggable from "vuedraggable";
import flLimitData from "./limitData.vue";
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
  nextTick,
} from "vue";
import { processError, processSuccess } from "@/utils/helper/message";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
import { ChevronDownOutline, ChevronUpOutline } from "@vicons/ionicons5";
import { Local } from "@/utils/storage.js";

const emits = defineEmits(["triggerClose"]);
const radioStyle = reactive({
  display: "flex",
  height: "30px",
  lineHeight: "30px",
});
let props = defineProps({
  fatherData: {
    type: Object,
  },
});
const state = reactive({
  selectedRows: [],
  dialogField: false,
  dialogData: {
    fieldList: [],
  },
  listData: [],
  formData: {
    name: "",
    remark: "",
    color: "#1F2225",
    isOwner: [],
  },
  btnLoading: false,
  pageType: "create",
  enabled: true,
  dialogFieldSort: false,
  dataLoading: false,
  dialogModal: true,
  tempList: [],
  selectTemplate: "",
  showTempRuleListData: false,
  dialogApproval: false,
  dialogSelfLimtiData: false,
  dialogLimitData: {},
  dataDepartmentIds: [],
  approvalData: [],
});
onBeforeMount(() => {
  console.log("onBeforeMount");
  state.dialogModal = true;
  getTempData();
  if (route.query.type) {
    state.pageType = route.query.type;
  }
});

onMounted(() => {});
const getTempData = () => {
  let url = "/position/v2/model/list";
  $request.HTTP.components.postDataByParams(url, {}).then(
    (res) => {
      if (res.status === 0) {
        state.tempList = res.data || [];
        state.selectTemplate = state.tempList[0].name || "无数据";
        if (state.tempList.length > 0) {
          getRulesData(state.tempList[0]);
        }
      } else {
        processError(res.msg || "获取数据失败！");
      }
    },
    () => {
      processError("获取数据失败！");
    },
    () => {
      processError("获取数据失败！");
    }
  );
};
const getRulesData = (temp) => {
  let url = "/position/v2/model/detail";
  $request.HTTP.components.postDataByParams(url, { uuid: temp.uuid }).then(
    (res) => {
      if (res.status === 0) {
        let data = res.data.positionTreeRule;
        data.map((item) => {
          item.selected = false;
          item.showChild = false;

          item.btnSelected = [];
          item.btnSelectedAll = false;
          item.btnIndeterminate = false;
          if (Array.isArray(item.interfaceList)) {
            item.interfaceList.map((listItem) => {
              listItem.selected = false;
              listItem.limit = [
                {
                  label: "仅自己",
                  value: 1,
                },
                {
                  label: "自己及下属",
                  value: 2,
                },
                {
                  label: "本部门",
                  value: 3,
                },
                {
                  label: "所有",
                  value: 4,
                },
              ];
              listItem.limitSelected = 4;
              listItem.positionRuleFields = listItem.positionRuleFields || [];
              listItem.fieldsSelected = listItem.positionRuleFields.map(
                (item) => item.ID
              );
            });
          }
        });
        state.listData = data;
        setRulesDataDefaultVal(data, state.listData);
        state.selectedRows = state.listData.filter((item) => item.selected);
      } else {
        processError(res.msg || "获取数据失败！");
      }
    },
    () => {
      processError("获取数据失败！");
    },
    () => {
      processError("获取数据失败！");
    }
  );
};

const handleValChange = ({ val, config }) => {
  state.formData[config.field] = val;
};
const handleDialogSubmit = () => {
  if (state.formData.name === "") {
    processError("请填写岗位名称");
    return;
  }
  let url = "/position/v2/create";
  let params = {
    name: state.formData.name,
    remark: state.formData.remark,
    color: state.formData.color,
    positionTreeRule: [],
    departmentID: Number(props.fatherData.key),
    isLeader: state.formData.isOwner.length > 0,
  };
  let data = state.listData;
  data
    .filter((item) => item.selected)
    .map((item) => {
      let obj = {
        ID: item.ID,
        buttonList: Array.isArray(item.buttonList)
          ? item.buttonList.filter((btnItem) =>
              item.btnSelected.includes(btnItem.ID)
            )
          : [],
        interfaceList: Array.isArray(item.interfaceList)
          ? item.interfaceList
              .filter((listItem) => listItem.selected)
              .map((listItem) => {
                return {
                  ID: listItem.ID,
                  dataRange: listItem.limitSelected,
                  positionRuleFields: Array.isArray(listItem.positionRuleFields)
                    ? listItem.positionRuleFields.filter((fieldItem) =>
                        listItem.fieldsSelected.includes(fieldItem.ID)
                      )
                    : [],
                };
              })
          : [],
      };
      params.positionTreeRule.push(obj);
    });
  state.btnLoading = true;
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        // 岗位绑定审批发起人
        if (state.approvalData.length > 0) {
          let url = "/approval/v2/create-auth";
          let params = {
            typeId: state.approvalData.map((item) => item.ID),
            departmentUID: res.data.DepartmentID.toString(),
            departmentName: res.data.DepartmentName,
            positionUID: res.data.ID.toString(),
            positionName: res.data.Name,
          };
          $request.HTTP.components.postDataByParams(url, params).then(
            (res) => {
              state.btnLoading = false;
              if (res.status === 0) {
                processSuccess("操作成功！");
                emits("triggerClose");
              } else {
                processError(res.msg || "操作失败！");
              }
            },
            () => {
              state.btnLoading = false;
              processError("操作失败！");
            },
            () => {
              processError("操作失败！");
            }
          );
        } else {
          state.btnLoading = false;
          processSuccess("操作成功！");
          emits("triggerClose");
        }
      } else {
        state.btnLoading = false;
        processError(res.msg || "操作失败！");
      }
    },
    () => {
      processError("操作失败！");
      state.btnLoading = false;
    },
    () => {
      processError("操作失败！");
      state.btnLoading = false;
    }
  );
};
const handleBack = () => {
  router.go(-1);
};
const handleEditField = (rowIdx, listIdx) => {
  state.dialogData.clickData = state.listData[rowIdx];
  state.dialogData.ID = state.listData[rowIdx].interfaceList[listIdx].ID;
  state.dialogData.rowIdx = rowIdx;
  state.dialogData.listIdx = listIdx;
  state.dialogData.fieldList = JSON.parse(
    JSON.stringify(
      state.listData[rowIdx].interfaceList[listIdx].positionRuleFields.map(
        (item) => {
          return {
            ID: item.ID,
            field: item.fieldKey,
            fieldCnName: item.fieldCnName,
          };
        }
      )
    )
  );
  state.dialogField = true;
};
const handleBtnSelectAllChange = (checked, idx) => {
  if (checked) {
    state.listData[idx].btnSelected = state.listData[idx].buttonList.map(
      (item) => item.ID
    );
    state.listData[idx].btnIndeterminate = false;
  } else {
    state.listData[idx].btnSelected = [];
    state.listData[idx].btnIndeterminate = false;
  }
};
const handleBtnSelectChange = (e, idx) => {
  if (e.length === 0) {
    state.listData[idx].btnSelectedAll = false;
    state.listData[idx].btnIndeterminate = false;
  } else if (e.length === state.listData[idx].buttonList.length) {
    state.listData[idx].btnSelectedAll = true;
    state.listData[idx].btnIndeterminate = false;
  } else {
    state.listData[idx].btnSelectedAll = false;
    state.listData[idx].btnIndeterminate = true;
  }
};
const handleListSelectChange = (e, rowIdx, listIdx) => {
  state.listData[rowIdx].listSelected = state.listData[
    rowIdx
  ].interfaceList.filter((item) => item.selected);
};
const handlePageSelectChange = (e) => {
  state.selectedRows = state.listData.filter((item) => item.selected);
};
const handleClearPage = (select) => {
  state.listData.forEach((item) => {
    if (item.name === select.name) {
      item.selected = false;
    }
  });
  state.selectedRows = state.listData.filter((item) => item.selected);
};

const handleDelDialogFieldList = (delIdx) => {
  state.dialogData.fieldList.splice(delIdx, 1);
};
const handleCreDialogFieldList = () => {
  state.dialogData.fieldList.push({
    field: "",
    fieldCnName: "",
  });
};

const handleDialogBack = () => {
  state.dialogField = false;
  emits("triggerClose");
};
const handleLink = (path) => {
  router.push(path);
};

const setRulesDataDefaultVal = (pageData, listData) => {
  pageData.map((pageDataItem) => {
    listData.map((listItem) => {
      if (pageDataItem.ID === listItem.ID) {
        listItem.selected = true;
        listItem.showChild = false;

        listItem.btnSelected = Array.isArray(pageDataItem.buttonList)
          ? pageDataItem.buttonList.map((btnItem) => btnItem.ID)
          : [];
        if (
          Array.isArray(listItem.interfaceList) &&
          Array.isArray(pageDataItem.interfaceList)
        ) {
          listItem.interfaceList.map((interfaceItem) => {
            pageDataItem.interfaceList.map((pageDataInterfaceItem) => {
              if (interfaceItem.ID === pageDataInterfaceItem.ID) {
                interfaceItem.selected = true;
                interfaceItem.limitSelected = pageDataInterfaceItem.dataRange;
                pageDataInterfaceItem.positionRuleFields =
                  pageDataInterfaceItem.positionRuleFields || [];
                interfaceItem.fieldsSelected =
                  pageDataInterfaceItem.positionRuleFields.map(
                    (fieldItem) => fieldItem.ID
                  );
                interfaceItem.positionRuleFields.map((fieldItem) => {
                  pageDataInterfaceItem.positionRuleFields.map(
                    (pageDataFieldItem) => {
                      if (fieldItem.ID === pageDataFieldItem.ID) {
                        fieldItem.index = pageDataFieldItem.index || 0;
                      }
                    }
                  );
                });
              }
            });
          });
        }
      }
    });
  });
};

const handleEditFieldSort = (rowIdx, listIdx) => {
  state.dialogData.clickData = state.listData[rowIdx];
  state.dialogData.ID = state.listData[rowIdx].interfaceList[listIdx].ID;
  state.dialogData.rowIdx = rowIdx;
  state.dialogData.listIdx = listIdx;
  let fieldsSelected =
    state.listData[rowIdx].interfaceList[listIdx].fieldsSelected;
  let fieldList = [];
  state.listData[rowIdx].interfaceList[listIdx].positionRuleFields.map(
    (item) => {
      if (fieldsSelected.includes(item.ID)) {
        fieldList.push({
          ID: item.ID,
          field: item.fieldKey,
          fieldCnName: item.fieldCnName,
          index: item.index || 0,
        });
      }
    }
  );
  fieldList.sort((a, b) => {
    return a.index - b.index;
  });
  state.dialogData.fieldList = fieldList;
  state.dialogFieldSort = true;
};
const handleDialogSortSave = () => {
  let rowIdx = state.dialogData.rowIdx;
  let listIdx = state.dialogData.listIdx;

  state.dialogData.fieldList.forEach((item, idx) => {
    item.index = idx + 1;
  });

  state.listData[rowIdx].interfaceList[listIdx].positionRuleFields.map(
    (item) => {
      state.dialogData.fieldList.map((fieldItem) => {
        if (item.ID === fieldItem.ID) {
          item.index = fieldItem.index;
        }
      });
    }
  );
  state.dialogFieldSort = false;
};
const handleDialogSortBack = () => {
  state.dialogFieldSort = false;
};

const handleTempClick = (temp) => {
  state.selectTemplate = temp.name;
  getRulesData(temp);
};
const handleEditSelectTemp = () => {
  state.showTempRuleListData = !state.showTempRuleListData;
};
const handleApproval = (approvalData) => {
  state.approvalData = approvalData;
  state.dialogApproval = false;
};
const handleChangeSelfLimitData = (rowIdx, listIdx, list) => {
  state.dialogLimitData = {
    rowIdx,
    listIdx,
  };
  state.dataDepartmentIds = list.dataDepartmentIds;
  state.dialogSelfLimtiData = true;
};
const handleLimitData = (data) => {
  let rowIdx = state.dialogLimitData.rowIdx;
  let listIdx = state.dialogLimitData.listIdx;
  state.listData[rowIdx].interfaceList[listIdx].dataDepartmentIds = data;
  state.dialogSelfLimtiData = false;
};
</script>

<style lang="scss" scoped>
.search-item {
  :deep(.ant-input-affix-wrapper) {
    background: #fff;
    color: #c3c3c3;
  }
  :deep(.ant-input) {
    color: #000;
    &::placeholder {
      color: #c3c3c3;
    }
  }
  :deep(.ant-picker-input > input) {
    color: #000;
    &::placeholder {
      color: #c3c3c3;
    }
  }
  :deep(.ant-picker) {
    width: 100%;
    border-radius: 20px;
    background: #fff !important;
    color: #c3c3c3;
    border: none;
  }
  :deep(.ant-picker-input > input) {
    color: #000;
    &::placeholder {
      color: #c3c3c3;
    }
  }
}
.n-card-header {
}
</style>
