<template>
  <el-dialog
    :title="title"
    width="500px"
    :visible.sync="dialogVisible"
    @close="diaClose"
    :close-on-click-modal="true"
  >
    <el-form :model="form" label-width="100px">
      <el-form-item label="名称" required>
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="类型" required>
        <el-radio-group v-model="form.type">
          <el-radio :label="1">谢谢惠顾</el-radio>
          <el-radio :label="2">红包</el-radio>
          <el-radio :label="3">物品</el-radio>
          <!-- <el-radio label="9">其他</el-radio> -->
        </el-radio-group>
      </el-form-item>

      <el-form-item label="中奖概率" required>
        <el-input-number :min="0" :max="100" v-model="form.odds"></el-input-number>
        <span>%</span>
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload
          class="avatar-uploader"
          v-model="form.url"
          :action="$http.adornUrlUp('alioss/upload')"
          :show-file-list="false"
          :on-success="uploadSuccess"
        >
          <div class="upload-file-box">
            <img v-if="form.url" :src="form.url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>

    <div class="dialog-footer">
      <el-button @click="diaClose">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import $disc from "@/api/disc-spinning.js";

export default {
  props: {
    source:{
      type:[String,Number],
      default:1
    }
  },
  data() {
    return {
      dialogVisible: false,
      title: "编辑转盘",
      form: {
        name: "",
        url: "",
        type: 1,
        odds: 0,
      },
    };
  },
  methods: {
    uploadSuccess(file) {
      this.form.url = file.data;
      console.log(file.data);
      console.log(this.form.url);
    },
    open(item) {
      console.log(item);
      this.dialogVisible = true;
      this.item = item;
      Object.assign(this.form, item);
    },
    diaClose() {
      this.dialogVisible = false;
      this.form = {
        name: "",
        url: "",
        type: 1,
        odds: 0,
      };
    },
    async confirm() {
      if (!this.form.name) {
        return this.$message.error("名称不能为空");
      }
      if (this.form.odds === "") {
        return this.$message.error("中奖概率不能为空！");
      }
      const { name, url, type, odds, id } = this.form;
      const submitForm={ name, url, type, odds, discType:this.source };
      const { data } =id? await $disc.update({...submitForm,id }) : await $disc.add({ ...submitForm});
      if (data.code == 0) {
        this.$message.success(id?"修改成功":'添加成功');
        this.$emit("refresh");
        this.diaClose();
      }else{
        this.$message.error(data.msg);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.el-form-item__label {
  text-align: left;
}
::v-deep .el-form-item__label {
  text-align: left;
}
.upload-file-box {
  border-radius: 6px;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid #c0c4cc;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>