<template>
  <div>
    <el-row :gutter="15">
      <!-- <el-col :span="12">
        <el-card style="height: 500px" class="info-show">
          <ul class="info-list">
            <li class="infor-list-item">
              <label for="">姓名：</label>
              <span>{{ userInforStore.userInfor.name }}</span>
            </li>
            <li class="infor-list-item">
              <label for="">性别：</label>
              <span>{{ userInforStore.userInfor.sex }}</span>
            </li>
            <li class="infor-list-item">
              <label for="">手机号：</label>
              <span>{{ userInforStore.userInfor.phone }}</span>
            </li>
            <li class="infor-list-item">
              <label for="">生日：</label>
              <span>{{
                dayjs(userInforStore.userInfor.birthday).format("YYYY-MM-DD")
              }}</span>
            </li>
            <li class="infor-list-item">
              <label for="">地址：</label>
              <span>{{
                userInforStore.userInfor.province +
                "/" +
                userInforStore.userInfor.city +
                "/" +
                userInforStore.userInfor.area +
                "/" +
                userInforStore.userInfor.address
              }}</span>
            </li>
          </ul>
          <el-divider />
        </el-card>
      </el-col> -->
      <el-col :span="24" v-loading="loading">
        <el-form :model="tempUserInfor" label-width="120px">
          <el-form-item label="姓名：">
            <el-input
              v-model="tempUserInfor.name"
              placeholder="请输入你的姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="tempUserInfor.sex">
              <el-radio value="男">男</el-radio>
              <el-radio value="女">女</el-radio>
              <el-radio value="保密">保密</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日：">
            <el-date-picker
              v-model="tempUserInfor.birthday"
              type="date"
              placeholder="选择你的生日呀"
              size="large" />
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input
              v-model="tempUserInfor.phone"
              placeholder="请输入你的手机号"></el-input>
          </el-form-item>
          <el-form-item label="所在区域">
            <el-cascader
              :options="pcaTextArrData"
              v-model="selectedOptions"
              @change="pcaChange"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址：">
            <el-input
              v-model="tempUserInfor.address"
              placeholder="请输入你的地址"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input
              v-model="tempUserInfor.pwd"
              placeholder="请输入你的新密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              style="width: 60%"
              @click="updatePersonInfo"
              >更新我的信息</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <!-- <el-col :span="24" style="margin-top: 15px">
        <el-card>
          <baseEcharts :option="lineStack" style="height: 300px"></baseEcharts>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { userInfor } from "@/store/user/user";
import dayjs from "dayjs";
import { pcaTextArr } from "element-china-area-data";
import { userType } from "@/types/user";
import api from "@/lib/request";
import { md5 } from "js-md5";

const userInforStore = userInfor();
const pcaTextArrData = ref(pcaTextArr);
let tempUserInfor = ref<userType>({ ...userInforStore.userInfor, pwd: "" });
const selectedOptions = ref([
  tempUserInfor.value.province,
  tempUserInfor.value.city,
  tempUserInfor.value.area,
]);

const lineStack = reactive({
  title: {
    text: "Stacked Line",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "Email",
      type: "line",
      stack: "Total",
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "Union Ads",
      type: "line",
      stack: "Total",
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: "Video Ads",
      type: "line",
      stack: "Total",
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: "Direct",
      type: "line",
      stack: "Total",
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: "Search Engine",
      type: "line",
      stack: "Total",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
});
const loading = ref(false);
const infoList = ref([
  {
    label: "姓名",
    value: "李嘉图",
  },
  {
    label: "性别",
    value: "男",
  },
  {
    label: "生日",
    value: "1996/08/17",
  },
  {
    label: "手机号",
    value: "1823079420",
  },
  {
    label: "地址",
    value: "中国贵州省贵阳市",
  },
]);

function updatePersonInfo() {
  loading.value = true;
  let sendData = { ...tempUserInfor.value };

  if (tempUserInfor.value.pwd) {
    sendData.pwd = md5(tempUserInfor.value.pwd).toLocaleUpperCase();
  }

  api()
    .post("/user/update", sendData)
    .then((res) => {
      if (res.code === 200) {
        userInfor().setLoginState(res.data.userInfo);
        loading.value = false;
        ElMessage.success("用户信息更新成功！");
      } else {
        loading.value = false;
      }
    });
}

function pcaChange(data: { [key: string]: any }) {
  tempUserInfor.value.province = data[0];
  tempUserInfor.value.city = data[1];
  tempUserInfor.value.area = data[2];
}
</script>
<style lang="scss" scoped>
.info-show {
  display: flex;
  justify-content: center;
  .info-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .infor-list-item {
      display: flex;
      justify-content: space-around;
      label {
        width: 30%;
        text-align: right;
      }
      span {
        width: 70%;
      }
    }
  }
  .sign {
    display: inline-block;
    color: rgba($color: #000000, $alpha: 0.5);
    // transform: scale(0.8);
    font-size: 0.7rem;
    text-align: center;
    width: 100%;
  }
}
:deep(.el-divider--horizontal) {
  margin: 8px 0;
}
</style>
