<template>
  <div style="height:100%;">
    <ai-detail v-if="!showAdd && !showSonDetail">
      <template #title>
        <ai-title title="任务详情" isShowBottomBorder isShowBack @onBackClick="onBack(true)">
          <template #rightBtn>
            <template v-if="detailType == 0 && formData.status == 0">
              <el-button type="primary" icon="iconfont iconEdit"  @click="taskProcess=true,processForm.percent=myUserInfo.percent">更新进度</el-button>
            </template>
          </template>
        </ai-title>
      </template>
      <template #content>
        <ai-card title="任务进度">
          <template slot="content">
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2" v-if="detailType == 1">
              <ai-info-item label="任务状态：" :class="{color1:formData.status==0,color2:formData.status==1,color3:formData.status==2}"><span>{{dict.getLabel('workTaskStatus',formData.status)||'-'}}</span></ai-info-item>
              <ai-info-item label="当前进度："><span>{{formData.percent+'%'}}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2" v-if="detailType == 0">
              <ai-info-item label="任务状态：" :class="{color1:myUserInfo.doStatus==0,color2:myUserInfo.doStatus==1,color3:myUserInfo.doStatus==2}"><span>{{dict.getLabel('workTaskStatus',myUserInfo.doStatus)||'-'}}</span></ai-info-item>
              <ai-info-item label="当前进度："><span>{{myUserInfo.percent+'%'}}</span></ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
        <ai-card title="任务信息">
          <template slot="content">
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
              <ai-info-item label="发起人："><span>{{formData.sponsorUserName}}</span></ai-info-item>
              <ai-info-item label="创建人："><span>{{formData.createUserName}}</span></ai-info-item>
              <ai-info-item label="创建时间："><span>{{formData.createTime}}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
              <ai-info-item label="任务状态：">
                <span v-if="detailType == 0">{{dict.getLabel('workTaskStatus',formData.status)||'-'}}</span>
                <span v-if="detailType == 1">{{dict.getLabel('workTaskStatus',formData.status)||'-'}}</span>
              </ai-info-item>
              <ai-info-item label="任务类型："><span>{{$dict.getLabel("workTaskType", formData.type) || '-'}}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
              <ai-info-item label="截止日期：">
                <span>{{formData.lastTime}}<i  :style="formData.isOverTime==0?'color:#FF8822;':'color:#FF4466;'" style="margin-left:8px;font-style:inherit" v-if="formData.overTimeStatus">({{formData.overTimeStatus}})</i></span>
              </ai-info-item>
            </ai-wrapper>
            <ai-wrapper label-width="80px" :columnsNumber="1">
              <ai-info-item label="任务说明："><span>{{formData.taskDescription}}</span></ai-info-item>
            </ai-wrapper>
            <ai-wrapper label-width="80px" :columnsNumber="1" v-if="detailType == 0">
              <ai-info-item label="执行说明："><span>{{myUserInfo.doDescription}}</span></ai-info-item>
            </ai-wrapper>
            <ai-bar title="附件" >
              <template slot="right" v-if="formData.fileList && formData.fileList.length">
                <span class="Edit" @click="downFileAll"><i class="iconfont iconDownload"></i>下载全部</span>
              </template>
            </ai-bar>
            <ai-file-list v-if="formData.fileList && formData.fileList.length"
              :fileList="formData.fileList"
              :fileOps="{ name: 'name', size: 'fileSizeStr' }"
            ></ai-file-list>
          </template>
        </ai-card>

         <ai-card title="任务执行情况" v-if="formData.userInfoList">
          <template slot="content">
            <ai-table :isShowPagination="false"
              class="ai-table"
              :tableData="formData.userInfoList"
              :col-configs="userInfoListColConfigs"
              :dict="dict"
            >
              <el-table-column slot="percent" label="完成进度" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.percent + "%" }}</span>
                </template>
              </el-table-column>
            </ai-table>
          </template>
        </ai-card>
        <ai-card title="子任务进度">
          <template slot="content">
            <el-row type="flex" justify="space-between" align="center" style="margin-bottom:8px;">
              <el-col :span="16">
                <el-radio-group v-model="sonListType" size="small" @change="getList">
                  <el-radio-button label="">全部</el-radio-button>
                  <el-radio-button label="0">进行中</el-radio-button>
                  <el-radio-button label="1">已完成</el-radio-button>
                  <el-radio-button label="2">已关闭</el-radio-button>
                </el-radio-group>
              </el-col >
              <el-col :span="8" class="icon add-icon">
                <i class="iconfont iconAdd" style="color:#5088FF;" @click="gotoCreate" v-if="formData.status==0">&nbsp;&nbsp;创建子任务</i>
              </el-col>
            </el-row>
            <ai-table class="ai-table" :tableData="workList" :col-configs="colConfigs" :total="page.total" :current.sync="page.current" :size.sync="page.size" @getList="getList" :dict="dict">
              <el-table-column slot="percent" label="当前进度" align="center">
                <template slot-scope="{ row }">
                  <span>{{row.percent+'%'}}</span>
                </template>
              </el-table-column>
              <el-table-column slot="options" label="操作" align="center" fixed="right" width="200">
                <template slot-scope="{ row }">
                  <div class="table-options">
                    <el-button type="text" @click="toSonDetail(row)">详情</el-button>
                  </div>
                </template>
              </el-table-column>
            </ai-table>
          </template>
        </ai-card>
        <ai-dialog
          title="更新进度"
          :visible.sync="taskProcess"
          @onConfirm="updateProcess('processForm')"
          @onCancel="taskProcess=false"
          width="580px">
          <div style="width:480px;margin:auto;padding:8px 0;">
            <el-form :model="processForm" label-width="100px" ref='processForm' :rules="processRules">
              <el-form-item label="选择进度：" prop="percent" :rules="[{ required: true, message: '请选择进度', trigger: 'change' },]">
              <el-slider v-model="processForm.percent" show-input></el-slider>
              </el-form-item>
              <el-form-item label="更新说明：" prop="remarks">
                <el-input type="textarea" :rows="4" maxlength="1000" show-word-limit placeholder="请输入..." v-model="processForm.remarks"></el-input>
              </el-form-item>  
            </el-form>
          </div>
        </ai-dialog>
      </template>
    </ai-detail>
    <add v-if="showAdd" :parentTaskCode="parentTaskCode" :instance="instance" :dict="dict" @back="comBack" :params="formData"></add>
    <son-detail v-if="showSonDetail" :instance="instance" :dict="dict" @back="comBack" :params="sonDetailParams" :detailType="'detail'"></son-detail>
  </div>
</template>

<script>

import Add from './Add.vue'
import SonDetail from './SonDetail.vue'

import {mapState} from 'vuex'
export default {
  name: 'Detail',
  // 组件
  components: {
    Add,
    SonDetail
  },
  props: {
    instance: Function,
    params: Object,
    dict: Object,
    detailType: String,
  },
  data() {
    return {
      formData: {},
      myUserInfo: {},
      workList:[],
      page:{
        size:10,
        current:1,
        total:null
      },
      sonListType: '',
      colConfigs: [
        { prop: 'taskTitle', label: '任务标题' },
        { prop: 'createTime', label: '创建日期' },
        { prop: 'lastTime', label: '截止日期' },
        {
          prop: "status",
          label: "任务状态",
          width: 120,
          align: "center",
          formart: (status) =>
            this.$dict.getLabel("workTaskStatus", status),
        },
        { slot: 'percent', label: '当前进度' },
        { slot: 'options', label: '操作' },
      ],
      taskProcess: false,
      processForm:{
        remarks: '',
        percent: 0
      },
      showAdd: false,
      parentTaskCode: '',
      showSonDetail: false,
      sonDetailParams: {},
      processRules: {
        remarks: [{ required: true, message: '请输入更新说明', trigger: 'change' }],
      },
      userInfoListColConfigs: [
        { prop: "userName", label: "执行人" },
        { prop: "unitName", label: "所属部门" },
        {
          prop: "doStatus",
          label: "执行状态",
          width: 120,
          align: "center",
          formart: (doStatus) =>
            this.$dict.getLabel("workTaskStatus", doStatus),
        },
        { prop: "finishTime", label: "完成时间" },
        { prop: "finishDescription", label: "完成说明" },
      ],
    }
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.dict.load('workTaskType', 'workTaskStatus', 'workTaskFinishStatus').then(() => {
      this.getDetail()
    })
    
  },
  methods: {
    getDetail() {
      // /app/appworktaskinfo/queryDetailById
      this.instance.post(`/app/appworktaskinfo/queryDetailById?id=${this.params.id}`, null).then((res) => {
        if (res.code == 0) {
          this.formData = {...res.data}
          this.formData.lastTime = this.formData.lastTime.substring(0, 10)
          this.myUserInfo = res.data.myUserInfo
          this.getList()
        }
      });
    },

    // 子任务列表
    getList(){
      this.instance.post(`/app/appworktaskinfo/list`, null,{
        params: {
          parentTaskCode: this.formData.taskCode,
          ...this.page,
          status: this.sonListType,
          taskRole: '0'
        }
      }).then(res => {
        if (res && res.code == 0) {
          this.workList = res.data.records;
          this.page.total = res.data.total;
        }
      });
    },

    toSonDetail(item) {
      this.showSonDetail = true
      this.sonDetailParams = item
    },

    // 创建子任务
    gotoCreate() {
      this.showAdd = true
      this.parentTaskCode = this.formData.taskCode
    },

    // 更新进度
    updateProcess(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.instance.post(`/app/appworktaskprocess/addOrUpdate`, {...this.processForm, taskCode:this.formData.taskCode}, null).then(res => {
            if (res && res.code == 0) {
              this.taskProcess = false
              this.getDetail()
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    onBack(isRefresh) {
      if(this.params.fromType == 'SonDetail' && this.params.sonDetailId) {
        this.$emit('change', {
          type: 'SonDetail',
          params: {
            type: 'SonDetail',
            id: this.params.sonDetailId
          }
        })
      }else {
        this.$emit('change', {
          type: 'list',
          isRefresh: isRefresh ? true : false,
        })
      }
    },
    comBack() {
      this.showSonDetail = false
      this.showAdd = false
      this.getDetail()
    },
    downFileAll () {
      if (this.formData.fileList.length > 0) {
        this.instance.post('/app/appworktaskinfo/downLoadAllFileForDetail', null, {
          responseType: 'blob',
          params: {
            id: this.formData.id
          }
        }).then((res) => {
          const link = document.createElement('a')
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          var num = ''
          for (let i = 0; i < 10; i++) {
            num += Math.ceil(Math.random() * 10)
          }
          link.setAttribute('download', '工作文件' + '.zip')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      } else {
        this.$message.error('暂无附件提供下载')
      }
    },
  },
}
</script>

<style scoped lang="scss">
  .especial {
    margin-bottom: 12px;
    .icon {
      vertical-align: top;
      display: inline-block;
      padding-top: 5px;
      margin-left: 20px;
      color: #f46;
    }
    .people {
      display: inline-block;
      font-size: 14px;
      color: #666;
      margin-right: 16px;
      vertical-align: top;
    }
    .AiWechatSelecter {
      display: inline-block;
      margin-left: 3px;
    }
    .hint {
      font-size: 14px;
      color: #999;
      margin-left: 16px;
    }
    .mar-r40{
      margin-right: 40px;
    }
    .w80{
      width: 80px;
      text-align: right;
      color: #888;
    }
  }
  .add-icon{
    text-align: right;
    cursor: pointer;
    i{
      font-size: 14px;
    }
  }
  .color1{
    color:#4B87FE;
  }
  .color2{
    color:#2EA222;
  }
  .color3{
    color:#999999;
  }
  .AiWechatSelecter{
    width: calc(100% - 150px);
  }
</style>
