<script setup lang="ts">
import { ref } from "vue";
import closedIcon from "@/assets/svg/dialog/closed.svg";
import manIcon from "@/assets/home/man.png";
import womanIcon from "@/assets/home/woman.png";
import { reactive } from "vue";
import { saveUserParam } from "@/api/home";
import { message } from "@/utils/message";
import { usePermissionStoreHook } from "@/store/modules/permission";

defineOptions({
  name: "LoginRemind"
});
const dataInfo = reactive({
  age: undefined,
  sex: undefined,
  socialSecurityType: undefined,
  offsiteSocialSecurityInfo: undefined,
  residentLocation: "",
  pensionPaymentPeriod: undefined
});
defineExpose({
  async open() {
    dialogVisible.value = true;
  }
});
const closed = () => {
  dialogVisible.value = false;
};
const dialogVisible = ref(false);

const changeValue = (key, val) => {
  dataInfo[key] = val;
};
const save = async () => {
  const list = [];
  for (const key in dataInfo) {
    if (dataInfo[key] !== undefined) {
      list.push({
        itemEn: key,
        valueNum: dataInfo[key]
      });
    }
  }
  const res: any = await saveUserParam(list);
  if (res.code === 200) {
    sessionStorage.setItem("roleSetId", res.data);
    usePermissionStoreHook().changeSexCode(dataInfo.sex);
    message("设置成功", { type: "success" });
    dialogVisible.value = false;
  }
};
</script>

<template>
  <div>
    <el-dialog
      width="1000"
      append-to-body
      style="background-color: unset"
      v-model="dialogVisible"
      :show-close="false"
      :before-close="closed"
      custom-class="CharacterSet"
    >
      <div class="CharacterSet">
        <div class="top">
          <closedIcon @click="closed" style="cursor: pointer" />
        </div>
        <div class="title">人物定制</div>
        <div class="gender">
          <div @click="changeValue('sex', 0)" class="gender_item">
            <img :src="manIcon" alt="" />
            <span>男性</span>
            <span
              :class="[dataInfo.sex === 0 ? 'actived' : '']"
              class="gender_item_select"
            />
          </div>
          <div @click="changeValue('sex', 1)" class="gender_item">
            <img :src="womanIcon" alt="" />
            <span>女性</span>
            <span
              :class="[dataInfo.sex === 1 ? 'actived' : '']"
              class="gender_item_select"
            />
          </div>
        </div>
        <div class="main">
          <div class="main_item" style="margin-right: 56px">
            <span class="label">户口所在地</span>
            <el-select
              size="large"
              class="main_item_select"
              v-model="dataInfo.residentLocation"
              placeholder="请选择"
            >
              <el-option label="深圳户口" :value="0" />
              <el-option label="港澳台和外籍人员" :value="1" />
              <el-option label="广东省其他地区" :value="2" />
              <el-option label="省外户口" :value="3" />
            </el-select>
          </div>
          <div class="main_item">
            <span class="label">异地社保转入情况</span>
            <div class="select_list">
              <div
                @click="changeValue('offsiteSocialSecurityInfo', 0)"
                :class="[
                  dataInfo.offsiteSocialSecurityInfo === 0
                    ? 'selected'
                    : 'unselected'
                ]"
                class="select_list_item"
              >
                <span>无异地社保</span>
                <span class="select_item" />
              </div>
              <div
                @click="changeValue('offsiteSocialSecurityInfo', 1)"
                :class="[
                  dataInfo.offsiteSocialSecurityInfo === 1
                    ? 'selected'
                    : 'unselected'
                ]"
                class="select_list_item"
              >
                <span>已转入</span>
                <span class="select_item" />
              </div>
              <div
                @click="changeValue('offsiteSocialSecurityInfo', 2)"
                :class="[
                  dataInfo.offsiteSocialSecurityInfo === 2
                    ? 'selected'
                    : 'unselected'
                ]"
                class="select_list_item"
              >
                <span>未转入</span>
                <span class="select_item" />
              </div>
            </div>
          </div>
          <div class="main_item" style="margin-right: 56px">
            <span class="label">年龄</span>
            <div class="select_list">
              <div
                style="width: 180px"
                @click="changeValue('age', 0)"
                :class="[dataInfo.age === 0 ? 'selected' : 'unselected']"
                class="select_list_item"
              >
                <span>年满60岁</span>
                <span class="select_item" />
              </div>
              <div
                @click="changeValue('age', 1)"
                style="width: 180px"
                :class="[dataInfo.age === 1 ? 'selected' : 'unselected']"
                class="select_list_item"
              >
                <span>未满60岁</span>
                <span class="select_item" />
              </div>
            </div>
          </div>
          <div class="main_item">
            <span class="label">退休类型</span>
            <div class="select_list">
              <div
                style="width: 180px"
                @click="changeValue('socialSecurityType', 0)"
                :class="[
                  dataInfo.socialSecurityType === 0 ? 'selected' : 'unselected'
                ]"
                class="select_list_item"
              >
                <span>城乡居民</span>
                <span class="select_item" />
              </div>
              <div
                style="width: 180px"
                @click="changeValue('socialSecurityType', 1)"
                :class="[
                  dataInfo.socialSecurityType === 1 ? 'selected' : 'unselected'
                ]"
                class="select_list_item"
              >
                <span>企业职工</span>
                <span class="select_item" />
              </div>
            </div>
          </div>
          <!-- <div class="main_item" style="margin-right: 56px">
            <span class="label">最后参保地</span>
            <el-select
              size="large"
              class="main_item_select"
              v-model="dataInfo.job"
              placeholder="请选择"
            >
              <el-option label="图片" :value="0" />
              <el-option label="视频" :value="1" />
              <el-option label="音频" :value="2" />
            </el-select>
          </div> -->
          <div class="main_item">
            <span class="label">养老缴费年限是否满15年</span>
            <div class="select_list">
              <div
                @click="changeValue('pensionPaymentPeriod', 0)"
                style="width: 180px"
                :class="[
                  dataInfo.pensionPaymentPeriod === 0
                    ? 'selected'
                    : 'unselected'
                ]"
                class="select_list_item"
              >
                <span>是</span>
                <span class="select_item" />
              </div>
              <div
                @click="changeValue('pensionPaymentPeriod', 1)"
                style="width: 180px"
                :class="[
                  dataInfo.pensionPaymentPeriod === 1
                    ? 'selected'
                    : 'unselected'
                ]"
                class="select_list_item"
              >
                <span>否</span>
                <span class="select_item" />
              </div>
            </div>
          </div>
        </div>
        <div class="footer_btn">
          <div class="reset" @click="closed()">取消</div>
          <div class="main_btn" @click="save()">保存</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss">
.CharacterSet {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>
<style lang="scss" scoped>
.CharacterSet {
  background-color: transparent !important;
  background-image: url("../../assets/home/dialog_bg.png");
  height: 722px;
  background-size: 100% 100%;
  .top {
    display: flex;
    flex-direction: row-reverse;
    padding: 100px 43px 0 0;
  }
  .title {
    font-weight: bold;
    font-size: 24px;
    color: #08409f;
    margin-left: 100px;
    margin-bottom: 24px;
  }
  .gender {
    display: flex;
    margin-left: 100px;
    .gender_item {
      width: 178px;
      height: 82px;
      background: #f5f7fe;
      border-radius: 10px 10px 10px 10px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      margin-right: 12px;
      font-size: 14px;
      color: #000000;
      cursor: pointer;
      img {
        width: 50px;
        height: 50px;
        margin-right: 12px;
      }
      .gender_item_select {
        width: 17px;
        height: 17px;
        border: 1px solid #d9d9d9;
        border-radius: 50%; /* 将正方形元素变成圆形 */
        margin-left: 30px;
      }
      .actived {
        border: 4px solid #0052d9;
      }
    }
  }
  .main {
    padding: 79px 100px 0 100px;
    display: flex;
    flex-wrap: wrap;
    .main_item {
      width: 372px;
      display: flex;
      flex-direction: column;
      margin-bottom: 32px;
      .label {
        font-size: 16px;
        color: #666666;
        margin-bottom: 12px;
      }
      .main_item_select {
        // margin-right: 56px;
      }
      .select_list {
        display: flex;
        .select_list_item {
          cursor: pointer;
          height: 40px;
          background: #f5f7fe;
          border-radius: 6px 6px 6px 6px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 16px;
          font-size: 16px;
          color: #333333;
          margin-right: 8px;
        }
        .selected .select_item {
          width: 17px;
          height: 17px;
          border: 4px solid #0052d9;
          border-radius: 50%; /* 将正方形元素变成圆形 */
          margin-left: 4px;
        }
        .unselected .select_item {
          width: 17px;
          height: 17px;
          border: 1px solid #d9d9d9;
          border-radius: 50%; /* 将正方形元素变成圆形 */
          margin-left: 4px;
        }
      }
    }
  }
  .footer_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .reset {
      width: 188px;
      height: 40px;
      margin-right: 24px;
      font-size: 16px;
      font-weight: 400;
      line-height: 40px;
      color: #4287ff;
      text-align: center;
      cursor: pointer;
      background: #fff;
      border: 1px solid #0052d9;
      border-radius: 6px;
    }

    .main_btn {
      width: 188px;
      height: 40px;
      font-size: 16px;
      line-height: 40px;
      color: #fff;
      text-align: center;
      cursor: pointer;
      background: #0052d9;
      border: 1px solid #4287ff;
      border-radius: 6px;
    }
  }
}
</style>
