<template>
  <el-container>
    <el-header style="height: 30px">
      <el-button icon="ArrowLeft" style="font-size: 14px" text @click="router.go(-1)">返回</el-button>
      <el-button icon="Search" @click="dianJiChaKanFenLeiXiangQing(0)"> 搜索手术 </el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button :disabled="xinZhenShuJu.length === 0" type="success" @click="dianJiBaoCun">保存</el-button>
    </el-header>
    <el-container>
      <el-aside style="width: 260px">
        <el-table
          :data="shouShuFenLei.data.slice((shouShuFenLei.currentPage - 1) * shouShuFenLei.pageSize, shouShuFenLei.currentPage * shouShuFenLei.pageSize)"
          :height="windowSize.h / 1.4"
          @row-click="dianJiChaKanFenLeiXiangQing"
        >
          <el-table-column label="手术分类">
            <el-table-column label="名称" prop="name" show-overflow-tooltip width="100"></el-table-column>
            <el-table-column label="编码" prop="code"></el-table-column>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="shouShuFenLei.currentPage"
          :page-size="shouShuFenLei.pageSize"
          :pager-count="7"
          :total="shouShuFenLei.data.length"
          layout="prev, pager, next"
          small
          @current-change="shouShuFenLeiFanYe"
        >
        </el-pagination>
      </el-aside>
      <el-main>
        <el-table :data="xinZhenShuJu" :height="windowSize.h / 1.4">
          <el-table-column label="编码" prop="opCode"></el-table-column>
          <el-table-column label="名称" prop="opName" show-overflow-tooltip></el-table-column>
          <el-table-column label="自费" prop="ybSelfFlag">
            <template #default="scope">
              <span v-if="scope.row.ybSelfFlag === '1'">自费</span>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" prop="applyDate" show-overflow-tooltip></el-table-column>
          <el-table-column label="手术时间" prop="opDatetime" show-overflow-tooltip></el-table-column>
          <el-table-column label="情况" prop="urgentClinicFlag" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.urgentClinicFlag === '1'">急诊</span>
              <span v-else>择期</span>
            </template>
          </el-table-column>
          <el-table-column label="班次" prop="ssbc" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.ssbc === '1'">正常</span>
              <span v-else-if="scope.row.ssbc === '2'">加班</span>
            </template>
          </el-table-column>
          <el-table-column label="手术部位" prop="partCodeName"></el-table-column>
          <el-table-column label="术前诊断" prop="diagBeforeOp" show-overflow-tooltip></el-table-column>
          <el-table-column label="手术等级" prop="opScale">
            <template #default="scope">
              {{ shouShuDengJi(scope.row.opScale) }}
            </template>
          </el-table-column>
          <el-table-column label="麻醉方式" prop="hocusCodeName"></el-table-column>
          <el-table-column label="主刀医生" prop="doctorZdName"></el-table-column>
          <el-table-column label="第一助手" prop="doctor1Name"></el-table-column>
          <el-table-column label="第二助手" prop="doctor2Name"></el-table-column>
          <el-table-column label="第三助手" prop="doctor3Name"></el-table-column>
          <el-table-column label="麻醉医生" prop="doctorMzName"></el-table-column>
          <el-table-column label="器械护士" prop="nurseQxName"></el-table-column>
          <el-table-column label="巡回护士" prop="nurseXhName"></el-table-column>
          <el-table-column label="附注说明" prop="remark"></el-table-column>
          <el-table-column label="是否生成医嘱" prop="ssyzFlag">
            <template #default="scope">
              <span v-if="scope.row.ssyzFlag === 1">生成</span>
              <span v-else>不生成</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-button-group>
                <el-button icon="Edit" type="primary" @click="dianJiBianJiShouShu(scope.row)"></el-button>
                <el-popconfirm
                  cancel-button-text="取消"
                  confirm-button-text="确认"
                  icon="Info"
                  iconColor="red"
                  title="是否删除该数据"
                  @confirm="dianJiShanChuShouShu('', scope.$index)"
                >
                  <template #reference>
                    <el-button icon="Delete" size="small" type="danger"></el-button>
                  </template>
                </el-popconfirm>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
  <cha-xun-shou-shu-xiang-mu v-if="shouShuXiangMuChaXun" :code="code" @close="shouShuXiangMuChaXun = false" @xuanZhongShuJu="dianJiXuanZhongShouShu"> </cha-xun-shou-shu-xiang-mu>
  <!-- 在这里编辑手术 -->
  <bian-ji-shou-shu ref="bianJiShouShu" @qu-xiao="dianJiShanChuShouShu"></bian-ji-shou-shu>
</template>

<script>
import { computed, onMounted, ref } from 'vue'
import store from '@/store'
import { shouShuShenQingCeBianLan, xinZengShouShuShenQing } from '@/api/zhu-yuan-yi-sheng/shou-shu-shen-qing'
import router from '@/router'
import { getServerDateApi } from '@/api/public-api'
import { huanZheXinXi, shouShuDengJi, youWuXuanZheHuanZhe } from '@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng'
import BianJiShouShu from '@/components/zhu-yuan-yi-sheng/shou-shu-shen-qing/BianJiShouShu.vue'
import { ElMessage } from 'element-plus'
import ChaXunShouShuXiangMu from '@/components/zhu-yuan-yi-sheng/shou-shu-shen-qing/ChaXunShouShuXiangMu.vue'

export default {
  name: 'XinZengShouShuShenQing',
  components: { ChaXunShouShuXiangMu, BianJiShouShu },
  setup() {
    const windowSize = computed(() => {
      return store.state.app.windowSize
    })
    const shouShuFenLei = ref({
      currentPage: 1,
      pageSize: 20,
      data: [],
    })

    const shouShuFenLeiFanYe = (val) => {
      shouShuFenLei.value.currentPage = val
    }
    const bianJiShouShu = ref()
    const shouShuXiangMuChaXun = ref(false)
    const code = ref('')
    const weiYiBiaoShi = ref([])

    const dianJiChaKanFenLeiXiangQing = (row) => {
      if (row === 0) {
        shouShuXiangMuChaXun.value = true
      } else {
        code.value = row.code
        shouShuXiangMuChaXun.value = true
      }
    }

    const dianJiXuanZhongShouShu = (row) => {
      getServerDateApi().then((res) => {
        row.opDatetime = res
        row.applyDate = res
        if (weiYiBiaoShi.value.indexOf(row.opCode) > -1) {
          ElMessage.error('请勿重复添加')
        } else {
          weiYiBiaoShi.value.push(row.opCode)
          xinZhenShuJu.value.push(row)
          bianJiShouShu.value.huoQuShuJu(row)
          shouShuXiangMuChaXun.value = false
        }
      })
    }

    /*__________________________________________________ 新增手术 _________________________________________________________________________*/
    const xinZhenShuJu = ref([])

    const dianJiBianJiShouShu = (row) => {
      bianJiShouShu.value.huoQuShuJu(row)
    }

    const dianJiBaoCun = () => {
      if (youWuXuanZheHuanZhe()) return
      let data = huanZheXinXi.value
      data.execDept = store.state.user.info.deptCode
      data.list = xinZhenShuJu.value
      xinZengShouShuShenQing(data).then((res) => {
        xinZhenShuJu.value = []
        router.go(-1)
      })
    }

    const dianJiShanChuShouShu = (opCode, index) => {
      if (index > -1) {
        xinZhenShuJu.value.splice(index, 1)
        weiYiBiaoShi.value.splice(index, 1)
      } else {
        for (let i = 0; i < xinZhenShuJu.value.length; i++) {
          if (xinZhenShuJu.value[i].opCode === opCode) {
            xinZhenShuJu.value.splice(i, 1)
            weiYiBiaoShi.value.splice(i, 1)
            return
          }
        }
      }
    }

    onMounted(() => {
      shouShuShenQingCeBianLan().then((res) => {
        shouShuFenLei.value.data = res
      })
    })

    return {
      windowSize,
      code,
      shouShuFenLei,
      shouShuFenLeiFanYe,
      dianJiChaKanFenLeiXiangQing,
      router,
      dianJiXuanZhongShouShu,
      xinZhenShuJu,
      shouShuDengJi,
      bianJiShouShu,
      dianJiBianJiShouShu,
      dianJiBaoCun,
      dianJiShanChuShouShu,
      shouShuXiangMuChaXun,
    }
  },
}
</script>

<style scoped></style>
