<template>
  <div>
    <div class="d-flex flex-between">
      <div>
        <!-- <el-button type="primary" size="medium" @click="exportAll" :disabled="multipleSelection.length == 0">
          <span class="d-in-block v-mid font-size-16">导出</span>
        </el-button> -->
      </div>
      <el-form label-width="100px" :inline="true">
        <el-form-item prop="state_value">
          <el-select class="mr10" v-model="state_value" placeholder="请选择类别">
            <el-option  v-for="item in type_list"  :key="item.value"  :label="item.label"  :value="item.value" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="keyword">
          <el-input placeholder="请输入搜索关键字" v-model="keyword" clearable @clear="getListData"></el-input>
        </el-form-item>
        <el-button type="primary" class="ml5" @click="getListData">搜索</el-button>
      </el-form>
    </div>
    <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
      <el-table-column label="类型" prop="lb_name" show-overflow-tooltip></el-table-column>
      <el-table-column label="标题" prop="gw_title" show-overflow-tooltip></el-table-column>
      <el-table-column label="发文字号" prop="gw_zh" show-overflow-tooltip></el-table-column>
      <el-table-column label="发起人" prop="gw_fqr_name" show-overflow-tooltip></el-table-column>
      <el-table-column label="发起科室" prop="gw_fqks_name" show-overflow-tooltip></el-table-column>
      <el-table-column label="发起时间" prop="create_dateline" show-overflow-tooltip></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div>
            {{scope.row.is_read=="1" ? '已阅' : '待阅'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          <el-button type="text" @click="exportsingle(scope.row)">导出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <footer class="flex-item-none" style="display: flex; justify-content: flex-end; margin-top: 30px">
      <el-pagination background layout="total,prev, pager, next" :page-size="limit" :total="total"
        :current-page.sync="cur_page" @current-change="handleCurrentChange"></el-pagination>
    </footer>


    <!-- diglog-详情框 -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible_detail"
      width="210mm">
      <div>
        <div class="onlineShow" v-if="singleData.gw_ylfj_pdf">
          <iframe  :src="prefixPDFUrl+singleData.gw_ylfj_pdf" v-if="singleData.gw_ylfj_pdf" style="width:100%;min-height:600px;border:0;"  name="ifrmname" id="ifrmid" ></iframe>
        </div>
        <div class="webDialogReview" v-else>
          <div class="titleHeader" >
            <div style="text-align:center;">
              <img src="../../../assets/images/fileTitle1.png" alt="" v-if="singleData.lb_id==1">
              <img src="../../../assets/images/fileTitle2.png" alt="" v-else-if="singleData.lb_id==2">
              <img src="../../../assets/images/fileTitle3.png" alt="" v-else-if="singleData.lb_id==3">
              <img src="../../../assets/images/fileTitle4.png" alt="" v-else-if="singleData.lb_id==4">
              <img src="../../../assets/images/fileTitle5.png" alt="" v-else-if="singleData.lb_id==5">
              <img src="../../../assets/images/fileTitle6.png" alt="" v-else>
            </div>

            <div class="secPart">{{singleData.gw_zh}}</div>
            <h3>{{singleData.gw_title}}</h3>
            <p v-html="singleData.gw_content"></p>

          </div>
          <div class="footerInfo posiR">
            <p>景宁畲族自治县教育局</p>
            <p>{{singleData.fb_dateline}}</p>
            <!-- 章定位 -->
            <div class="zhang">
                <img src="../../../assets/images/zhang1.png" alt="" v-if="singleData.lb_id==1">
                <img src="../../../assets/images/zhang2.png" alt="" v-else-if="singleData.lb_id==2">
                <img src="../../../assets/images/zhang3.png" alt="" v-else-if="singleData.lb_id==3">
                <img src="../../../assets/images/zhang4.png" alt="" v-else-if="singleData.lb_id==4">
                <img src="../../../assets/images/zhang5.png" alt="" v-else-if="singleData.lb_id==5">
                <img src="../../../assets/images/zhang6.png" alt="" v-else>
            </div>
          </div>
          <div class="reaFooter">
            <div class="reaFooter_left">{{singleData.gw_fqks_name}}</div>
            <div class="reaFooter_right">{{singleData.fb_dateline}}印发</div>
          </div>
        </div>
        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_detail = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible_detail = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {dygw_list,dygw_add,dygw_edit,dygw_detail,dygw_del, export_api,exportWord_api,org_users } from "./itemApi";
import { useUserStore } from "@/stores/user";
const { real_name, dept_ids } = useUserStore();
export default {
  name: "bbtj",
  data() {
    return {
      state_value: "",
      keyword: "",
      type_list: [
        {
          label: '全部',
          value:'0'
        },
        {
          label: '待阅',
          value:'2'
        },
        {
          label: '已阅',
          value:'1'
        }
      ],
      tableData: [],
      type_value: "",
      multipleSelection:[],
      limit: 10,
      total: 0,
      cur_page: 1,
      dialogFormVisible: false,
      showType:[],
      dialogForm: {
        year: '',
      },
      rules_check: {
        year: [
          { required: true, message: '请选择年份', trigger: 'change'}
        ],
      },
      title: "",
      isEdit: false,
      id: "",
      loading: false,
      userList: [],
     
      dialogVisible_detail:false,

      mineStatus: "",
      mineStatusValue: [],
      singleData:'',
      prefixPDFUrl:window.globalVariables.api+'/plugins/pdf.js/web/viewer2.html?file=',
    };
  },
  mounted() {
    // this.getUserList();
    this.getListData();
  },
  methods: {
    getUserList() {
      let data = {
        dept_id: dept_ids[0],
        page: 1,
        limit: 9999,
      };
      org_users(data).then((res) => {
        if (res.code == 1) {
          this.userList = res.data.page_data;
        }
      });
    },
    //初始化列表数据
    getListData() {
      this.loading = true;
      let transObj = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
        my_read:1,
      };
      dygw_list(transObj).then((res) => {
        this.loading = false;
        this.tableData = res.data.page_data;
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    //多选
     handleSelectionChange(val) {
      this.multipleSelection = val;
    },
     //导出
    exportAll() {
      let Token = JSON.parse(window.localStorage.getItem('userInfo')).token;
      let expId = [];
       this.multipleSelection.forEach(item => {
        expId.push(item.gw_id);
       })
      let transString = expId.join();
      let link =
        window.globalVariables.api +
        "/jdbg/gwgl_gw/index?api=xls&page=1&limit=10000&site=jnmf&token=" +
        Token + "&ids=" + transString;
      window.open(link, "_blank");
    },
    //导出单个
    exportsingle(item) {
      let onlineUrl = item.gw_ylfj_pdf;
      let fullpath = window.globalVariables.api + '/' + item.gw_ylfj_pdf;
      window.open(fullpath, "_blank");
      return
      let link = window.globalVariables.api + "/jdbg/gwgl_gw/export_word";
      let data = {
        site: "jnmf",
        gw_id: item.gw_id,
        type:1,//带公章
      };
      exportWord_api(data).then((res) => {
        if (res.code == "1") {
          let zipLink = res.data.file_url;
          window.open(zipLink, "_blank");
        }
      });

    },
  //详情
  handleDetail(item){
    let transObj = {
        gw_id:item.gw_id
      }
      dygw_detail(transObj)
      .then(res => {
        if (res.code == "1") {
          this.singleData = res.data.one_info;
          this.dialogVisible_detail = true;
        }
        console.log(res,"111")
      })
      .catch(err=>{console.log(err)})
      
  },
  //翻页
  handleCurrentChange(val) {
    this.cur_page = val;
    this.getListData();
  },


    //select框值改变时候触发的事件
    selectChange(e){
        var arrNew = [];
          var dataLength = this.mineStatusValue.length;
          var eleng = e.length;
          for(let i = 0; i< dataLength ;i++){
            for(let j = 0; j < eleng; j++){
              if(e[j] === this.mineStatusValue[i].label){
                arrNew.push(this.mineStatusValue[i])
              }
            }
          }
          this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
    },
    handleCheckChange() {
          let res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
          let arrLabel = [];
          let arr = [];
          res.forEach(item => {
            arrLabel.push(item.label);
            arr.push(item);
          });
          this.mineStatusValue = arr;
          this.mineStatus = arrLabel;
          console.log('arr:'+JSON.stringify(arr))
          console.log('arrLabel:'+arrLabel)
    }
  },
};
</script>

<style lang="scss" scoped>
@import url("../../../styles/documentOnlineRev.scss");
.time-type-list {
  width: 100%;
  border-bottom: 1px solid #f3f3f3;
  margin-bottom: 20px;
  display: flex;

  li {
    position: relative;
    top: 2px;
    cursor: pointer;
    width: 50px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;

    &+li {
      margin-left: 20px;
    }

    &.selected {
      color: #265cd4;
      border-bottom: 2px solid #265cd4;
    }
  }
  .onlineShow{
    min-height:400px;
  }
}
.posiR{
  position: relative;
}
.zhang{
  position: absolute;
  right:10%;
  bottom:-50%;
  z-index:13
}
</style>
