<template>
  <div class="one">
    <el-card>
      <el-form ref="demoForm" :model="infoa" :rules="rules" class="dadada">
        <el-form-item label="商品图片:" prop="img">
          <el-upload
            class="tu"
            ref="$qiniu_img"
            :action="'https://heyue.qqtuan.net/alioss-upload'"
            name="file"
            :on-success="handleSuccess"
            :limit="1"
            list-type="picture-card"
            v-model="infoa.img"
            :on-exceed="onExceed"
            accept="image/*"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <img
            width="150px"
            height="150px"
            v-if="infoa.img"
            :src="infoa.img"
            alt=""
            class="tt"
          />
        </el-form-item>
        <el-form-item label="商品名称:" prop="need_score">
          <el-input
            v-model="infoa.name"
            placeholder="请输入所需预约积分"
            clearable
          />
        </el-form-item>
        <el-form-item label="收益商品单价:" prop="need_score">
          <el-input
            v-model="infoa.price"
            placeholder="请输入所需预约积分"
            clearable
          />
        </el-form-item>
        <!--    @input="aaaa(d.start_money)" -->
        <el-form-item label="收益商品规则">
          <div v-for="(d, index) in upinof" :key="index">
            <el-input
              @input="aaaa(d.start_money)"
              style="    width: 150px;"
              v-model="d.start_money"
              placeholder="请输入起始金额"
              clearable
            />
            <span style="padding: 10px;">-</span>
            <el-input
              @input="aaaas(d.end_money)"
              style="    width: 150px;"
              v-model="d.end_money"
              placeholder="请输入结束金额"
              clearable
            />
            <span style="padding: 10px;">-</span>

            <el-input
              @input="aaaaaa(d.num)"
              style="    width: 150px;"
              v-model="d.num"
              placeholder="请输入商品数量"
              clearable
            />
            <el-button type="primary" style="margin:10px" @click="sc(d, index)"
              >删除</el-button
            >
          </div>
        </el-form-item>
        <el-button type="info" @click="addasdasdasdas" class="tj1"
          >新增</el-button
        >
        <!-- <el-form-item v-for="(domain, index) in adasdad" :key="index">
          <el-input v-model="domain.start_money"></el-input>
          <el-input v-model="domain.end_money"></el-input>
          <el-input v-model="domain.num"></el-input>
        </el-form-item> -->

        <!-- <el-form-item label="收益商品规则数量:" prop="need_score">
          <el-input
            v-model="form.need_score"
            placeholder="请输入商品数量"
            clearable
          />
        </el-form-item> -->
        <!-- 提交 -->
        <el-form-item>
          <el-button type="primary" @click="submit" class="tj">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  component: {
    upimage2: function() {
      return this.isUpdate ? [{ url: this.data.img_url }] : [];
    }
  },
  watch: {
    // data() {
    //   if (this.data) {
    //     this.form = Object.assign({}, this.data);
    //     this.isUpdate = true;
    //   } else {
    //     this.form = {};
    //     this.form.slide_sort = 0;
    //     this.isUpdate = false;
    //   }
    // }
    aaaaaaaa: {
      handler(a, b) {
        console.log(a);
        this.aaaaaaaa = a;
      }
    },
    aasdasdasda: {
      handler(a, b) {
        console.log(a);
        this.aasdasdasda = a;
      }
    },
    asdasdajdklklwa: {
      handler(a, b) {
        console.log(a);
        this.asdasdajdklklwa = a;
      }
    }
  },
  data() {
    return {
      info: -1,
      infoa: {
        rule: []
      },
      upinof: [],
      quertlistall: {},
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        qr_img: [{ required: true, message: "请上传图片", trigger: "change" }]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      adasdad: [],
      aaaaaaaa: "",
      aasdasdasda: "",
      asdasdajdklklwa: ""
    };
  },
  comments: {
    aaaawwdww() {}
  },
  methods: {
    // 删除
    sc(d, indexs) {
      this.upinof = this.upinof.filter((item, indexs) => {
        return this.upinof[indexs] != d;
      });
      console.log(this.upinof);
    },
    aaaa(e) {
      this.aaaaaaaa = e;
    },
    aaaas(e) {
      this.aasdasdasda = e;
    },
    aaaaaa(e) {
      this.asdasdajdklklwa = e;
    },
    // 数组新增
    addasdasdasdas() {
      this.upinof.push({
        start_money: "",
        end_money: "",
        num: ""
      });
      //set 不经过data 更新
      this.$set(this.upinof, this.info, {
        start_money: "",
        end_money: "",
        num: ""
      });
      if (this.info != -1) {
        ++this.info;
        this.infoa[`rule[${this.info}][start_money]`] = this.aaaaaaaa;
        this.infoa[`rule[${this.info}][end_money]`] = this.aasdasdasda;
        this.infoa[`rule[${this.info}][num]`] = this.asdasdajdklklwa;
        console.log(this.infoa);
      }
    },
    onExceed() {},
    // 七流云上传后的钩子
    handleSuccess(res) {
      this.infoa.img = res.path;
    },
    /* 提交this.upinof.length */
    submit() {
      if (this.info == -1) {
        console.log(1111);
        this.upinof.forEach((element, index) => {
          this.infoa[`rule[${index}][start_money]`] = element.start_money;
          this.infoa[`rule[${index}][end_money]`] = element.end_money;
          this.infoa[`rule[${index}][num]`] = element.num;
        });
        // return;
      }
      let formData = new FormData();
      for (let key in this.infoa) {
        if (this.infoa[key] !== null && this.infoa[key] !== undefined) {
          formData.append(key, this.infoa[key]);
        }
      }
      this.$http.post("admin-api/goods-config/update", formData).then(res => {
        this.loading = false;
        this.info = -1;
        if (res.data.status == 1) {
          this.$message({ type: "success", message: "成功" });
        } else {
          this.$message.error(res.data.error);
        }
      });
    },
    /* 关闭当前页面 */
    closeThis() {
      this.$store
        .dispatch("user/tabRemove", this.$route.fullPath)
        .then(({ lastPath }) => {
          this.$router.push(lastPath || "/");
        });
    },

    // 查询信息
    queryinfo() {
      this.$http.get("admin-api/goods-config/get", {}).then(res => {
        if (res.data.status === 1) {
          console.log(res);
          if (res.data.result[0]) {
            this.infoa = res.data.result[0];
            this.upinof = JSON.parse(res.data.result[0].rule);
          }
          // this.infoa.rule = JSON.parse(res.data.result[0].rule);
        }
      });
    }
  },
  created() {
    this.queryinfo();
  }
};
</script>

<style scoped>
.asdaswww {
  display: flex;
  flex-direction: row-reverse;
}
.asdaswww > div:nth-child(2) {
  margin-left: 32px;
}
.el-form-item {
  display: flex;
  flex-direction: row;
  font-size: 20px;
  padding-top: 10px;
  margin-left: 15px;
}

/* .dadada {
  width: 700px;
  height: 550px;
  background-color: #fff;
  border-radius: 5px;
} */
.one {
  margin-top: 20px;
  margin-left: 20px;
}
.tu {
  margin-left: 30px;
}
.line {
  padding-left: 20px;
}
.tj {
  width: 600px;
}
.tj1 {
  width: 600px;
  margin-left: 15px;
}
.tt {
  margin-left: 30px;
}
</style>