<template>
  <div>
    <div class="d-flex flex-between">
      <div>
      </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%" >
      <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="查阅情况" prop="cyqk">
        <template slot-scope="scope">
          <div>
            {{scope.row.gw_ycy}}/ {{scope.row.gw_zcy}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="gw_fb_option_k">
        <template slot-scope="scope">
          <div>
            {{scope.row.gw_fb_option_k=="2" ? "未发布" : "已发布"}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <div v-show="scope.row.gw_fb_option_k=='1'" >
            <el-button type="text"  @click="handleRemind(scope.row)">提醒</el-button>
            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          </div>
          
          <div v-show="scope.row.gw_fb_option_k=='2'" >
            <el-button type="text"  @click="handlePublish(scope.row)">发布</el-button>
            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          </div>
        </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>

    <!-- dialogt弹出 -发布 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="dialogForm" ref="addForm_publish" :rules="rules_check" label-width="100px" label-position="left">
        <el-form-item label="发布对象" prop="mineStatus" >
          <el-select v-model="dialogForm.mineStatus" placeholder="请选择" multiple collapse-tags @change="selectChange" style="width:100%">
            <el-option  :value="mineStatusValue" style="height: auto">
              <el-tree :data="data" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange"></el-tree>
          </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="formSubmit_publish('addForm_publish')">确 定</el-button>
      </div>
    </el-dialog>


    <!-- dialogt弹出 -提醒 -->
    <el-dialog title="查阅情况" :visible.sync="dialogTableVisible_remind">
      <div style="margin-bottom:20px;">
        <el-button type="primary" size="medium" @click="fastRemind" >
          <span class="d-in-block v-mid font-size-16">一键提醒</span>
        </el-button>
      </div>
      <el-table :data="gridData">
        <!-- <el-table-column type="selection" align="center" width="55"></el-table-column> -->
        <el-table-column property="xf_department_name" label="查阅对象"></el-table-column>
        <el-table-column property="xf_username" label="查阅人员" ></el-table-column>
        <el-table-column label="是否查阅">
          <template slot-scope="scope">
            <div>
              {{scope.row.is_see=='2' ? '未查阅' : '已查阅' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column property="modify_dateline" label="查阅时间"></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible_remind = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible_remind = false">确 定</el-button>
      </div>
    </el-dialog>



    <!-- diglog-详情框 -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible_detail"
      width="210mm">
      <div class="onlineShow" v-if="singleData.gw_ylfj_pdf">
        <!-- <iframe  :src="'/app/jdbg/static/pdf/web/viewer.html?file='+singleData.gw_ylfj_pdf" style="width:100%;min-height:600px;border:0;"></iframe>  -->
        <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>

      <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 { gwjh_list, gwjh_add, gwjh_edit, gwjh_detail,gwjh_del,fast_remind,publishe_api,org_tree,org_users } from "./itemApi";
import { useUserStore } from "@/stores/user";
const { real_name,user_id, dept_ids } = useUserStore();
export default {
  name: "bbtj",
  data() {
    return {
      state_value: "",
      keyword: "",
      type_list: [
        {
          label: '全部',
          value:'0'
        },
        {
          label: '未发布',
          value:'1'
        },
        {
          label: '已发布',
          value:'2'
        }
      ],
      tableData: [],
      type_value: "",
      multipleSelection_remind:[],
      limit: 10,
      total: 0,
      cur_page: 1,
        dialogFormVisible: false,
      showType:[],
      dialogForm: {
        mineStatus: '',
      },
      rules_check: {
        mineStatus: [
          { required: true, message: '请选择发布对象', trigger: 'change'}
        ],
      },
      title: "",
      isEdit: false,
      id: "",
      loading: false,
      userList: [],

      gridData: [],
      dialogTableVisible_remind: false,
      dialogVisible_detail:false,

      mineStatus: "",
      mineStatusValue: [],

      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1"
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        }
        
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      singleData: '',
      insideList:[],
      gwId:'',
      prefixPDFUrl:window.globalVariables.api+'/plugins/pdf.js/web/viewer2.html?file=',
      
    };
  },
  mounted() {
    // this.getUserList();
    this.getListData();
  },
  methods: {
    //初始化列表数据
    getListData() {
      this.loading = true;
      let transObj = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
        gw_status:5, 
      };
      gwjh_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_remind(val) {
      this.multipleSelection_remind = val;
    },
    //多选框选择
    handleCheckAllChange(val) {
      this.showType = val;
      this.dialogForm.valiType = val;
    },
    //提醒
    handleRemind(item) {
      this.gwId = item.gw_id;
      let transObj = {
        gw_id:item.gw_id
      }
      gwjh_detail(transObj)
      .then(res => {
        if (res.code == "1") {
          this.singleData = res.data.one_info;
          this.insideList = res.data.one_info.cxqk;
          this.gridData = res.data.one_info.cxqk;
          this.dialogTableVisible_remind = true;
        }
      })
        .catch(err => { console.log(err) })
    },
    //一键提醒
    fastRemind() {
      let transObjs={
        gw_id:this.gwId
      }
      fast_remind(transObjs)
      .then(res=>{
        if (res.code == "1") {
          this.dialogTableVisible_remind = false;
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.getListData()
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
      .catch(err=>{console.log(err)})
      console.log(11)
    },
    //详情
    handleDetail(item){
      let transObj = {
        gw_id:item.gw_id
      }
      gwjh_detail(transObj)
      .then(res => {
        if (res.code == "1") {
          this.singleData = res.data.one_info;
          this.dialogVisible_detail = true;
        }
      })
      .catch(err=>{console.log(err)})
    },
     //发布
    handlePublish(item) {
      this.gwId = item.gw_id;
      //只能发布自己的
      let createrId = item.create_user_id;
      if (user_id == createrId) {
         //加载树结构
        this.getOrgTree()
        this.dialogFormVisible = true;
      } else {
        this.$message({
          message: "请勿发布他人公文~",
          type: "error",
        });
        return
      }
    },
    //新建-提交-发布
    formSubmit_publish(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //JSON处理下 提交的参数
          console.log(this.mineStatusValue, "000")
          let tempJson = [];
          this.mineStatusValue.forEach(item => {
            tempJson.push({
              department_id:item.id,
              department_name:item.label
            })
          })
          let transObj = {
            issubmit:1,
            gw_id:this.gwId,
            department_json:JSON.stringify(tempJson)//示例值：[{"department_id":"部门id","department_name":"部门名称"}]说明：部门json
          };
          publishe_api(transObj).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "发布成功！",
                type: "success",
              });
              this.getListData();
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
          
        }
      })

    },

    //翻页
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    //成员列表
    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;
        }
      });
    },
    //组织机构数树形
    getOrgTree() {
      let transObj={
        show_all:1
      }
      org_tree(transObj)
      .then(res=>{
        if (res.code == "1") {
          let treeData = res.data.one_info;
          this.data = res.data.one_info;
        }
      })
      .catch(err=>{console.log(err)})
    },


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