<!--
 * @description: 案件笔录
 * @fileName: CaseRecord
 * @author: 17076
 * @date: 2024/6/26-下午3:07
 * @version: V1.0.0
-->

<template>
  <div class="record-content">
    <div v-if="isEdit" class="flex-row" style="align-items: center; justify-content: space-between">
      <div>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">添加笔录</el-button>
        <!-- <el-dropdown @command="handleSelect">
          <el-button type="primary" icon="el-icon-circle-plus-outline">添加笔录</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">文档笔录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
        <el-button type="primary" style="margin-left: 16px;" @click="addUser">添加人员</el-button>
      </div>

      <el-input v-model="searchName" placeholder="搜索名称" style="width: 300px" />
    </div>
    <vxe-grid v-bind="gridOptions" style="margin-top: 10px">
      <template #opera="{row}">
        <el-button v-if="row.children.length === 0" type="text" icon="el-icon-video-play" :disabled="!isEdit" title="笔录分析" @click="handleCreateAtlas(row)" />
        <el-button type="text" icon="el-icon-edit" title="编辑" :disabled="!isEdit" @click="handelEdit(row)" />
        <el-button v-if="row.children.length === 0" type="text" icon="el-icon-delete" :disabled="!isEdit" style="color: red" title="删除" @click="handleDel(row)" />
        <el-button v-if="row.children.length === 0" type="text" icon="el-icon-collection" :disabled="!isEdit" title="笔录提取" @click="handleExtract(row)" />

      </template>
      <template #percentage="{row}">
        <div class="per-content">
          <span>{{ row.percentage }}</span>
          <el-badge v-if="row.isPromptUpdate" style="margin-left: 6px;">
            <el-tag type="success">最新</el-tag>
          </el-badge>
        </div>
      </template>
    </vxe-grid>
    <div style="text-align: center">
      <cs-page
        :page.sync="queryForm.page"
        :limit.sync="queryForm.size"
        :total="queryForm.total"
        @pagination="fetchData"
      />
    </div>
    <!--新增用户-->
    <add-case-user ref="addUser" :case-id="caseId" @reloadData="fetchData" />
    <!--选择三元组信息入库-->
    <triplet-info ref="triplet" />
    <!--选择上传方式-->
    <select-upload ref="type" @select="handleSelect" />
    <!--新增/编辑笔录-->
    <edit-record ref="edit" :case-id="caseId" @reloadData="refreshData" />
    <!--选择上传笔录方式-->
    <SelectUploadType ref="SelectUploadTypeRef" @selectOk="handleSelect" />
  </div>
</template>

<script>
import mixin from '@/views/mixin'
import EditRecord from './edit/EditRecord.vue'
import SelectUpload from '@/views/caseDetails/components/edit/SelectUpload.vue'
// import OcrRecord from '@/views/caseDetails/components/edit/OcrRecord.vue'
import TripletInfo from '@/views/caseDetails/components/TripletInfo.vue'
import { queryRecordList, delRecords, redoExtract } from '@/api/caseDetails'
import AddCaseUser from './edit/AddCaseUser.vue'
import { debounce } from '@/utils'
import SelectUploadType from './SelectUploadType.vue'
export default {
  name: 'CaseRecord',
  components: { TripletInfo, SelectUpload, EditRecord, AddCaseUser, SelectUploadType },
  mixins: [mixin],
  props: {
    // 是否编辑
    isEdit: {
      type: Boolean,
      default: false
    },
    // 是否展开
    isExpand: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      searchName: '',
      // 案件id
      caseId: '',
      gridOptions: {
        ...mixin.data().gridOptions,
        columns: [
          { title: '序号', field: 'serialNumber' },
          { title: '姓名', field: 'name', sortable: true },
          // { title: '笔录序号', field: 'recordNum', sortable: true },
          { title: '角色', field: 'roleName' },
          { title: '供述材料', field: 'confessionMaterial' },
          { title: '询问人', field: 'lawAsker' },
          { title: '进度', field: 'percentage', slots: { default: 'percentage' }},
          { title: '供述开始时间', field: 'confessionStartTime' },
          { title: '供述结束时间', field: 'confessionEndTime' },
          { title: '最新时间', field: 'updateTime' },
          { title: '操作', slots: { default: 'opera' }, fixed: 'right', width: '200px' }
        ],
        data: [{ name: '裴金禄', '笔录序号': '1', roleName: '被害人', confessionMaterial: '3', questioner: '1', startTime: '2024/6/26', newDate: '2024/6/26', endTime: '2024/6/26' }]
      }
    }
  },
  watch: {
    isExpand: {
      handler: function(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.tableHeight(this.isExpand ? (this.isEdit ? 580 : 530) : (this.isEdit ? 400 : 320))
        }
      }
    },
    searchName: function() {
      this.debounceSearch(this)
    }
  },
  mounted() {
    this.caseId = this.$route.params.id
    this.$nextTick(() => {
      this.tableHeight(this.isExpand ? (this.isEdit ? 580 : 530) : (this.isEdit ? 400 : 320))
    })
    this.fetchData()
  },
  methods: {
    // 防抖查询数据
    debounceSearch: debounce((_this) => {
      _this.fetchData()
    }),
    // 获取数据
    fetchData() {
      queryRecordList({ name: this.searchName, caseId: this.caseId }, this.queryForm.page, this.queryForm.size).then(res => {
        this.gridOptions.data = res.data.result
        this.gridOptions.data.forEach(e => {
          if (e.percentage == null) {
            e.percentage = '未提取'
          }
        })
        this.queryForm.total = res.data.total
      })
    },
    // 刷新数据
    refreshData() {
      this.fetchData()
      this.$emit('reloadData')
    },
    addUser() {
      this.$refs.addUser.show()
    },
    // 添加笔录
    // handleAdd() {
    //   this.$refs.type.show()
    // },
    // 上传方式选择
    handleAdd() {
      this.$refs.SelectUploadTypeRef.show()
      // val === '1' ? this.$refs.edit.show() : this.$router.push({ path: `/add-record/${this.caseId}`, query: { isEdit: 0 }})
    },
    handleSelect(val) {
      val === '1' ? this.$refs.edit.show() : this.$router.push({ path: `/add-record/${this.caseId}`, query: { caseName: this.$route.params.caseName, caseNo: this.$route.query.caseNo }})
    },
    // 笔录分析
    handleCreateAtlas(row) {
      if (row.percentage === '未提取') {
        this.$baseMessage.error('请先操作笔录提取')
        return
      }
      this.$refs.triplet.show(row)
    },
    // 编辑
    handelEdit(row) {
      if (row.recordType === '1' && row.imgRecordStatus !== '3') {
        this.$router.push({ path: `/edit-record/${this.caseId}/${row.id}`, query: { caseName: this.$route.params.caseName, caseNo: this.$route.query.caseNo, recordId: row.id, imgRecordStatus: row.imgRecordStatus }})
      } else {
        this.$refs.edit.show(row, true)
      }
    },
    // 删除
    handleDel(row) {
      this.$baseConfirm('你确定要删除当前项吗', null, async() => {
        const { code, msg } = await delRecords(row['id'])
        code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除成功!')
        this.fetchData()
      })
    },
    handleExtract(row) {
      if (row.percentage !== '100%' && row.percentage !== '未提取') {
        this.$baseMessage.error('笔录解析任务未完成,请等待!')
        return
      }
      const fileIdList = []
      row.fileList.forEach(e => {
        fileIdList.push(e.fileId)
      })
      const params = {
        caseId: this.caseId,
        name: row.name,
        fileIdList,
        id: row.id
      }
      this.$baseConfirm('你确定要重新提取当前笔录信息吗？笔录提取可能需要10-20分钟，请重新执行【模型分析】获得最新分数。', null, async() => {
        const { code, msg } = await redoExtract(params)
        code === 200 ? this.$baseMessage.success(msg || '提取成功!') : this.$baseMessage.error(msg || '提取成功!')
        this.fetchData()
      })
    }
  }
}
</script>

<style scoped lang="scss">
 .record-content {

 }
</style>
