<template>
  <div class="mod-config">
    <div style="text-align: left;padding: 1% 0">
      <el-button @click="sp()">审批</el-button>
      <el-button @click="nd()">年度总结</el-button>
    </div>
    <div v-if="spShow">
      <div style="text-align: center;padding: 1% 0">
        <el-button @click="jrzj">总结</el-button>
        <el-button @click="lxgl">立项</el-button>
        <el-button @click="htxx">合同</el-button>
        <el-button @click="zcgl">支出</el-button>
        <el-button @click="rygl">人员</el-button>
      </div>
      <el-table v-if="jrzjShow"
        :data="dataListZj"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="approvalName"
          header-align="center"
          align="center"
          label="立项名称">
        </el-table-column>
        <el-table-column
          prop="approvalApply"
          header-align="center"
          align="center"
          label="申请人">
        </el-table-column>
        <el-table-column
          prop="approvalApplyDate"
          header-align="center"
          align="center"
          label="申请时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goToZj(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="lxxxShow"
        :data="dataListLx"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="approvalName"
          header-align="center"
          align="center"
          label="立项名称">
        </el-table-column>
        <el-table-column
          prop="approvalApply"
          header-align="center"
          align="center"
          label="申请人">
        </el-table-column>
        <el-table-column
          prop="approvalApplyDate"
          header-align="center"
          align="center"
          label="申请时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goToLx(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="htxxShow"
        :data="dataListHt"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="approvalName"
          header-align="center"
          align="center"
          label="合同名称">
        </el-table-column>
        <el-table-column
          prop="approvalApply"
          header-align="center"
          align="center"
          label="申请人">
        </el-table-column>
        <el-table-column
          prop="approvalApplyDate"
          header-align="center"
          align="center"
          label="申请时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goToHt(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="zcglShow">
        <div style="text-align: center;padding: 1% 0">
          <el-button @click="szzjb()">收支总结表</el-button>
          <el-button @click="zcmxb()">支出明细表</el-button>
        </div>
        <el-table v-if="szzjbShow"
          :data="dataListSz"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%;">
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="approvalName"
            header-align="center"
            align="center"
            label="记录日期">
          </el-table-column>
          <el-table-column
            prop="approvalApply"
            header-align="center"
            align="center"
            label="申请人">
          </el-table-column>
          <el-table-column
            prop="approvalApplyDate"
            header-align="center"
            align="center"
            label="申请时间">
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="goToSz(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="zcmxbShow"
          :data="dataListZc"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%;">
          <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="approvalName"
            header-align="center"
            align="center"
            label="记录日期">
          </el-table-column>
          <el-table-column
            prop="approvalApply"
            header-align="center"
            align="center"
            label="申请人">
          </el-table-column>
          <el-table-column
            prop="approvalApplyDate"
            header-align="center"
            align="center"
            label="申请时间">
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="goToZc(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-table v-if="ryglShow"
        :data="dataListRy"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="approvalName"
          header-align="center"
          align="center"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="approvalApply"
          header-align="center"
          align="center"
          label="申请人">
        </el-table-column>
        <el-table-column
          prop="approvalApplyDate"
          header-align="center"
          align="center"
          label="申请时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goToRy(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="ndzjShow">
      <div style="text-align: center;margin-bottom: 1%">
        <el-button @click="hdsNDZJ()">侯德生</el-button>
        <el-button @click="hjqNDZJ()">侯继庆</el-button>
        <el-button @click="lxjNDZJ()">李现举</el-button>
        <el-button @click="hjgNDZJ()">侯吉光</el-button>
      </div>
      <el-table v-if="hdsNDShow"
        :data="hdsNDList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="annualYear"
          header-align="center"
          align="center"
          label="年度">
        </el-table-column>
        <el-table-column
          prop="annualName"
          header-align="center"
          align="center"
          label="名称">
          <template slot-scope="scope">
            <template v-if="scope.row.annualName===0">
              支出明细表
            </template>
            <template v-else>
              收支总结表
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="annualEndtime"
          header-align="center"
          align="center"
          label="收回时间">
        </el-table-column>
        <el-table-column
          prop="annualState"
          header-align="center"
          align="center"
          width="150"
          label="回收状态">
          <template slot-scope="scope">
            <div v-if="scope.row.annualState === 0">
              <el-button type="text" size="small" @click="reclaimInfo(scope.row)">点击回收</el-button>
            </div>
            <div v-else>已回收</div>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="hjqNDShow"
        :data="hjqNDList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="annualYear"
          header-align="center"
          align="center"
          label="年度">
        </el-table-column>
        <el-table-column
          prop="annualName"
          header-align="center"
          align="center"
          label="名称">
          <template slot-scope="scope">
            <template v-if="scope.row.annualName===0">
              支出明细表
            </template>
            <template v-else>
              收支总结表
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="annualEndtime"
          header-align="center"
          align="center"
          label="收回时间">
        </el-table-column>
        <el-table-column
          prop="annualState"
          header-align="center"
          align="center"
          width="150"
          label="回收状态">
          <template slot-scope="scope">
            <div v-if="scope.row.annualState === 0">
              <el-button type="text" size="small" @click="reclaimInfo(scope.row)">点击回收</el-button>
            </div>
            <div v-else>已回收</div>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="lxjNDShow"
        :data="lxjNDList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="annualYear"
          header-align="center"
          align="center"
          label="年度">
        </el-table-column>
        <el-table-column
          prop="annualName"
          header-align="center"
          align="center"
          label="名称">
          <template slot-scope="scope">
            <template v-if="scope.row.annualName===0">
              支出明细表
            </template>
            <template v-else>
              收支总结表
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="annualEndtime"
          header-align="center"
          align="center"
          label="收回时间">
        </el-table-column>
        <el-table-column
          prop="annualState"
          header-align="center"
          align="center"
          width="150"
          label="回收状态">
          <template slot-scope="scope">
            <div v-if="scope.row.annualState === 0">
              <el-button type="text" size="small" @click="reclaimInfo(scope.row)">点击回收</el-button>
            </div>
            <div v-else>已回收</div>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="hjgNDShow"
        :data="hjgNDList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="annualYear"
          header-align="center"
          align="center"
          label="年度">
        </el-table-column>
        <el-table-column
          prop="annualName"
          header-align="center"
          align="center"
          label="名称">
          <template slot-scope="scope">
            <template v-if="scope.row.annualName===0">
              支出明细表
            </template>
            <template v-else>
              收支总结表
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="annualEndtime"
          header-align="center"
          align="center"
          label="收回时间">
        </el-table-column>
        <el-table-column
          prop="annualState"
          header-align="center"
          align="center"
          width="150"
          label="回收状态">
          <template slot-scope="scope">
            <div v-if="scope.row.annualState === 0">
              <el-button type="text" size="small" @click="reclaimInfo(scope.row)">点击回收</el-button>
            </div>
            <div v-else>已回收</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <el-dialog
      :title="'总结'"
      :visible.sync="zj"
      width="80%"
    >
      <zjInfo ref="addOrUpdateZj" @refreshDataList="getDataList"></zjInfo>
    </el-dialog>
    <el-dialog
      :title="'立项'"
      :visible.sync="lx"
      width="80%"
    >
      <lxInfo ref="addOrUpdateLx" @refreshDataList="getDataList"></lxInfo>
    </el-dialog>
    <el-dialog
      :title="'合同'"
      :visible.sync="ht"
      width="80%"
    >
      <htInfo ref="addOrUpdateHt" @refreshDataList="getDataList"></htInfo>
    </el-dialog>
    <el-dialog
      :title="'收支总结'"
      :visible.sync="sz"
      width="80%"
    >
      <szInfo ref="addOrUpdateSz" @refreshDataList="getDataList"></szInfo>
    </el-dialog>
    <el-dialog
      :title="'支出明细'"
      :visible.sync="zc"
      width="80%"
    >
      <zcInfo ref="addOrUpdateZc" @refreshDataList="getDataList"></zcInfo>
    </el-dialog>
    <el-dialog
      :title="'人员'"
      :visible.sync="ry"
      width="90%"
    >
      <ryInfo ref="addOrUpdateRy" @refreshDataList="getDataList"></ryInfo>
    </el-dialog>
  </div>
</template>

<script>
  import AddOrUpdate from './businessapproval-add-or-update'
  import zjInfo from './approval/zjinfo'
  import htInfo from './approval/htinfo'
  import lxInfo from './approval/lxinfo'
  import ryInfo from './approval/ryinfo'
  import szInfo from './approval/szinfo'
  import zcInfo from './approval/zcinfo'
  export default {
    data () {
      return {
        dataForm: {
          key: ''
        },
        dataList: [],
        dataListZj: [],
        dataListLx: [],
        dataListHt: [],
        dataListZc: [], // 支出明细
        dataListSz: [], // 收支总结
        dataListRy: [],
        zj: false,
        lx: false,
        ht: false,
        sz: false,
        zc: false,
        ry: false,
        ryglShow: false,
        lxxxShow: false,
        htxxShow: false,
        zcglShow: false,
        jrzjShow: false,
        szzjbShow: false,
        zcmxbShow: false,
        hdsNDShow: false,
        hjqNDShow: false,
        lxjNDShow: false,
        hjgNDShow: false,
        spShow: false, // 审批
        ndzjShow: false, // 年度总结
        hjgNDList: [], // 侯吉光年度总结
        hdsNDList: [], // 侯德生年度总结
        hjqNDList: [], // 侯吉庆年度总结
        lxjNDList: [], // 李现举年度总结
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate,
      zjInfo,
      htInfo,
      lxInfo,
      szInfo,
      zcInfo,
      ryInfo
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/business/businessapproval/list'),
          method: 'get'
        }).then(({data}) => {
          console.log(data.page)
          if (data && data.code === 0) {
            data.page.forEach((item) => {
              if (item.approvalType === 0) { // 人员
                this.dataListRy.unshift(item)
              } else if (item.approvalType === 1 && item.num !== null) { // 出勤记录
                this.dataListRy.unshift(item)
              } else if (item.approvalType === 2 && item.num !== null) { // 工资账目
                this.dataListRy.unshift(item)
              } else if (item.approvalType === 3) { // 立项
                this.dataListLx.unshift(item)
              } else if (item.approvalType === 4) { // 合同
                this.dataListHt.unshift(item)
              } else if (item.approvalType === 5) { // 总结
                this.dataListZj.unshift(item)
              } else if (item.approvalType === 6) { // 明细表
                this.dataListZc.unshift(item)
              } else if (item.approvalType === 7) { // 总结表
                this.dataListSz.unshift(item)
              }
            })
          } else {
            this.dataList = []
          }
          this.sp()
          this.searchNDList()
          this.dataListLoading = false
        })
      },
      // 年度列表
      searchNDList () {
        this.hjgNDList = [] // 侯吉光年度总结
        this.hdsNDList = [] // 侯德生年度总结
        this.hjqNDList = [] // 侯吉庆年度总结
        this.lxjNDList = [] // 李现举年度总结
        // 获取年度总结列表信息
        this.$http.request({
          url: this.$http.adornUrl('/business/businessannual/list'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data);
            data.page.forEach((item) => { // 传入的是所有人的总结表需要转化
              if (item.name === '侯德生') {
                this.hdsNDList.push(item)
              } else if (item.name === '侯吉庆') {
                this.hjqNDList.push(item)
              } else if (item.name === '李现举') {
                this.lxjNDList.push(item)
              } else if (item.name === '侯吉光') {
                this.hjgNDList.push(item)
              }
            })
          }
        })
      },
      sp () {
        this.spShow = true
        this.ndzjShow = false
        this.jrzj()
      },
      nd () {
        this.spShow = false
        this.ndzjShow = true
        this.hdsNDZJ()
      },
      // 审批
      rygl () {
        this.ryglShow = true
        this.lxxxShow = false
        this.htxxShow = false
        this.zcglShow = false
        this.jrzjShow = false
      },
      lxgl () {
        this.ryglShow = false
        this.lxxxShow = true
        this.htxxShow = false
        this.zcglShow = false
        this.jrzjShow = false
      },
      htxx () {
        this.ryglShow = false
        this.lxxxShow = false
        this.htxxShow = true
        this.zcglShow = false
        this.jrzjShow = false
      },
      zcgl () {
        this.ryglShow = false
        this.lxxxShow = false
        this.htxxShow = false
        this.zcglShow = true
        this.jrzjShow = false
        this.szzjb()
      },
      jrzj () {
        this.ryglShow = false
        this.lxxxShow = false
        this.htxxShow = false
        this.zcglShow = false
        this.jrzjShow = true
      },
      szzjb () {
        this.szzjbShow = true
        this.zcmxbShow = false
      },
      zcmxb () {
        this.szzjbShow = false
        this.zcmxbShow = true
      },
      // 年度总结s
      hdsNDZJ () { // 生
        this.hdsNDShow = true
        this.hjqNDShow = false
        this.lxjNDShow = false
        this.hjgNDShow = false
      },
      hjqNDZJ () { // 庆
        this.hdsNDShow = false
        this.hjqNDShow = true
        this.lxjNDShow = false
        this.hjgNDShow = false
      },
      lxjNDZJ () { // 举
        this.hdsNDShow = false
        this.hjqNDShow = false
        this.lxjNDShow = true
        this.hjgNDShow = false
      },
      hjgNDZJ () { // 光
        this.hdsNDShow = false
        this.hjqNDShow = false
        this.lxjNDShow = false
        this.hjgNDShow = true
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 回收年度表
      reclaimInfo (item) {
        this.$http.request({
          url: this.$http.adornUrl('/business/businessannual/update'),
          method: 'post',
          body: this.$http.adornData({
            'id': item.id,
            'annualName': item.annualName,
            'annualYear': item.annualYear,
            'annualState': 1
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data);
          }
        })
        this.searchNDList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      /* deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/business/businessapproval/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      } */
      goToZj (id) {
        this.zj = true
        this.$nextTick(() => {
          this.$refs.addOrUpdateZj.getDataList(id)
        })
      },
      goToLx (id) {
        this.lx = true
        this.$nextTick(() => {
          this.$refs.addOrUpdateLx.getDataList(id)
        })
      },
      goToHt (id) {
        this.ht = true
        this.$nextTick(() => {
          this.$refs.addOrUpdateHt.getDataList(id)
        })
      },
      goToSz (param) {
        this.sz = true
        this.$nextTick(() => {
          this.$refs.addOrUpdateSz.getDataList(param.id, param.approvalApply)
        })
      },
      goToZc (param) {
        console.log(param)
        this.zc = true
        this.$nextTick(() => {
          this.$refs.addOrUpdateZc.getDataList(param.id, param.approvalApply)
        })
      },
      goToRy (id) {
        console.log(id)
        this.ry = true
        this.$nextTick(() => {
          this.$refs.addOrUpdateRy.getDataList(id)
        })
      }
    }
  }
</script>
