<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
        <el-form-item label="关 键 字">
            <el-input v-model="queryParams.articleTitle" placeholder="请输入用户姓名、手机号" maxlength="20" clearable style="width: 220px"/>
        </el-form-item>
        <el-form-item label="所属组织" prop="deptIdList">
            <el-cascader v-model="queryParams.deptIdList"
            :options="deptOptions" :filterable="true" placeholder="请选择所属组织" style="width: 240px" :show-all-levels="false"
            :props="{
                multiple: true,
                emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
                checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                value:'id',label:'label'
            }" clearable collapse-tags >
            </el-cascader>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        </el-form>


        <el-table v-loading="loading" :data="tableListData" height="800" ref="multipleTable">
            <el-table-column label="用户姓名" align="center" prop="nickName" :show-overflow-tooltip="true" >
            </el-table-column>
            <el-table-column label="用户手机号" align="center" prop="mobile" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="位置信息" align="center" prop="placeFullName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="饮食医嘱" align="center" prop="doctorAdvice" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.doctorAdvice==1">禁食</span>
                    <span v-if="scope.row.doctorAdvice==2">流食</span>
                    <span v-if="scope.row.doctorAdvice==3">半流食</span>
                    <span v-if="scope.row.doctorAdvice==4">治疗饮食</span>
                </template>
            </el-table-column>
            <el-table-column label="就诊号" align="center" prop="doctorNum" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="住院号" align="center" prop="hospitalNum" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="住院日期" align="center" prop="inpatientDate" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="慢性病" align="center" prop="chronicNames" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column label="劳动强度" align="center" prop="labourIntensity" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                  <span v-if="scope.row.labourIntensity==1">轻劳动</span>
                  <span v-if="scope.row.labourIntensity==2">中等强度劳动</span>
                  <span v-if="scope.row.labourIntensity==3">重强度劳动</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleReport(scope.row)"
                    >体检报告</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        />
        <!-- 体检报告对话框 -->
        <el-dialog :title="titleAddReport" :visible.sync="openAddReport" custom-class="dialog-right"  append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="90px">
            <el-row justify="center">
              <table  align="center" width="100%" cellspacing="0">
                <tr >
                  <td  colspan="4" class="table-title">
                    <el-col :span="1.5">
                        <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAddReport"
                        >新增体检报告</el-button>
                    </el-col>
                  </td>
                </tr>
                <tr >
                  <td  colspan="4" class="table-title">
                    <el-table v-loading="loading" :data="reportListData" height="800" ref="multipleTable">
                        <el-table-column label="体检日期" align="center" prop="medicalDate" :show-overflow-tooltip="true" >
                        </el-table-column>
                        <el-table-column label="体检机构" align="center" prop="medicalMechanism" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="handleViewReport(scope.row)"
                                >检查报告</el-button>
                                <el-button
                                    size="mini"
                                    type="text"
                                    @click="handleDeleteReport(scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                  </td>
                </tr>
              </table>
            </el-row>
          </el-form>
        </el-dialog>
        <!-- 新增-体检报告对话框 -->
        <el-dialog :title="titleAddReportModel" :visible.sync="openAddReportModel" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="90px">
            <el-row justify="center">
              <table  align="center" width="100%" cellspacing="0">
                <tr >
                  <td  colspan="4" class="table-title">
                    <div style="width: 80%;">
                      <el-select v-model="reportModelId" @change="$forceUpdate()" placeholder="请选择报告模板" style="width: 100%">
                        <el-option v-for="item in reportModelOptions"
                            :key="item.medicalTemplateId"
                            :label="item.medicalTemplateName"
                            :value="item.medicalTemplateId"
                        ></el-option>
                      </el-select>
                    </div>
                  </td>
                </tr>
              </table>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitAddReport">确 定</el-button>
              <el-button @click="cancelAddReport">取 消</el-button>
          </div>
        </el-dialog>
        <!-- 体检报告详情-对话框 -->
        <el-dialog :title="titleReportDetail" :visible.sync="openReportDetail" width="1330px" append-to-body :close-on-click-modal="false">
          <el-tabs v-model="activeName">
            <!-- 体检报告 -->
            <el-tab-pane label="体检报告" name="1" style="height: 650px;overflow-y: auto;">
              <el-form  label-width="90px">
                <div class="box box-content">
                  <div class="title">体检报告单</div>
                   <div class="header-box">
                     <table>
                       <tr>
                         <td>
                           <div>用户姓名：<b>{{personData.nickName}}</b></div>
                         </td>
                         <td>
                           <div>性别：<b>{{personData.sex==2?'未知':(personData.sex==0?'男':'女')}}</b></div>
                         </td>
                         <td>
                           <div><span>检验机构：</span></div>
                         </td>
                         <td>
                          <el-input
                            v-model="medicalMechanism"
                            placeholder="请输入"
                             :disabled="isDisable"
                          />
                         </td>
                         <td>
                           <div><span>检查日期：</span></div>
                         </td>
                         <td>
                           <el-date-picker
                               v-model="medicalDate"
                               type="date"
                               align="right"
                               unlink-panels
                               value-format="yyyy-MM-dd" style="width: 100%"
                               :disabled="isDisable"
                                >
                           </el-date-picker>
                         </td>
                       </tr>
                     </table>
                   </div>
                   <div class="tabledata" style="width: 75%;">
                    <table style="width: 100%;" v-for="(itmes,index) in reportDatas">
                      <tr>
                        <td colspan="3" align="left"><span>{{itmes.medicalProjectName}}</span></td>
                      </tr>
                      <tr>
                        <td><span>项目名称</span></td>
                        <td><span>检查结果</span></td>
                        <td><span>单位</span></td>
                      </tr>
                      <tr v-for="(itme,indexd) in itmes.healthMedicalReportDetails">
                        <td>{{itme.medicalProjectDetailName}}</td>
                        <td><el-input
                          v-model="itme.result"
                          placeholder="请输入结果"
                          maxlength="10"

                        /></td>
                        <td>{{itme.medicalProjectDetailUnit}}</td>
                      </tr>
                    </table>
                   </div>
                 </div>
              </el-form>
            </el-tab-pane>
            <!-- 个人信息 -->
            <el-tab-pane label="个人信息" name="2" style="height: 650px;overflow-y: auto;" >
              <el-form  label-width="90px">
                <div class="box box-content">
                  <div class="tabledata" style="width: 75%;border-spacing: 0px;">
                    <table style="width: 100%;">
                      <tr>
                        <td colspan="8" align="left"><span>个人信息</span></td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">用户姓名</td>
                        <td style="width:48% ;" colspan="4">{{personData.nickName}}</td>
                        <td style="width:12% ;">用户编号	</td>
                        <td style="width:24% ;" colspan="2">{{personData.userId}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">所属组织</td>
                        <td style="width:48% ;" colspan="4">{{personData.orgFullName}}</td>
                        <td style="width:12% ;">用户类别	</td>
                        <td style="width:24% ;" colspan="2">{{personData.userType==1?'其它':'系统'}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">用户手机号	</td>
                        <td style="width:48% ;" colspan="4">{{personData.mobile}}</td>
                        <td style="width:12% ;">性别	</td>
                        <td style="width:24% ;" colspan="2">{{personData.sex==1?'男':'女'}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">位置信息</td>
                        <td style="width:48% ;" colspan="4">{{personData.nickName}}</td>
                        <td style="width:12% ;">出生日期	</td>
                        <td style="width:24% ;" colspan="2">{{personData.birthday}}</td>
                      </tr>
                    </table>
                    <br>
                    <table style="width: 100%;border-spacing: 0px;">
                      <tr>
                        <td colspan="8" align="left"><span>健康信息</span></td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">就诊号</td>
                        <td style="width:36% ;" colspan="3">{{personData.doctorNum}}</td>
                        <td style="width:12% ;"></td>
                        <td style="width:36% ;" colspan="3">{{personData.hospitalNum}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">身高</td>
                        <td style="width:36% ;" colspan="3">{{personData.height}}</td>
                        <td style="width:12% ;">体重</td>
                        <td style="width:36% ;" colspan="3">{{personData.weight}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">血型</td>
                        <td style="width:36% ;" colspan="3">{{personData.bloodType}}</td>
                        <td style="width:12% ;">慢性病</td>
                        <td style="width:36% ;" colspan="3">{{personData.chronicNames}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">怀孕状态	</td>
                        <td style="width:36% ;" colspan="3">{{personData.pregnantStatus}}</td>
                        <td style="width:12% ;">怀孕日期</td>
                        <td style="width:36% ;" colspan="3">{{personData.pregnancyDate}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">是否住院	</td>
                        <td style="width:36% ;" colspan="3">{{personData.ifHospitalized}}</td>
                        <td style="width:12% ;">住院日期</td>
                        <td style="width:36% ;" colspan="3">{{personData.inpatientDate}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">劳动强度</td>
                        <td style="width:36% ;" colspan="3">{{personData.labourIntensity}}</td>
                        <td style="width:12% ;">过敏源</td>
                        <td style="width:36% ;" colspan="3">{{personData.allergen}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">饮食医嘱</td>
                        <td style="width:36% ;" colspan="3">{{personData.doctorAdvice}}</td>
                        <td style="width:12% ;">体重控制目标</td>
                        <td style="width:36% ;" colspan="3">{{personData.weightControl}}</td>
                      </tr>
                      <tr>
                        <td style="width:12% ;">BMI(kg/m²)</td>
                        <td style="width:84% ;" colspan="7">{{personData.bmi}}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleDialogSubmit" :disabled="btnLoading">确 定</el-button>
            <el-button @click="openReportDetail=false">取 消</el-button>
          </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
  import { deptTreeSelect } from '@/api/system/user'
  import { dictHealthChronicApi,getHealthSciencePageApi,addHealthScienceApi,editHealthScienceApi,delHealthScienceApi,getHealthInfoPageApi
    ,getModelListApi,getHealthInfoDetailApi,getModelByIdApi,addReportApi,getReportApi,delReportListApi,getReportByIdApi  } from "@/api/healthCenter/index";
  import { imgUpLoadTwo } from '@/api/system/upload'
  import { decryptWithSM4,encryptWithSM4 } from '@/utils/sm';
export default {
    name: "",
    dicts: [],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            //表格数据
            tableListData: [],
            reportListData:[],
            title:"",
            // 是否显示弹出层
            open: false,

            titleAddReport:'',
            openAddReport:false,

            titleAddReportModel:'',
            openAddReportModel:false,
            reportModelOptions:[],//报告模型
            reportModelId:"",
            openReportDetail:false,
            titleReportDetail:"",
            activeName:"1",

            reportModelId:"",
            medicalMechanism:"",
            selectUser:"",
            medicalDate:"",

            btnLoading:false,

            dateRange:[new Date(),new Date()],
            chronicOptions:[],
            personData:{
            },
            reportDatas:[
              {"medicalProjectName":"身体","medicalProjectDetailNames":[
                {"medicalProjectDetailName":"体重","result":"123","medicalProjectDetailUnit":""},
                {"medicalProjectDetailName":"身高","result":"143","medicalProjectDetailUnit":""},
                {"medicalProjectDetailName":"体重","result":"154","medicalProjectDetailUnit":""}]},
              {"medicalProjectName":"内脏","medicalProjectDetailNames":[
                {"medicalProjectDetailName":"心脏","result":"123","medicalProjectDetailUnit":""},
                {"medicalProjectDetailName":"肝脏","result":"143","medicalProjectDetailUnit":""},
                {"medicalProjectDetailName":"脾脏","result":"154","medicalProjectDetailUnit":""}]},
            ],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                articleTitle: undefined,//标题
                deptIdList:[],//组织
                chronicList:[],  //慢性病
                placeIdList:[], //位置
                articleType:null //类型
            },
            form: {
                articleTitle:null,
                summary:null,
                chronicIdList:[],
                coverPhoto:null,
                articleType:1,
                articleContent:null,
            },//详情
            rules: {
                articleTitle: [
                    { required: true, message: "文章标题不能为空", trigger: "blur" }
                ],
                articleContent: [
                    { required: true, message: "文章内容不能为空", trigger: "blur" }
                ]
            },
            fileList: [],//图片
            checkUrlList: [],//图片
            checkUrlNameList: [],//食堂图片
            dialogVisible:false,//图片弹窗
            dialogImageUrl:"",//图片弹窗
            deptOptions:[],
            isDisable:false,
        };
    },
    created() {
        this.getDeptTree()
        this.getList()
        this.getChronicList()
        this.getReportModelList()
    },
    computed: {
        //图片上传1张后，隐藏上传框
        uploadDisabled() {
            return this.checkUrlList.length > 0
        },
    },
    methods: {
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = this.filterTree(response.data)
            })
        },
        filterTree(nodes) {
            return nodes
                .map((node) => {
                    if (node.children) {
                        node.children = this.filterTree(node.children)
                    }
                    return node
                })
                .filter((node) => node.status !== '1')
        },
        //慢性病类型
        getChronicList() {
            dictHealthChronicApi({}).then((response) => {
                this.chronicOptions = response.data;
                console.log("this.chronicOptions",this.chronicOptions)
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [new Date(),new Date()]
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                articleTitle: undefined,//标题
                chronicList:[],  //慢性病
                deptIdList:[],
                articleType:null //类型
            }
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            let param = {
                "pageNum":this.queryParams.pageNum,
                "pageSize":this.queryParams.pageSize,
                "articleTitle":this.queryParams.articleTitle,
                "articleType":this.queryParams.articleType,
                "chronicIds":this.queryParams.chronicList.join(",")||"",
                "deptIds":this.queryParams.deptIdList.join(",")||"",
                // "startDate":this.formatDate(this.dateRange[0]),
                // "endDate":this.formatDate(this.dateRange[1])
            }
            // if(this.queryParams.chronicList.length>0){
            //     this.queryParams.chronicIds = this.queryParams.chronicList.join(",")
            // }else{
            //     this.queryParams.chronicIds = ""
            // }
            getHealthInfoPageApi(param).then(response => {
                this.tableListData = response.rows;
                this.tableListData.forEach(item=>{
                  if(item.mobile&&item.mobile!=""){
                      this.$set(item,"mobile",decryptWithSM4(item.mobile))
                  }
                });
                this.total = Number(response.total);
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        cancelAddReport() {
            this.openAddReportModel = false;
        },
        handleViewReport(row){
          this.openReportDetail=true;
          this.titleReportDetail="查看体检报告";
          this.isDisable=true;
          let param = {
              "medicalId":row.medicalId
          }
          this.btnLoading=true;
          console.log("查看param",param)
          this.medicalMechanism=row.medicalMechanism;
          this.medicalDate=row.medicalDate;
          getReportByIdApi(param).then(response => {
              this.reportDatas = response.data;
              console.log("this.reportDatas",this.reportDatas);
          });
        },
        submitAddReport(){
            this.openReportDetail=true;
            this.titleReportDetail="体检报告";
            this.isDisable=false;
            let param = {
                "medicalTemplateId":this.reportModelId
            }
            this.medicalMechanism="";
            this.medicalDate="";
            this.btnLoading=false;
            getModelByIdApi(param).then(response => {
                this.reportDatas = response.data;
                console.log("this.reportDatas",this.reportDatas);
            });
        },
        // 表单重置
        reset() {
            this.fileList=[]
            this.checkUrlList=[]
            this.checkUrlNameList=[]
            this.form = {
                articleTitle:null,
                summary:null,
                chronicIdList:[],
                coverPhoto:null,
                articleType:1,
                articleContent: null,
            };
            this.resetForm("form");
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "新增";
        },
        handleReport(row) {
            this.form = Object.assign({}, row);
            this.selectUser=this.form.userId;
            this.openAddReport = true;
            this.titleAddReport = "体检报告";
            getReportApi(this.form).then(response => {
              console.log("this.reportListData",response.data)
                this.reportListData = response.data;
                this.loading = false;
            });
            getHealthInfoDetailApi(this.form).then(response => {
              this.personData=response.data;
              console.log("this.personData",this.personData)
              if(this.personData.bloodType==1){
                this.personData.bloodType="A型";
              }else if(this.personData.bloodType==2){
                this.personData.bloodType="B型";
              }else if(this.personData.bloodType==3){
                this.personData.bloodType="AB型";
              }else if(this.personData.bloodType==4){
                this.personData.bloodType="O型";
              }else if(this.personData.bloodType==5){
                this.personData.bloodType="Rh阳型";
              }else if(this.personData.bloodType==6){
                this.personData.bloodType="Rh阴型";
              }
              if(this.personData.doctorAdvice==1){
                this.personData.doctorAdvice="禁食";
              }else if(this.personData.doctorAdvice==2){
                this.personData.doctorAdvice="流食";
              }else if(this.personData.doctorAdvice==3){
                this.personData.doctorAdvice="半流食";
              }else if(this.personData.doctorAdvice==4){
                this.personData.doctorAdvice="治疗饮食";
              }
              if(this.personData.weightControl==1){
                this.personData.weightControl="减重";
              }else if(this.personData.weightControl==2){
                this.personData.weightControl="增重";
              }
              if(this.personData.ifHospitalized==1){
                this.personData.ifHospitalized="是";
              }else if(this.personData.ifHospitalized==2){
                this.personData.ifHospitalized="否";
              }
              if(this.personData.pregnantStatus==0){
                this.personData.pregnantStatus="保密";
              }else if(this.personData.pregnantStatus==1){
                this.personData.pregnantStatus="未怀孕";
              }else if(this.personData.pregnantStatus==2){
                this.personData.pregnantStatus="孕妇(早期)";
              }else if(this.personData.pregnantStatus==3){
                this.personData.pregnantStatus="孕妇(中期)";
              }else if(this.personData.pregnantStatus==4){
                this.personData.pregnantStatus="孕妇(晚期)";
              }else if(this.personData.pregnantStatus==5){
                this.personData.pregnantStatus="乳母";
              }
              if(this.personData.labourIntensity==1){
                this.personData.labourIntensity="轻劳动";
              }else if(this.personData.labourIntensity==2){
                this.personData.labourIntensity="中等强度劳动";
              }else if(this.personData.labourIntensity==3){
                this.personData.labourIntensity="重强度劳动";
              }
            });
        },
        getReportList(){
          let param={
            "userId":this.selectUser
          }
          console.log("param",param)
          getReportApi(param).then(response => {
            console.log("this.reportListData",response.data)
              this.reportListData = response.data;
              this.loading = false;
          });
        },
        handleDeleteReport(row){
            this.$modal.confirm('是否确认删除数据项？').then(function() {
                console.log("row",row)
                return delReportListApi(row);
            }).then(() => {
                this.getReportList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        },
        handleAddReport(){
            this.openAddReportModel = true;
            this.titleAddReportModel = "新增-体检报告";
        },
        getReportModelList(){
          getModelListApi().then(response => {
              console.log("体检模板列表===============================",response);
              this.reportModelOptions=response.data
          });
        },
        handleDialogSubmit(){
            console.log("确认获取数据",this.reportDatas)
            if(this.medicalDate==null||this.medicalDate==""||this.medicalDate==undefined||this.medicalMechanism==null||this.medicalMechanism==""||this.medicalMechanism==undefined){
              this.$modal.msgSuccess("请检查机构或时间是否填入");
              return;
            }
            let params={
                "medicalTemplateId":this.reportModelId,
                "medicalDate":this.medicalDate,
                "medicalMechanism":this.medicalMechanism,
                "userId":this.selectUser,
                "reportDatas":this.reportDatas
            }
            console.log("params",params)
            let loading=this.$loading({
              lock:true,
              text:'提交中...',
              background:'rgba(0,0,0,0.4)'
            })
            addReportApi(params).then(response => {
                loading.close();
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.openAddReport= false,
                this.openAddReportModel= false,
                this.openReportDetail= false,
                this.getList();
            });
        },
        /** 提交按钮 */
        submitForm: function() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if(this.form.chronicIdList.length>0){
                        this.form.chronicIds = this.form.chronicIdList.join(",")
                    }else{
                        this.form.chronicIds = ""
                    }
                    this.form.coverPhoto = this.checkUrlList[0]

                    if (this.form.articleId != undefined) {
                        editHealthScienceApi(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addHealthScienceApi(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        handleDelete(row) {
            this.$modal.confirm('是否确认删除数据项？').then(function() {
                return delHealthScienceApi(row.articleId);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        },
        openImg(row) {
          this.dialogImageUrl = row.coverPhoto;
          this.dialogVisible = true;
        },
        // 图片上传
        imgUpLoad(param, name, index) {
            // console.log(param,'image')
            param.type = 'canteen'
            imgUpLoadTwo(param).then((res) => {
                if (res.code == 200) {
                    this.checkUrlList.push(res.data.url)
                    this.checkUrlNameList.push(res.data.name)
                } else {
                    this.$modal.msgError(res.msg)
                }
            })
            .catch((error) => {
                this.$modal.msgError(error)
            })
        },
        handleAvatarSuccess(res, file) {
            console.log('success')
        },
        handleRemove(file, fileList) {
            let sum = 0
            this.checkUrlNameList.forEach((item, index) => {
                if (item == file.name) {
                    sum = index
                }
            })
            this.checkUrlNameList.splice(sum, 1)
            this.checkUrlList.splice(sum, 1)
        },
        //图片点击查看
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        //日期
        formatDate(date) {
            // 格式化为 YYYY-MM-DD
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    }
};
</script>
<style lang="scss" scoped>
    .addReportStyle{
      width: 880px;
      height: 100%;
      margin-right: 0;
      margin-left: auto;
    }
    .el-dialog {
      margin: 0 !important; /* 重置默认的margin */
      position: fixed !important; /* 固定定位 */
      top: 20px; /* 距离顶部距离 */
      right: 20px; /* 靠右距离 */
    }
    .remind-question{
        width: 100%;
        height: 50px;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .remind-title{
        width: 100%;
        height: 40px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    table td, table th{
        border: 1px solid #dfe6ec;
    }
    .table-title {
        height: 45px;
        background-color: #f8f8f9;
    }
    .table-label{
        height: 45px;
        width: 110px;
        min-width: 100px;
        background-color: #f8f8f9;
    }
    .table-content{
        min-width: 250px;
    }
    //隐藏图片上传框的css
    ::v-deep.disabled {
        .el-upload--picture-card {
            display: none;
        }
    }
    .box-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .box {
      width: 100%;
      height: 100%;
      min-width: 1000px;
      text-align: center;
      color: rgba(80, 81, 82, .9098039215686274);
    }
    .box .title {
        margin-top: 40px;
        font-size: 24px;
        font-weight: 700;
        color: #101d34;
    }
    .header-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-weight: 600;
        margin-top: 40px;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        font-size: 16px;
        font-weight: 400;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #8195a5;
        border-bottom: 1px solid #e5ebef;
        padding-bottom: 20px;
        margin-bottom: 40px;
    }
    .tabledata span{
      font-size: 16px;
      font-weight: 700;
      color: #000;
    }
</style>
