<template>
<div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" title="查看" :form="form"
      >
      <template v-slot:contents>
        <el-divider>计划信息</el-divider>
         <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.year?showform.year:''}}
           </el-descriptions-item>
           <el-descriptions-item span='2'>
             <template slot="label">
               责任人（科室）：
             </template>
             {{showform.main_admin?showform.main_admin.name:''}}
           </el-descriptions-item>
           <el-descriptions-item span="2">
             <template slot="label">
               月份：
             </template>
             {{showform.start_date?showform.start_date.join("、"):''}}
           </el-descriptions-item>
           <el-descriptions-item span='4'>
             <template slot="label">
               说明
             </template>
             {{showform.content?showform.content:''}}
           </el-descriptions-item>
           <el-descriptions-item span='4'>
             <template slot="label">
               附件：
             </template>
             <div v-for="item in pictureList">
               <a target="_blank" :href="item.url">{{item.name}}</a>
             </div>
           </el-descriptions-item>
         </el-descriptions>
      </template>
      <template v-slot:missionlist>
          <el-divider>任务情况</el-divider>
          <!-- <Button v-if="showform.audit_status==1" type="primary" style='margin-right:5px;margin-bottom:5px;'
            @click="editorUnit('add')">发布任务</Button> -->
          <xy-table
            :list="mission_log"
            stripe
            :table-item="missionLogTable"
            :isPage='false'>
            <template v-slot:btns>
              <div></div>
              <!-- <el-table-column align='center' label="操作" width="120" header-align="center">
                <template slot-scope="scope">
                  <template>
                    <div>
                      <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="checkUnits(scope.row.id,'show')">查看</Button>
                    </div>
                    <div>
                      <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="editorUnit('editor',scope.row.id)">编辑</Button>
                    </div>
                    <div>
                      <Button v-if="scope.row.audit_admin_id==login_id&&scope.row.audit_status==0" style="margin-right:5px;margin-bottom:5px;" type="primary" size="small" @click="checkUnits(scope.row.id,'check')">审核</Button>
                    </div>
                  </template>
                </template>
              </el-table-column> -->
            </template>
          </xy-table>
      </template>

      <template  v-slot:footerContent>
        <!-- {{showform.is_lock}} -->
       <!-- <Button v-if="stateObj.login_id==showform.admin_id||stateObj.is_guiji||stateObj.is_chuzhang" :type="showform.is_lock?'':'primary'"
        :style="showform.is_lock?'background:#ccc;border:1px solid #ccc;color:#fff;margin-left:5px;margin-bottom:5px;':'margin-left:5px;margin-bottom:5px;'"
        @click="changeLock">锁定</Button> -->
        <Button type="primary" ghost style='margin-left:5px;margin-bottom:5px;' @click="isShow=false">取消</Button>
      </template>

    </xy-dialog>
    <addUnit ref='addUnit' @refresh='getMission'></addUnit>
    <checkUnit ref='checkUnit' @refresh='getMission'></checkUnit>
  </div>
</template>

<script>
  import {
    Message
  } from 'element-ui'
  import {
    getparameteritem
  } from "@/api/system/dictionary.js";
  import {
    get,
    save
  } from "@/api/task/plan.js";
  import {
    listunit
  } from '@/api/task/unit.js'
  import addUnit from '../../list/components/addUnit.vue'
  import checkUnit from '../../list/components/checkUnit.vue'
  import state from '@/store/modules/user.js'
  export default {
    components: {
      addUnit,
      checkUnit
    },
    data() {
      return {
        isShow: false,
        id:'',
        pictureList:[],
        stateObj:{},
        statusList:[{
          id:0,
          value:'未完成'
        },{
          id:1,
          value:'未开展'
        },{
          id:2,
          value:'开展中'
        },{
          id:3,
          value:'已完成'
        }],
        hasLocked:false,
        showform:{},
        form: {
          contents:'',
          missionlist:'',
          plan_type:'',
          name: '',
          year:'',
          type: '',
          start_date: '',
          status:1,
          end_date: '',
          // count:'',
          lefts:'',
          name7: 1,
          file_ids: '',
          content: '',
          accept_admin_ids: [],
          accept_department_ids: [],
          is_lock:null
        },
        auditStatusList:[{
          id: 4,
          value: '待办',
          type: 'info'
        }, {
          id: 1,
          value: '办理中',
          type: ''
        }, {
          id: 5,
          value: '已归档',
          type: 'success'
        }, {
          id: 3,
          value: '已完成',
          type: 'danger'
        }],
        table:[{
            label: "月份",
            prop: 'month',
            width: 120,
            align:'center'
          },{
            label: "内容",
            prop: 'list',
            align:'left',
            customFn:(row)=>{
              return(<div>
              {
                row.list.map((item,index)=>{
                  return(<div style={{'margin':'5px'}}>{index+1}、<span style={{'width':'85%','display':'inline-block'}}>{item.content}</span>
                   <el-button style={{"margin-left":'5px',"height":'40px'}} type='primary' size='small' on={
                    {
                      ["click"]:(e)=> this.editorUnit,
                    }
                   } >添加任务</el-button>
                  </div>)
                })
              }

              </div>)
            }
          }],
        mission_log:[],
        missionLogTable:[{
            label: "任务名称",
            prop: 'name',
            // fixed:'left',
            width:200,
            align:'left',
          }, {
            label: "任务内容及要求",
            prop: 'content',
            minWidth: 200,
            align: 'left',
          },{
            label: "开始日期",
            prop: 'start_date',
            width: 110,
            align:'center'
          }, {
            label: "结束日期",
            prop: 'end_date',
            width: 110,
            align:'center'
          }, {
            label: "状态",
            prop: 'audit_status',
            width: 80,
            align:'center',
            customFn:(row)=>{
              return(<div>
              {
                this.auditStatusList.map(item=>{
                  if(item.id==row.audit_status){
                    return(<el-tag type={item.type}>{item.value}</el-tag>)
                  }
                })
              }
              </div>)
            }
          },{
            label: "参与对象",
            prop: '_names',
            // width: 240,
            align: 'left',
            customFn:row=>{
              return(<div  style={{"display": "flex","flex-wrap": "wrap"}}>
              {
                row._names?
                row._names.map(item=>{
                  return(<div>
                    {
                      item.group_name?
                      // 小组
                      <div style={{"display": "flex"}}><div>{item.group_name}：</div>
                        <div style={{"display": "flex","flex-wrap": "wrap"}}>{
                          item.details.map(detail=>{
                            return(
                              <el-tag style={{'margin':'0 5px 5px 0'}} type={detail.hasDetail?'':'info'}>{detail.name}</el-tag>
                            )
                          })
                        }</div>
                      </div>
                      :
                      // 其他
                      <el-tag style={{'margin':'0 5px 5px 0'}} type={item.hasDetail?'':'info'}>{item.name}</el-tag>
                    }
                  </div>)
                }):''
              }</div>)
            }
          },{
            label: "责任人",
            prop: 'main_admin.name',
            width: 80,
            align: 'center',
          },{
            label: "创建时间",
            prop: 'created_at',
            width: 110,
            align: 'center',
            formatter: (cell, data, value, index) => {
              return value?value.substring(0,11):''
            }
          }],
      }
    },
    created() {
      this.stateObj = state.state
    },
    methods: {
      editorUnit(type, unit_id) {
        this.$refs.addUnit.type = type
        if(type==='editor'){
          this.$refs.addUnit.id=unit_id
        }else{
          this.$refs.addUnit.type="add"
          this.$refs.addUnit.setoutLineId(this.showform.out_line_id)
          this.$refs.addUnit.setMissionPlanId(this.showform.id)
          this.$refs.addUnit.setType(1)
          this.$refs.addUnit.setNameContent(this.showform.name,this.showform.content)
          this.$refs.addUnit.setMenuLevel(this.showform.menu,this.showform.level)
          this.$refs.addUnit.setMainId(this.showform.main_department_id,this.showform.main_admin_id)
          this.$refs.addUnit.isShow = true
        }

        this.$refs.addUnit.isShow = true
      },
      checkUnits(id,type){
        this.$refs.checkUnit.id = id
        this.$refs.checkUnit.type = type
        this.$refs.checkUnit.isShow = true
      },
      async getMission(){
        const res = await listunit({mission_plan_id:this.id,page:1,page_size:9999})
        //  判断小组中是否有人提交了检查
        //  处理参于人员选择
        for(var r of res.data){
          var _names = []
          // 只有人员
          if(r.accept_admin_ids&&r.accept_admin_ids.length>0){
            r.accept_admin_detail.map(item=>{
              let hasDetail = item.detail?true:false
                _names.push({
                  'name':item.admin?.name,
                  'hasDetail':hasDetail
                })
            })
            r._names = _names
          }
          // 部门
          if(r.accept_department_ids&&r.accept_department_ids.length>0){
            r.accept_department_detail.map(item=>{
              let hasDetail = item.detail?true:false
                _names.push({
                  'name':item.department?.name,
                  'hasDetail':hasDetail
                })
            })
            r._names = _names
          }
          // 小组
          if(r.groups&&r.groups.length>0){
              for(var g of r.groups){
                for(var de of g.details){
                  if(g.type==1){
                    let is_index = 0
                    for(var a of r.grounp_admin_detail){
                      if(de.name===a.admin?.name){
                        if(a.detail){
                          is_index++
                        }
                      }
                    }
                    de.hasDetail=is_index>0?true:false
                  }
                  if(g.type==2){
                    let is_index = 0
                    for(var dp of r.grounp_department_detail){
                      if(de.name===dp.department.name){
                        if(dp.detail){
                          is_index++
                        }
                      }
                    }
                    de.hasDetail=is_index>0?true:false
                  }
                }
              }
              // 处理过的groups
            r.groups.map((item,index)=>{
              _names.push({
                group_name:item.name,
                details:item.details
              })
            })
            r._names = _names
          }
        }
        this.mission_log = res.data
      },
      changeLock(){
        if(this.showform.is_lock===1){
          this.showform.is_lock = 0
          this.form.is_lock = 0
          this.hasLocked = false
        }else{
          this.showform.is_lock = 1
          this.form.is_lock = 1
          this.hasLocked = true
        }
        console.log(this.form)
        // return
        save({
          id: this.id,
          ...this.form
        }).then(res => {
          Message({
            type: 'success',
            message: this.hasLocked?'锁定成功':'解锁成功'
          })
        })
      },
      async getDetail() {
        const res = await get(this.id)
        this.showform = res
        // this.showform.is_lock = 1
        this.form = {
          contents:'',
          missionlist:'',
          plan_type:res?.plan_type,
          name: res?.name,
          year:res.year?res.year:new Date().getFullYear(),
          type: res?.type,
          start_date: res?.start_date,
          status:res.status?res.status:1,
          end_date: res?.end_date,
          name7: res.accept_department.length > 0 ? 2 : 1,
          file_ids: res?.file_ids,
          content: res?.content,
          accept_admin_ids: res?.accept_admin_ids,
          accept_department_ids: res?.accept_department_ids,
          is_lock:res?.is_lock
        }
        for (var f of res.files) {
          this.pictureList.push({
            id: f.id,
            url: f.url,
            name: f.original_name
          })
        }
        let group_details = []
        if(res.groups.length>0){
          this.showform.group_details = this.contactGroup(res.groups)
        }
        console.log(this.showform.group_details)
        this.getMission()
      },
      contactGroup(arr) {
        let tempArr = [],
          newArr = []
        for (let i = 0; i < arr.length; i++) {
          if (tempArr.indexOf(arr[i].name) === -1) {
            if(arr[i].type===1){
              newArr.push({
                type: arr[i].type,
                name: arr[i]['name'],
                admin_details: arr[i].details,
                 dep_details: []
              })
            }else{
              newArr.push({
                type: arr[i].type,
                name: arr[i]['name'],
                admin_details:[],
                dep_details: arr[i].details
              })
            }

            tempArr.push(arr[i].name);
          } else {
            for (let j = 0; j < newArr.length; j++) {
              if (newArr[j].name == arr[i].name) {
                if(arr[i].type===1){
                  newArr[j].admin_details.push(...arr[i].details)
                }else{
                  newArr[j].dep_details.push(
                    ...arr[i].details
                  )
                }
              }
            }
          }
        }
        return newArr
      },
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
            this.getDetail()

        } else {
          this.id = ''
          this.pictureList = []
          this.showform = {}
          this.mission_log = []
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .contents,
  ::v-deep .end_type,
  ::v-deep .file_ids,
  ::v-deep .is_need_answer,
  ::v-deep .missionlist{
    flex-basis: 100%;
  }
  ::v-deep .el-divider__text{
    font-size: 20px;
  }
  ::v-deep .el-descriptions :not(.is-bordered) .el-descriptions-item__cell{
    width:16%
  }
  ::v-deep .plan_type {
    display: none;
  }
  ::v-deep .el-form>div{
        align-items: flex-start!important;
  }
  .xy-table-item{
    padding-right:0
  }
  ::v-deep .xy-table-item-label {
    padding-right:0
  }

  .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>
