<template>
  <div>
    <div class="title">
      角色管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card">
      <div class="user">
        头像:
        <div class="user_div">
          <UploadImg v-model:image-url="absoluteStationPicUr1" :drag="false" border-radius="50%"> </UploadImg>
        </div>
      </div>
      <div class="user">
        昵称：<span class="user_div">{{ userdata.user.userName }}</span>
      </div>
      <div class="user">
        部门：<span class="user_div">{{ userdata.user.dept.deptName }}</span>
      </div>
      <div class="user">
        角色：<span class="user_div">{{ userdata.user.roles[0].roleName }}</span>
      </div>
      <div class="user">
        账号：<span class="user_div">{{ userdata.user.loginName }}</span>
      </div>
      <div class="user">
        性别：<span class="user_div">{{ userdata.user.userName == 0 ? "男" : "女" }}</span>
      </div>
      <div class="user">
        电话：<span class="user_div">{{ userdata.user.phonenumber }}</span>
      </div>
      <div class="user">
        推送类型：<span class="user_div">
          <div v-if="userdata.user.emailType == 0">暂不发送</div>
          <div v-if="userdata.user.emailType == 1">详细邮件</div>
          <div v-if="userdata.user.emailType == 2">简易邮件</div>
        </span>
        &nbsp; &nbsp; &nbsp; &nbsp;
        <el-button :icon="Share" @click="dialogemailType = true">修改</el-button>
      </div>
      <div class="user">
        邮箱：<span class="user_div">{{ userdata.user.email }}</span>
        &nbsp; &nbsp; &nbsp; &nbsp;
        <el-button :icon="Edit" @click="postersDeviceEdit">修改</el-button>
      </div>
      <div class="user">
        推送时间：<span class="user_div">{{ userdata.user.sendTime }}</span>
        &nbsp; &nbsp; &nbsp; &nbsp;
        <el-button :icon="Edit" @click="dialogVisible = true">修改</el-button>
      </div>
      <!-- <div class="user">
        创建时间：<span class="user_div">{{ userdata.user.createTime }}</span>  
      </div> -->
      <div class="user">
        备注：<span class="user_div">{{ userdata.user.remark }}</span>
      </div>
    </div>
    <div class="bottom">
      <el-button @click="resetForm()" type="primary" size="large">返回</el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
      <div class="dialogitem">选择报表推送时间，设置18：00之前的时间发送前一天的报表，18：00之后发送当日报表!</div>
      <el-time-select v-model="value1" style="width: 240px" start="00:00" step="00:30" end="24:00" placeholder="推送时间" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="postersDeviceShare"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogemailType" title="提示" width="500" :before-close="handleClosemailType">
      <el-select v-model="emailType" placeholder="选择推送模式" size="large">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClosemailType">取消</el-button>
          <el-button type="primary" @click="postersmailType"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<!--    -->
<script setup lang="ts">
import { selectaccountNumber, updateURL } from "@/api/home/Multisite";
import { onMounted, ref, watch } from "vue";
import UploadImg from "@/components/Upload/Img.vue";
import { Share, Edit } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
const router = useRouter();
const userdata = ref();
const dialogVisible = ref(false);
const dialogemailType = ref(false);
const emailType = ref(0);
const options = ref();
const absoluteStationPicUr1 = ref("");
watch(absoluteStationPicUr1, (newVal, oldVal) => {
  console.log("absoluteStationPicUr1 has changed:", newVal);
  console.log(oldVal);
  // 你可以在这里处理变化后的逻辑
  if (absoluteStationPicUr1.value != userdata.value.user.avatar) {
    getupdate();
  }
});
// 修改个人信息
const getupdate = async () => {
  let obj = {
    avatar: absoluteStationPicUr1.value
  };
  await updateURL(obj);
};
const getplatformuserlist = async () => {
  const { data } = await selectaccountNumber({});
  userdata.value = data;
  if (userdata.value.user.roles[0].roleKey == 1) {
    options.value = [
      {
        value: "0",
        label: "暂不发送邮件"
      },
      {
        value: "2",
        label: "发送邮件"
      }
    ];
  } else {
    options.value = [
      {
        value: "0",
        label: "暂不发送邮件"
      },
      {
        value: "1",
        label: "详细邮件"
      },
      {
        value: "2",
        label: "简易邮件"
      }
    ];
  }
  absoluteStationPicUr1.value = userdata.value.user.avatar;
  value1.value = userdata.value.user.sendTime;
  emailType.value = userdata.value.user.emailType;
};
const currentDate = ref();
const resetForm = async () => {
  router.back();
};
// 邮箱编辑
const postersDeviceEdit = async () => {
  ElMessageBox.prompt("请先填写邮箱", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputValue: userdata.value.user.email,
    inputPattern: /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/,
    inputErrorMessage: "请输入正确格式邮箱"
  }).then(async ({ value }) => {
    let obj = {
      email: value
    };
    await updateURL(obj);
    getplatformuserlist();
  });
};
const handleClose = async () => {
  dialogVisible.value = false;
};

const value1 = ref();
// 用户推送
const postersDeviceShare = async () => {
  console.log(value1.value);
  let obj = {
    sendTime: value1.value
  };
  await updateURL(obj);
  dialogVisible.value = false;
  getplatformuserlist();
};
// 取消推送时间弹窗
const handleClosemailType = async () => {
  dialogemailType.value = false;
};

// 用户推送
const postersmailType = async () => {
  console.log(dialogemailType.value);

  ElMessageBox.confirm("确认推送模式", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    let obj = {
      emailType: emailType.value
    };
    await updateURL(obj);
    dialogemailType.value = false;
    getplatformuserlist();
  });
};

//
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }

  getplatformuserlist();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!-- -->
