<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" persistent>
      <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
            @click="resetShenpiForm"
          />
        </q-card-section>
        <div class="q-gutter-sm row flex items-center">
          <div class="text-grey-6">审批结果:</div>
          <q-radio v-model="approvalMsg.ReviewStatus" :val="1" label="通过" />
          <q-radio v-model="approvalMsg.ReviewStatus" :val="2" label="驳回" />
        </div>
        <q-input
          filled
          type="textarea"
          v-model="approvalMsg.LogContent"
          label="审批备注"
        />
        <q-card-actions align="right">
          <q-btn
            flat
            label="取消"
            size="sm"
            color="primary"
            v-close-popup
            @click="resetShenpiForm"
          />
          <q-btn label="确认" size="sm" color="primary" @click="saveApproval" />
        </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: 2,
        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() {
      if (
        this.approvalMsg.ReviewStatus === 2 &&
        this.approvalMsg.LogContent == ""
      ) {
        this.$message.error("请填写驳回原因");
        return;
      }
      setReviewNotice(this.approvalMsg).then((res) => {
        if (res.Code === 1) {
          this.$message.success("操作成功");
          this.persistent3 = false;
          this.getList();
          this.approvalMsg.ReviewStatus = 2;
          this.approvalMsg.LogContent = "";
        } 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);
        }
      });
    },
    //重置审批表单
    resetShenpiForm() {
      this.approvalMsg = {
        NoticeId: 0,
        ReviewStatus: 2,
        LogContent: "",
      };
    },
  },
};
</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>
