<template>
  <div>
    <el-row class="handle-box" style="margin-bottom: 10px">
      <el-col :span="24">
<!--        <el-input v-model="cusName" placeholder="客户/商机名称" size="small" class="ch-input ch-input-size" @keyup.enter.native="handleSearch()" />-->
        <el-input v-model="proName" placeholder="客户/商机名称" size="small" class="ch-input ch-input-size" @keyup.enter.native="handleSearch()" />
        <el-select v-model="auditStatus" placeholder="审核结果" size="small">
          <el-option
            v-for="item in dc_flow_status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="auditType" placeholder="流程来源" size="small">
          <el-option
            v-for="item in AUDIT_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="applyBy" placeholder="申请人" size="small">
          <el-option
            v-for="item in UserData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button class="ch-button-warning" size="small"  @click="handleReset()"><i class="el-icon-refresh" />&nbsp;重置</el-button>
        <el-button class="ch-button" size="small" @click="handleSearch()"><i class="el-icon-search" />&nbsp;搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="handle-box">
      <el-col :span="24">
        <el-table v-loading="loading" :data="AllData" stripe row-class-name="g_table_row">
          <el-table-column type="index" width="60" />
          <el-table-column label="流程来源" prop="auditType" />
          <el-table-column label="商机名称" prop="proName" />
          <el-table-column label="客户名称" prop="cusName" />
          <el-table-column label="申请人" prop="applyBy" />
          <el-table-column label="申请日期" prop="createdAt" />
          <el-table-column label="审核日期" prop="updatedAt" />
          <el-table-column label="审核结果" prop="auditStatus" />
          <el-table-column label="操作" header-align="center" align="center" width="120">
            <template scope="scope">
              <el-button size="mini" type="primary" @click="handleAudit(scope.row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-page">
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            background
            layout="total, prev, pager, next"
            :total="allpage"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="70%" top="50px">
      <audit-detail :audit-id="currAuditId" @handleAuditClose="handleAuditClose" @handleAuditCommit="handleAuditCommit" />
    </el-dialog>
  </div>
</template>
<script>
import channel from '../../static/utils/channel'
import Constant from '../../static/utils/constant'
import AuditDetail from './comps/AuditDetail'
import common from '@/static/utils/common'

export default {
    name: 'PendingAudit',
    components: {
        AuditDetail
    },
    data() {
        return {
            // 通用字典项
            dc_flow_status: Constant.dc_flow_status,
            AUDIT_TYPE: [],
            dc_map: {},
            // 列表相关
            cusName: '',
            auditStatus: '',
            auditType: '',
            proName: '',
            applyBy: '',
            AllData: [],
            loading: false,
            UserData: [],
            UserMap: {},
            // 分页
            currentPage: 1,
            allpage: 0,
            pageSize: 12,
            // 弹框相关
            currAuditId: '',
            dialogVisible: false,
            dialogTitle: '新增',
            isAdd: true,
            detailList: [],
            rules: {}
        }
    },
    mounted() {
        this.generateDcMap()
        this.initUser().then(() => {
            this.getData()
        })
    },
    methods: {
        handleAuditCommit: function() {
            this.getData()
            this.dialogVisible = false
        },
        handleAuditClose: function() {
            this.dialogVisible = false
        },
        getData: function() {
            const _this = this
            _this.loading = true
            _this.AllData = []

            const postData = {
                cusName: _this.cusName,
                auditStatus: _this.auditStatus,
                auditType: _this.auditType,
                referenceContent: _this.proName,
                applyBy: _this.applyBy,
                currAuditBy: _this.$common.currUser() ? _this.$common.currUser().id : '',
                pageNum: _this.currentPage,
                pageSize: _this.pageSize
            }
            const currUser = _this.$common.currUser()
            if (currUser && currUser.groupId) {
                postData.groupId = common.currUser().groupId
            }
            this.baseRequest('list', postData).then((res) => {
                if (res.data.rows) {
                    res.data.rows.forEach(function(item) {
                        const json = {
                            auditType: _this.dc_map.AUDIT_TYPE[item.auditType],
                            auditStatus: _this.dc_map.dc_flow_status[item.auditStatus],
                            applyBy: _this.UserMap[item.applyBy],
                            createdAt: _this.$common.transDate(item.createdAt, Constant.DATE_PATTERN.DATE_TIME_h),
                            updatedAt: _this.$common.transDate(item.updatedAt, Constant.DATE_PATTERN.DATE_TIME_h),
                            id: item.id
                        }

                        const referenceContent = _this.$common.castEval(item.referenceContent)
                        if (referenceContent) {
                            json.proName = referenceContent.proName
                            json.cusName = referenceContent.cusName
                        }

                        _this.AllData.push(json)
                    })
                    _this.allpage = res.data.total
                }
                _this.loading = false
            }).catch(() => {
            })
        },
        handleSearch: function() {
            this.getData()
        },
        handleReset: function() {
            this.cusName = ''
            this.auditStatus = ''
            this.auditType = ''
            this.proName = ''
            this.applyBy = ''
        },
        /* 编辑*/
        handleAudit: function(val) {
            this.isAdd = false
            this.dialogVisible = true
            this.dialogTitle = '申请详情'
            this.currAuditId = val.id
        },
        confirmSubmit: function() {
        },
        /* 删除*/
        handleDel: function(val) {
            const _this = this
            _this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function() {
                const deleting = _this.$notify({
                    title: '正在删除,请稍等',
                    type: 'warning'
                })
                _this.baseRequest('remove/' + val.id, '').then((res) => {
                    _this.getData()
                    deleting.close()
                    _this.$notify({
                        title: '删除成功',
                        type: 'info'
                    })
                }).catch((err) => {
                    deleting.close()
                    _this.$alert(err)
                })
            }).catch(function(error) {
                console.error(error)
            })
        },
        /* 分页设定*/
        handleSizeChange: function(val) {
            this.currentPage = val
            this.getData()
        },
        handleCurrentChange: function(val) {
            this.currentPage = val
            this.getData()
        },
        /* 辅助相关*/
        initUser: function() {
            const _this = this
            this.UserData = []
            this.UserMap = {}
            return channel.globleRequest('SysUserExtendController', 'listAll', '', 'Pending Audit').then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = {
                            label: item.truename,
                            value: item.id
                        }
                        _this.UserData.push(json)
                        _this.UserMap[json.value] = json.label
                    })
                }
            }).catch(() => {
            })
        },
        generateDcMap: function() {
            this.AUDIT_TYPE = []
            for (const key in Constant.AUDIT_TYPE) {
                const json = {
                    label: Constant.AUDIT_TYPE[key].name,
                    value: Constant.AUDIT_TYPE[key].key
                }
                this.AUDIT_TYPE.push(json)
            }
            this.dc_map['dc_flow_status'] = this.$common.transDcMap(Constant.dc_flow_status)
            this.dc_map['AUDIT_TYPE'] = this.$common.transDcMap(this.AUDIT_TYPE)
        },
        addRecord: function(postData, isRefresh) {
            return this.opRecord(postData, 'add', isRefresh)
        },
        updateRecord: function(postData, isRefresh) {
            return this.opRecord(postData, 'edit', isRefresh)
        },
        opRecord: function(postData, soaUrl, isRefresh) {
            console.log('postData/soaUrl/isRefresh', postData, soaUrl, isRefresh)
            if (isRefresh === undefined) {
                isRefresh = true
            }
            const _this = this
            const acting = this.$notify({
                title: '正在处理,请稍等',
                type: 'warning'
            })
            return this.baseRequest(soaUrl, postData).then((res) => {
                acting.close()
                if (isRefresh) {
                    _this.getData()
                    _this.dialogVisible = false
                    _this.$notify({
                        title: '处理成功',
                        type: 'info'
                    })
                }
            }).catch((err) => {
                acting.close()
                _this.$alert(err)
            })
        },
        baseRequest(opUrl, postData) {
            return channel.globleRequest('FlowAuditController', opUrl, postData, 'project')
        }

    }
}
</script>

<style scoped>
    .ch-input .el-input__inner {
        border-radius: 0px;
        border-color: #32323A;
    }
    .ch-input-size {
        width: 150px;
    }
    .ch-button {
        border-radius: 0px;
        border-color: #32323A;
        background-color: #32323A;
        color: #fff;
    }
    .ch-button-warning {
        margin-left: 10px;
        border-radius: 0px;
        border-color: #E75B5B;
        background-color: #E75B5B;
        color: #fff;
    }
</style>
