<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalCols="modalCols"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__after">
        <div style="padding: 20px">
          <el-descriptions title="用户信息">
            <el-descriptions-item label="头像">
              <el-image
                style="width: 60px; height: 60px"
                :src="modalData.headUrl"
                :preview-src-list="[modalData.headUrl]"
              >
              </el-image>
            </el-descriptions-item>
            <el-descriptions-item label="用户名">{{
              modalData.username
            }}</el-descriptions-item>
            <el-descriptions-item label="ID">{{
              modalData.userId
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{
              modalData.mobile
            }}</el-descriptions-item>
            <!-- <el-descriptions-item label=""
              >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
            > -->
          </el-descriptions>
        </div>
        <div
          v-if="modalData.id"
          style="margin-top: 20px; border-top: 1px solid #ccc; padding: 20px"
        >
          <el-descriptions title="会员信息">
            <el-descriptions-item label="会员名称">{{
              modalData.levelName
            }}</el-descriptions-item>
            <el-descriptions-item label="生日">{{
              modalData.birthday
            }}</el-descriptions-item>
            <el-descriptions-item label="加入会员时间">{{
              modalData.joinTime
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "用户详情",
        show: false,
        width: "60%",
      },
      modalData: {},
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.modal.resetFields();
        });
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: () => {
          this.modalConfig.title = "用户详情";
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = row;
    },
  },
  computed: {
    modalCols() {
      return [];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: this.isAdd ? "确认添加" : "确认",
          type: "primary",
          loading: this.isLoading,
          submit: true,
          handle: () => {
            console.log(JSON.parse(JSON.stringify(this.modalData)));
            this.$emit(
              "addCouponData",
              JSON.parse(JSON.stringify(this.modalData))
            );
            this.toggle();
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>