<template>
  <div>
    <el-drawer
      title=""
      :visible.sync="drawerVisible"
      direction="rtl"
      size="45%"
      :with-header="false"
      :wrapperClosable="false"
    >
      <ImportCreateComponent ref="myRef" 
        :groupId="groupId" 
        :groupName="groupName" 
        :custType="custType" 
        @handOk="handOk"
      />
      <section class="form-operate">
        <el-button type="plain" size="small" @click="handleClose" style="margin-right:15px">取消</el-button>
        <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
      </section>
      <el-drawer
          title=""
          :visible.sync="showTask"
          width="30%"
          :with-header="false"
          direction="rtl"
          :append-to-body="true"
          :wrapperClosable="false"
          >
          <div class="child-main">
            <p class="title">是否添加到已有任务?</p>
            <el-form :model="formObj" :rules="formRules" ref="formObj" class="my-form">
              <el-form-item label="" prop="task">
                  <el-select style="width: 300px" v-model="formObj.task"  placeholder="请选择任务">
                    <el-option v-for="(item, index) in taskOptions" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
              </el-form-item>
            </el-form>
            <span class="dialog-footer">
              <el-button @click="onCancel" class="handle-btn">取消</el-button>
              <!-- <el-button type="primary" @click="goToCreateTask" class="handle-btn">创建新任务</el-button> -->
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </span>
          </div>
        </el-drawer>
    </el-drawer>
  </div>
</template>

<script>
import ImportCreateComponent from '../importCreateComponent/importCreate2.vue'
import { addToCurrentExistTask } from "@/api/system/grouplist";
import { Message } from 'element-ui'
export default {
  props: ['drawerVisible','groupId','groupName','custType','taskOptions'],
  // watch:{
  //   drawerVisible(value){
  //     this.showDrawer=value
  //   },
  // },
  data() {
    return {
      // showDrawer:false,
      showTask:false,
      // taskOptions:[
      //   {lable:'任务1',value:'1'},
      //   {lable:'任务2',value:'2'},
      //   {lable:'任务3',value:'3'},
      // ],
      formObj:{
        task:''
      },
      formRules: {
        task: [
          { required: true, message: '任务不能为空' },
        ]
      },
      custIds:[]
    }
  },
  components: {
   ImportCreateComponent
  },
  mounted() {
   
  },
  methods: {
    // 添加客群到已选任务
    addGroupsToExistTask(){
      addToCurrentExistTask(params).then(res=>{
        if(res.code == 200){
          
        }
      })
    },
    handleClose(){
      this.$refs.myRef.handleMessageCancel2();
      this.$emit('closeDrawer');
    },
    handleSubmit(){
      this.$refs.myRef.handleSubmit();
    },
    handOk(arr){
      this.showTask=true;
      this.custIds = arr.map(item=>item.custId)
    },
    // 确定添加到任务
    onSubmit() {
      const that = this;
      const params={
        campaignIds:[this.formObj.task],
        groupId:[this.groupId],
        custIds:this.custIds
      }
      this.$refs.formObj.validate((valid) => {
        if (valid) {
          that.addGroupsToExistTask(params);
        }
      })
    },
    // 添加客群到已选任务
    addGroupsToExistTask(params){
      addToCurrentExistTask(params).then(res=>{
        if(res.code == 200){
          Message.success('添加成功');
          this.closeTaskDialog();
        }
      })
    },
     // 取消添加到任务
    closeTaskDialog(){
      this.showTask=false;
      this.formObj.task='';
      this.$emit('closeDrawer','refresh');
      this.handleClose();
    },
    // 取消添加到任务
    onCancel(){
      this.closeTaskDialog();
    },
    // 创建新任务
    goToCreateTask(){
       this.$router.push({
        path: "/taskManage/taskCreation",
        query: {
          groupId:JSON.stringify([this.groupId]),
          custType:this.custType
        },
      });
    }
  }
}
</script>
<style lang="scss" scoped>
  .form-operate{
    text-align: center;
    margin-top: 30px;
  }
  .child-main{
    padding: 40px 40px;
    .my-form{
      margin: 10px 0 30px 0;
    }
    .title{
      font-size: 20px;
    }
    .dialog-footer{
      text-align: center;
      .handle-btn{
        margin-right: 20px;
      }
    }
    ::v-deep .el-form-item__error{
      margin-left: 70px;
    }
  }
</style>