<template>

    <BaseContainer class="inspectionManagement">
        <template slot="title-container">
            <el-row>
                <el-col :span="12">
                    <h3>{{ $t('trials:tab:inspectionManagement') }}</h3>
                </el-col>
                <el-col :span="12" style="text-align:right;">
                    <h3>
                        <Pagination class="page" :total="total" :page.sync="searchData.pageIndex"
                            :limit.sync="searchData.pageSize" layout="total, sizes, prev, pager, next"
                            :background="false" style="display: inline-block;" @pagination="getList" />
                        <el-button icon="el-icon-refresh-left" size="small" circle :title="$t('common:button:reset')"
                            @click="handleReset" />
                    </h3>
                </el-col>
            </el-row>
        </template>
        <template slot="search-container">
            <el-form :inline="true">
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:table:CompanyName')">
                    <el-input v-model="searchData.CompanyName" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:table:AuditContent')">
                    <el-input v-model="searchData.AuditContent" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:table:AuditType')">
                    <el-select v-model="searchData.AuditType" placeholder="" clearable>
                        <el-option v-for="item in $d.AuditType" :key="item.id" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:table:IdentityUserName')">
                    <el-input v-model="searchData.IdentityUserName" clearable placeholder=""></el-input>
                </el-form-item>
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:table:IsViewTrainingRecord')">
                    <el-select v-model="searchData.IsViewTrainingRecord" placeholder="" clearable>
                        <el-option v-for="item in $d.YesOrNo" :key="item.id" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:table:auditTime')">
                    <el-date-picker v-model="auditTime" type="daterange" range-separator="-"
                        :start-placeholder="$t('imageInspect:daterange:startPlaceholder')"
                        :end-placeholder="$t('imageInspect:daterange:endPlaceholder')" value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd" clearable>
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:table:viewTime')">
                    <el-date-picker v-model="viewTime" type="datetimerange" range-separator="-"
                        :start-placeholder="$t('curriculumVitae:daterange:startTime')"
                        :default-time="['00:00:00', '23:59:59']"
                        :end-placeholder="$t('curriculumVitae:daterange:endTime')" value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss" clearable>
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:table:createTime')">
                    <el-date-picker v-model="createTime" type="daterange" range-separator="-"
                        :start-placeholder="$t('curriculumVitae:daterange:startTime')"
                        :end-placeholder="$t('curriculumVitae:daterange:endTime')" value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd" clearable>
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">
                        {{ $t('common:button:search') }}
                    </el-button>
                    <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
                        {{ $t('common:button:reset') }}
                    </el-button>
                    <el-button type="primary" @click="openForm('add', {})">
                        {{ $t('common:button:new') }}
                    </el-button>
                </el-form-item>
            </el-form>
        </template>
        <template slot="main-container">
            <el-table id="auditDocumentTable" ref="auditDocumentTable" :data="tableData" style="width: 99%" row-key="Id"
                :loading="loading" v-adaptive="{ bottomOffset: 75 }" height="100" @sort-change="handleSortChange">
                <el-table-column type="index" width="50" />
                <el-table-column prop="CompanyName" show-overflow-tooltip
                    :label="$t('trials:trials-workbench:inspectionManagement:table:CompanyName')" sortable="custom">
                </el-table-column>
                <el-table-column prop="AuditContent" show-overflow-tooltip
                    :label="$t('trials:trials-workbench:inspectionManagement:table:AuditContent')" sortable="custom">
                </el-table-column>
                <el-table-column prop="AuditType" show-overflow-tooltip
                    :label="$t('trials:trials-workbench:inspectionManagement:table:AuditType')" sortable="custom">
                    <template slot-scope="scope">
                        <span>{{ $fd('AuditType', scope.row.AuditType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="identityUserList" show-overflow-tooltip
                    :label="$t('trials:trials-workbench:inspectionManagement:table:IdentityUserName')">
                    <template slot-scope="scope">
                        <el-button v-if="Array.isArray(scope.row.IdentityUserList)" type="text"
                            @click="openUserList(true, scope.row)">
                            {{scope.row.IdentityUserList.map(item => item.FullName).join(", ")}}
                        </el-button>
                        <!-- <span>
                        {{Array.isArray(scope.row.IdentityUserList) ?
                            scope.row.IdentityUserList.map(item => item.FullName).join(", ") :
                            ''}}
                    </span> -->
                    </template>
                </el-table-column>
                <el-table-column prop="IsViewTrainingRecord" show-overflow-tooltip
                    :label="$t('trials:trials-workbench:inspectionManagement:table:IsViewTrainingRecord')"
                    sortable="custom">
                    <template slot-scope="scope">
                        <span>{{ $fd('YesOrNo', scope.row.IsViewTrainingRecord) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="AuditTime" show-overflow-tooltip
                    :label="$t('trials:trials-workbench:inspectionManagement:table:auditTime')" sortable="custom">
                </el-table-column>
                <el-table-column prop="BeginTime" show-overflow-tooltip
                    :label="$t('trials:trials-workbench:inspectionManagement:table:viewTime')">
                    <template slot-scope="scope">
                        <span>{{ `${scope.row.BeginTime} - ${scope.row.EndTime}` }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="AuditState" show-overflow-tooltip
                    :label="$t('trials:trials-workbench:inspectionManagement:table:AuditState')" sortable="custom">
                    <template slot-scope="scope">
                        <span>{{ $fd('AuditState', scope.row.AuditState) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="CreateTime" show-overflow-tooltip
                    :label="$t('trials:trials-workbench:inspectionManagement:table:createTime')" sortable="custom">
                </el-table-column>
                <el-table-column :label="$t('common:action:action')" width="260" align="left" fixed="right">
                    <template slot-scope="scope">
                        <el-button circle icon="el-icon-view"
                            :title="$t('trials:trials-workbench:inspectionManagement:button:viewDocument')"
                            @click="openDoc(false, scope.row)" />
                        <el-button circle icon="el-icon-edit-outline"
                            :title="$t('trials:trials-workbench:inspectionManagement:button:editDocument')"
                            @click="openDoc(true, scope.row)" />
                        <el-button circle icon="el-icon-user"
                            :title="$t('trials:trials-workbench:inspectionManagement:button:user')"
                            @click="openUserList(false, scope.row)" />
                        <el-button circle icon="el-icon-edit" :title="$t('common:button:edit')"
                            @click="openForm('edit', scope.row)" />
                        <el-button circle icon="el-icon-delete" :title="$t('common:button:delete')"
                            :disabled="scope.row.AuditState > 0" @click="del(scope.row)" />
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <dataForm v-if="fromVisible" :visible.sync="fromVisible" :rowData="rowData" :state="state" @getList="getList" />
        <document v-if="docVisible" :visible.sync="docVisible" :isAudit="isAudit" :AuditRecordId="AuditRecordId" />
        <base-model :config="config">
            <template slot="dialog-body">
                <userList v-if="config.visible" :AuditRecordId="AuditRecordId" :isView="isView" @close="close"
                    @getList="getList" />
            </template>
        </base-model>
    </BaseContainer>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getAuditRecordList, deleteAuditRecord } from '@/api/trials'
import dataForm from "./dataForm.vue"
import document from "./document.vue"
import userList from './userList'
import baseModel from '@/components/BaseModel'
import BaseContainer from '@/components/BaseContainer'
const searchDataDefault = () => {
    return {
        CompanyName: '',
        AuditContent: "",
        AuditType: "",
        IdentityUserName: '',
        BeginAuditTime: '',
        EndAuditTime: '',
        BeginTime: '',
        EndTime: '',
        BeginCreateTime: '',
        EndCreateTime: '',
        IsViewTrainingRecord: '',
        PageIndex: 1,
        PageSize: 20,
        Asc: false,
        SortField: ''
    }
}
export default {
    name: "inspectionManagement",
    components: { Pagination, dataForm, document, userList, baseModel, BaseContainer },
    data() {
        return {
            searchData: searchDataDefault(),
            total: 0,
            Id: null,
            loading: false,
            tableData: [],
            auditTime: [],
            viewTime: [],
            createTime: [],

            visible: false, // 属性详情弹框

            rowData: {},
            fromVisible: false,
            state: 'add',

            docVisible: false,
            isAudit: false,
            AuditRecordId: null,

            config: {
                visible: false,
                title: this.$t('trials:trials-workbench:inspectionManagement:dialogTitle:selectUser'),
                width: '1200px',
            },
            isView: false,

        }
    },
    created() {
        this.getList()
    },
    methods: {
        async del(row) {
            try {
                let confirm = await this.$confirm(this.$t("trials:trials-workbench:inspectionManagement:confirm:del"))
                if (!confirm) return false
                this.loading = true
                let res = await deleteAuditRecord(row.Id)
                this.loading = false
                if (res.IsSuccess) {
                    this.getList()
                    this.$message.success(this.$t("common:message:deletedSuccessfully"))
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        close() {
            this.config.visible = false
        },
        openUserList(isView = false, row) {
            this.isView = isView
            this.AuditRecordId = row.Id
            this.config.visible = true
        },
        openDoc(isAudit = false, row) {
            this.AuditRecordId = row.Id
            this.isAudit = isAudit
            this.docVisible = true
        },
        openForm(state, row) {
            this.rowData = Object.assign({}, row)
            this.state = state
            this.fromVisible = true
        },
        async getList() {
            try {
                if (Array.isArray(this.auditTime) && this.auditTime.length === 2) {
                    this.searchData.BeginAuditTime = this.auditTime[0]
                    this.searchData.EndAuditTime = this.auditTime[1]
                } else {
                    this.searchData.BeginAuditTime = ''
                    this.searchData.EndAuditTime = ''
                }
                if (Array.isArray(this.viewTime) && this.viewTime.length === 2) {
                    this.searchData.BeginTime = this.viewTime[0]
                    this.searchData.EndTime = this.viewTime[1]
                } else {
                    this.searchData.BeginTime = ''
                    this.searchData.EndTime = ''
                }
                if (Array.isArray(this.createTime) && this.createTime.length === 2) {
                    this.searchData.BeginCreateTime = this.createTime[0]
                    this.searchData.EndCreateTime = this.createTime[1]
                } else {
                    this.searchData.BeginCreateTime = ''
                    this.searchData.EndCreateTime = ''
                }
                this.loading = true
                let res = await getAuditRecordList(this.searchData)
                this.loading = false
                if (res.IsSuccess) {
                    this.tableData = res.Result.CurrentPageData
                    this.total = res.Result.TotalCount
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        handleReset() {
            this.searchData = searchDataDefault()
            this.auditTime = []
            this.viewTime = []
            this.createTime = []
            this.getList()
        },
        handleSearch() {
            this.getList()
        },
        // 排序
        handleSortChange(column) {
            if (column.order === 'ascending') {
                this.searchData.Asc = true
            } else {
                this.searchData.Asc = false
            }
            this.searchData.SortField = column.prop
            this.searchData.PageIndex = 1
            this.getList()
        },
    }
}
</script>
<style lang="scss" scoped></style>