<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" :text="type_name" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Select v-if="path_type==1||path_type==5" filterable clearable style='width:150px;margin-right: 10px;' v-model="select.type" placeholder="任务类型">
              <Option v-for="(item,index) in typeName" v-if="index<typeName.length-1" :value="item.type">{{item.name}}</Option>
            </Select>
            <Select filterable clearable style='width:150px;margin-right: 10px;' v-model="select.unit_type" placeholder="任务类别">
              <Option v-for="(item,index) in unitTypeList" :value="item.id">{{item.value}}</Option>
            </Select>
            <Select filterable clearable style='width:150px;margin-right: 10px;' v-model="select.audit_status" placeholder="任务状态">
              <Option v-for="item in auditStatusList" :value="item.id">{{item.value}}</Option>
            </Select>
            <el-date-picker @change="changeDate" v-model="select.dateRange" type="daterange"
              :picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" align="right">
            </el-date-picker>
            <Input v-model="select.keyword" style="width: 150px;margin-right: 10px;" placeholder="关键字搜索" />

            <Button type="primary" @click="getList" style="margin-right: 10px;">查询</Button>
            <Button v-if="path_type!=5" type="primary" style="margin-right: 10px;"
              @click="editorUnit('','add')">添加</Button>
            <Button v-if="path_type!=5" type="primary" style="margin-right: 10px;"
                @click="editorUnit('','add',2)">文件学习</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <el-table :data="list" style="width: 100%" class='v-table' border :height='tableHeight'>


      <el-table-column type="index" align="center" fixed="left"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-if="props.row.inspection.length>0">
            <div align="left" v-for='(item,index) in props.row.inspection' class="expenditem">
              <!-- <div> -->
              <Button type="primary" style='margin-right:10px;' size="small"
                @click="showPatrol(item.id,'show')">查看</Button>
              <!-- </div> -->
              {{index+1}}、
              <div v-for="(k,label) of inspectionTable">
                <span class='label'>
                  {{label}}：
                </span>
                <span v-if="k=='status'">
                  <template v-for='s in statusList'>
                    <span v-if="s.id==item[k]">
                      {{s.value}}
                    </span>
                  </template>
                </span>
                <span v-else>
                  <!-- {{k.indexOf(".")>-1?item[k.split(".")[0]][k.split(".")[1]]:item[k]}} -->
                  {{k.indexOf(".")>-1?(item[k.split(".")[0]]?item[k.split(".")[0]][k.split(".")[1]]:''):item[k]}}
                </span>
              </div>
            </div>
          </div>
          <div v-else-if="props.row.ask_log.length>0">
            <div align="left" v-for='(item,index) in props.row.ask_log' class="expenditem">
              <!-- </div> -->
              {{index+1}}、
              <div>
                <span class="label">答题人：</span>
                <span>{{item.user_id?item.user_id:''}}</span>
              </div>
              <div>
                <span class="label">答题时间：</span>
                <span>{{item.created_at?item.created_at:''}}</span>
              </div>
              <div>
                <span class="label">正确率：</span>
                <span>{{item.correct?parseFloat(item.correct/item.data.length).toFixed(2)*100 + "%":''}}</span>
              </div>
            </div>
          </div>
          <div v-else class="expenditem">
            暂无检查问题
          </div>

        </template>
      </el-table-column>

      <el-table-column v-for="item in table" :label="item.label" :fixed='item.fixed' :align='item.align'
        :width='item.width' :prop="item.prop">
        <template slot-scope="scope">
          <span v-if="item.formatter">
            {{item.formatter(scope.row,scope.row,scope.row[item.prop])}}
          </span>
          <div v-else-if='item.customFn'>
            <div style="white-space: normal;text-align: left;">
              <div v-if="scope.row.accept_department_detail.length>0">
                <span v-for="department in scope.row.accept_department_detail">
                  <el-tag v-if="department.detail"
                    style="margin-right: 5px;margin-bottom: 2px;">{{department.department.name}}</el-tag>
                    <el-tag v-else type='info'
                      style="margin-right: 5px;margin-bottom: 2px;">{{department.department.name}}</el-tag>
                </span>

              </div>
              <div v-if="scope.row.accept_admin_detail.length>0">
                <span v-for="admin in scope.row.accept_admin_detail">
                  <el-tag v-if="admin.detail"
                    style="margin-right: 5px;margin-bottom: 2px;">{{admin.admin.name}}</el-tag>
                  <el-tag v-else type='info'
                    style="margin-right: 5px;margin-bottom: 2px;">{{admin.admin.name}}</el-tag>
                </span>

              </div>
              <div v-if="scope.row.groups.length>0">
                <div v-for="group in scope.row.groups">
                  {{group.name}}:
                  <span v-if="group.type==1">
                    <span v-for="detail in scope.row.grounp_admin_detail">
                      <el-tag v-if="detail.istrue"
                        style="margin-right: 5px;margin-bottom: 2px;">{{detail.admin.name}}</el-tag>
                      <el-tag v-else type='info'
                        style="margin-right: 5px;margin-bottom: 2px;">{{detail.admin.name}}</el-tag>
                    </span>
                  </span>
                  <span v-if="group.type==2">
                    <span v-for="detail in scope.row.grounp_department_detail">
                      <el-tag v-if="detail.istrue"
                        style="margin-right: 5px;margin-bottom: 2px;">{{detail.department.name}}</el-tag>
                      <el-tag v-else type='info'
                          style="margin-right: 5px;margin-bottom: 2px;">{{detail.department.name}}</el-tag>
                    </span>
                  </span>

                </div>
              </div>
            </div>
          </div>
          <span v-else>
            <!-- {{(item.prop.indexOf(".")>-1?scope.row[item.prop.split(".")[0]][item.prop.split(".")[1]]:scope.row[item.prop]}} -->
            {{item.prop.indexOf(".")>-1?(scope.row[item.prop.split(".")[0]]?scope.row[item.prop.split(".")[0]][item.prop.split(".")[1]]:''):scope.row[item.prop]}}

          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align='center' label="操作" width="180" header-align="center">
        <template slot-scope="scope">
          <div v-if="path_type==1||path_type==2">
            <Button type="primary" size="small" style="margin-right:5px;margin-bottom:5px;" @click="editorUnit(scope.row.id,'editor')">编辑</Button>
            <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>
            <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteList(scope.row.id)">
              <Button type="primary" style="margin-right:5px;margin-bottom:5px;" size="small" ghost>删除</Button>
            </Poptip>
          </div>
          <div v-else>
            <Button v-if="!path_type_2" type="primary" size="small" style="margin-right:5px;margin-bottom:5px;" @click="editorUnit(scope.row.id,'editor')">编辑</Button>
            <Button v-if="(!path_type_2)&&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>
            <Button v-if="path_type_2==4||path_type_2==5" type="primary" size="small" style="margin-right:5px;margin-bottom:5px;" @click="checkUnits(scope.row.id,'show')">查看</Button>
            <Button v-if="scope.row.type==2&&(path_type_2==4||path_type_2==5)" type="primary" size="small" style="margin-right:5px;margin-bottom:5px;" @click="openAsks(scope.row)">开始答题</Button>
            <Button v-if="(scope.row.type!=2)&&(path_type_2==4||path_type_2==5)" type="primary" size="small" style="margin-right:5px;margin-bottom:5px;" @click="$refs['addPatrol'].mission_id=scope.row.id,$refs['addPatrol'].isShow=true,$refs['addPatrol'].type='add'">提交检查</Button>
            <Poptip v-if="path_type==4&&!path_type_2" transfer confirm title="确认要删除吗？" @on-ok="deleteList(scope.row.id)">
              <Button type="primary" style="margin-right:5px;margin-bottom:5px;" size="small" ghost>删除</Button>
            </Poptip>
          </div>

          </template>
      </el-table-column>

    </el-table>

    <Page :total="total" show-elevator show-sizer show-total :page-size='select.page_size' size='small'
      @on-change='changePage' @on-page-size-change='changePageSize' />
    <addUnit ref='addUnit' @refresh='getList'></addUnit>

    <showPatrol ref='showPatrol'></showPatrol>
    <addPatrol ref='addPatrol' @refresh='getList'></addPatrol>
    <checkUnit ref='checkUnit' @refresh='getList'></checkUnit>
    <answerQuestion @refresh='getList' ref='answerQuestion'></answerQuestion>
  </div>
</template>

<script>
  import addUnit from '../list/components/addUnit.vue'
  import showPatrol from '../list/components/showPatrol.vue'
  import addPatrol from '../list/components/addPatrol.vue'
  import checkUnit from '../list/components/checkUnit.vue'
  import answerQuestion from '../list/components/answerQuestion.vue'
  import {
    listunit,
    del
  } from '@/api/task/unit.js'
  import {getInfo} from "@/api/user.js";

  export default {
    components: {
      addUnit,
      showPatrol,
      addPatrol,
      checkUnit,
      answerQuestion
    },
    data() {
      return {
        askList:[],
        typeName: [{
          type: 1,
          name: '专项任务'
        }, {
          type: 2,
          name: '文件学习培训'
        }, {
          type: 3,
          name: '事件隐患任务'
        }, {
          type: 4,
          name: '科室任务'
        }, {
          type: 5,
          name: '我的任务'
        }],
        type_name: '',
        tableHeight: 0,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        select: {
          keyword: '',
          page: 1,
          page_size: 10,
          myself: 0,
          myself_department: 0,
          type: '',
          unit_type: '',
          audit_status:'',
          dueDate:[],
          start_date:'',
          end_date:''
        },
        total: 0,
        auditStatusList:[{
          id:0,
          value:'待审核'
        },{
          id:1,
          value:'开展中'
        },{
          id:2,
          value:'不通过'
        },{
          id:3,
          value:'已完成'
        }],
        unitTypeList: [{
          id: 1,
          value: '专项检查'
        }, {
          id: 2,
          value: '资料收集'
        }, {
          id: 3,
          value: '网络安全'
        }],
        endTypeList: [{
          id: 1,
          name: '提交文字'
        }, {
          id: 2,
          name: '提交附件'
        }, {
          id: 3,
          name: '提交文字与附件'
        },{
          id: 4,
          name: '查看即可'
        }, {
          id: 5,
          name: '需要答题'
        }],
        table: [{
            label: "标题",
            prop: 'name',
            align: 'left',
            // fixed:'left',
            width: 200
          }, {
            label: "状态",
            prop: 'audit_status',
            width: 120,
            align:'center',
            formatter: (cell, data, value, index) => {
              for(var item of this.auditStatusList){
                if(item.id==value){
                  return item.value
                }
              }
            }
          },{
            label: "开始日期",
            prop: 'start_date',
            width: 120,
            align:'center'
          }, {
            label: "结束日期",
            prop: 'end_date',
            width: 120,
            align:'center'
          }, {
            label: "任务类型",
            prop: 'type',
            width: 120,
            align:'center',
            formatter: (cell, data, value, index) => {
              return value == 1 ? '专项任务' : (value == 2 ? '文件学习培训' : (value == 3 ? '事件隐患任务' : (value == 4 ? '科室任务' : '')))
            }
          }, {
            label: "任务类别",
            prop: 'unit_type',
            width: 120,
            align:'center',
            formatter: (cell, data, value, index) => {
              return value == 1 ? '专项检查' : (value == 2 ? '资料收集' : (value == 3 ? '网络安全' : ''))
            }
          }, {
            label: "完成要求",
            prop: 'end_type',
            width: 180,
            align:'center',
            formatter: (cell, data, value, index) => {
              return value == 1 ? '提交文字' : (value == 2 ? '提交附件' : (value == 3 ? '提交文字与附件' : (value == 4 ? '查看即可' : (value == 5 ? '需要答题' : ''))))
            }
          }, {
            label: "参与人员",
            prop: '_names',
            width: 360,
            align: 'left',
            customFn: (row) => {
            }
          },{
            label: "创建人",
            prop: 'admin.name',
            width: 120,
            align: 'center',
          },{
            label: "创建时间",
            prop: 'created_at',
            width: 120,
            align: 'center',
            formatter: (cell, data, value, index) => {
              return value?value.substring(0,11):''
            }
          }],
          inspectionTable: {
            '巡查日期': 'date',
            '状态': 'status',
            '问题类型': 'ask.value',
            '地点': 'site.name',
            '上报人': 'admin.name',

          },
          statusList: [{
            id: -1,
            value: '已撤回'
          }, {
            id: 0,
            value: '待审核'
          }, {
            id: 1,
            value: '待领导确认'
          }, {
            id: 2,
            value: '已分发,待接收'
          }, {
            id: 3,
            value: '已接收'
          }, {
            id: 4,
            value: '提交整改'
          }, {
            id: 5,
            value: '已整改'
          }, {
            id: 6,
            value: '不通过'
          }, {
            id: 7,
            value: '整改不通过,重新整改'
          }, {
            id: 8,
            value: '部门退回'
          }, {
            id: 9,
            value: '待领导确认整改'
          }],
          list: [],
          path_type:1,
          path_type_2:'',
          login_id:'',
          department_id:'',

        }
      },
      created() {
          this.initHeight()
          if (this.$route.path) {
            let path = this.$route.path.split("_")
            this.select.type = path[1]
            this.path_type = path[1]
            this.typeName.map(item => {
              if (item.type == this.select.type) {
                this.type_name = item.name
              }
            })
            if(path[2]&&path[2]==5){
              this.select.type = ''
              this.select.myself = 1
              // this.select.myself_department = 1
              this.type_name = '我的任务'
              this.path_type = path[1]
              this.path_type_2 = path[2]
            }
            if(path[2]&&path[2]==4){
              this.select.type = ''
              // this.select.myself = 1
              this.select.myself_department = 1
              this.type_name = '科室任务'
              this.path_type = path[1]
              this.path_type_2 = path[2]
            }
          }
          console.log("this.path_type ",this.path_type)
          this.getUserId()
          this.getList()
        },
        watch: {},
        methods: {
          initHeight() {
            var that = this;
            var clientHeight = document.documentElement.clientHeight
            var lxHeader_height = 96.5; //查询 头部
            var paginationHeight = 37; //分页的高度
            var topHeight = 50; //页面 头部
            let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
            that.tableHeight = tableHeight;
          },
          openAsks(scope){
            this.$refs['answerQuestion'].mission_id=scope.id
            this.$refs['answerQuestion'].askList = scope.ask
            this.$refs['answerQuestion'].isShow=true
          },
          changeDate(e){
            if(e){
              this.select.start_date = e[0];
              this.select.end_date = e[1];
            }else{
              this.select.start_date = "";
              this.select.end_date = "";
            }
          },
          async getUserId(){
             let res = await getInfo()
             this.login_id = res.id
             this.department_id = res.department_id
          },
          showPatrol(id, type) {
            this.$refs.showPatrol.id = id
            this.$refs.showPatrol.type = type

            this.$refs.showPatrol.isShow = true
          },
          async getList() {
            let res = await listunit({
              ...this.select
            })
            //  判断小组中是否有人提交了检查
            for(var r of res.data){
              if(r.groups.length>0){
                for(var g of r.groups){
                  if(g.type==1){
                    let is_index = 0
                    for(var a of r.grounp_admin_detail){
                      if(a.detail){
                        is_index++
                      }
                    }
                    if(is_index>0){
                      for(var a1 of r.grounp_admin_detail){
                        a1.istrue = true
                      }
                    }
                  }
                  if(g.type==2){
                    let is_index = 0
                    for(var d of r.grounp_department_detail){
                      if(d.detail){
                        is_index++
                      }
                    }
                    if(is_index>0){
                      for(var d1 of r.grounp_department_detail){
                        d1.istrue = true
                      }
                    }
                  }

                }
              }
            }

            this.list = res.data
            this.total = res.total

          },
          changePage(e) {
            this.select.page = e
            this.getList()
          },
          changePageSize(e) {
            this.select.page_size = e
            this.getList()
          },
          editorUnit(id, type,study) {
            if(id){
              this.$refs.addUnit.id = id
            }
            if(this.path_type==4){
              this.$refs.addUnit.department_id = this.department_id
            }
            if(study){
              this.$refs.addUnit.mission_type = study
            }
            this.$refs.addUnit.type = type
            this.$refs.addUnit.isShow = true
          },
          checkUnits(id,type){
            this.$refs.checkUnit.id = id
            this.$refs.checkUnit.type = type
            this.$refs.checkUnit.isShow = true
          },
          deleteList(id) {
            var that = this;
            if (id) {
              del(id).then(response => {
                this.$Message.success('操作成功');
                that.getList();
              }).catch(error => {
                console.log(error)
                reject(error)
              })
            }
          }
        },
    }
</script>

<style scoped>
  /deep/ .el-icon-circle-close {
    color: #fff
  }

  .expenditem {
    display: flex;
    font-size: 14px;
    padding: 10px;
    border-bottom: 1px solid #EBEEF5;
    padding-left: 110px;
    font-size: 16px;
  }

  .expenditem>div {
    margin-right: 15px;
    min-width: 200px;
  }

  .expenditem>div span.label {
    color: #97a8be
  }

  /deep/ .el-table__expanded-cell .expenditem:last-child {
    border-bottom: none;
  }

  /deep/ .ivu-page {
    text-align: right;
    padding: 15px;
  }
  /deep/ .el-range-editor.el-input__inner{
    height: 32px;
    line-height: 32px;
    width: 250px;
    margin-right:10px;
  }
  /deep/ .el-date-editor .el-range__icon,/deep/ .el-date-editor .el-range-separator,/deep/ .el-date-editor .el-range__close-icon{
    line-height: 25px;
  }
</style>
