<template>
    <div>
        <div style="margin-top:30px;">
        </div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="新用户跳转链接" name="news_user">
                <el-form :model="form" ref="form" label-width="120px" class="demo-ruleForm" style="width:600px;">
                    <el-form-item label="链接地址" prop="msg" :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-tab-pane>
            <el-tab-pane label="打卡商品ID" name="share_goods">
                <el-form :model="form2" ref="form2" label-width="120px" class="demo-ruleForm" style="width:600px;">
                    <el-form-item label="打卡商品ID" prop="msg" :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>
                        <el-button type="primary" @click="submitForm('form2')"  v-if="!$store.state.readonly">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>
<script>
import { getConfigListApi ,updateConfigApi,getGoodsListApi} from "../../service/api";
export default {
  name: "entrance",
  props: ["entranceObj"],
  data() {
    return {
      activeName: "news_user",
      form: {
        msg: ""
      },
      form2: {
        msg: ""
      },
      thisList:{},
      thisList2:{},
      goodsList:[],
    };
  },
  mounted() {
        this.first();
  },
  filters: {},
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
       if (tab.name === 'news_user') {
               this.first();
          } else {
              this.second();
          }
    },
     first() {
        getConfigListApi({key: 'new_user_redirect'}).then(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 => {
          let thisList2 = res.list[0]
          this.form2.msg=thisList2.value;
          this.thisList2=thisList2;
        })
      });
      },
    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{
                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 {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
</style>