<template>
  <Dialog
    :is-dialog-exist="showDialog"
    :title="dialogTitle"
    :dialog-style="dialogStyle"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <el-form ref="formData" :model="formData" :rules="rules" label-width="auto">
          <div class="formData">
            <img
              v-if="selectItem.avatarUrl"
              :src="selectItem.avatarUrl"
              class="circle-box size-35"
              alt="avatar"
            />
            <img v-else :src="defaultAvatar" class="circle-box size-35" alt="avatar" />
            <span style="margin-bottom: 20px; color: #333333; font-size: 14px">{{
              selectItem.mobile
            }}</span>
            <!-- <el-form-item label="等级" v-if="dialogTitle === '设置等级'">
              <el-select
                style="width: 360px"
                v-model="formData.status"
                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="支付宝提现账号"
              v-if="dialogTitle === '修改绑定的支付宝'"
            >
              <el-input
                style="width: 360px"
                placeholder="请输入支付宝提现账号"
                v-model="formData.alipay_account"
              ></el-input>
            </el-form-item>

            <el-form-item label="真实姓名" v-if="dialogTitle === '修改绑定的支付宝'">
              <el-input
                v-model="formData.realName"
                style="width: 360px"
                placeholder="请输入真实姓名"
              ></el-input>
            </el-form-item>

            <el-form-item label="可提现余额" v-if="dialogTitle === '调整余额'">
              <el-input
                style="width: 360px"
                v-model="formData.balance"
                placeholder="0.00"
              ></el-input>
            </el-form-item>

            <el-form-item label="积分变动" v-if="dialogTitle === '调整积分'">
              <el-input
                style="width: 360px"
                v-model="formData.integral"
                placeholder="0.00"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-footer>
    </el-container>
  </Dialog>
</template>

<script>
import Dialog from "@/components/Dialog/index";
/**
 * 结算dialog
 */
export default {
  components: { Dialog },
  props: {
    // 弹窗控制参数
    showDialog: {
      type: Boolean,
      default: true,
    },
    // 选中的数据
    selectItem: {
      type: Object,
      default: () => {},
    },
    dialogTitle: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  mounted() {},
  data() {
    return {
      // dialog样式
      dialogStyle: {
        "--dialog-width": "622px",
        "--dialog-height": "424px",
        "--title-height": "51px",
      },

      // 提交参数
      formData: {},
      // 校验规则
      rules: {},
      defaultAvatar: "./pic/default/default_avatar.png",

      options: [
        {
          value: 1,
          label: "正常",
        },
        {
          value: -1,
          label: "不正常",
        },
      ],
      value: "",
    };
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.initDataView();
      }
    },
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit("handle-close");
    },
    // 提交弹窗
    handleSuccess() {
      this.$emit("handle-success");
    },
    // 初始化弹窗参数
    initDataView() {
      console.log("初始化弹窗参数");

      this.formData = JSON.parse(JSON.stringify(this.selectItem));
    },
    // 提交表单
    submitForm() {
      if (this.dialogTitle === "修改绑定的支付宝") {
        this.selectItem.alipay_account = this.formData.alipay_account;
        this.handleClose();
        return;
      }

      if (this.dialogTitle === "调整余额") {
        this.selectItem.balance = this.formData.balance;
        this.handleClose();
        return;
      }

      if (this.dialogTitle === "调整积分") {
        this.selectItem.integral = this.formData.integral;
        this.handleClose();
        return;
      }

      console.log(this.dialogTitle);
    },
    customValidate() {
      let rlt = true;

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

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 100%;
  .el-main {
    height: 90%;
    width: 100%;
    .formData {
      display: flex;
      flex-flow: column;
      align-items: center;
      padding: 30px 0 0 0;
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-bottom: 10px;
      }
    }
  }
  .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);
  }
}
</style>
