<template>
  <div class="user-set">
    <div class="user-info part-box">
      <div class="user-info-avatar">
        <Icon type="ios-person"></Icon>
        <!-- <img src="" alt=""> -->
      </div>
      <h4 class="user-info-name">{{ username }}</h4>
      <h5 class="user-info-email">{{ email }}</h5>
    </div>
    <div class="user-setting part-box">
      <h3>用户设置</h3>
      <div class="user-table non-border">
        <Table
          :columns="columns"
          :data="userSetInfos"
          :show-header="false"
          disabled-hover
        ></Table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "user-set",
  data() {
    return {
      username: "chuyiyi",
      email: "chulin@163.com",
      columns: [
        {
          title: "名称",
          key: "title",
          align: "right",
          width: 100
        },
        {
          title: "内容",
          key: "content"
        },
        {
          title: "是否设置",
          align: "center",
          key: "isSet",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "ios-checkmark-circle",
                  color: "#19be6b"
                }
              }),
              params.row.isSet
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h(
              "a",
              {
                on: {
                  click: () => {
                    this.toEdit(params.row);
                  }
                }
              },
              [
                h("Icon", {
                  props: {
                    size: 18,
                    type: "ios-create"
                  }
                })
              ]
            );
          }
        }
      ],
      userSetInfos: [
        {
          title: "密码",
          router: "ResetPswd",
          content: "使用数字、英文混合的密码更安全",
          isSet: "已设置"
        },
        {
          title: "手机绑定",
          router: "BindMobile",
          content: "185****1423",
          isSet: "已绑定"
        },
        {
          title: "邮箱绑定",
          router: "email",
          content: "chulin@163.com",
          isSet: "已绑定"
        }
      ]
    };
  },
  methods: {
    toEdit(row) {
      this.$router.push({ name: row.router });
      console.log(row);
    }
  }
};
</script>
