<template>
    <div>
        <div style="display:flex;flex-direction: column;align-items: center;">
            <p>遇到知识产权事情了怎么办？</p>
            <p>没关系，请<el-link type="primary" style="font-size: 16px;vertical-align:baseline" @click="open">点击</el-link>我,让我来帮助你</p>
        </div>
        <el-dialog
            :visible.sync="dialogVisible"
            width="600px"
            custom-class="event"
            :before-close="handleClose"
            append-to-body>
            <!-- <el-carousel ref="carouselRef" trigger="click" height="200px" width="300px" arrow="never" :autoplay="false" indicator-position="none">
                <el-carousel-item v-for="item in step" :key="item" style="text-align:center;">
                    <div v-if="index == 0" class="items">
                        <div>
                            <p>您遇到的事情是什么：</p>
                            <el-input v-model="form.questionName" placeholder="请输入事件"></el-input>
                        </div>
                    </div>
                    <div v-if="index == 1"  class="items">
                        <div>
                            <p>什么时间遇到的：</p>
                            <el-date-picker
                                v-model="form.eventDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <div v-if="index == 2"  class="items">
                        <div>
                            <p>什么场景下遇到的：</p>
                            <el-select v-model="form.applicationScenarios" multiple  style="width: 100%;" placeholder="请选择事件场景">
                                <el-option
                                    v-for="item in commonData.ENTERPRISE_APPLICATION_SCENARIO ? commonData.ENTERPRISE_APPLICATION_SCENARIO : []"
                                    :key="parseInt(item.value)" :label="item.label" :value="parseInt(item.value)"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel> -->
            <addQuestion @formData="handleFormData" :type="type" @resetClose="handleClose"></addQuestion>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="setActiveItem(0)" v-if="index!=0">上一步</el-button>
                <el-button @click="setActiveItem(1)" v-if="index!=step && index!=step-1">下一步</el-button>
                <el-button type="primary" @click="submit" v-if="index==step-1" style="width:84px">确认</el-button>
            </span> -->
        </el-dialog>
    </div>
  
</template>

<script>
import addQuestion from '@/views/questionEvent/components/addQuestion.vue';
export default {
  components: {
    addQuestion
  },
  props: {},
  data() {
    return {
        index:0,
        step:3,
        dialogVisible:false,
        form:{},
        commonData:{},
        type:1
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    setActiveItem(val){
        if(val){
            this.index +=1
        }else{
            this.index -=1
        }
        const carousel = this.$refs.carouselRef;
        carousel.setActiveItem(this.index);
    },
    open(){
        this.type = 0
        this.$nextTick(()=>{
            this.type=1
            this.dialogVisible = true
            this.getCommonData()
        })
        
    },
    submit(){
        console.log(this.form)
        this.$router.push({
            path: '/questionEvent'
        })
    },
    handleClose(){
        this.dialogVisible = false
        this.index = 0
    },
    async getCommonData() {
      await this.$api.getCommonData({ keys: 'QUERY_GROUP,ENTERPRISE_APPLICATION_SCENARIO,INVESTIGATION_TYPE' }).then(response => {
        this.commonData = response.data
      })
    },

    //新增事件
    handleFormData({ list, option,edit }) {
      let lists = JSON.parse(JSON.stringify(list))
      if(lists.length == 0){
        this.handleClose()
        return false
      }
      this.forms = {
        projectId: this.projectId,
        eventAddNewDTOs:lists
      }
      if(edit){
        return false
      }
      this.$api.eventAddNew(this.forms).then(res => {
        if (res.code == 200) {
        //   this.getList()
          this.$message.success('事件新增成功')
          this.visualRouter(lists)//跳转
          this.handleClose()
        }
      }).catch(error => {
        this.$message.error(error.message)
      })

    },
    visualRouter(val){
        if(val.length ==1){
            if( val[0].applicationScenarios.length == 0){
                return false
            }
            var visuals = {
                Scenario:null,
                eventId:null,
                eventName:val[0].questionName
            }
            this.$router.push({
                path:'/eventVisual',
                query:{
                    visuals:JSON.stringify(visuals)
                }
            })
        }
    },
  },
};
</script>
<style lang="scss">
    .event{
        .el-dialog__body{
            padding:20px 20px ;
        }
    }
</style>
<style lang="scss" scoped>

.items{
    height: 100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>