<template>
  <div class="page-body document">
      <q-tabs style="margin-bottom:20px;" v-model="tabCheck" @input="tabChange()" narrow-indicator dense align="left"
      class="text-primary">
      <q-tab :ripple="false" name="first" label="待审批" />
      <q-tab :ripple="false" name="second" label="我审批的" />
    </q-tabs>
    <template v-if="tabCheck == 'first'">
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-input clearable @change="getList" standout="bg-primary text-white" v-model="msg.Title" label="公文标题"
              @clear="getList" />
          </div>
          <div class="col-3">
            <q-input clearable @change="getList" standout="bg-primary text-white" v-model="msg.Number" label="编号"
              @clear="getList" />
          </div>
          <q-select @input="getList" filled stack-label option-value="Id" option-label="EmployeeName" use-input
            v-model="msg.UpdateBy" ref="DeptTier" :options="PersionList" label="发布人" :dense="false"
            class="col-3 q-pr-lg" emit-value map-options @filter="filterFn" clearable @clear="getList">
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  未找到相关数据
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </div>
      <div class="page-content">
        <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
          separator="none" title="" :data="data" :columns="columns" row-key="name">
          <template v-slot:top="props">
          </template>
          <template v-slot:body-cell-NoticeStateName="props">
            <q-td :props="props">
              <div class="row" style="line-height: 30px">
                <img v-if="props.row.NoticeState==2" src="../../assets/images/dcaogao.png" class="NoticeStateNimg" />
                <img v-if="props.row.NoticeState==3" src="../../assets/images/dchehui.png" class="NoticeStateNimg" />
                <img v-if="props.row.NoticeState==1" src="../../assets/images/dfabu.png" class="NoticeStateNimg" />
                <span
                  :style="{color:props.row.NoticeState==1?'#02C499':(props.row.NoticeState==2?'#2961FE':'#F72E52')}">{{props.row.NoticeStateName}}</span>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-IsTop="props">
            <q-td :props="props">
              <span v-if="props.row.Is_Top==1">是</span>
              <span v-if="props.row.Is_Top==2">否</span>
            </q-td>
          </template>
          <template v-slot:body-cell-optioned="props">
            <q-td :props="props">
              <q-btn flat size="xs" icon="iconfont icon-xiangqing-" style="font-weight:400;color: #3FC4FF"
                class="q-mr-xs" label="详情" @click="EditConfig(props.row.Id)" />
              <q-btn flat size="xs" icon="iconfont icon-xiangqing-" style="font-weight:400;color: #3FC4FF"
                class="q-mr-xs" label="审批" @click="showApproval(props.row.Id)" v-if="shenpiId==loginId"/>
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="pageCount"
              :input="true" @input="changePage" />
          </template>
        </q-table>
      </div>
    </template>
      <template v-if="tabCheck == 'second'">
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-input clearable @change="getMyList" standout="bg-primary text-white" v-model="mymsg.Title" label="公文标题"
              @clear="getMyList" />
          </div>
          <div class="col-3">
            <q-input clearable @change="getMyList" standout="bg-primary text-white" v-model="mymsg.Number" label="编号"
              @clear="getMyList" />
          </div>
          <q-select @input="getMyList" filled stack-label option-value="Id" option-label="EmployeeName" use-input
            v-model="mymsg.UpdateBy" ref="DeptTier" :options="PersionList" label="发布人" :dense="false"
            class="col-3 q-pr-lg" emit-value map-options @filter="filterFn" clearable @clear="getMyList">
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  未找到相关数据
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </div>
      <div class="page-content">
        <q-table :pagination="mymsg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
          separator="none" title="" :data="mydata" :columns="mycolumns" row-key="name">
          <template v-slot:top="props">
          </template>
          <template v-slot:body-cell-IsTop="props">
            <q-td :props="props">
              <span v-if="props.row.Is_Top==1">是</span>
              <span v-if="props.row.Is_Top==2">否</span>
            </q-td>
          </template>
          <template v-slot:body-cell-optioned="props">
            <q-td :props="props">
              <q-btn flat size="xs" icon="iconfont icon-xiangqing-" style="font-weight:400;color: #3FC4FF"
                class="q-mr-xs" label="详情" @click="EditConfig(props.row.Id)" />
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="mymsg.PageIndex" color="primary" :max="mypageCount"
              :input="true" @input="myChangePage" />
          </template>
        </q-table>
      </div>
    </template>

    <q-dialog v-model="persistent2" maximized full-height seamless position="right">
      <q-card style="margin-top:21px;width:800px" class="no-border-radius classinfo_Dialog">
        <q-img :src="NInfo.BgImage" v-if="NInfo.BgImage" spinner-color="white" style=" width: 100%;height: 76px" />
        <div style="padding: 20px">
          <div class="col-12 g row" style="margin-bottom:10px;">
            <div class="col-6">
              Fr：{{NInfo.From}}
            </div>
            <div class="col-6 " style="text-align: right">
              编号：{{NInfo.Number}}
            </div>
          </div>
          <div class="col-12  row" style="margin-bottom:10px;">
            To：<span v-for="(item,index) in NInfo.toList"
              :index="index">{{item.DeptName}}{{NInfo.toList.length==index+1?'':'、'}}</span>
          </div>
          <div class="col-12  row" style="margin-bottom:10px;">
            Cc：<span v-for="(item,index) in NInfo.ccList"
              :index="index">{{item.EmName}}{{NInfo.ccList.length==index+1?'':'、'}}</span>
          </div>
          <div class="col-12  row" style="margin-bottom:10px;">
            Time：{{NInfo.UpdateTime}}
          </div>
          <div class="col-12  row" style="margin-top: 20px;line-height:26px;">
            <span v-html="NInfo.Content"></span>
          </div>
          <div class="col-12  row" style="margin-top: 20px" v-if="NInfo.fileList&&NInfo.fileList.length>0">
            <div style="margin-top:3px;">附件:</div>
            <template>
              <div style="max-width: 350px;margin-left:10px;">
                <div class="noticeFile" v-if="NInfo.fileList.length>0" v-for="(file,fIndex) in NInfo.fileList"
                  :key="fIndex">
                  <span style="cursor:pointer;">
                    <a :href="file.FileUrl" style="color:#2961FE;text-decoration:none;" target="_blank">
                      <i class="iconfont icon-Download" style="margin-right:5px;"></i>{{file.FileName}}</a>
                  </span>
                </div>
              </div>
            </template>
          </div>
        </div>
      </q-card>
      <div class="dialog-out-close" @click="persistent2=false"
        style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
        <q-icon name="iconfont icon-jujue1" size="26px" />
      </div>
    </q-dialog>
    <q-dialog v-model="persistent3">
      <q-card style="margin-top:21px;width:800px" class="q-pa-sm">
       <q-card-section class="flex">
          <div class="text-h6">审批</div>
           <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>
        <q-input  standout="bg-primary text-white" type="textarea" v-model="approvalMsg.LogContent" label="审核备注" />
         <q-card-actions align="right">
          <q-btn flat label="取消" size="sm" color="primary" v-close-popup />
          <q-btn  label="拒绝" size="sm" color="primary"  @click="saveApproval(2)"/>
          <q-btn  label="同意" size="sm" color="primary"  @click="saveApproval(1)"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import{getConten} from '../../api/system/notiveSysSet'
  import {
    getNoticePageList,
    GetNoticeInfo, //公告详情
    setReviewNotice,//公告审批
    getMyApproval,//我审批的公告
  } from '../../api/administration/document';
  import {
    queryEmployee
  } from '../../api/users/user'
  import extEditor from '../../components/common/ext-editor'
  import selectTree from '../../components/common/select-tree'

  export default {
    meta: {
      title: "行政公告审批"
    },
    components: {
      extEditor,
      selectTree
    },
    name: "document",
    data() {
      return {
        tabCheck: 'first',
        msg: {
          PageIndex: 1,
          PageSize: 12,
          rowsPerPage: 12,
          Title: '',
          Number: '',
          NoticeState: 4,
          Is_Top: 0,
          UpdateBy: ""
        },
         mymsg: {
          PageIndex: 1,
          PageSize: 12,
          rowsPerPage: 12,
          Title: '',
          Number: '',
          NoticeState: 1,
          Is_Top: 0,
          UpdateBy: ""
        },
        loading: true,
        //公告审批column
        columns: [{
            name: 'NoticeStateName',
            label: '状态',
            align: 'left'
          },
          {
            name: 'Number',
            field: 'Number',
            label: '编号',
            align: 'left',
          },
          {
            name: 'Title',
            label: '标题',
            field: 'Title',
            align: 'left'
          },
          {
            name: 'ReadNum',
            label: '阅读情况',
            field: 'ReadNum',
            align: 'left'
          },
          {
            name: 'IsTop',
            label: '是否置顶',
            align: 'left'
          },
          {
            name: 'UpdateByName',
            label: '发布人',
            field: 'UpdateByName',
            align: 'left'
          },
          {
            name: 'UpdateTime',
            label: '发布时间',
            align: 'left',
            field: 'UpdateTime'
          }, {
            name: 'optioned',
            label: '操作',
            field: 'DeptId'
          }
        ],
         //我审批的column
        mycolumns: [{
            name: 'NoticeStateName',
            label: '状态',
            field:"ReviewStatusStr",
            align: 'left'
          },
          {
            name: 'Number',
            field: 'Number',
            label: '编号',
            align: 'left',
          },
          {
            name: 'Title',
            label: '标题',
            field: 'Title',
            align: 'left'
          },
          {
            name: 'ReadNum',
            label: '阅读情况',
            field: 'ReadNum',
            align: 'left'
          },
          {
            name: 'IsTop',
            label: '是否置顶',
            align: 'left'
          },
          {
            name: 'UpdateByName',
            label: '发布人',
            field: 'UpdateByName',
            align: 'left'
          },
          {
            name: 'UpdateTime',
            label: '发布时间',
            align: 'left',
            field: 'UpdateTime'
          }, 
          {
            name: 'LogContent',
            label: '审批备注',
            align: 'left',
            field: 'LogContent'
          }, 
          {
            name: 'optioned',
            label: '操作',
            field: 'DeptId'
          }
        ],
        data: [],
        pageCount: 0,
        NoticeList: [],
        PersionList: [], //员工列表
        AllemployeeList: [], //所有员工
        NInfo: {}, //详情内容
        persistent2: false,
        persistent3: false,
        approvalMsg:{
          NoticeId:0,
          ReviewStatus:0,
          LogContent:""
        },
        mydata:[],
        mypageCount:0,
        shenpiId:0,//审批人Id
        loginId:0,//登录人Id
      }
    },
    created(){
      let data=JSON.parse(localStorage.getItem('loginUserInfo'))
      this.loginId=data.data.Id
    },
    mounted() {
      this.getList();
      this.getEmployee();
      this.getshenpiren(); 
    },
    methods: {
      tabChange() {
        if (this.tabCheck == 'first') {
          this.getList();
        } else if (this.tabCheck == 'second') {
          this.getMyList()
        }
      },
      getList() {
        this.loading = false;
        getNoticePageList(this.msg).then(res => {
          this.data = res.Data.PageData;
          this.loading = false;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.PersionList = JSON.parse(JSON.stringify(this.AllemployeeList))
          } else {
            const needle = val.toLowerCase()
            this.PersionList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1)
          }
        })
      },
      //获取员工列表
      getEmployee() {
        var qMsg = {
          EmployeeName: ""
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            let obj = {
              EmployeeName: '不限',
              Id: -1
            }
            res.Data.unshift(obj)
            var jsonData = res.Data;
            if (jsonData && jsonData.length > 0) {
              this.AllemployeeList = JSON.parse(JSON.stringify(jsonData));
              this.PersionList = JSON.parse(JSON.stringify(jsonData));;
            }
          }
        })
      },
      //分页改变
      changePage(val) {
        this.msg.PageIndex = val;
        this.getList()
      },
      // 获取详情
      getNInfo(id) {
        GetNoticeInfo({
          NoticeId: id
        }).then(res => {
          if (res.Code == 1) {
            this.NInfo = JSON.parse(JSON.stringify(res.Data));
          }
        }).catch(() => {})
      },
      EditConfig(id) {
        this.persistent2 = true;
        this.getNInfo(id);
      },
      //显示审批弹窗
      showApproval(id) {
        this.persistent3 = true
        this.approvalMsg.NoticeId=id
      },
      //提交审批结果
      saveApproval(val){
        if(val===2&&this.approvalMsg.LogContent==""){
          this.$message.error("请填写拒绝原因")
          return
        }
        this.approvalMsg.ReviewStatus=val
        setReviewNotice(this.approvalMsg).then(res=>{
           console.log(611,res)
          if(res.Code===1){
            this.$message.success("操作成功");
            this.persistent3=false
            this.getList()
          }else{
            this.$message.error(res.Message)
          }
        })
      },
       getMyList() {
        this.loading = false;
        getMyApproval(this.mymsg).then(res => {
          this.mydata = res.Data.PageData;
          this.loading = false;
          this.mypageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
      //分页改变
      myChangePage(val) {
        this.mymsg.PageIndex = val;
        this.getMyList()
      },
      //获取审批人
      getshenpiren() {
        getConten({}).then(res => {
          if (res.Code === 1) {
            this.shenpiId = parseInt(res.Data.Content)
          }
        })
      },
    }
  }

</script>

<style scoped>
  .document .NoticeStateNimg {
    width: 30px;
    height: 30px;
    margin-right: 5px;
  }

  .document .q-pr-lg {
    padding-right: 0;
  }

  .document .noticeFile {
    color: #2961FE;
    font-size: 13px;
  }

</style>
