<template>
  <div class="app-container">
    <el-card style="width: 70%; margin: auto" shadow="always">
      <el-button type="primary" style="float: right" @click="submit">确 定</el-button>
      <h1 style="text-align: center; font-weight: bold">发起人操作</h1>
      <b>接收人</b><span style="color: red; font-size: 14px; font-weight: bold"> (二者选其一)</span>
      <br/>
      <br/>

      <el-form ref="form" inline label-width="90px">
        <el-form-item label="批阅人">
          <el-input v-model="form.receiveUserName" @click.native="selectReceiveUser" placeholder="请选择批阅人"/>
        </el-form-item>
        <el-form-item label="传阅接收人">
          <el-input v-model="form.userName" style="width: 500px" @click.native="selectUser" placeholder="传阅接收人"
                    clearable/>
        </el-form-item>
      </el-form>
      <b>流转信息</b>
      <br/>
      <br/>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="userName" label="接收人" width="180">
        </el-table-column>
        <el-table-column prop="receiveTime" label="接收时间" width="180">
        </el-table-column>
        <el-table-column prop="finishTime" label="办理时间">
        </el-table-column>
        <el-table-column prop="opinion" label="意见">
        </el-table-column>
      </el-table>
      <br/>
      <el-descriptions class="margin-top" title="公文信息" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            发文字号
          </template>
          {{ offical.issuedNum }}
        </el-descriptions-item>
        <!--        <el-descriptions-item>-->
        <!--          <template slot="label">-->
        <!--            密级-->
        <!--          </template>-->
        <!--          <dict-tag :options="dict.type.secret_level" :value="offical.issuedLevel" />-->
        <!--        </el-descriptions-item>-->
        <el-descriptions-item :span="2">
          <template slot="label">
            发文标题
          </template>
          {{ offical.issuedName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            收文时间
          </template>
          {{ offical.receiveDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            办理期限
          </template>
          {{ offical.deadline }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label">
            紧急程度
          </template>
          <dict-tag :options="dict.type.urgency" :value="offical.urgency"/>
        </el-descriptions-item>
        <el-descriptions-item :span="2" content-style="height: 100px;">
          <template slot="label">
            简介
          </template>
          {{ offical.remarks }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" content-style="height: 100px;">
          <template slot="label"> 文件</template>
          <div v-for="item in offical.fileList">
            {{ item.fjmc }}
            <el-button style="margin-left: 20px" plain type="primary" size="mini" @click="handleExport(item)">下载
            </el-button>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <br/>
    </el-card>

    <el-dialog :title="selectTile" :visible.sync="openSelect" width="800px" append-to-body
               style="padding: 0 0 0 0">
      <div>
        <el-form :model="selectQuery" size="small" :inline="true" label-width="68px">
          <el-form-item label="教师名称" prop="teacherName">
            <el-input v-model="selectQuery.teacherName" placeholder="请输入教师名称" clearable/>
          </el-form-item>
          <el-form-item label="教师电话" prop="teacherTel">
            <el-input v-model="selectQuery.teacherTel" placeholder="请输入教师电话" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchReceiveUserName">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetReceiveUserName">重置</el-button>
          </el-form-item>
        </el-form>

        <!--        批阅人表格-->
        <el-table v-show="isUser" ref="table1" key="a" v-loading="selectLoading" :data="schoolLeaderList" size="small"
                  height="400px"
                  highlight-current-row @row-click="rowClick1"
                  @selection-change="handleSelectionChange" :row-key="getRowId">
          <el-table-column type="selection" width="55" reserve-selection align="center"/>
          <el-table-column prop="picUrl" min-width="60" label="头像" align="center">
            <template slot-scope="scope">
              <ListImage :image-url="baseUrl + scope.row.avatar"></ListImage>
            </template>
          </el-table-column>
          <el-table-column label="老师名称" min-width="100" align="center" prop="teacherName"/>
          <el-table-column prop="sex" min-width="50" label="性别" align="center">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
            </template>
          </el-table-column>
          <el-table-column prop="teacherTel" min-width="120" label="老师电话" align="center">
          </el-table-column>
          <el-table-column prop="deptName" min-width="150" label="部门名称" align="center">
          </el-table-column>
        </el-table>
        <!--        传阅接收人表格-->
        <el-table v-show="!isUser" ref="table2" key="b" @row-click="rowClick2" size="small" height="400px"
                  v-loading="selectLoading" :data="schoolLeaderList" highlight-current-row
                  @selection-change="handleSelectionChange" :row-key="getRowId">
          <el-table-column type="selection" width="55" reserve-selection align="center"/>
          <el-table-column prop="picUrl" min-width="60" label="头像" align="center">
            <template slot-scope="scope">
              <ListImage :image-url="baseUrl + scope.row.avatar"></ListImage>
            </template>
          </el-table-column>
          <el-table-column label="老师名称" min-width="100" align="center" prop="teacherName"/>
          <el-table-column prop="sex" min-width="50" label="性别" align="center">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
            </template>
          </el-table-column>
          <el-table-column prop="teacherTel" min-width="120" label="老师电话" align="center">
          </el-table-column>
          <el-table-column prop="deptName" min-width="150" label="部门名称" align="center">
          </el-table-column>
        </el-table>


        <pagination v-show="selectTotal > 0" :total="selectTotal" :page.sync="selectQuery.pageNum"
                    :limit.sync="selectQuery.pageSize" @pagination="searchReceiveUserName"/>
        <div style="text-align: center; margin: 35px 0 0 0">
          <el-button type="primary" @click="selectConfirm" :disabled="disableState" size="small"
                     style="margin: 0 10px 0 0">
            确 定
          </el-button>
          <el-button @click="selectClose" size="small" style="margin: 0 30px 0 10px">取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
  getInitiator,
  getViewer,
  getApprover,
  initiatorSubmit,
  getCirculator
} from "@/api/smartSchool/indexMould/myTask/documentFlow";
import ListImage from "@/components/ListImage";

export default {
  name: "initiator",
  dicts: ['secret_level', 'urgency', 'sys_user_sex'],
  components: {
    ListImage
  },
  created() {
    this.id = this.$route.query && this.$route.query.id
    this.getData()
    this.getLeader()
  },

  data() {
    return {
      disableState: true,
      selectdId: [],
      selectdName: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      //批阅人列表
      schoolLeaderList: [],
      id: "",
      userId: "",
      userIds: [],
      teacherList: [],
      tableData: [],
      form: {},
      offical: {},
      // 选择批阅人弹出层
      openSelect: false,
      selectLoading: false,
      //
      selectTotal: 0,
      // 批阅人查询参数
      selectQuery: {
        pageNum: 1,
        pageSize: 10,
      },
      isUser: true,
      //弹出框标题
      selectTile: "选择",
    }
  },
  methods: {
    getData() {
      getInitiator(this.id).then((res) => {
        if (res.code == 200) {
          this.offical = res.offical
          this.tableData = res.review
        }
      })
    },
    // 搜索批阅人
    searchReceiveUserName() {
      this.selectLoading = true
      if (this.isUser) {
        getApprover(this.selectQuery).then(res => {
          this.schoolLeaderList = res.rows
          this.selectTotal = res.total
          this.selectLoading = false
        })
      } else {
        getCirculator(this.selectQuery).then(res => {
          this.schoolLeaderList = res.rows
          this.selectTotal = res.total
          this.selectLoading = false
        })
      }

    },
    resetReceiveUserName() {
      this.selectQuery = {
        pageNum: 1,
        pageSize: 10,
      }
      this.searchReceiveUserName()
    },

    /**   ************** 分割线起点 ***************   */

    // 选择批阅人
    selectReceiveUser() {
      this.openSelect = true
      if (!this.isUser) {
        this.isUser = true
      }
      this.searchReceiveUserName()
      this.selectTile = "选择批阅人"
    },
    // 选择传阅接收人
    selectUser() {
      this.openSelect = true
      if (this.isUser) {
        this.isUser = false
      }

      this.searchReceiveUserName()
      this.selectTile = "选择传阅接收人"
    },

    rowClick1(row) {
      this.$refs.table1.clearSelection()
      this.$refs.table1.toggleRowSelection(row)
    },

    rowClick2(row) {
      this.$refs.table2.toggleRowSelection(row)
    },


    // 多选框选中数据
    handleSelectionChange(selection) {
      if (this.isUser) {
        //批阅人
        this.disableState = selection.length != 1
      } else {
        //传阅接收人
        this.disableState = !selection.length;
      }
      this.userIds = selection.map(item => item.id);
      this.selectdName = selection.map(item => item.teacherName);
    },

    /** 批阅人或者传阅接收人dialog的确认按钮 */
    selectConfirm() {
      if (this.isUser) {
        /** 选择批阅人 */
        this.form.receiveUserName = this.selectdName[0];
        this.userId = this.userIds[0];
        //清空之前的传阅接收人数据
        this.form.userName = null
        this.userIds = []
        this.$refs.table2.clearSelection()
      } else {
        /** 选择传阅接收人*/
        this.form.userName = this.selectdName.join(',')
        //清空之前的批阅人数据
        this.form.receiveUserName = null
        this.userId = undefined
        this.$refs.table1.clearSelection()
      }
      this.openSelect = false;
    },

    /** 批阅人或者传阅接收人dialog的取消按钮 */
    selectClose() {
      this.openSelect = false
    },

    submit() {
      // 打开遮罩层
      this.$modal.loading("正在提交数据，请稍后...");
      initiatorSubmit(this.id, {userId: this.userId, userIds: this.userIds}).then((res) => {
        if (res.code == 200) {
          // 关闭遮罩层
          this.$modal.closeLoading();
          const obj = {path: '/indexMould/myTask/documentFlow'};
          this.$tab.closeOpenPage(obj);
        }
      }).catch(() => {
        // 关闭遮罩层
        this.$modal.closeLoading();
      })
    },


    /**   ************** 分割线终点 ***************   */






    getLeader() {
      getApprover().then((res) => {
        this.schoolLeaderList = this.formatArray(res.rows)
      })
      getViewer().then((res) => {
        this.teacherList = this.formatArray(res.rows)
      })
    },


    close() {
      this.$router.push({
        path: '/schoolManage/documentFlow',
      })
    },


    formatArray(array) {
      let newArray = array.map(item => {
        return {label: item.teacherName, value: item.id};
      });
      return newArray;

    },
    //导出文件
    handleExport(file) {
      this.download('schoolOffical/downloadFile', {
        id: file.id
      }, file.fjmc)
    },
    getRowId(row) {
      return row.id;  // row-key绑定的必须为唯一值
    },


  }
}
</script>

<style scoped>
.body {
  height: 50px;
}
</style>
