<!--
  @description: 京能-机构审核列表
  @author:张慢慢
  @routerPath:/systemManagement/organizationAudit
  @date： 2020-11-13 11:14
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :search-form="searchForm"
      search-label-width="110px"
      @on-load="loadData"
    >
      <template v-slot:header>
        机构审核列表
      </template>
      <template v-slot:search="search">
        <el-form-item ref="departRoleName" label="审批类型" prop="departRoleName">
          <el-select v-model="searchForm.departRoleName" filterable placeholder="请选择" style="width:220px">
            <el-option
              v-for="item in departRoleNameList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item ref="departName" label="机构名称" prop="departName">
          <el-input
            v-model.trim="searchForm.departName"
            style="width:220px"
            placeholder="机构名称"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item ref="packName" label="提交时间" prop="packName">
          <el-date-picker
            v-model="searchForm.startDate"
            :format="elValueFormatDate"
            :value-format="elValueFormatDate"
            type="date"
            placeholder="开始日期"
          />
          至
          <el-date-picker
            v-model="searchForm.endDate"
            :format="elValueFormatDate"
            :value-format="elValueFormatDate"
            type="date"
            placeholder="结束日期"
          />
        </el-form-item>
      </template>
      <template v-slot:GXTable>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          />
          <el-table-column
            prop="departRoleName"
            label="审批类型"
            width="100"
          >
            <template slot-scope="scope">
              {{ filterDictText(departRoleNameList,scope.row.departRoleName) }}
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="departName"
            label="机构名称"
            min-width="230"
          />
          <el-table-column
            header-align="center"
            prop="linker"
            label="联系人"
            width="110"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.linker.linkname }}
            </template>
          </el-table-column>
          <el-table-column
            label="提交时间"
            prop="createDate"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              {{ scope.row.createDate && $Moment(scope.row.createDate).format(momentDateTime) }}
            </template>
          </el-table-column>
          <el-table-column
            label="审核状态"
            prop="createTime"
            align="center"
            min-width="140"
          >
            <template slot-scope="scope">
              {{ filterDictText(auditStatusList,scope.row.auditStatus) }}
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            label="操作"
            width="140"
            align="center"
          >
            <template slot-scope="scope">
              <el-link v-if="scope.row.auditStatus === '00'" type="primary" @click.stop="modifyRule(scope.row)">
                [审核]
              </el-link>
              <template v-else>
                <el-link type="primary" @click.stop="toDetail(scope.row)">
                  [查看]
                </el-link>
                <el-link type="primary" @click.stop="showUsers(scope.row)">
                  [查看成员]
                </el-link>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <userDialog v-if="dialogUser.dialog" :dialog-data="dialogUser" />
  </div>
</template>

<script>
/* 接口*/
import { getAuditList } from '@/api/common/user' // 审核列表
/* 公用方法*/
import { filterDictText } from '@/assets/js/utils'// 常用方法
/* 混合方法 */
import { organizationGroupMixin } from '../mixins/organizationGroupMixin'
import userDialog from './user-dialog.vue'
export default {
  name: 'OrganizationAudit',
  components: {
    userDialog
  },
  mixins: [organizationGroupMixin],
  data() {
    return {
      loading: true,
      // 搜索
      searchForm: {
        // auditStatus: '00', // 审核状态 00待审核 01审核通过 02未审核通过
        departRoleName: '', // 审批类型
        departName: '', // 部门名称
        startDate: '', // 开始时间
        endDate: '' // 结束时间
      },
      tableData: [],
      dialogUser: {
        dialog: false,
        departId: ''
      }
    }
  },
  created() {
    this.getGroup(['auditStatus', 'departRoleName'])
  },
  methods: {
    filterDictText,
    // 获取数据
    loadData(params, callback) {
      getAuditList(params).then(response => {
        this.loading = false
        this.tableData = response.data.results
        callback(response.data.total)
      }).catch(() => {
        this.loading = false
      })
    },
    // 修改规则
    modifyRule(row) {
      this.$router.push({
        name: 'OrganizationAuditDetail',
        params: {
          departId: row.departId, // 机构id
          departInfoId: row.id, // 用户ID
          rolCode: row.departRoleName // 类型
        }
      })
    },
    // 查看详情
    toDetail(row) {
      this.$router.push({
        name: 'OrganizationAuditDetail',
        params: {
          departId: row.departId, // 机构id
          departInfoId: row.id, // 用户ID
          rolCode: row.departRoleName // 类型
        },
        query: {
          isOnlyShow: true
        }
      })
    },
    // 查看成员
    showUsers(row) {
      this.dialogUser.departId = row.departId
      this.dialogUser.dialog = true
    }
  }
}
</script>

<style scoped>

</style>
