<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="'查看任务'" :form="form">
      <div>

      </div>
      <template v-slot:mission_name>
        <div id='printunit'>
          <el-divider>任务信息</el-divider>
          <div>
            <el-descriptions class="margin-top" :column="4" border>
              <el-descriptions-item span='2'>
                <template slot="label">
                  任务名称
                </template>
                {{showform.name?showform.name:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2'>
                <template slot="label">
                  任务类型
                </template>
                {{showform.unit_type_detail?showform.unit_type_detail.value:''}}
              </el-descriptions-item>
              <el-descriptions-item :span="showform.type==4?2:4">
                <template slot="label">
                  任务来源
                </template>
                {{showform.admin?showform.admin.name:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="showform.type==4">
                <template slot="label">
                  任务类别
                </template>
                {{showform.mission_type?showform.mission_type:''}}
              </el-descriptions-item>
              <el-descriptions-item span='4'>
                <template slot="label">
                  附件
                </template>
                <div v-for="item in pictureList">
                  <!-- <el-button size="small" style="margin:5px" type="primary" v-if="type=='study'"
                    @click='openStudy(item.url,item.name)'>开始学习</el-button> -->
                  <a :href="item.url" target="_blank">{{item.name}}</a>
                  <el-link target="_blank" style="margin:0 10px;" @click="toshowFile(item.url)" type="primary">
                    预览
                  </el-link>
                  <el-link target="_blank" @click="base.downLoadFileUrl(item.id)" type="primary">
                    下载
                  </el-link>
                  <!-- <span v-if="type=='study'" @click='openStudy(item.url,item.name)' style="color:red;cursor:pointer;text-decoration: underline;margin:0 5px">开始学习</span> -->
                </div>
              </el-descriptions-item>
              <el-descriptions-item span='4'>
                <template slot="label">
                  任务内容及要求
                </template>
                {{showform.content?showform.content:''}}
              </el-descriptions-item>
              </el-descriptions-item>
              <el-descriptions-item span='2'>
                <template slot="label">
                  开始日期
                </template>
                {{showform.start_date?showform.start_date:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2'>
                <template slot="label">
                  要求完成日期
                </template>
                {{showform.end_date?showform.end_date:''}}
              </el-descriptions-item>
              <!-- 任务分解 -->
              <el-descriptions-item span='4' v-if="showform.mission_distribute&&showform.mission_distribute.length>0">
                <template slot="label">
                  任务分解
                </template>
                <span v-for="item in showform.mission_distribute">
                  <!-- 责任人 -->
                  <template v-if="item.admin_type===3">
                    {{item.accept_admin.name}},
                  </template>
                </span>
              </el-descriptions-item>

              <el-descriptions-item span='4' v-if="is_what_unitType==='答题'">
                <template slot="label">
                  答题正确数
                </template>
                {{showform.ask_number?showform.ask_number+'条':''}}
              </el-descriptions-item>
              <el-descriptions-item span='4' v-if="is_what_unitType==='学习'">
                <template slot="label">
                  最短学习时长
                </template>
                {{showform.study_time?showform.study_time+'分钟':''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  培训时间
                </template>
                {{showform.train_time?showform.train_time:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  培训单位
                </template>
                {{showform.train_company?showform.train_company:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  培训课时
                </template>
                {{showform.train_number?showform.train_number:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  授课人
                </template>
                {{showform.train_person?showform.train_person:''}}
              </el-descriptions-item>
              <el-descriptions-item span='2' v-if="is_what_unitType==='培训'">
                <template slot="label">
                  培训内容
                </template>
                {{showform.train_content?showform.train_content:''}}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div v-if="type=='show'">
            <el-divider>执行情况</el-divider>
            <!-- 所有人的执行情况 -->
            <div v-if="url_type!=5">
              <xy-table :list="showform.mission_distribute" stripe :table-item="distributeTable" :isPage='false'>
                <template v-slot:carry_type>
                  <el-table-column align='center' label="执行方式" width="120" header-align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.carry_status>0">
                        <div v-if="scope.row.carry_type===0">本人执行</div>
                        <div v-else-if="scope.row.carry_type===1">任务分解</div>
                        <div v-else-if="scope.row.carry_type===2">任务转办</div>
                        <div v-else></div>
                      </div>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:carry_status>
                  <el-table-column align='center' label="执行状态" width="80" header-align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.carry_status===0">待执行</div>
                      <div v-else-if="scope.row.carry_status===1">执行中</div>
                      <div v-else-if="scope.row.carry_status===2">已完成</div>
                      <div v-else></div>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:keep_status>
                  <el-table-column align='center' label="进展状态" width="80" header-align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.keep_status===0">已保存</div>
                      <div v-else-if="scope.row.keep_status===1">已提交</div>
                      <div v-else-if="scope.row.keep_status===2">已通过</div>
                      <div v-else-if="scope.row.keep_status===3">退回</div>
                      <div v-else>待开始</div>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:file_ids>
                  <el-table-column align='left' label="成果资料" width="120">
                    <template slot-scope="scope">
                      <div v-for="item in scope.row.files">
                        <div style="color:#2D8cF0;cursor: pointer;">
                        {{item.original_name}}
                        <el-link target="_blank" style="margin:0 10px;" @click="toshowFile(item.url)" type="primary">
                          预览
                        </el-link>
                        <el-link target="_blank" @click="base.downLoadFileUrl(item.id)" type="primary">
                          下载
                        </el-link>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:btns>
                  <el-table-column align='center' label="操作" width="120" header-align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.carry_status==1 && showform.main_admin_id==stateObj.login_id">
                        <Button v-if="scope.row.keep_status===1" @click="startLoad(scope.row,'check')" type="primary"
                          size="small">审核进展</Button>
                      </div>
                    </template>
                  </el-table-column>
                </template>
              </xy-table>
            </div>
            <!-- 我的代办里的 -->
            <div v-else>
              <xy-table :list="my_mission_distribute" stripe :table-item="distributeTable" :isPage='false'>
                <template v-slot:carry_type>
                  <el-table-column align='center' label="执行方式" width="80" header-align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.carry_status>0">
                        <div v-if="scope.row.carry_type===0">本人执行</div>
                        <div v-else-if="scope.row.carry_type===1">任务分解</div>
                        <div v-else-if="scope.row.carry_type===2">任务转办</div>
                        <div v-else></div>
                      </div>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:carry_status>
                  <el-table-column align='center' label="执行状态" width="80" header-align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.carry_status===0">待执行</div>
                      <div v-else-if="scope.row.carry_status===1">执行中</div>
                      <div v-else-if="scope.row.carry_status===2">已完成</div>
                      <div v-else></div>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:keep_status>
                  <el-table-column align='center' label="进展状态" width="80" header-align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.keep_status===0">已保存</div>
                      <div v-else-if="scope.row.keep_status===1">已提交</div>
                      <div v-else-if="scope.row.keep_status===2">已通过</div>
                      <div v-else-if="scope.row.keep_status===3">退回</div>
                      <div v-else>待开始</div>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:file_ids>
                  <el-table-column align='left' label="成果资料" width="120">
                    <template slot-scope="scope">
                      <div v-for="item in scope.row.files">
                        <div style="color:#2D8cF0;cursor: pointer;">
                         {{item.original_name}}
                          <el-link target="_blank" style="margin:0 10px;" @click="toshowFile(item.url)" type="primary">
                            预览
                          </el-link>
                          <el-link target="_blank" @click="base.downLoadFileUrl(item.id)" type="primary">
                            下载
                          </el-link>
                        </div>

                      </div>
                    </template>
                  </el-table-column>
                </template>
                <template v-slot:btns>
                  <el-table-column align='center' label="操作" width="120" header-align="center">
                    <template slot-scope="scope">
                      <div v-if="scope.row.carry_status===0">
                        <Button style="margin-bottom: 5px;" @click="startLoad(scope.row,'add')" type="primary"
                          size="small">开始任务</Button>
                      </div>
                      <div v-else-if="scope.row.carry_status===1">
                        <!-- <Button style="margin-bottom: 5px;" v-if="scope.row.carry_type===0" @click="openMyMission" type="primary" size="small"
                        >任务执行</Button> -->
                        <Button style="margin-bottom: 5px;"
                          v-if="scope.row.carry_type===1 && !(scope.row.carry_status==2)"
                          @click="carryTypeWhat('carry_type1')" type="primary" size="small">任务分解</Button>
                        <!-- <Button style="margin-bottom: 5px;" v-if="scope.row.carry_type===2 && scope.row.admin_type==1" @click="editorUnit('send')" type="primary" size="small"
                         >任务转办</Button> -->


                        <Button style="margin-bottom: 5px;" v-if="scope.row.keep_status===-1"
                          @click="startLoad(scope.row,'editor')" type="primary" size="small">提交进展</Button>
                        <Button style="margin-bottom: 5px;"
                          v-if="scope.row.keep_status===0 || scope.row.keep_status===3  "
                          @click="startLoad(scope.row,'editor')" type="primary" size="small">编辑进展</Button>
                      </div>
                      <div v-else></div>
                    </template>
                  </el-table-column>
                </template>
              </xy-table>
            </div>


          </div>
        </div>
      </template>


      <template v-slot:audit_status v-if="type=='check'">
        <el-divider>审核</el-divider>
        <div>
          审核状态：
          <el-select v-model="form.audit_status" filterable clearable placeholder="请选择状态" style="width: 400px;">
            <el-option v-for="item in auditStatusList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </template>
      <template v-slot:footerContent>
        <div>
          <!-- <div>
            <Button  v-if="type=='show'" type="primary" v-print="'#printunit'" style='margin-left:5px;margin-bottom:5px;'>打印</Button>
          </div> -->
          <div>
            <!-- 任务完成 且是责任人可以 做 归档 -->
            <Button v-if="showform.audit_status===3 && stateObj.login_id===showform.main_admin_id" type="primary"
              style='margin-left:5px;margin-bottom:5px;' @click="backPlan">归档</Button>
            <Button v-if="type=='train'||type=='uploads'||type=='study'" type="primary"
              style='margin-left:5px;margin-bottom:5px;' @click="submitFeedback()">提交</Button>
            <Button type="primary" ghost style='margin-left:5px;margin-bottom:5px;' @click="openLogs">日志</Button>
            <Button v-if="type=='train'||type=='uploads'||type=='study'" type="primary" ghost
              style='margin-left:5px;margin-bottom:5px;' @click="type='show'">取消</Button>

            <Button v-else type="primary" ghost style='margin-left:5px;margin-bottom:5px;' @click="closeDig">取消</Button>
          </div>
        </div>

      </template>
    </xy-dialog>

    <openLoad ref="openLoad" @refresh="carryTypeWhat" @reload="getDetail" @reloadList="reloadList"></openLoad>
    <addUnit ref="addUnit" @refresh="carryFinish"></addUnit>
    <!-- <checkUnit ref="checkUnit"></checkUnit> -->
    <showLogs ref="showLogs"></showLogs>
    <addBackPlan ref="addBackPlan"  @reload="getDetail"  @reloadList="reloadList"></addBackPlan>
        <viewFile ref='viewFile'></viewFile>
  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  import {
    save,
    get,
    updatemission
  } from "@/api/task/unit.js";
  import addUnit from '../components/addUnit.vue'
  import openLoad from '../components/openLoad.vue'
  import {
    save as saveLog
  } from "@/api/system/baseForm.js"
  import {
    getparameteritem
  } from "@/api/system/dictionary.js";
  import state from "@/store/modules/user.js"
  import viewFile from '@/components/viewFile/viewFile.vue'
  import showLogs from '../components/showLogs.vue'
  import addBackPlan from '../components/addBackPlan.vue'
  import {
    deepCopy
  } from '../../../../utils';
  import {
    contactGroup
  } from '../js/index.js'
  export default {
    components: {
      viewFile,
      addUnit,
      showLogs,
      openLoad,
      addBackPlan
    },
    data() {
      return {
        isShow: false,
        type: '',
        id: '',
        fileurl: '',
        login_id: "",
        department_id: '',
        pictureList: [],
        stateObj: {},
        url_type: 1,
        isEditor: false, // 是否在本页面 分解或转办了任务 是关闭后刷新列表
        auditStatusList: [{
          id: 1,
          value: '通过'
        }, {
          id: 5,
          value: '不通过'
        }],
        showform: {},
        unitTypeList: [],
        form: {
          mission_name: '',
          type: '',
          name: '',
          unit_type: '',
          start_date: '',
          end_date: '',
          is_audit: 0,
          audit_admin_id: '',
          audit_status: 1,
          file_ids: '',
          content: '',

          end_type: '',
          end_content: '',
          type: '',
          accept_admin_ids: [],
          accept_department_ids: [],
          mission_groups: [],
        },
        is_what_unitType: '',
        unitStatusList: [{
          id: 4,
          value: '待办',
          type: 'info'
        }, {
          id: 1,
          value: '办理中',
          type: ''
        }, {
          id: 5,
          value: '已归档',
          type: 'success'
        }, {
          id: 3,
          value: '已完成',
          type: 'danger'
        }],
        logList: [],
        // 任务人查看
        my_mission_distribute: [],
        distributeTable: [{
          label: '执行人',
          prop: 'accept_admin.name',
          width: 80
        }, {
          label: '执行状态',
          prop: 'carry_status',
          width: 80
        }, {
          label: '执行方式',
          prop: 'carry_type',
          width: 80
        }, {
          label: '开始时间',
          prop: 'start_date',
        }, {
          label: '预计结束时间',
          prop: 'end_date',
        }, {
          label: '进展状态',
          prop: 'keep_status',
          width: 80
        }, {
          label: '当前进展概述',
          prop: 'ing_introduce',
        }, {
          label: '完成概述',
          prop: 'end_introduce',
        }, {
          label: '成果资料',
          prop: 'file_ids',
        }, {
          label: '审核意见',
          prop: 'check_contents',
        }],

      }
    },
    created() {
      this.stateObj = state.state
      this.login_id = state.state.login_id
      this.department_id = state.state.department_id
      this.getUnitTypeList()
    },
    methods: {
      toshowFile(url) {
        console.log("url", url)
        this.$refs.viewFile.url = url
        this.$refs.viewFile.diaShow = true
      },
      startLoad(row, type) {
        console.log("row", row)
        this.$refs.openLoad.pid = this.showform.pid
        this.$refs.openLoad.type = type
        this.$refs.openLoad.setForm(row, this.showform.start_date, this.showform.end_date, this.showform.name)
        this.$refs.openLoad.id = this.id
        this.$refs.openLoad.isShow = true
      },
      reloadList() {
        this.$emit("refresh")
      },
      // 提交完 执行状态之后
      carryTypeWhat(e) {
        console.log("carryTypeWhat", e)

        if (e == 'carry_type0') {
          //自己执行
          // this.openMyMission()
        } else if (e == 'carry_type1') {
          // 任务分解 初始责任人直接编辑选择参与对象
          // 参与对象任务分解，新建任务 且责任人为他自己
          if (this.showform.mission_distribute.length > 1) {
            this.editorUnit('pid')
          } else {
            this.editorUnit('editor')
          }
        } else if (e == 'carry_type2') {
          // 任务转办
          this.editorUnit('send')
        }
      },
      // 任务分解或任务转办之后 关闭查看后 要刷新列表
      carryFinish() {
        this.isEditor = true
      },
      closeDig() {
        if (this.isEditor) {
          this.$emit('refresh')
        }
        this.isShow = false
      },
      checkUnits(id, type) {
        console.log("123")
        this.id = id
        this.type = type
        this.url_type = this.url_type
        this.isShow = true
      },
      print() {
        this.$Print('#printunit');
      },
      openLogs() {
        this.$refs.showLogs.typeName = this.showform.name
        this.$refs.showLogs.id = this.showform.id
        this.$refs.showLogs.isShow = true
      },
      // 归档
      backPlan() {
        this.$refs.addBackPlan.setTitle(this.showform)
        this.$refs.addBackPlan.isShow = true
      },

      async getDetail() {
        let res = await get(this.id)
        console.log(res)
        this.form = {
          mission_name: '',
          audit_status: res.audit_status ? res.audit_status : 1,
          type: res?.type,
          name: res?.name,
          unit_type: res?.unit_type,
          start_date: res?.start_date,
          end_date: res?.end_date,
          is_audit: res.audit_admin_id ? 1 : 0,
          audit_admin_id: res.audit_admin_id ? res.audit_admin_id : '',
          file_ids: res?.file_ids,
          content: res?.content,
          end_type: res?.end_type,
          end_content: res?.end_content,
          accept_admin_ids: res?.accept_admin_ids,
          accept_department_ids: res?.accept_department_ids,
          mission_groups: res?.groups,

        }
        let md = []
        res.mission_distribute.map(item => {
          if (item.accept_admin_id === this.stateObj.login_id) {
            // if (res.pid > 0) {
            //   if (item.admin_type == 3) {
            //     md.push(item)
            //   }
            // } else {
            md.push(item)
            // }
          }
        })
        this.my_mission_distribute = md
        console.log(this.my_mission_distribute)
        this.pictureList = []
        for (var f of res.files) {
          this.pictureList.push({
            id: f.id,
            url: f.url,
            name: f.original_name
          })
        }
        this.showform = res
        this.is_what_unitType = res.unit_type_detail ? res.unit_type_detail.value : ''

      },

      async getUnitTypeList() {
        const res = await getparameteritem('unitTypeList')
        this.unitTypeList = res.detail
      },

      editorUnit(type) {

        this.$refs.addUnit.id = this.id
        this.$refs.addUnit.type = type
        this.$refs.addUnit.unitTypeList = this.unitTypeList
        this.$refs.addUnit.department_id = this.stateObj.department_id
        this.$refs.addUnit.isShow = true
      },
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          console.log("type", this.type)
          console.log("url_type", this.url_type)
          this.getDetail()
        } else {
          this.id = ''
          this.type = ''

          this.showform = {}
          this.isEditor = false
          this.my_mission_distribute = []
          this.pictureList = []
          this.is_what_unitType = ''
          this.url_type = ''
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .name7,
  ::v-deep .content,
  ::v-deep .end_type,
  ::v-deep .file_ids,
  ::v-deep .mission_name,
  ::v-deep .audit_status,
  ::v-deep .showlist,
  ::v-deep .trainlist,
  ::v-deep .uploadslist,
  ::v-deep .studylist {
    flex-basis: 100%;
  }

  ::v-deep .el-collapse {
    border-top: none;
  }

  ::v-deep .type {
    display: none;
  }

  ::v-deep .el-divider__text {
    font-size: 20px;
  }

  ::v-deep .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
    width: 16%
  }

  .xy-table-item-label {
    width: 140px;
  }

  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  ::v-deep .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar {
    width: 80px !important;
    display: block;
    border-radius: 6px;
  }

  // ::v-deep .xy-table-item-label {
  //   width: 160px !important;
  // }

  ::v-deep .el-date-editor .el-range-separator {
    width: auto !important;
  }

  ::v-deep .el-input-number .el-input__inner {
    text-align: left !important;
  }

  .searchCompanys {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    .el-input {
      width: 80%
    }
  }
</style>
