<template>
  <browser :component-loading="componentLoading"
           :api-config="apiConfig"
           :table-config="tableConfig"
           :permissions="permissions"
           :dialog-config="dialogConfig"
           :actions="actions"
           :custom-query="true"
           @custom-query="handleQuery"
           @update:dialog-config="dialogConfig = $event"
           @update:actions="actions = $event">
    <template #queryPanel="{ queryParams: query }">
      <el-form ref="queryForm" :model="query" label-width="100px">
        <el-row class="query-condition">
          <el-col :span="6">
            <el-form-item label="案件名称" prop="industryType">
              <el-input v-model="query.caseName" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="立案日期" prop="fillingDate">
              <el-date-picker
                  v-model="query.fillingDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <el-table-column label="决定书编号" prop="caseNum" min-width="200"></el-table-column>
    <el-table-column label="案件名称" prop="caseName" min-width="500"></el-table-column>
    <el-table-column label="立案时间" prop="fillingDate" min-width="120"></el-table-column>
    <el-table-column label="承办人" prop="caseHandler" min-width="120"></el-table-column>
    <el-table-column label="填报人" prop="supplement.tbr" min-width="120"></el-table-column>
    <el-table-column label="填报时间" prop="supplement.tbsj" min-width="120"></el-table-column>
    <template #tableControlColumn="{ data: r }">
      <el-link type="primary" @click="handleDetail(r.data.row)" title="审核">审核</el-link>
    </template>
    <template #dialogContent="{ dialogConfig: dialog }">
      <el-divider content-position="left">案件基本信息</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="决定书编号:" prop="caseNum">
            {{ dialog.data.caseNum }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="案件名称:" prop="caseName">
            {{ dialog.data.caseName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="承办机构:" prop="agencyName">
            {{ dialog.data.enforcementInfo.agency.agencyName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业名称:" prop="unitName">
            {{ dialog.data.enforcementInfo.enterprise.unitName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">填报内容</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="违法行为数量" prop="wfxwsl">
            <el-input v-model="dialog.data.supplement.wfxwsl" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否一案双罚" prop="sfyasf">
            <el-select v-model="dialog.data.supplement.sfyasf" placeholder="请选择" disabled>
              <el-option label="否" :value="0">否</el-option>
              <el-option label="是" :value="1">是</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="罚款总额（万元）" prop="fkze">
            <el-input v-model="dialog.data.supplement.fkze" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="处罚企业（万元）" prop="cfqy">
            <el-input v-model="dialog.data.supplement.cfqy" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="处罚个人（万元）" prop="cfgr">
            <el-input v-model="dialog.data.supplement.cfgr" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否移交" prop="sfyj">
            <el-select v-model="dialog.data.supplement.sfyj" placeholder="请选择" disabled>
              <el-option label="否" :value="0">否</el-option>
              <el-option label="是" :value="1">是</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行刑衔接涉及人数" prop="sjrys">
            <el-input v-model="dialog.data.supplement.sjrys" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否约谈" prop="sfyt">
            <el-select v-model="dialog.data.supplement.sfyt" placeholder="请选择" disabled>
              <el-option label="否" :value="0">否</el-option>
              <el-option label="是" :value="1">是</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="约谈人数" prop="ytrs">
            <el-input v-model="dialog.data.supplement.yttbzzrs" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="约谈人类型" prop="ytrlx">
            <el-input v-model="dialog.data.supplement.yttbzzrrlx" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否通报" prop="sftb">
            <el-select v-model="dialog.data.supplement.sftb" placeholder="请选择" disabled>
              <el-option label="否" :value="0">否</el-option>
              <el-option label="是" :value="1">是</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="通报人数" prop="tbrs">
            <el-input v-model="dialog.data.supplement.tbrs" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否责令停产整顿" prop="sfzltczd">
            <el-select v-model="dialog.data.supplement.sfzltczd" placeholder="请选择" disabled>
              <el-option label="否" :value="0">否</el-option>
              <el-option label="是" :value="1">是</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否暂扣证照" prop="sfzkzz">
            <el-select v-model="dialog.data.supplement.sfzkzz" placeholder="请选择" disabled>
              <el-option label="否" :value="0">否</el-option>
              <el-option label="是" :value="1">是</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否关闭" prop="sfgb">
            <el-select v-model="dialog.data.supplement.sfgb" placeholder="请选择" disabled>
              <el-option label="否" :value="0">否</el-option>
              <el-option label="是" :value="1">是</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否复议" prop="sffy">
            <el-select v-model="dialog.data.supplement.sffy" placeholder="请选择" disabled>
              <el-option label="否" :value="0">否</el-option>
              <el-option label="是" :value="1">是</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="复议结果" prop="fyjg">
            <el-input v-model="dialog.data.supplement.fyjg" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否诉讼" prop="sfss">
            <el-select v-model="dialog.data.supplement.sfss" placeholder="请选择" disabled>
              <el-option label="否" :value="0">否</el-option>
              <el-option label="是" :value="1">是</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="诉讼结果" prop="ssjg">
            <el-input v-model="dialog.data.supplement.ssjg" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="填报人" prop="tbr">
            <el-input v-model="dialog.data.supplement.tbr" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="填报时间" prop="tbsj">
            <el-input v-model="dialog.data.supplement.tbsj" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-divider content-position="left">审核信息</el-divider>
        <el-col :span="8">
          <el-form-item label="审核结果" prop="supplementVerifyResult">
            <el-select v-model="dialog.data.supplementVerifyResult" placeholder="请选择">
              <el-option label="不通过" :value="0">不通过</el-option>
              <el-option label="通过" :value="1">通过</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="审核意见" prop="supplementVerifyDesc">
            <el-input v-model="dialog.data.supplementVerifyDesc"/>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </browser>
</template>
<script setup>
import {reactive, toRefs, getCurrentInstance, watch, computed, ref, nextTick} from 'vue'
import browser from '@/components/Browser.vue'
import caseApi from '@/api/lawenforcement/Case'
import {ElMessage} from 'element-plus'

const state = reactive({
  componentLoading: false,
  queryParams: {},
  permissions: {
    query: true,
    add: false,
    modify: false,
    detail: false,
    delete: false,
    importFile: false,
    exportFile: false,
    exportSelectFile: false,
    downloadTemp: false,
  },
  tableConfig: {
    multipleSelect: false,
    hasControlColumn: true,
    defaultSort: {
      prop: 'fillingDate',
      order: 'desc'
    },
    controlWidth: '100'
  },
  apiConfig: {
    api: caseApi,
    modelId: 'caseId'
  },
  dialogConfig: {
    show: false,
    mode: 'detail',
    title: '立案上报',
    loading: false,
    data: {},
    rules: {
      supplementVerifyResult: [{required: true, message: '审核结果不能为空', trigger: 'blur'}],
      supplementVerifyDesc: [{required: true, message: '审核意见不能为空', trigger: 'blur'}],
    },
    actions: {
      handleDialogOk: handleDialogOk
    },
  },
  actions: {
    detail: handleDetail
  }
})

const {
  componentLoading,
  permissions,
  tableConfig,
  apiConfig,
  dialogConfig,
  actions,
  fileParameters,
  queryParams
} = toRefs(state)

function handleQuery(query) {
  if (query)
    queryParams.value = query
  tableConfig.value.tableLoading = true
  queryParams.value.supplementVerifyResult = "sp"
  apiConfig.value.api.query(queryParams.value).then(res => {
    if (res.success) {
      tableConfig.value.tableData = res
      tableConfig.value.tableLoading = false
    }
  })
}

function handleDetail(row) {
  dialogConfig.value.mode = 'detail'
  dialogConfig.value.title = '案件填报审批'
  dialogConfig.value.data = row
  dialogConfig.value.data.supplementVerifyResult = null
  dialogConfig.value.show = true
}

function handleDialogOk(formRef) {
  formRef.validate(valid => {
    if (valid) {
      let data = Object.assign({}, dialogConfig.value.data)
      dialogConfig.value.loading = true
      caseApi.saveSupplementVerify(data.caseId, data).then(res => {
        if (res.success) {
          ElMessage.success('审核成功')
          dialogConfig.value.loading = false
          dialogConfig.value.show = false
          handleQuery()
        }
      })
    }
  })
}

</script>
<style lang="scss" scoped>
</style>
