<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-width="300px" width="600px">
      <el-form-item label="活动名称" prop="jz_mall_name" >
        <el-input v-model="dataForm.jz_mall_name" style="width: 400px;"/>
      </el-form-item>

      <el-form-item label="商详页跳转路径" prop="jz_mall_name" >
        <el-input v-model="dataForm.jz_mall_name" style="width: 400px;"/>
      </el-form-item>
        
        <el-form-item label="支付成功页热推商品" prop="goodsId">
          <el-select v-model="dataForm.goodsId" style="width: 400px;" clearable class="filter-item" placeholder="请选择商品" filterable multiple>
            <el-option v-for="item in goodsList" :key="item.id" :label="item.name" :value="item.id + ''" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="dataSub">
          <el-date-picker v-model="dataForm.dataSub" type="daterange" style="width: 400px;"  placeholder="选择日期" value-format="yyyy-MM-dd">
          </el-date-picker>

        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dataForm.status" style="width: 400px;">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>

          <el-button type="primary" @click="updateHoliday">确定</el-button>
        </el-form-item>
      </el-form> 
  </div>
</template>
  
<script>
import { listMall, updateMall, getServiceShield, updateServiceShield } from '@/api/config'
import {
  gmvlist,
  getAllGoods,

} from "@/api/stat";
export default {
  name: 'activity',
  data() {
    return {
      dataForm: {
        jz_mall_name: '',
        jz_mall_address: '',
        jz_mall_phone: '',
        jz_mall_qq: '',
        jz_mall_longitude: '',
        jz_mall_latitude: ''
      },
      rules: {
        jz_mall_name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        jz_mall_address: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        jz_mall_phone: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        jz_mall_qq: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }, 
      goodsList: [],
    }
  },
  created() { 

  },
  methods: { 

    cancel() {
      this.init()
    },
    update() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.doUpdate()
      })
    },
    doUpdate() {
      updateMall(this.dataForm)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '商场配置成功'
          })
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    getServiceShield() {
      getServiceShield()
        .then(res => {
          let data = res.data.data;
          console.log(data);
          this.holidayForm = {
            id: data.id,
            comment: data.comment,
            status: data.status,
            goodsId: data.goodsId.split(','),
            dataSub: data.dataSub.split(',')
          };
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    updateHoliday() {
      this.$refs['holidayForm'].validate(valid => {
        if (valid) {
          updateServiceShield({
            id: this.holidayForm.id,
            goodsId: this.holidayForm.goodsId.join(','),
            dataSub: this.holidayForm.dataSub.join(','),
            status: this.holidayForm.status,
            comment: this.holidayForm.comment

          })
            .then(response => {
              this.$notify.success({
                title: '成功',
                message: '配置成功'
              });
              this.getServiceShield();
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.errmsg
              })
            })
        }
      });
    },


  }
}
</script>
<style scoped>
.form-wrapper {
  margin: 50px 0 0;
}

.el-date-editor.el-input {
  width: 100%;
}
</style>
  