<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="search" v-show="showSearch">
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item label="课件名称" prop="caseName">
            <el-input v-model="queryParams.caseName" placeholder="请输入课件名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="课件状态" prop="commentAuditStatus">
            <el-select v-model="queryParams.commentAuditStatus" placeholder="全部状态" clearable @clear="handleQuery" @change="handleQuery">
              <el-option v-for="item in _business_caseBaseInfo_type_commentAuditStatus" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所有者" prop="userIds">
            <el-select v-model="userIds" multiple placeholder="请选择所有者" clearable @clear="handleQuery" @change="handleQuery">
              <el-option v-for="item in commentDoctorIdoptions" :key="item.userId" :label="item.userName" :value="item.userId"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery" @clear="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>

    <el-card shadow="never">
      <el-table v-loading="loading" :data="caseBaseInfoList" :cellStyle="cellStyle">
        <el-table-column label="课件编号" align="center" prop="caseId" />
        <el-table-column label="课件名称" align="center" prop="caseName" />
        <el-table-column label="项目" align="center" prop="projectName" />
        <el-table-column label="所有者" align="center" prop="userName" />
        <el-table-column label="点评专家" align="center" prop="commentUseName">
          <template #default="scope">
            {{scope.row.commentUseName  || '/'}}
          </template>
        </el-table-column>
        <el-table-column label="点评时间" align="center" prop="commentTime">
          <template #default="scope">
            {{scope.row.commentTime  || '/'}}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="commentAuditStatus">
          <template #default="scope">
            {{scope.row.commentAuditStatus === '0'?'未审核' :(scope.row.commentAuditStatus === '1'?'审核未通过': '审核通过')}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="205">
          <template #default="scope">
            <!-- 点评审核状态 0未审核 1审核未通过 2审核通过 -->
            <el-tooltip content="下载课件" placement="top">
              <el-button link type="primary" v-hasPermi="['business:auditCaseComment:download']" @click="handleDown(scope.$index)" style="font-size: 12px;">下载课件</el-button>
            </el-tooltip>
            <el-tooltip content="查看点评" placement="top">
              <el-button link type="primary" v-hasPermi="['business:auditCaseComment:viewComment']" @click="viewReason(scope.$index, false)" style="font-size: 12px;">查看点评</el-button>
            </el-tooltip>
            <el-tooltip content="通过" placement="top">
              <el-button link type="primary" v-hasPermi="['business:auditCaseComment:pass']" :disabled="scope.row.commentAuditStatus == '2'" style="font-size: 12px;" @click="handlePass($event, scope.row)">通过</el-button>
            </el-tooltip>
            <el-tooltip content="拒绝" placement="top">
              <el-button link type="primary" v-hasPermi="['business:auditCaseComment:reject']" :disabled="scope.row.commentAuditStatus == '1'" style="font-size: 12px;" @click="handleRefuse(scope.row)">拒绝</el-button>
            </el-tooltip>
            <el-tooltip content="查看原因" placement="top">
              <el-button link type="primary" v-hasPermi="['business:auditCaseComment:rejectReason']" v-if="scope.row.commentAuditStatus == '1'" @click="viewReason(scope.$index, true)" style="font-size: 12px;">查看原因</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 审核不通过课件对话框 -->
    <el-dialog :title="refuseDialog.title" v-model="refuseDialog.visible" width="800px" append-to-body>
      <div class="view_url">
        <div style="margin-bottom:40px;">确认点评内容未满足点评结果请填写修改意见</div>
        <el-input type="textarea" placeholder="请填写修改意见及未通过原因" maxlength="200" show-word-limit v-model="rejectReason"
        @input="(e) => (rejectReason = e.replace(/[^a-zA-Z0-9\u4E00-\u9FA5\,\.\。\，\-\s]/g, ''))" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="hideViewUrlDialog">取 消</el-button>
          <el-button type="primary" @click="refusesubmitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看原因、查看点评对话框 -->
    <el-dialog :title="viewContentDialog.title" v-model="viewContentDialog.visible" width="800px" append-to-body>
      <div class="view_url">
        <el-row :gutter="20" align="middle" v-if="caseBaseInfoList[viewUrlIndex].commentScore" style="margin-bottom: 20px;">
          <el-col :span="6" class="text_left">分数</el-col>
          <el-col :span="18">
            <el-slider v-model="score" show-input disabled></el-slider>
          </el-col>
        </el-row>
        <el-row :gutter="20" align="middle">
          <el-col :span="6" class="text_left">{{ viewContentDialog.isReason ? '审核拒绝原因' : '点评内容' }}</el-col>
          <el-col :span="18" class="text_right">
            {{ viewContentDialog.isReason ? caseBaseInfoList[viewUrlIndex].commentRejectReason :  caseBaseInfoList[viewUrlIndex].commentContent}}
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="() => (viewContentDialog.visible = false)">取 消</el-button>
          <el-button type="primary" @click="() => (viewContentDialog.visible = false)">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 下载课件对话框 -->
    <el-dialog :title="downDialog.title" v-model="downDialog.visible" width="800px" append-to-body>
      <div class="view_url">
        <el-row :gutter="20">
          <el-col :span="6" class="text_left">已上传课件：</el-col>
          <el-col :span="18" class="text_right" style="display: flex;flex-wrap: wrap;">
            <div
              v-for="(item, index) in caseBaseInfoList[downViewUrlIndex].caseFileList"
              :key="index"
              style="display:flex;align-items:center;margin-right: 35px;margin-bottom: 10px;"
            >
              <div>{{item.name}}</div>
              <div style="margin-left:40px;cursor: pointer;color: blue;}" @click="downInfo(item.ossId)">下载</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="() => (downDialog.visible = false)">取 消</el-button>
          <el-button type="primary" @click="() => (downDialog.visible = false)">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="auditCaseComment" lang="ts">
import { listDoctor } from '@/api/business/caseBaseInfo';
import { listAuditCaseCommentInfo, updateAuditCaseCommentInfo } from '@/api/business/auditCaseComment';
import { auditCaseCommentQuery, usualDialogOption } from '@/api/business/auditCaseComment/types';
import { auditCommonVO } from '@/api/business/commentManage/types';
import { Doctoroption } from '@/api/business/caseBaseInfo/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { _business_caseBaseInfo_type_commentAuditStatus } = toRefs<any>(proxy?.canSearchDict('/business/caseBaseInfo/type/commentAuditStatus'));

const caseBaseInfoList = ref<auditCommonVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const userIds = ref<Array<string | number>>([]);
const total = ref(0);
const commentDoctorIdoptions = ref<Doctoroption[]>([]);
const viewUrlIndex = ref(-1);
const downViewUrlIndex = ref(-1);
const queryFormRef = ref<ElFormInstance>();
const score = ref(0)

const id = ref<string | number>('')
const rejectReason = ref<string>()
const refuseDialog = reactive<DialogOption>({
  visible: false,
  title: '点评审核拒绝'
});

const viewContentDialog = reactive<usualDialogOption>({
  visible: false,
  title: '',
  isReason:false
});

const downDialog = reactive<DialogOption>({
  visible: false,
  title: '已上传课件'
});


const initFormData = {};
const data = reactive<PageData<any, auditCaseCommentQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userIds: undefined,
    caseName: undefined,
    commentAuditStatus: undefined,
    params: {}
  },
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);

const hideViewUrlDialog = () => {
  refuseDialog.visible = false;
};

//批量导入-用户状态 文字颜色
const cellStyle = ({ row, column }) => {
  let controlStatusStyle
  switch (row.commentAuditStatus) {
    case '0':
    case '2':
      controlStatusStyle = { 'color': '#67c23a' }
      break;
    case '1':
      controlStatusStyle = { 'color': '#f00' }
      break;
    default:
      controlStatusStyle = { 'color': '#000' }
      break;
  }
  if (column.label == '状态') {
    return controlStatusStyle
  }
}


/** 查询课件基础信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await listAuditCaseCommentInfo(queryParams.value);
  caseBaseInfoList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

const downInfo = (ossId: string) => {
  // window.open(url.replace('http', 'https'));
  proxy?.$download.oss(ossId)
};

/** 获取医生列表 */
const getdoctorList = async () => {
  const res = await listDoctor();
  commentDoctorIdoptions.value = res.data;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  queryParams.value.userIds = userIds.value.join(',')
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  userIds.value = []
  handleQuery();
};

// 打开拒绝审核弹框
const handleRefuse = async (row: auditCommonVO) => {
  id.value = row.id
  refuseDialog.visible = true;
};

/** 拒绝课件操作按钮 */
const refusesubmitForm = async () => {
  if(!rejectReason.value){
    proxy?.$modal.msgWarning('请填写未通过原因及修改意见');
    return
  }
  await proxy?.$modal.confirm('是否拒绝课件点评？').finally(() => (loading.value = false));
  let params = {
    id: id.value,
    commentRejectReason: rejectReason.value,
    commentAuditStatus: '1'
  };
  await updateAuditCaseCommentInfo(params).finally(() => (buttonLoading.value = false));
  proxy?.$modal.msgSuccess('拒绝成功');
  refuseDialog.visible = false;
  await getList();
};

/** 查看拒绝原因 */
const viewReason = async (index: any, isReason:boolean) => {
  viewUrlIndex.value = index;
  viewContentDialog.isReason = isReason
  viewContentDialog.title = isReason ? '查看原因' : '查看点评';
  viewContentDialog.visible = true;
  let tempScore = caseBaseInfoList.value[index].commentScore
  if(tempScore){
    score.value = parseInt(tempScore)
  }
};

/** 下载按钮操作 */
const handleDown = async (index: any) => {
  downViewUrlIndex.value = index;
  downDialog.visible = true;
};

/** 通过课件操作按钮 */
const handlePass = async (event:any, row?: auditCommonVO) => {
  let target = event.target;
  if(target.nodeName == "SPAN"){
   target = event.target.parentNode;
  }
  target.blur();

  await proxy?.$modal.confirm('是否通过课件点评审核？').finally(() => (loading.value = false));
  let params = {
    id: row?.id,
    commentAuditStatus: '2'
  };
  await updateAuditCaseCommentInfo(params).finally(() => (buttonLoading.value = false));
  proxy?.$modal.msgSuccess('通过成功');
  await getList();
};

onMounted(() => {
  getdoctorList();
  getList();
});
</script>

<style lang="scss" scoped>
.upload-demo {
  width: 100%;
}
.view_url {
  box-sizing: border-box;
  padding: 15px 30px;
  .text_left {
    font-size: 16px;
    font-weight: 600;
    color: black;
  }

  .text_right {
    display: flex;

    .text_right_icon {
      margin-left: 10px;
    }
  }
}
:deep(.el-textarea__inner) {
  height: 200px;
}
</style>
