<template>
  <div class="box">
    <div style="margin-top:30px;">
      系统配置
    </div>
    <div style="margin-top:30px;"></div>
    <el-collapse v-model="activeNames" @change="handleChange"  accordion>
      <el-collapse-item title="设置无课用户点我要上课跳转地址" name="1">
        <el-form
          :model="form"
          ref="form"
          class="demo-ruleForm"
          style="width:700px;">
          <el-form-item
            prop="msg"
            style="width:500px;"
            :rules="[{ required: true, message: '配置信息不能为空'}, ]">
            <el-input type="text" v-model.number="form.msg" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="submitForm('form')" v-if="!$store.state.readonly">确定</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="打卡商品" name="2">
        <el-form
          :model="form2"
          ref="form2"
          class="demo-ruleForm"
          style="width:700px;">
          <el-form-item  prop="msg" style="width:500px;" :rules="[{ required: true, message: '配置信息不能为空'},]">
            <el-select v-model="form2.msg" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="data in goodsList"
                :key="data.id"
                :label="`【${data.id}】${data.name}`"
                :value="data.id.toString()"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item center>
            <el-button type="primary" @click="submitForm('form2')" v-if="!$store.state.readonly">确定</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="外部投放商品"  name="3">
        <el-form
          :model="form3"
          ref="form3"
          class="demo-ruleForm"
          style="width:700px;">
          <el-form-item  prop="msg" style="width:500px;" :rules="[{ required: true, message: '配置信息不能为空'},]">
            <el-select v-model="form3.msg" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="data in goodsList"
                :key="data.id"
                :label="`【${data.id}】${data.name}`"
                :value="data.id.toString()"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form3')" v-if="!$store.state.readonly">确定</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="默认成团时间（失效前几小时）"  name="4">
        <el-form
          :model="form4"
          ref="form4"
          class="demo-ruleForm"
          style="width:700px;">
          <el-form-item
          style="width:500px;"
            prop="msg"
            :rules="[{ required: true, message: '配置信息不能为空'}, ]">
            <el-input type="text" v-model.number="form4.msg" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form4')" v-if="!$store.state.readonly">确定</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="未成团催团通知时间（失效前几小时）" name="5">
        <el-form
          :model="form5"
          ref="form5"
          class="demo-ruleForm"
          style="width:700px;">
          <el-form-item
          style="width:500px;"
            prop="msg"
            :rules="[{ required: true, message: '配置信息不能为空'}, ]">
            <el-input type="text" v-model.number="form5.msg" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form5')" v-if="!$store.state.readonly">确定</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import {
  getConfigListApi,
  updateConfigApi,
  getGoodsListApi
} from "../../service/api";
export default {
  name: "entrance",
  props: ["entranceObj"],
  data() {
    return {
      activeName: "1",
      form: {
        msg: ""
      },
      form2: {
        msg: ""
      },
      form3: {
        msg: ""
      },
      form4: {
        msg: ""
      },
      form5: {
        msg: ""
      },
      thisList: {},
      thisList2: {},
      thisList3: {},
      thisList4: {},
      thisList5: {},
      goodsList: [],
      activeNames:[1]
    };
  },
  mounted() {
    // this.first();
    this.second();
  },
  filters: {},
  methods: {
    handleChange(val) {
      // console.log(val)
      // this.activeName = val.name;
      if (val === "1") {
        this.first();
      }else if(val === "4"){
        this.four();
      }else if(val === "5"){
        this.five();
      }
    },
    first() {
      getConfigListApi({ key: "new_user_redirect" }).then(res => {
        console.log(res);
        let thisList = res.list[0];
        this.form.msg = thisList.desc;
        this.thisList = thisList;
      });
    },
    second() {
      getGoodsListApi({ limit: 100 }).then(res => {
        this.goodsList = res.list;
        getConfigListApi({ key: "share_goods_id" }).then(res => {
          console.log(res);
          let thisList2 = res.list[0];
          this.form2.msg = thisList2.value;
          this.thisList2 = thisList2;
        });
        getConfigListApi({ key: "mp_ads_goods_id" }).then(res => {
          console.log(res);
          if(res.list[0]){
            let thisList3 = res.list[0];
            this.form3.msg = thisList3.desc;
            this.thisList3 = thisList3;
          }
        });
      });
    },
    four(){
      getConfigListApi({ key: "success_group_before_hour" }).then(res => {
          console.log(res);
          if(res.list[0]){
            let thisList4 = res.list[0];
            this.form4.msg = thisList4.desc;
            this.thisList4 = thisList4;
          }
        });
    },
    five(){
      getConfigListApi({ key: "urge_group_share_hour" }).then(res => {
          console.log(res);
          if(res.list[0]){
            let thisList5 = res.list[0];
            this.form5.msg = thisList5.desc;
            this.thisList5 = thisList5;
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (formName == "form") {
            this.$confirm("确认修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let json = {
                key: this.thisList.key,
                value: this.thisList.value,
                desc: this.form.msg
              };
              let id = this.thisList.id;
              console.log(id, json);
              updateConfigApi(id, json).then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
              });
            });
          } else if(formName == "form2") {
            this.$confirm("确认修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let json = {
                key: this.thisList2.key,
                value: this.form2.msg,
                desc: this.thisList2.desc
              };
              let id = this.thisList2.id;
              updateConfigApi(id, json).then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
              });
            });
          } else if(formName == "form3") {
            this.$confirm("确认修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let json = {
                key: this.thisList3.key,
                value: this.thisList3.value,
                desc: this.form3.msg
              };
              let id = this.thisList3.id;
              updateConfigApi(id, json).then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
              });
            });
          }else if(formName == "form4") {
            this.$confirm("确认修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let json = {
                key: this.thisList4.key,
                value: this.thisList4.value,
                desc: this.form4.msg
              };
              let id = this.thisList4.id;
              updateConfigApi(id, json).then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
              });
            });
          }else if(formName == "form5") {
            this.$confirm("确认修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let json = {
                key: this.thisList5.key,
                value: this.thisList5.value,
                desc: this.form5.msg
              };
              let id = this.thisList5.id;
              updateConfigApi(id, json).then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
              });
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.box{padding: 20px;background: white;text-indent: 10px;box-sizing: border-box;}
.el-form-item{display: inline-block;margin-right: 40px;}
</style>

