<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 label="案件名称" prop="caseName" min-width="350"/>
    <el-table-column label="立案日期" prop="fillingDate" min-width="150"/>
    <el-table-column label="当前节点" prop="enforcementInfo.currentNode" min-width="150"/>
    <el-table-column label="立案人" prop="filedUserName" min-width="150"/>

    <template #tableControlColumn="{ data: r }">
      <el-link type="primary" @click="handleDetail(r.data.row)" title="申辩或听证">申辩或听证</el-link>
    </template>
    <template #dialogContent="{ dialogConfig: dialog }">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="当事人信息" name="1">
          <el-row>
            <el-col :span="8">
              <el-form-item label="执法机构" prop="agencyName">
                <el-input v-model="dialog.data.enforcementInfo.agency.agencyName" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="企业名称" prop="unitName">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.unitName" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="统一信用代码" prop="unifiedSocialCode">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.unifiedSocialCode" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册地址" prop="detailedAddress">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.detailedAddress" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营地址" prop="opLocAddress">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.opLocAddress" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮编" prop="postalCode">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.postalCode" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位联系电话" prop="contactPhone">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.contactPhone" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法人姓名" prop="legalRepresentative">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.legalRepresentative" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法人联系电话" prop="legalPhone">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.legalPhone" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件类型" prop="legalPersonIdType">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.legalPersonIdType" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证件号码" prop="legalPersonIdNumber">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.legalPersonIdNumber" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职务" prop="legalDuty">
                <el-input v-model="dialog.data.enforcementInfo.enterprise.legalDuty" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="案件信息" name="2">
          <el-row>
            <el-col :span="12">
              <el-form-item label="承办机构" prop="agencyName">
                <el-input v-model="dialog.data.enforcementInfo.agency.agencyName" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="案件来源" prop="caseSourceCode">
                <el-input v-model="dialog.data.caseSourceCode" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="案件名称" prop="caseName">
                <el-input v-model="dialog.data.caseName" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="案件号" prop="caseNum">
                <el-input v-model="dialog.data.caseNum" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="案由" prop="caseCause">
                <el-input v-model="dialog.data.caseCause" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="立案时间" prop="fillingDate">
                <el-input v-model="dialog.data.fillingDate" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="执法人员" name="3">
          <el-row>
            <el-col :span="24">
              <el-table :data="dialog.data.evidence.officerList" border>
                <el-table-column header-align="center" align="center" label="执法人员姓名" prop="officerName"
                                 min-width="250"></el-table-column>
                <el-table-column header-align="center" align="center" label="执法证号" prop="certificateNo"
                                 min-width="250"></el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="告知" name="4">
          <el-row>
            <el-col :span="12">
              <el-form-item label="操作人" prop="inform.czr">
                <el-input v-model="dialog.data.inform.czr" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作时间" prop="inform.czsj">
                <el-input v-model="dialog.data.inform.czsj" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="告知时间" prop="inform.gzsj">
                <el-input v-model="dialog.data.inform.gzsj" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="送达方式" prop="inform.gzfs">
                <SimpleEntitySelector :simpleConfig="simpleConfigSsr"
                                      :multiple="false"
                                      v-model="dialog.data.inform.gzfs"
                                      disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="陈述申辩或听证" name="5">
          <el-row>
            <el-col :span="12">
              <el-form-item label="当事人陈述申辩情况" prop="informsbtz.sbqk">
                <el-radio-group v-model="dialog.data.informsbtz.sbqk">
                  <el-radio-button :label="1">是</el-radio-button>
                  <el-radio-button :label="0">否</el-radio-button>
                  <el-radio-button :label="2">不表态</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="dialog.data.informsbtz.sbqk===1">
              <el-form-item label="申辩内容:" prop="informsbtz.sbnr">
                <el-input v-model="dialog.data.informsbtz.sbnr"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否申请听证" prop="sfsqtz">
                <el-radio-group v-model="dialog.data.sfsqtz">
                  <el-radio-button label="1">是</el-radio-button>
                  <el-radio-button label="0">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </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 MultipleFile from "@pages/common/MultipleFile.vue";
import messagesApi from "@/api/lawenforcement/Message.js";
import {ElButton, ElMessage, ElMessageBox} from "element-plus";
import moment from 'moment'
import SimpleEntitySelector from "@/components/SimpleEntitySelector.vue";
import {useUserStore} from "@/stores/modules/user.js";

const userStore = useUserStore()
const activeNames = ref(['1', '2', '5'])
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,
    controlWidth: '140'
  },
  apiConfig: {
    api: caseApi,
    modelId: 'caseId'
  },
  dialogConfig: {
    show: false,
    mode: 'detail',
    title: '案件审理',
    formLabelWidth: '160px',
    loading: false,
    data: {},
    actions: {
      handleDialogOk: handleDialogOk
    },
    rules: {
      'informsbtz.sbqk': [{required: true, message: '申辩情况不能为空', trigger: 'change'}],
      sfsqtz: [{required: true, message: '是否申请听证不能为空', trigger: 'change'}]
    }
  },
  actions: {
    detail: handleDetail
  },
  simpleConfigSsr: {confName: 'method'},
})

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

function handleQuery(query) {
  if (query)
    queryParams.value = query
  tableConfig.value.tableLoading = true
  queryParams.value.status = "inform"//查询审理通过
  apiConfig.value.api.query(queryParams.value).then(res => {
    if (res.success) {
      tableConfig.value.tableData = res
      tableConfig.value.tableLoading = false
    }
  })
}

function handleDetail(row) {
  console.log('DDDD=', row)
  dialogConfig.value.mode = 'detail'
  dialogConfig.value.title = '陈述申辩或听证'
  dialogConfig.value.data = row

  dialogConfig.value.data = Object.assign(dialogConfig.value.data, row)
  if (row.informsbtz === null) {
    dialogConfig.value.data.informsbtz = {czr: userStore.userInfo.xm, czsj: moment().format('YYYY-MM-DD HH:mm:ss')}
  }
  // 判断告知数据是否为空
  if (dialogConfig.value.data?.inform === undefined || dialogConfig.value.data?.inform === null) {
    dialogConfig.value.data.inform = {
      czr: '',
      czsj: '',
      gzsj: '',
      gzfs: '',
      sbqk: '',
      sbnr: '',
      sfsqtz: ''
    }
  }
  // 判断陈述申辩或听证数据是否为空
  if (dialogConfig.value.data?.informsbtz === undefined || dialogConfig.value.data?.informsbtz === null) {
    dialogConfig.value.data.informsbtz = {
      fyxx: '',
      ssxx: ''
    }
  }
  if (dialogConfig.value.data?.evidence === undefined || dialogConfig.value.evidence?.inform === null) {
    dialogConfig.value.data.evidence = {
      officerList: []
    }
  }
  dialogConfig.value.show = true


}

const dialogFormRef = ref(null)

function handleDialogOk(formRef) {
  formRef.validate(valid => {
    if (valid) {
      let data = Object.assign({}, dialogConfig.value.data)
      console.log('提交参数=', data)
      dialogConfig.value.loading = true
      caseApi.informsbtz(data.caseId, data).then(res => {
        if (res.success) {
          ElMessage.success('操作成功')
          dialogConfig.value.loading = false
          dialogConfig.value.show = false
          handleQuery()
        }
      })
    }
  })
}

</script>
<style lang="scss" scoped>
:deep(.el-select__wrapper.is-disabled) {
  background: unset !important;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #606266 !important;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background: unset !important;
}

:deep(.el-input__inner) {
  -webkit-text-fill-color: #606266 !important;
}
</style>
