<template>
  <el-dialog :title="title" width="500px" v-model="dialogVisible" @close="diaClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
      <el-form-item label="歌曲图片">
        <single-image-upload v-model="form.img"></single-image-upload>
      </el-form-item>
      <el-form-item label="歌曲名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="原唱歌手">
        <el-input v-model="form.originSinger"></el-input>
      </el-form-item>
      <el-form-item label="演出歌手名称" prop="singer">
        <el-input v-model="form.singer"></el-input>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input type="number" v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input type="number" v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="form.status" :inactive-value="0" :active-value="1"></el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import shopSongApi from "@/api/account/shopSong";
const form = {
  img: "",
  name: "",
  singer: "",
  originSinger: "",
  price: 0,
  sort: 0,
  status: 1,
};
export default {
  data() {
    return {
      title: "",
      dialogVisible: false,
      rules: {
        name: [
          {
            required: true,
            message: "歌曲名称必填",
            trigger: "blur",
          },
        ],
        singer: [
          {
            required: true,
            message: "演出歌手名称必填",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "单价必填",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "排序必填",
            trigger: "blur",
          },
        ],
      },
      form: { ...form },
    };
  },
  mounted() {},
  methods: {
    restForm() {
      this.form = { ...form };
    },
    diaClose() {
      this.restForm();
    },
    // 提交
    onSubmitHandle() {
      console.log(this.form);
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            let res = "";
            if (this.form.id) {
              //编辑
              res = await shopSongApi.update(this.form);
              ElMessage({
                title: "成功",
                message: `修改成功`,
                type: "success",
              });
            } else {
              //添加
              res = await shopSongApi.add(this.form);
              ElMessage({
                title: "成功",
                message: `添加成功`,
                type: "success",
              });
            }
            this.close();

            this.$emit("success", res);
          } catch (error) {
            console.log(error);
          }
        }
      });
    },
    async show(obj = {}) {
      console.log(obj);
      // this.form=this.$options.data().form
      this.dialogVisible = true;
      this.title = "添加歌曲";

      if (obj && obj.id) {
        this.title = "编辑歌曲";
        this.form = {
          ...obj,
        };
      }
      if (obj && obj.hasOwnProperty("img") && obj.img) {
        console.log(obj.img);
        this.form.img = obj.img;
        requestAnimationFrame(() => {
          this.$refs.uploadImg.fileList = [
            {
              url: obj.img,
            },
          ];
        });
      }
    },
    close() {
      this.restForm();
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.goods_info {
  background-color: #f9f9f9;
  padding: 10px;
  display: flex;
  align-items: center;

  .info {
    flex: 1;
    padding-left: 10px;
  }
}
</style>
