<style lang="scss">
  .deleteCusBtn {
    position: absolute;
    right: 10px;
    top: -10px;
  }

  .sale_upload {
    width: 118px;
    height: 118px;
    border-radius: 4px;
    border: 1px dashed #d9d9d9;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
  }

  .sale_ImgDiv {
    width: 118px;
    height: 118px;
    position: relative;
    margin: 0 10px 10px 0;
  }

  .sale_ImgDiv img {
    width: 100%;
    height: 100%;
  }

  .saleUpload {
    display: inline-block;
    width: 118px;
    height: 118px;
    font-size: 70px;
    border: 1px dashed #d9d9d9;
    line-height: 120px;
    text-align: center;
  }

  .Details_List {
    border: 1px solid #d1d1d1;
    padding: 10px;
    margin-bottom: 20px;
    position: relative;
  }

  .el-select-dropdown {
    z-index: 9999 !important;
  }

  .CusTask_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }
</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale">
    <q-card style="width: 800px;max-width:900px;" class="CLM-Form">
      <q-card-section>
        <div class="text-h6">{{optionTitle}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.TaskName" ref="TaskName"
              class="col-6 q-pb-lg q-pr-lg" label="任务名称" :rules="[val => !!val || '请输入任务名称']" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.TaskSubTitle"
              ref="TaskSubTitle" class="col-6 q-pb-lg" label="任务子标题" />
          </div>
        </div>
        <div class="row wrap q-pb-lg">
          <div class="col-6">
            <div class="CusTask_Date">
              <q-field filled stack-label label="开始时间" class="col-6 q-pb-lg q-pr-lg">
                 <template v-slot:control>
                  <el-date-picker v-model="objOption.TaskStartTime" value-format='yyyy-MM-dd HH:mm:ss' type="datetime"
                    size="small" clear-icon="iconfont icon-guanbi"></el-date-picker>    
                </template>
              </q-field>
            </div>
          </div>
          <div class="col-6">
            <div class="CusTask_Date">
              <q-field filled stack-label label="结束时间" class="col-6 q-pb-lg">
                 <template v-slot:control>
                  <el-date-picker v-model="objOption.TaskEndTime" value-format='yyyy-MM-dd HH:mm:ss' type="datetime"
                    size="small" clear-icon="iconfont icon-guanbi"></el-date-picker>    
                </template>
              </q-field>
            </div>
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <div class="CusTask_Date">
              <q-field filled stack-label label="兑换截止日期" class="col-6 q-pb-lg q-pr-lg">
                 <template v-slot:control>
                  <el-date-picker v-model="objOption.ExchangeEndTime" value-format='yyyy-MM-dd HH:mm:ss' type="datetime"
                    size="small" clear-icon="iconfont icon-guanbi"></el-date-picker>    
                </template>
              </q-field>
            </div>
          </div>
          <div class="col-6">
            <q-select filled option-value="Id" option-label="Name" v-model="objOption.TaskFinishType"
              :options="finishTypeObj" label="任务完成类型" emit-value map-options />
          </div>
        </div>
        <div class="row wrap" style="margin-top:20px;">
          <div class="col-12">任务图片</div>
        </div>
        <div class="row wrap" style="margin:20px 0;">
          <div class="row col-12">
            <div class="sale_ImgDiv" v-for="(sItem,sIndex) in objOption.TaskImageList" :key="sIndex">
              <img :src="sItem" />
              <q-btn size="6px" style="position:absolute;right:-8px;top:-5px;" @click="deleTask(sIndex)" round
                color="red" icon="iconfont icon-guanbi1" />
            </div>
            <el-upload class="avatar-uploader saleUpload" action="" :before-upload="uploadFileTask"
              :show-file-list="false">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div class="q-pt-none scroll" style="max-height:60hv;margin-bottom:20px;">
          <q-btn color="accent" size="sm" icon="add" style="margin-bottom:20px;" label="新增完成条件" @click="addSubTask()" />
          <template v-for="(sItem, sIndex) in objOption.DetailsList">
            <div :key="sIndex" class="Details_List">
              <q-input filled stack-label maxlength="20" style="width:523px;" dense v-model="sItem.DetailsName"
                ref="DetailsName" class="q-pr-none q-pb-lg" label="条件名称" />
              <div class="row wrap">
                <div class="col-3 q-pr-lg">
                  <q-select filled stack-label option-value="Id" @input="clearTarget(sItem)" option-label="Name"
                    v-model="sItem.TaskType" ref="PriceDiscountType_Id" :options="taskTypeData" label="任务类型" dense
                    emit-value map-options />
                </div>
                <div class="col-5 q-pr-lg">
                  <el-select v-if="sItem.TaskType==2" style="width:100%;" v-model="sItem.TargetIdList" multiple
                    collapse-tags placeholder="请选择">
                    <el-option v-for="mItem in CourseSubjectList" :key="mItem.Id" :label="mItem.SubjectName"
                      :value="mItem.Id">
                    </el-option>
                  </el-select>
                  <el-select v-if="sItem.TaskType==3" style="width:100%;" v-model="sItem.TargetIdList" multiple
                    collapse-tags placeholder="请选择">
                    <el-option v-for="mItem in TreeCategoryList" :key="mItem.CateId" :label="mItem.CateName"
                      :value="mItem.CateId">
                    </el-option>
                  </el-select>
                  <el-select v-if="sItem.TaskType==4" style="width:100%;" v-model="sItem.TargetIdList" multiple
                    collapse-tags placeholder="请选择">
                    <el-option v-for="mItem in CourseList" :key="mItem.CourseId" :label="mItem.CourseName"
                      :value="mItem.CourseId">
                    </el-option>
                  </el-select>
                </div>
                <div class="col-2 q-pr-lg" style="width:19%">

                </div>
                <div class="col-2" style="width:14%">
                  <q-input filled stack-label maxlength="20" @keyup.native="checkInteger(sItem,'TaskFinishValue')" dense
                    v-model="sItem.TaskFinishValue" ref="TaskFinishValue" class="q-pr-none" label="任务完成值" />
                </div>
              </div>
              <br />
              <q-input filled stack-label maxlength="20" style="width:523px;" dense v-model="sItem.TaskKudo"
                ref="TaskKudo" class="q-pr-none" label="奖品名称" />
              <br />
              <div class="row col-12">
                <div class="sale_ImgDiv" v-for="(kItem,kIndex) in sItem.TaskKudoImgList" :key="kIndex">
                  <img :src="kItem" />
                  <q-btn size="6px" style="position:absolute;right:-8px;top:-5px;" @click="deleKudoImg(sItem,kIndex)"
                    round color="red" icon="iconfont icon-guanbi1" />
                </div>
                <el-upload class="avatar-uploader saleUpload" action="" :before-upload="
                  (file) => {
                    return uploadFileKudo(file, sItem);
                  }" :show-file-list="false">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <q-btn flat size="xs" icon="iconfont icon-shanchu" title="删除" color="negative"
                style="font-weight:400;position:absolute;right:0;top:10px;" class="q-mr-xs" label=""
                @click="deleSubTask(index)" />
            </div>
          </template>
        </div>
        <div class="row wrap">
          <div class="col-12">
            <q-input filled stack-label :dense="false" v-model="objOption.TaskDesc" type="textarea" label="任务描述" />
          </div>
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeTaskForm" />
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" :loading="saveCustomLoading"
          @click="saveCustom">
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    SetCustomerTask,
    GetCustomerTask,
    GetTaskTypeList
  } from "../../api/sale/peemanagement";
  import {
    queryCourseDropdownList,
    getCourseSubject,
    queryCourseCategoryTree,
    GetCourseCategoryList
  } from '../../api/course/index'
  import {
    UploadSelfFile,
  } from '../../api/common/common'
  import selectTree from "../../components/common/select-tree";

  export default {
    components: {
      selectTree
    },
    props: {
      taskOption: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        saveCustomLoading: false,
        objOption: {
          Id: 0,
          TaskName: '', //任务名称
          TaskSubTitle: '', //任务子标题
          TaskImageList: [], //任务图片
          TaskDesc: '', //任务描述
          TaskStartTime: "", //任务开始时间
          TaskEndTime: "", //任务结束时间
          DetailsList: [], //任务详情
          ExchangeEndTime: "", //兑换截止时间
          TaskFinishType: 1, //任务完成类
        },
        optionTitle: '',
        CourseList: [],
        taskTypeData: [],
        CourseSubjectList: [], //科目列表
        TreeCategoryList: [], //课程分类树形列表
        //完成类型
        finishTypeObj: [{
          Id: 1,
          Name: '人数'
        }, {
          Id: 2,
          Name: '成交金额'
        }]
      }
    },
    created() {
      this.getCourseList();
      this.getTaskType();
      this.queryCourseSubject();
      this.getCategoryList();
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //初始化表单
      initObj() {
        if (this.taskOption && this.taskOption.Id > 0) {
          let msg = {
            Id: this.taskOption.Id
          }
          GetCustomerTask(msg).then(res => {
            if (res.Code == 1) {
              let tempData = res.Data;
              this.objOption.Id = tempData.Id;
              this.objOption.TaskName = tempData.TaskName;
              this.objOption.TaskStartTime = tempData.TaskStartTimeStr;
              this.objOption.TaskEndTime = tempData.TaskEndTimeStr;
              this.objOption.DetailsList = tempData.DetailsList;
              this.objOption.TaskSubTitle = tempData.TaskSubTitle;
              this.objOption.TaskImageList = tempData.TaskImageList;
              this.objOption.TaskDesc = tempData.TaskDesc;
              this.objOption.ExchangeEndTime = tempData.ExchangeEndTimeStr;
              this.objOption.TaskFinishType = tempData.TaskFinishType;
            }
          })
          this.optionTitle = "修改客户任务"
        } else {
          this.objOption.Id = 0;
          this.objOption.TaskName = '';
          this.objOption.TaskSubTitle = '';
          this.objOption.TaskImageList = [];
          this.objOption.TaskDesc = '';
          this.objOption.TaskStartTime = '';
          this.objOption.TaskEndTime = '';
          this.objOption.DetailsList = [];
          this.objOption.ExchangeEndTime = "";
          this.objOption.TaskFinishType = 0;
          this.optionTitle = "新增客户任务"
        }
      },
      //保存
      saveCustom() {
        this.$refs.TaskName.validate();
        if (!this.$refs.TaskName.hasError) {
          var oDate1 = new Date(this.objOption.TaskStartTime);
          var oDate2 = new Date(this.objOption.TaskEndTime);
          if (oDate1.getTime() > oDate2.getTime()) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `开始日期不能大于结束日期`
            })
            return
          }
          this.saveCustomLoading = true;
          SetCustomerTask(this.objOption).then(res => {
            this.saveCustomLoading = false;
            if (res.Code == 1) {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "数据保存成功！",
                position: "top",
              });
              this.$emit("success");
              this.closeTaskForm()
            }
          }).catch(() => {
            this.saveCustomLoading = false
          })
        }
      },
      //关闭弹窗
      closeTaskForm() {
        this.$emit('close');
        this.persistent = false;
      },
      //新增子任务
      addSubTask() {
        let obj = {
          DetailId: 0, //详情编号
          TaskId: 0, //任务编号
          DetailsName: "", //任务条件名称
          TaskType: 1, //任务类型(见枚举)
          TargetId: "", //目标编号 
          TaskFinishValue: '', //完成值
          TaskKudo: "", //奖品名称
          TaskKudoImgList: [], //奖品图片
          KudoDescription: "", //奖品描述
          TargetIdList: []
        }
        this.objOption.DetailsList.push(obj);
      },
      //获取课程
      getCourseList() {
        queryCourseDropdownList({
          IsQPrice: 0
        }).then(res => {
          if (res.Code == 1) {
            this.CourseList = res.Data;
          }
        })
      },
      //删除子任务
      deleSubTask(index) {
        this.objOption.DetailsList.splice(index, 1);
      },
      //删除任务图片
      deleTask(index) {
        this.objOption.TaskImageList.splice(index, 1);
      },
      //删除奖品图片
      deleKudoImg(subItem, index) {
        subItem.TaskKudoImgList.splice(index, 1);
      },
      //上传任务图片
      uploadFileTask(files) {
        UploadSelfFile('Icon', files, res => {
          if (res.Code == 1) {
            this.objOption.TaskImageList.push(res.FileUrl);
          }
        })
      },
      //上传奖品图片
      uploadFileKudo(files, subItem) {
        UploadSelfFile('Icon', files, res => {
          if (res.Code == 1) {
            subItem.TaskKudoImgList.push(res.FileUrl);
          }
        })
      },
      //获取任务类型数据下拉
      getTaskType() {
        GetTaskTypeList({}).then(res => {
          if (res.Code == 1) {
            this.taskTypeData = res.Data;
          }
        })
      },
      //获取所属科目
      queryCourseSubject() {
        getCourseSubject({}).then(res => {
          if (res.Code == 1) {
            this.CourseSubjectList = res.Data;
          }
        })
      },
      //获取课程系列
      getCategoryList() {
        var qMsg = {};
        GetCourseCategoryList(qMsg).then((res) => {
          this.TreeCategoryList = res.Data;
        });
      },
      //清除
      clearTarget(item) {
        item.TargetIdList = [];
      }
    },
  }
</script>