<template>
  <div class="sonnel">
     <div class="sonnerHeader">
       <p class="xiangq ">报表详情</p>
       <div class="sonnelNave">
         <div class="sonnelacr">
           <p>报表名称：</p>
           <p>{{queryParams.reportName}}</p>
         </div>
         <div class="sonnelacr">
           <p>报表模板：</p>
           <p class="aet">
             <a :href="queryParams.repUploadFile !== null? queryParams.repUploadFile.url : '#'" :download="queryParams.repUploadFile !== null? queryParams.repUploadFile. name : '暂无数据'" >下载模板</a>
             <span>
                <img src="../../../assets/images/icon_xq_wj.png" alt="" class="index_navTimeimg" />
                <i>{{queryParams.repUploadFile !== null? queryParams.repUploadFile. name : '暂无数据'}}</i>
             </span>
           </p>
         </div>
         <div class="sonnelacr">
           <p>开始时间：</p>
           <p>{{queryParams.startTime== null? '暂无数据' : queryParams.startTime}}</p>
         </div>
         <div class="sonnelacr">
           <p>截止时间：</p>
           <p>{{queryParams.endTime == null ? '暂无数据': queryParams.endTime}}</p>
         </div>
         <div class="sonnelacr">
           <p>注意事项：</p>
           <p>{{queryParams.remark == null ? '暂无数据': queryParams.remark}}</p>
         </div>
         <!-- <div class="sonnelacr sonnelacrty">
           <p>参与人员：</p>
           <div>
             <p v-for="(item,index) in queryParams.personnelList" :key="item.deptName">{{item.deptName}}：<span style="margin-right: 5px;" v-for="(itr,indexr) in item.userNameList" :key="indexr">{{itr}}</span></p>
           </div>

         </div> -->
         <!-- <div class="sonnelacr">
           <p>已填报单位：</p>
           <p class="djiwui">
             <span class="jeiut" v-for="(iu,ij) in queryParams.filledInList" :key="ij">
               <span>{{iu.deptName}}: {{iu.userNameList}}</span>
                <p>
                  <img src="../../../assets/images/icon_xq_wj.png" alt="" class="index_navTimeimg" />
                  <a :href=" iu.fileUrlList !== '[]'? iu.fileUrlList[0] : '#'" :download="iu.fileUrlList !== '[]'? iu.fileNameList[0]:'暂无数据'">{{iu.fileUrlList !== '[]'? iu.fileNameList[0]:'暂无数据'}}</a>
                  <img src="../../../assets/images/icon_xq_xz.png" alt="" class="index_navTimeimgrt" />
                </p>
                <!-- <p>
                  <img src="../../../assets/images/icon_xq_wj.png" alt="" class="index_navTimeimg" />
                  <i>潜山市教育局 人员信息报表.xls</i>
                  <img src="../../../assets/images/icon_xq_xz.png" alt="" class="index_navTimeimgrt" />
                </p> -->
             </span>

             </p>
         </div>
         <!-- <div class="sonnelacr">
           <p>未填报单位：</p>
           <p>潜山市源潭中心小学：<span>沈明熙、</span></p>
           <p>潜山市源潭中心小学：<span>沈明熙、</span></p>
         </div> -->
        <!-- <div class="sonnelacr sonnelacrty">
           <p>未填报单位：</p>
           <div>
             <p v-for="(item,index) in queryParams.filledOutList" :key="item.deptName">{{item.deptName}}：<span style="margin-right: 5px;" v-for="(itr,indexr) in item.userNameList" :key="indexr">{{itr}}</span></p>
           </div>

         </div> -->
         <img src="../../../assets/images/pic_zt_jxz.png" alt="" class="nyekag" v-if="queryParams.reportStatus == 1">
         <img src="../../../assets/images/pic_zt_jxzhu.png" alt="" class="nyekag" v-if="queryParams.reportStatus == 2">
         <img src="../../../assets/images/pic_zt_jxzs.png" alt="" class="nyekag" v-if="queryParams.reportStatus == 3">
       </div>
       <!-- <div style="text-align: center;">
         <el-button type="success"  size="medium" @click="handleQuery">查看汇总信息</el-button>
       </div> -->

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

<script>
import { listType, getType, delType, addType, updateType, clearCache } from "@/api/system/sonnel";

export default {
  name: "name",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {

      },
      // 表单参数
      form: {},
      shuejy:''

    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询字典类型列表 */
    getList() {
      this.loading = true;
      listType(this.$route.query.id).then(response => {
          this.queryParams = response.data;
          // if(this.queryParams.personnelList !==null){
          //   this.queryParams.personnelList.filter(rout=>{
          //       this.shuejy =  rout.userNameList,jion(',')
          //   })
          // }
          if(this.queryParams.repUploadFile !== null){
              this.queryParams.repUploadFile = JSON.parse(this.queryParams.repUploadFile)
            }
          // this.total = response.total;
          // this.loading = false;
          console.log(response)
        }
      );
    },
    // 字典状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        dictName: undefined,
        dictType: undefined,
        status: "0",
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加字典类型";
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getType(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改字典类型";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateType(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addType(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除字典编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delType(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/dict/type/export', {
        ...this.queryParams
      }, `type_${new Date().getTime()}.xlsx`)
    },
    /** 清理缓存按钮操作 */
    handleClearCache() {
      clearCache().then(response => {
        this.msgSuccess("清理成功");
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .sonnel{
    background-color:#eaeefa;
    padding: 16px;
  }
  .sonnerHeader{
    padding: 30px;
    background-color: #fff;
    border-radius: 6px;
    position: relative;
    .sonnelacr{
      display: flex;
      margin-bottom: 25px;
      p:nth-child(1){
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
        width: 10%;
        text-align: right;
      }
      p:nth-child(2){
        flex: 1;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;

      }
      .aet{
        display: flex;
        align-items: center;
        a{
          width: 100px;
          height: 40px;
          background: #1890FF;
          border-radius: 10px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          text-align: center;
          line-height: 40px;
        }
        i{
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
          font-style:normal;
        }

      }
      .djiwui{
         display: flex;
         flex-direction: column;
         line-height: 25px;
         .jeiut{
           display: flex;
           align-items: center;
         }
        i{
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
          font-style:normal;
        }
      }
    }
    .sonnelacrty{
      div:nth-child(2){
        // display: flex;
          flex: 1;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
          p{
            width: 100%;
            text-align: left;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #343434;
            span{
              text-align: left;
              flex: 1;
            }
          }
      }
    }
  }
  .xiangq{
    border-left: 4px solid #1890FF;
    padding-left: 6px;
    font-size: 19px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
    margin-bottom: 38px;
  }
  .index_navTimeimg{
    width: 14px;
    height: 16px;
    margin: 0 11px;
  }
  .index_navTimeimgrt{
    width: 12px;
    height: 14px;
    margin: 0 17px;
  }
  .nyekag{
    width: 68px;
    height: 60px;
    position: absolute;
    top:40px;
    right: 50px;
  }
</style>
