<template>
  <div class="box">
    <div class="container">
    <div class="item left">
    <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-item title="无课用户推荐商品"  name="6">
        <el-form
          :model="form6"
          ref="form6"
          class="demo-ruleForm"
          style="width:700px;">
          <el-form-item  prop="msg" style="width:500px;" :rules="[{ required: true, message: '配置信息不能为空'},]">
            <el-select v-model="form6.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('form6')" v-if="!$store.state.readonly">确定</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="自动化推荐体验商品"  name="7">
        <el-form
          :model="form7"
          ref="form7"
          class="demo-ruleForm"
          style="width:700px;">
          <el-form-item  prop="msg" style="width:500px;" :rules="[{ required: true, message: '配置信息不能为空'},]">
            <el-select multiple v-model="form7.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('form7')" v-if="!$store.state.readonly">确定</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="自动化推荐转化商品ID"  name="8">
        <el-form
          :model="form8"
          ref="form8"
          class="demo-ruleForm"
          style="width:700px;">
          <el-form-item  prop="msg" style="width:500px;" :rules="[{ required: true, message: '配置信息不能为空'},]">
            <el-select  v-model="form8.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('form8')" v-if="!$store.state.readonly">确定</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
     </el-collapse>
     </div>
     <div class="item">
       <div style="margin-top:30px;">
        系统功能
       </div>
       <div style="margin-top:30px;"></div>
       <div>
         <el-button  @click="noticeDialogFn">
            发送活动通知
          </el-button>
       </div>
     </div>
    </div>
    <el-dialog
    title="发生活动通知(限活动期数发送)"
    :visible.sync="noticeDialog"
    >
      <el-cascader
              :options="periodList"
              :props="{value:'id',label:'name'}"
              @active-item-change="handleItemChange"
              v-model="secGoods"
            >
      </el-cascader>
      <span slot="footer" class="dialog-footer">
        <el-button @click="noticeDialog = false">取 消</el-button>
        <el-button type="primary" @click="onSend">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getConfigListApi,
  updateConfigApi,
  getGoodsListApi,
  postActiveNoticeApi,
  getPeriodsApi,
  getClassListApi,
  getPeriodsTeacherApi,
  getDefaultPeriodsApi
} from "../../service/api";
import {GOODSTYPE,CLASSSOURCE} from '../../util/wordbook';
export default {
  name: "entrance",
  props: ["entranceObj"],
  data() {
    return {
      noticeDialog:false,
      activeName: "1",
      form: {
        msg: ""
      },
      form2: {
        msg: ""
      },
      form3: {
        msg: ""
      },
      form4: {
        msg: ""
      },
      form5: {
        msg: ""
      },
      form6: {
        msg: ""
      },
      form7: {
        msg:[]
      },
      form8: {
        msg: ""
      },
      thisList: {},
      thisList2: {},
      thisList3: {},
      thisList4: {},
      thisList5: {},
      thisList6: {},
      thisList7: {},
      thisList8: {},
      periodList: [],
      activeNames:[1],
      selectedGoods: [],
        secGoods:[],
        periodsId:''
    };
  },
  mounted() {
    // this.first();
    this.second();
  },
  filters: {},
  methods: {
    handleItemChange(val){
        getPeriodsApi({goods_id:val[0]}).then(res=>{
          res.list.forEach(i=>{i.name = i.title});
          this.periodList.find(i=>{return i.id === val[0]}).children = res.list
        })
      },
    onSend(){
        console.log(this.secGoods)
        postActiveNoticeApi(this.secGoods[1]).then(res=>{
          this.noticeDialog=false;
          this.$message({
            type: "success",
            message: "发送成功"+res.num+'个'
          });
        })
      },
    noticeDialogFn(){
        this.noticeDialog=true
        let json = {
          page: 1,
          limit: 100,
          goods_type:'1,2'
        };
        getGoodsListApi(json).then(res=>{
          // console.log(res)
          res.list.forEach(i=>{
            i.name = '['+i.id+']'+'[' + GOODSTYPE[i.goods_type] + ']' + '[' +i.current_price / 100 + '元]' + i.name
            i.children = [];
          });
          this.periodList = res.list;
          this.initQuery();
        });
      },
      initQuery(){
        let _query = this.$route.query;
        if (_query && _query.goods_id && _query.periods_id) {
          this.goods_id = _query.goods_id;
          this.selectedGoods = [parseInt(_query.goods_id),parseInt(_query.periods_id)];
          getPeriodsApi({goods_id:this.selectedGoods[0]}).then(res=>{
            res.list.forEach(i=>{i.name = i.title});
            this.periodList.find(i=>{return i.id === this.selectedGoods[0]}).children = res.list
            let nowGoods = this.periodList.find(i=>{return i.id === this.selectedGoods[0]});
            this.periods = nowGoods.children.find(i=>{return i.id === this.selectedGoods[1]});
            this.teacher_id = '';
            // this.getClassList()
          })
        } else {
          getDefaultPeriodsApi().then(res=>{
            if(res){
              this.goods_id = res.goods_id;
              this.selectedGoods = [parseInt(res.goods_id),parseInt(res.id)];
              getPeriodsApi({goods_id:this.selectedGoods[0]}).then(res=>{
                res.list.forEach(i=>{i.name = i.title});
                this.periodList.find(i=>{return i.id === this.selectedGoods[0]}).children = res.list
                console.log(res.list)
                console.log(this.periodList.find(i=>{return i.id === this.selectedGoods[0]}).children)
                let nowGoods = this.periodList.find(i=>{return i.id === this.selectedGoods[0]});
                this.periods = nowGoods.children.find(i=>{return i.id === this.selectedGoods[1]});
                this.teacher_id = '';
                // this.getClassList()
                console.log(this.periodList)
              });
            }
        })
        }
      },
      getClassList(){
        if (!this.periods) return;
        this.getTeacher();
        let json = {
            limit: this.limit,
            page: this.nowPage
        };
        if (this.teacher_id) {
            json.teacher_id = this.teacher_id
        }
        getClassListApi(this.periods.id,json).then(res=>{
          res.list.forEach(data=>{
            data.arrive_course_rate = 0;
            data.watch_course_rate = 0;
            data.over_course_rate = 0;
            data.work_rate = 0;
            data.over_work_rate = 0;
            data.clock_rate = 0;
            data.over_clock_rate = 0;
            data.transform_rate = 0;
          });

          this.title = res.periods;
          this.title.count_join_num = res.count.count_join_num ? res.count.count_join_num : '暂无';
          this.title.count_max_join_num = res.count.count_max_join_num ? res.count.count_max_join_num : '暂无';
          this.title.count_teacher_num = res.count.count_teacher_num ? res.count.count_teacher_num : '暂无';
          this.countObj = res.count ? res.count : '';
          this.classList = res.list;
          this.total = res.total;
        })
      },
    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();
      }else if(val === "7"){
        this.seven();
      }else if(val === "8"){
        this.eight();
      }
    },
    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;
          }
        });
         getConfigListApi({ key: "no_course_goods_id" }).then(res => {
          console.log(res);
          if(res.list[0]){
            let thisList6 = res.list[0];
            this.form6.msg = thisList6.value;
            this.thisList6 = thisList6;
          }
        });
      });
    },
    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;
          }
        });
    },
    seven(){
      getConfigListApi({ key: "automation_goods_ids" }).then(res => {
          console.log(res);
          if(res.list[0]){
            let thisList7 = res.list[0];
            this.form7.msg = thisList7.value.split(',');
            this.thisList7 = thisList7;
          }
        });
    },
    eight(){
      getConfigListApi({ key: "automation_conversion_goods_id" }).then(res => {
          console.log(res);
          if(res.list[0]){
            let thisList8 = res.list[0];
            this.form8.msg = thisList8.value;
            this.thisList8 = thisList8;
          }
        });
    },
    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 if(formName == "form6") {
            this.$confirm("确认修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let json = {
                key: this.thisList6.key,
                value: this.form6.msg,
                desc: this.thisList6.desc
              };
              let id = this.thisList6.id;
              updateConfigApi(id, json).then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
              });
            });
          }else if(formName == "form7") {
            this.$confirm("确认修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let json = {
                key: this.thisList7.key,
                value: this.form7.msg.join(','),
                desc: this.thisList7.desc
              };
              let id = this.thisList7.id;
              updateConfigApi(id, json).then(res => {
                this.$message({
                  type: "success",
                  message: "修改成功!"
                });
              });
            });
          }else if(formName == "form8") {
            this.$confirm("确认修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let json = {
                key: this.thisList8.key,
                value: this.form8.msg,
                desc: this.thisList8.desc
              };
              let id = this.thisList8.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;}
.container{
  display: flex;
  .left{width: 60%;}
  .el-collapse-item__arrow{margin-left: 0;}
}
</style>

