
<script setup>
import { ref, watch,computed } from "vue"
import { ElMessage } from 'element-plus'

import { customInterence } from '@/api/api.js'

const props = defineProps({
  type:{
    type:String,
    default:'add'
  },//是新增还是修改
  isModifyDialogShow: {
    type: Boolean,
    default: false,
  },//控制弹窗展示
  todoInfo: {
    type: Object,
  },//todo的info
})

const emits=defineEmits(['modify','update:isModifyDialogShow'])

const textarea=ref("") //任务描述
const activeTab=ref(1)
const Tabs=[
  {
    label: "FICC任务",
    key: 1,
    textarea: "FiccTextarea",
  },
  {
    label: "权益任务",
    key: 2,
    textarea: "qyTextarea",
  },
] //任务类型
const todoId=ref(0)//编辑时有用,任务的id
const todoList=ref(null)//编辑时有用，任务的列表
const editTabs=ref([])
const modiDate=ref(null)//截止时间
const pickerOptions={
    disabledDate(time) {
      return time.getTime() < Date.now() - 24*60*60*1000;
    }
}
const Role=computed(()=>{
  return localStorage.getItem("Role");
})
const isTabsShow=computed(()=>{
  if(Role.value==='admin'&&props.todoInfo.IsShared&&props.type==='add'){
    return true
  }else{
    return false
  }  
})
const ProductId=computed(()=>{
  if(props.todoInfo.IsShared){
    return activeTab.value
  }else{
    return props.todoInfo.CompanyType==='ficc'?1:2
  }
})

watch(()=>props.isModifyDialogShow,()=>{
  if(props.type==='edit'&&props.isModifyDialogShow){
    //获取最新记录
    customInterence.getToDoItem({
      CompanyId:props.todoInfo.CompanyId
    }).then(res=>{
      if(res.Ret===200){
        if(!props.todoInfo.IsShared){
          textarea.value = res.Data[0].Content
          modiDate.value = res.Data[0].EndTimeStr
          todoId.value = res.Data[0].Id
          editTabs.value=[]
        }else{
          todoList.value = res.Data
          if(todoList.value.length>1){
            editTabs.value = Tabs.value
          }else{
            editTabs.value = Tabs.value?.filter(i=>i.key===todoList.value[0].ProductId)
          }
          if(Role.value!=='admin'){
            editTabs.value=[]
          }
          activeTab.value = todoList.value[0].ProductId
          textarea.value = todoList.value[0].Content
          modiDate.value = res.Data[0].EndTimeStr
          todoId.value = todoList.value[0].Id
        }  
      }
    })
  }
})

const closeDia=(type)=>{
  if(type==='confirm'){
    if(!checkInput()) return
    emits('modify',{
      type:props.type,
      Description:textarea.value,
      ProductId:ProductId.value,
      CompanyId:props.todoInfo.CompanyId,
      Id:todoId.value,
      EndTime:modiDate.value
    })
    textarea.value=''
    modiDate.value=null
    activeTab.value=1
    editTabs.value=[]
  }else{
    activeTab.value=1
    textarea.value=''
    modiDate.value=null
    editTabs.value=[]
    emits("update:isModifyDialogShow", false);
  }
}
const changeTabs=({ key, textarea })=>{
  if (key === activeTab.value) return;
  activeTab.value = key;
  if(props.type==='add'){
    textarea.value = "";
    modiDate.value=null
  }else{
    textarea.value = todoList.value.filter(i=>i.ProductId===key)[0].Content
    modiDate.value = todoList.value.filter(i=>i.ProductId===key)[0].EndTimeStr
    todoId.value = todoList.value.filter(i=>i.ProductId===key)[0].Id
  }     
}
const checkInput=()=>{
  let flag = true
  if(!textarea.value.length){
      ElMessage.error('请输入任务描述')
      flag = false
  }else if(props.type==='add'&!modiDate.value){
    ElMessage.error('请输入截止时间')
    flag=false
  }
  return flag
}

</script>

<template>
  <el-dialog
    v-if="props.isModifyDialogShow"
    :model-value="props.isModifyDialogShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="closeDia"
    width="889px"
    v-dialogDrag
    center
  >
    <template #header>
      <div style="display: flex; align-items: center">
        <span style="font-size: 16px"
          >{{ props.todoInfo ? props.todoInfo.CompanyName : "" }}——任务详情</span
        >
      </div>
    </template>
    <div class="dialog-container">
      <div class="tabs" v-if="isTabsShow">
        <span
          class="tab-item"
          v-for="item in Tabs"
          :key="item.key"
          @click="changeTabs(item)"
          :style="activeTab === item.key ? 'color:#409EFF;' : ''"
          >{{ item.label }}</span
        >
      </div>
      <div class="tabs" v-if="props.type==='edit'">
        <span
          class="tab-item"
          v-for="item in editTabs"
          :key="item.key"
          @click="changeTabs(item)"
          :style="activeTab === item.key ? 'color:#409EFF;' : ''"
          >{{ item.label }}</span
        >
      </div>
      <div class="input-container">
        <div class="input-item">
          <span>*</span>
          <el-input
            type="textarea"
            :rows="12"
            placeholder="请输入任务描述"
            v-model="textarea"
            required
          >
        </el-input>
        </div>
        <div class="input-item">
          <span>*</span>
          <el-date-picker
            style="width: 220px;"
            v-model="modiDate"
            type="date"
            format="YYYY-MM-DD"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            placeholder="截止日期">
          </el-date-picker>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="foot-container">
        <el-button type="primary" @click="closeDia('confirm')">确 定</el-button>
        <el-button @click="closeDia('cancel')">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-dialog {
  .dialog-container {
    .tabs {
      margin-bottom: 10px;
      .tab-item {
        font-size: 14px;
        color: #999999;
        cursor: pointer;
        margin-right: 20px;
      }
    }
    .input-container {
      font-size: 16px;
      margin-bottom: 30px;
      .el-textarea {
        font-size: 16px;
      }
      .input-item{
        display: flex;
        margin-bottom:20px;
        font-size: 14px;
        span{
          color: red;
          margin-right: 5px;
          &.time{
            margin-left: 5px;
            align-self: center;
          }
          &.empty{
            color: #606266;
          }
        }
      }
      
    }
  }
  .foot-container {
    margin-bottom: 20px;
    .el-button {
      width: 224px;
      height: 40px;
    }
  }
}
</style>
