<template>
  <div>
    <!-- 新增专题库的问题新增（事件） -->
    <div>
      <el-table :data="formData" style="width: 100%" class="twj-table">
        <el-table-column prop="questionName" label="事件名称" align="center">
          <template slot="header">
            <div>
              <el-tooltip class="item" effect="dark" content="事件：商业目标/解决问题/对应项目" placement="top">
                <span>事件名称<span style="color:red;"> *</span></span>
              </el-tooltip>
            </div>
          </template>
          <template slot-scope="scope">
            <div>
              <el-autocomplete
                      class="inline-input"
                      v-model="scope.row.questionName"
                      :fetch-suggestions="querySearchQuestion"
                      placeholder="请输入或选择事件"
                      :trigger-on-focus="false"
                      @select="handleSelectQuestion"
                      @change="change1($event,scope)"
                      @focus="focus($event,scope)"
                      @input="input1($event,scope)"
                      style="width: 100%;" >
              </el-autocomplete>
              <!-- <el-input v-model="scope.row.questionName" autocomplete="off" placeholder="请输入商业目标"></el-input> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="eventDate" label="事件时间" align="center">
          <template slot-scope="scope">
            <div>
              <el-date-picker style="width: 100%" v-model="scope.row.eventDate" :disabled="scope.row.id?true:false" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择事件日期时间">
              </el-date-picker>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="事件描述" align="center" width="250px">
          <template slot-scope="scope">
            <div>
              <el-input type="textarea" :rows="1" v-model="scope.row.description" autocomplete="off"
                placeholder="请输入事件描述" :disabled="scope.row.id?true:false"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="applicationScenarios" label="事件场景" align="center" >
          <template slot-scope="scope">
            <div>
              <el-select v-model="scope.row.applicationScenarios" :disabled="scope.row.id?true:false" 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>
          </template>
        </el-table-column>
        <el-table-column label="事件操作" align="" width="100px">
          <template slot-scope="scope">
            <div>
              <el-tooltip class="item" effect="dark" content="增加事件" placement="top">
                <i @click="addRow(scope)" class="el-icon-plus btn"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除事件" placement="top">
                <i @click="deleteRow(scope)" v-if="scope.$index != 0" class="el-icon-close btn"></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display:flex;justify-content: center;margin-top:20px">
        <el-button type="primary" @click="submitForm1()" size="small" style="width:100px">确定</el-button>
        <el-button size="small" @click="resetForm()" style="width:100px">重置</el-button>
        <el-button size="small" @click="resetClose()" style="width:100px">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['projectId', 'isSure','isCloseFormData','eventId'],
  data() {
    return {
      form: {
        applicationScenarios:[],
      },
      formData: [
        {
          questionName: '',
          eventDate: '',
          description: '',
          applicationScenarios: [],
        }
      ],
      commonData: {},
      rules: {
        questionName: [{ required: true, message: '请输入商业目标', trigger: 'change' },],
      },
      valid: true,
      questionNameArr: [

      ],//事件名称输入/选择框
      // rowForm:{},
      index:null,
    }
  },
  watch: {
    // 父组件弹窗确定
    isSure() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.valid = true
          this.$emit('form', this.form)
          this.isCloseSure()
        }
      })
    },
    // 父组件弹窗取消
    isClose() {
      this.isCloseSure()
    },
    // 父组件编辑时回显
    // rowForm(val) {
    //   if (JSON.stringify(this.rowForm) === '{}') {

    //   } else {
    //     if (val.hasOwnProperty('applicationScenarios') == false) {
    //       this.$set(val, 'applicationScenarios', [])
    //     }
    //     this.form = val
    //   }
    // },
    // 关闭专题库
    isCloseFormData() {
      this.formData=[
              {
                questionName: '',
                eventDate: '',
                description: '',
                applicationScenarios: [],
              }
          ]
      // this.$emit('formData', {list:this.formData})
    },
  },
  async mounted() {
    // 应用场景
    await this.getCommonData()
    //查询所有事件
    await this.questionEventList()
     this.$nextTick(()=>{
      if(this.eventId){
        this.index = 0
        this.handleSelectQuestion(this.questionNameArr.find(item=>{return item.id == this.eventId}))
      }
     })
    //  this.$nextTick(() => {
    //    if (JSON.stringify(this.rowForm) == '{}') {
    //    } else {
    //       if (this.rowForm.hasOwnProperty('applicationScenarios') == false) {
    //         this.$set(this.rowForm,'applicationScenarios',[])
    //       }
    //      this.form = this.rowForm
    //    }
    // })
  },
  methods: {
    // 请求应用场景
    async getCommonData() {
      await this.$api.getCommonData({ keys: 'QUERY_GROUP,ENTERPRISE_APPLICATION_SCENARIO,INVESTIGATION_TYPE' }).then(response => {
        this.commonData = response.data
      })
    },
    onChange() { },
    // 关闭弹窗重置数据与校验
    isCloseSure() {
      this.form = {}
      this.$set(this.form,'applicationScenarios',[])
      // 重置校验resetFields
      this.$refs.form.resetFields()
    },
    // 保存事件
    submitForm1(){
      var list = []
      try {
        this.formData.forEach(item=>{
          var a = false
          for (let key in item) {
            if (key != 'applicationScenarios') {
              if(item[key]!='' && item[key]!=null){
                    a = true
                }
            } else {
              if(item[key].length > 0){
                    a = true
                }
            }  
          }
          if(a == true){
              if (item.questionName != '') {
                    list.push(item)
              } else {
                throw new Error('事件名称不能为空')
                // return false
              }
          } 
        })
        var arr = [...new Set(list.map(item=>{return item.questionName}))]
        if(arr.length<list.length){
          this.$message.error(`存在重复的事件名称，请重定义事件名称`)
          return false
        }
         this.$emit('formData', {list:list,option:1})
      } catch (error) {
        this.$message.error(error)
      }
     
    },
     //取消全部事件
    resetForm() {
      this.$confirm('此操作将重置全部事件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.type ==1 ){
              this.$refs.ruleForm.resetFields();
          }
          this.formData=[
              {
                questionName: '',
                eventDate: '',
                description: '',
                applicationScenarios: [],
              }
          ]
          this.$emit('formData', {list:this.formData,option:1})
          this.$message.success('事件已全部重置')
        }).catch(() => {   
          this.$message.info('重置操作已取消')
        });
    },
    // 取消
    resetClose() {
      this.$emit('resetClose',true)
    },
    // 增加事件
    addRow() {
      this.formData.push(
        {
          questionName: '',
          eventDate: '',
          description: '',
          applicationScenarios: [],
        }
      )
    },
    //删除事件
    deleteRow(row) {
        this.formData.splice(row.$index,1)
    },
    // 查询所有事件
    async questionEventList() {
      await this.$api.eventQuery({}).then(res => {
        if (res.code==200) {
          this.questionNameArr = res.data.list
        }
      })
    },
    // input框选择
    handleSelectQuestion(val) {
      let a=this.formData.findIndex(item => {
        return item.id == val.id
      })
      
      if (a == -1) {
        this.$set(this.formData,this.index,JSON.parse(JSON.stringify(val)))
      } else {
        this.$message.error('事件已存在')
        // this.$set(this.formData[this.index],'questionName','')
        this.$set(this.formData,this.index,{})
        return false
      }
    },
    focus(ev,val){
      this.index = val.$index
    },
    change1(ev,val) {
      var arr = this.formData.filter((item,index) => {
        return val.$index!= index && item.questionName == this.formData[val.$index].questionName && item.questionName!=''
      })
      if (arr.length > 0) {
        this.$message.error(`事件名称：${arr[0].questionName} 重复，请重定义事件名称`)
      }
    },
    input1(ev,val) {
      if (val.row.id) {
         this.$set(this.formData, val.$index, {})
         this.$set(this.formData[val.$index], 'questionName', ev)
        //  this.$set(this.formData[val.$index], '$index', ev)
      }
        
    },
    querySearchQuestion(queryString, cb) {
      var restaurants = this.questionNameArr.map(item => {
        item.value = item.questionName;
        return item;
      });
        var results = queryString ? restaurants.filter(this.createFilterQuestion(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
    createFilterQuestion(queryString) {
      return (restaurant) => {
          return (restaurant.value.indexOf(queryString) != -1);
      };
    },
  },
}
</script>

<style>
.twj-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border:none
}
.twj-table::before {
    background-color: transparent;
}
</style>
<style lang="scss">
.btn {
  color: black;
  margin-left: 10px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
}
.btn:hover {
  color: aqua;
}
</style>