<template>
  <Dialog
    :is-dialog-exist="showDialog"
    :title="dialogTitle"
    :dialog-style="dialogStyle"
    @close-dialog="handleClose"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="概况" name="message">
        <el-container>
          <el-main>
            <el-form
              size="mini"
              label-position="right"
              label-width="120px"
              ref="formData"
              :model="formData"
              :rules="rules"
         
            >
              <div class="formTitle">基本信息</div>
              <div class="item-box">
                <el-form-item label="头像">
                  <img
                    style="width: 70px; height: 70px; border-radius: 5px"
                    src="https://img1.baidu.com/it/u=4154498888,1222423227&fm=11&fmt=auto&gp=0.jpg"
                    alt=""
                  />
                </el-form-item>

                <el-form-item label="会员ID">
                  <el-input disabled></el-input>
                </el-form-item>
              </div>

              <div class="item-box">
                <el-form-item label="会员昵称">
                  <el-input></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                  <el-input></el-input>
                </el-form-item>
              </div>

              <div class="item-box">
                <el-form-item label="账号状态">
                  <el-select v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="邀请码">
                  <el-input></el-input>
                </el-form-item>
              </div>

              <div class="item-box">
                <el-form-item label="微信号">
                  <el-input></el-input>
                </el-form-item>

                <el-form-item label="密码">
                  <el-input></el-input>
                </el-form-item>
              </div>

              <div class="item-box" style="width: 100%">
                <el-form-item label="备注">
                  <el-input style="width: 100%"></el-input>
                </el-form-item>
              </div>
            </el-form>
          </el-main>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="余额变动" name="balance">余额变动</el-tab-pane>
      <el-tab-pane label="积分变动" name="integral">积分变动</el-tab-pane>
    </el-tabs>

    <el-footer>
      <el-button type="primary" @click="submitForm">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </el-footer>
  </Dialog>
</template>

<script>
import Dialog from "@/components/Dialog/index";
/**
 * 结算dialog
 */
export default {
  components: { Dialog },
  props: {
    // 弹窗控制参数
    showDialog: {
      type: Boolean,
      default: false,
    },
    // 选中的数据
    selectItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeName: "message",
      // dialog样式
      dialogStyle: {
        "--dialog-width": "1000px",
        "--dialog-height": "884px",
        "--title-height": "51px",
      },
      // 弹窗标题
      dialogTitle: "会员明细",
      // 提交参数
      formData: {},
      // 校验规则
      rules: {},

      //

      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.initDataView();
      }
    },
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit("handle-close");
    },
    // 提交弹窗
    handleSuccess() {
      this.$emit("handle-success");
    },
    // 初始化弹窗参数
    initDataView() {
      console.log("初始化弹窗参数");
    },
    // 提交表单
    submitForm() {
      this.$refs.formData.validate((valid) => {
        if (valid && this.customValidate()) {
          console.log("提交表单");
        }
      });
    },
    customValidate() {
      let rlt = true;

      return rlt;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  .el-main {
    height: 90%;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 40px;
    .formTitle {
      color: #333333;
      font-size: 16px;
      height: 12px;
      line-height: 12px;
      padding-left: 6px;
      border-left: 3px solid #1890ff;
      margin-bottom: 30px;
    }
    .item-box {
      display: flex;
      align-items: flex-start;
      div {
        width: 50%;
      }
    }
  }
  .el-footer {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    bottom: 0;
    position: absolute;
  }
}
</style>
