<template>
    <div class="projectect-attendance-drawer">
      <el-drawer
        v-if="isOpen"
        :visible.sync="isOpen"
        direction="ltr"
        size="50%"
      >
        <template slot="title">
          <div>{{ drawerTitle + " 【阅读详情】" }}</div>
        </template>
        <el-tabs type="card"
          v-model="activeName"
          style="margin-left: 20px; margin-right: 20px"
          @tab-click="getList"
        >
          <el-tab-pane :label="tag.all" name="-1" key="-1" ></el-tab-pane>
          <el-tab-pane :label="tag.fzjt" name="1" key="1" ></el-tab-pane>
          <el-tab-pane :label="tag.zgs" name="11" key="11" ></el-tab-pane>
          <el-tab-pane :label="tag.jldw" name="4" key="4" ></el-tab-pane>
          <el-tab-pane :label="tag.zbgs" name="2" key="2" ></el-tab-pane>
          <el-tab-pane :label="tag.fbgs" name="3" key="3" ></el-tab-pane>
        </el-tabs>

        <el-table
          v-loading="loading"
          style="margin-left: 20px; margin-right: 20px"
          :data="dataList" stripe
        >
         <el-table-column
            label="单位类型"
            align="center"
            prop="deptTypeName"
            width="150"
            show-overflow-tooltip
          />
          <el-table-column
            label="单位名称"
            align="center"
            prop="deptName"
            width="200"
          >
          <template slot-scope="scope">
            <span v-if="scope.row.deptType!=1 && scope.row.deptType!=11">{{ scope.row.deptName }}</span>
              <span v-if="scope.row.deptType==1">产发集团</span>
              <span v-if="scope.row.deptType==11">
                {{getDeptName(scope.row.ancestors)}}
              </span>
          </template>
          </el-table-column>
          <el-table-column label="人员姓名" align="center" prop="nickName"/>
          <el-table-column
            label="联系方式"
            align="center"
            prop="userName"
            show-overflow-tooltip
          />
          <el-table-column label="阅读时间" align="center" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['work:workFile:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-drawer>
    </div>
  </template>

  <script>
  import { listWorkUser, delWorkUser, queryCount } from "@/api/work/workUser";

  export default {
    name: "workFileUser",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 视频配置表格数据
        dataList: [],
        //抽屉标题
        drawerTitle: "",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 15,
          fileId:null,
          deptType: null,
        },
        isOpen: false,
        activeName:"-1",
        tag: {
          all:"全部（0）",
          fzjt:"集团公司（0）",
          zgs:"子公司（0）",
          jldw:"监理单位（0）",
          zbgs:"总包公司（0）",
          fbgs:"分包公司（0）"
        }
      };
    },
    created() {},
    methods: {
      show(workFile) {
        this.drawerTitle = workFile.fileName;
        this.queryParams.fileId = workFile.id;
        this.isOpen = true;
        this.getList();
      },
      /** 查询视频配置列表 */
      getList() {
        this.loading = true;
        if(this.activeName=="-1"){
            this.queryParams.deptType=null;
        }else{
            this.queryParams.deptType=this.activeName;
        }
        this.queryCount();
        listWorkUser(this.queryParams).then((response) => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      queryCount(){
        queryCount(this.queryParams).then((response) => {
          let tag = {
            all:"全部（0）",
            fzjt:"集团公司（0）",
            zgs:"子公司（0）",
            jldw:"监理单位（0）",
            zbgs:"总包公司（0）",
            fbgs:"分包公司（0）"
          };
          let sum=0;
          response.data.forEach(datum => {
            if(datum.deptType=="1"){
              sum+=datum.total;
              tag.fzjt="集团公司（"+datum.total+"）";
            }
            if(datum.deptType=="11"){
              sum+=datum.total;
              tag.zgs="子公司（"+datum.total+"）";
            }
            if(datum.deptType=="4"){
              sum+=datum.total;
              tag.jldw="监理单位（"+datum.total+"）";
            }
            if(datum.deptType=="2"){
              sum+=datum.total;
              tag.zbgs="总包公司（"+datum.total+"）";
            }
            if(datum.deptType=="3"){
              sum+=datum.total;
              tag.fbgs="分包公司（"+datum.total+"）";
            }
            tag.all="全部（"+sum+"）";
          });
          this.tag = tag;
        });
      },
      getDeptName(ancestors){
        if(ancestors.indexOf(111)>-1){
            return "产发城投";
        }else if(ancestors.indexOf(112)>-1){
            return "产发置业";
        }else if(ancestors.indexOf(113)>-1){
            return "产发投资";
        }else if(ancestors.indexOf(114)>-1){
            return "产发绿能";
        }else if(ancestors.indexOf(115)>-1){
            return "产发智能";
        }else{
            return "产发医疗";
        }
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id;
        this.$modal
          .confirm('是否确认删除用户文件阅读编号为"' + ids + '"的数据项？')
          .then(function () {
            return delWorkUser(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
    },
  };
  </script>
