<template>
  <el-row>
    <el-dialog
      title="课件查看"
      v-model="viewCaseDialog.visible"
      width="1200px"
      top="5vh"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <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="uploadType">
              <el-select v-model="queryParams.uploadType" placeholder="请选择上传方式" clearable @clear="handleQuery" @change="handleQuery">
                <el-option v-for="item in uploadTypeoptions" :key="item.id" :label="item.label" :value="item.id"> </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 label="点评专家" prop="commentUserIds">
              <el-select v-model="commentUserIds" multiple placeholder="请选择点评专家" @clear="handleQuery" @change="handleQuery">
                <el-option v-for="item in commentExpertIdoptions" :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" @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="课件编号" align="center" prop="caseId" v-if="true" />
          <el-table-column label="课件名称" align="center" prop="caseName" />
          <el-table-column label="所有者" align="center" prop="userName" />
          <el-table-column label="上传方式" align="center" prop="uploadType">
            <template #default="scope">
              {{scope.row.uploadType === '0'?'直接上传' :'志愿者上传'}}
            </template>
          </el-table-column>
          <el-table-column label="上传人" align="center" prop="uploadUserName" />
          <el-table-column label="审核状态" align="center" prop="checkStatus">
            <template #default="scope">
              {{scope.row.checkStatus === '0'?'未审核' :(scope.row.checkStatus === '1'?'通过': '拒绝')}}
            </template>
          </el-table-column>
          <el-table-column label="是否已美化" align="center" prop="beautifyStatus">
            <template #default="scope">
              {{scope.row.beautifyStatus === '0'?'否' :'是'}}
            </template>
          </el-table-column>
          <el-table-column label="点评专家" align="center" prop="commentUseName" />
          <el-table-column label="状态" align="center" prop="caseStatus">
            <template #default="scope">
              {{scope.row.caseStatus === '0'?'正常' :'禁用'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
            <template #default="scope">
              <el-tooltip content="查看" placement="top">
                <!--  icon="View" -->
                <el-button link type="primary" @click="handleDetail(scope.$index)" 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="detaildialog.title" v-model="detaildialog.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">{{ caseBaseInfoList[viewUrlIndex].caseName }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" class="text_left">所有者：</el-col>
            <el-col :span="18" class="text_right">{{ caseBaseInfoList[viewUrlIndex].userName }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" class="text_left">上传方式：</el-col>
            <el-col :span="18" class="text_right">{{ caseBaseInfoList[viewUrlIndex].uploadType === '0' ? '直接上传' :'志愿者上传'}}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" class="text_left">上传人：</el-col>
            <el-col :span="18" class="text_right">{{ caseBaseInfoList[viewUrlIndex].uploadUserName }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" class="text_left">已上传课件：</el-col>
            <el-col :span="18" class="text_right">
              <div v-for="(item, index) in caseBaseInfoList[viewUrlIndex].caseFileList" :key="index" style="display:flex;align-items:center">
                <div>{{item.name}}</div>
                <div style="margin-left:40px;cursor: pointer;color: blue;}" @click="downInfo(item.ossId)">下载</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" class="text_left">美化课件：</el-col>
            <el-col :span="18" style="padding-top:10px">
              <div
                v-for="(item, index) in caseBaseInfoList[viewUrlIndex].caseBeautifyFileList"
                :key="index"
                style="margin-top:10px;display:flex;align-items:center"
              >
                <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 type="primary" @click="hideViewUrlDialog">确 定</el-button>
            <el-button @click="hideViewUrlDialog">取 消</el-button>
          </div>
        </template>
      </el-dialog>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleViewCase">确 定</el-button>
          <el-button @click="handleViewCase">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-row>
</template>

<script setup name="ViewCase" lang="ts">
import {
  listCaseBaseInfo,
  listExpert,
  listDoctor
} from '@/api/business/caseBaseInfo';
import { CaseBaseInfoVO, CaseBaseInfoQuery, CaseBaseInfoForm, Doctoroption } from '@/api/business/caseBaseInfo/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  tenantId: {
    type: [String]
  }
})
const caseBaseInfoList = ref<CaseBaseInfoVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const commentUserIds = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const commentDoctorIdoptions = ref<Doctoroption[]>([]);
const commentExpertIdoptions = ref<Doctoroption[]>([]);
const viewUrlIndex = ref(-1);
const queryFormRef = ref<ElFormInstance>();
const tenantValue = ref(<string | undefined>'');
const userIds = ref<Array<string | number>>([]);

const detaildialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const viewCaseDialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const uploadTypeoptions = [
  { id: '0', label: '直接上传' },
  { id: '1', label: '志愿者上传' }
];
const initFormData: CaseBaseInfoForm = {
  id: undefined,
  userId: undefined,
  uploadUserId: undefined,
  caseName: undefined,
  caseFileUrl: undefined,
  caseStatus: undefined,
  caseBeautifyFileUrl: undefined,
  checkStatus: undefined,
  caseDescription: undefined,
  beautifyStatus: undefined,
  uploadType: undefined,
  commentUserId: undefined,
  caseFileList: undefined,
  caseBeautifyFileList:undefined
};

const data = reactive<PageData<CaseBaseInfoForm, CaseBaseInfoQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userId: undefined,
    tenantId: undefined,
    uploadUserId: undefined,
    caseName: undefined,
    caseFileUrl: undefined,
    caseBeautifyFileUrl: undefined,
    checkStatus: undefined,
    caseDescription: undefined,
    beautifyStatus: undefined,
    uploadType: undefined,
    commentUserId: undefined,
    commentUserIds: undefined,
    params: {}
  },
  rules: {
    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
    userId: [{ required: true, message: '所有者不能为空', trigger: 'change' }],
    uploadUserId: [{ required: true, message: '课件上传用户id不能为空', trigger: 'blur' }],
    caseName: [{ required: true, message: '课件名称不能为空', trigger: 'blur' }],
    caseFileList: [{ required: true, message: '文件不能为空', trigger: 'change' }]
  }
});
const show = () => {
  tenantValue.value = props.tenantId;
  queryFormRef.value?.resetFields();
  handleQuery();
  getexpertList();
  getdoctorList();
  viewCaseDialog.visible = true;
}
const { queryParams, form } = toRefs(data);
const hideViewUrlDialog = () => {
  detaildialog.visible = false;
};
const emit = defineEmits(["ok"]);
const handleViewCase = () => {
  emit('ok');
  viewCaseDialog.visible = false;
};

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

/** 获取点评专家列表 */
const getexpertList = async () => {
  const res = await listExpert();
  commentExpertIdoptions.value = res.data;
};

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

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


/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  console.log('userIds==',userIds.value,typeof userIds.value)
  queryParams.value.userIds = userIds.value.length ? userIds.value.join(',') : ''
  queryParams.value.commentUserIds = commentUserIds.value.join(',')
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  commentUserIds.value = []
  userIds.value = []
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: CaseBaseInfoVO[]) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

// 查看详情
const handleDetail = (index: any) => {
  viewUrlIndex.value = index;
  detaildialog.title = '课件详情';
  detaildialog.visible = true;
};

onMounted(() => {
  getList();
  getexpertList();
  getdoctorList();
});
// 暴露
defineExpose({
  show,
});
</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;
    margin-top: 15px;
  }

  .text_right {
    margin-top: 15px;
    // color: blue;
    // text-decoration: underline;
    display: flex;

    .text_right_icon {
      margin-left: 10px;
    }
  }
}
</style>
