<template>
  <el-dialog
    v-if="isModifyDialogShow"
    :visible.sync="isModifyDialogShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="closeDia"
    width="889px"
    v-dialogDrag
    center
  >
    <div slot="title" style="display: flex; alignitems: center">
      <span style="fontsize: 16px"
        >{{ todoInfo ? todoInfo.CompanyName : "" }}——任务详情</span
      >
    </div>
    <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="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>
        <!-- v-if="type==='add'" -->
        <div class="input-item">
          <span>*</span>
          <el-date-picker
            v-model="modiDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            placeholder="截止日期">
          </el-date-picker>
        </div>
        <!-- <div class="input-item" v-else
          style="margin-left:10px;"
        >
          截止日期:<span class="time" :class="{empty:!modiDate}">{{modiDate||'--'}}</span>
        </div> -->
      </div>
    </div>
    <div slot="footer" class="foot-container">
      <el-button type="primary" @click="closeDia('confirm')">确 定</el-button>
      <el-button @click="closeDia('cancel')">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
  name: "",
  components: {},
  props: {
    type:{
      type:String,
      default:'add'
    },//是新增还是修改
    isModifyDialogShow: {
      type: Boolean,
      default: false,
    },//控制弹窗展示
    todoInfo: {
      type: Object,
    },//todo的info
  },
  data() {
    return {
      textarea: "", //任务描述
      FiccTextarea: "", //ficc任务描述
      qyTextarea: "", //权益任务描述
      activeTab: 1,
      Tabs: [
        {
          label: "FICC任务",
          key: 1,
          textarea: "FiccTextarea",
        },
        {
          label: "权益任务",
          key: 2,
          textarea: "qyTextarea",
        },
      ], //任务类型
      todoId:0,//编辑时有用,任务的id
      todoList:null,//编辑时有用，任务的列表
      editTabs:[],
      modiDate:null,//截止时间
      pickerOptions:{
         disabledDate(time) {
            return time.getTime() < Date.now() - 24*60*60*1000;
          }
      },
    };
  },
  computed: {
    Role() {
      return localStorage.getItem("Role");
    },
    isTabsShow(){
      if(this.Role==='admin'&&this.todoInfo.IsShared&&this.type==='add'){
        return true
      }else{
        return false
      }   
    },
    ProductId(){
      if(this.todoInfo.IsShared){
        return this.activeTab
      }else{
        return this.todoInfo.CompanyType==='ficc'?1:2
      }
      
    }
  },
  watch:{
    isModifyDialogShow(){
      if(this.type==='edit'&&this.isModifyDialogShow){
        //获取最新记录
        customInterence.getToDoItem({
          CompanyId:this.todoInfo.CompanyId
        }).then(res=>{
          if(res.Ret===200){
            if(!this.todoInfo.IsShared){
              this.textarea = res.Data[0].Content
              this.modiDate = res.Data[0].EndTimeStr
              this.todoId = res.Data[0].Id
              this.editTabs=[]
            }else{
              this.todoList = res.Data
              if(this.todoList.length>1){
                this.editTabs = this.Tabs
              }else{
                this.editTabs = this.Tabs.filter(i=>i.key===this.todoList[0].ProductId)
              }
              if(this.Role!=='admin'){
                this.editTabs=[]
              }
              this.activeTab = this.todoList[0].ProductId
              this.textarea = this.todoList[0].Content
              this.modiDate = res.Data[0].EndTimeStr
              this.todoId = this.todoList[0].Id
            }  
          }
        })
      }
    },
  },
  created() {
  },
  mounted() {},
  methods: {
    closeDia(type) {
      if(type==='confirm'){
        if(!this.checkInput()) return
        this.$emit('modify',{
          type:this.type,
          Description:this.textarea,
          ProductId:this.ProductId,
          CompanyId:this.todoInfo.CompanyId,
          Id:this.todoId,
          EndTime:this.modiDate
        })
        this.textarea=''
        this.modiDate=null
        this.activeTab=1
        this.editTabs=[]
      }else{
        this.activeTab=1
        this.textarea=''
        this.modiDate=null
        this.editTabs=[]
        this.$emit("update:isModifyDialogShow", false);
      }
    },
    changeTabs({ key, textarea }) {
      if (key === this.activeTab) return;
      this.activeTab = key;
      if(this.type==='add'){
        this.textarea = "";
        this.modiDate=null
      }else{
        this.textarea = this.todoList.filter(i=>i.ProductId===key)[0].Content
        this.modiDate = this.todoList.filter(i=>i.ProductId===key)[0].EndTimeStr
        this.todoId = this.todoList.filter(i=>i.ProductId===key)[0].Id
      }     
    },
    checkInput(){
      let flag = true
      if(!this.textarea.length){
          this.$message.error('请输入任务描述')
          flag = false
      }else if(this.type==='add'&!this.modiDate){
        this.$message.error('请输入截止时间')
        flag=false
      }
      return flag
    }
  },
};
</script>
<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>
