<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="患者姓名" prop="patientName">
        <el-input v-model="queryParams.patientName" placeholder="支持模糊查询" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="审核状态" prop="auditStatus">
        <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态" clearable>
          <el-option label="待审核" :value="1" />
          <el-option label="审核通过" :value="2" />
          <el-option label="审核不通过" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="dateRange">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 350px" />
      </el-form-item>
      <el-form-item label="订单编号" prop="orderCode">
        <el-input v-model="queryParams.orderCode" placeholder="订单编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="处方编号" prop="serialNo">
        <el-input v-model="queryParams.serialNo" placeholder="处方编号" clearable @keyup.enter.native="handleQuery" />
      </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-button type="success" icon="el-icon-check" size="mini" @click="quickFilter(2)">已审核</el-button>
        <el-button type="warning" icon="el-icon-time" size="mini" @click="quickFilter(1)">待审核</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list" border>
      <el-table-column label="处方编号" prop="serialNo" align="center" width="100" />
<!--      <el-table-column label="处方编号" prop="prescribeCode" align="center" width="140" />-->
      <el-table-column label="订单编码" prop="orderCode" min-width="180" align="center" />
      <el-table-column label="患者姓名" prop="patientName" align="center" width="120" />
      <el-table-column label="患者性别" align="center" width="100">
        <template slot-scope="scope">
          {{ genderFormat(scope.row.patientGender) }}
        </template>
      </el-table-column>
      <el-table-column label="患者年龄" prop="patientAge" align="center" width="100" />
      <el-table-column label="处方图片" align="center" width="140">
        <template slot-scope="scope">
          <el-image v-if="scope.row.prescribeImgUrl" :src="scope.row.prescribeImgUrl" :preview-src-list="[scope.row.prescribeImgUrl]" style="width: 120px; height: 120px" fit="cover" />
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="诊断信息" prop="diagnose" align="center" min-width="180" />
      <el-table-column label="拒绝原因" prop="auditReason" align="center" min-width="160" />
      <el-table-column label="审核时间" prop="auditTime" align="center" width="160" />
      <el-table-column label="审核状态" align="center" width="120">
        <template slot-scope="scope">
          {{ statusFormat(scope.row.auditStatus != null ? scope.row.auditStatus : scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
        <template slot-scope="scope">
          <el-button size="mini" type="text" :disabled="!isPending(scope.row)" @click="handleAudit(scope.row)">审核</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button size="mini" type="text" @click="viewDrugs(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="处方审核" :visible.sync="auditDialog.open" width="500px" append-to-body>
      <el-form :model="auditForm" ref="auditFormRef" label-width="90px">
        <el-form-item label="审核状态" prop="auditStatus">
          <el-radio-group v-model="auditForm.auditStatus">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="auditForm.auditStatus === 3" label="拒绝原因" prop="auditReason">
          <el-input type="textarea" v-model="auditForm.auditReason" placeholder="请填写拒绝原因" :rows="3" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditDialog.open=false">取 消</el-button>
        <el-button type="primary" @click="submitAudit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="处方药品" :visible.sync="drugsDialog.open" width="720px" append-to-body>
      <div v-if="drugsList && drugsList.length">
        <el-table :data="drugsList" border size="mini">
          <el-table-column label="药品图片" width="120" align="center">
            <template slot-scope="scope">
              <el-image v-if="scope.row.drugImgUrl" :src="scope.row.drugImgUrl" :preview-src-list="[scope.row.drugImgUrl]" style="width: 80px; height: 80px" fit="cover" />
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column label="药品名称" prop="drugName" min-width="180" align="center" />
          <el-table-column label="药品规格" prop="drugSpec" min-width="160" align="center" />
          <el-table-column label="使用方法" prop="usageMethod" min-width="160" align="center" />
          <el-table-column label="药品数量" prop="drugNum" width="120" align="center" />
        </el-table>
      </div>
      <el-empty v-else description="暂无药品数据"></el-empty>
      <div slot="footer" class="dialog-footer">
        <el-button @click="drugsDialog.open=false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPrescribeList, auditPrescribe } from '@/api/prescribe'
export default {
  name: 'PrescribeAudit',
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      list: [],
      dateRange: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        patientName: undefined,
        auditStatus: undefined,
        beginCreateTime: undefined,
        endCreateTime: undefined
      },
      auditDialog: { open: false },
      auditForm: {
        prescribeId: undefined,
        auditStatus: 2,
        auditReason: ''
      },
      drugsDialog: { open: false },
      drugsList: [],
    }
  },
  created() {
    // 默认加载列表
    this.getList()
  },
  methods: {
    genderFormat(val) {
      if (val === 1 || val === '1') return '男'
      if (val === 2 || val === '2') return '女'
      return '-'
    },
    statusFormat(val) {
      if (val === 1 || val === '1') return '待审核'
      if (val === 2 || val === '2') return '审核通过'
      if (val === 3 || val === '3') return '审核不通过'
      return '-'
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      if (this.dateRange && this.dateRange.length === 2) {
        this.queryParams.beginCreateTime = this.dateRange[0]
        this.queryParams.endCreateTime = this.dateRange[1]
      } else {
        this.queryParams.beginCreateTime = undefined
        this.queryParams.endCreateTime = undefined
      }
      this.getList()
    },
    resetQuery() {
      this.dateRange = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        patientName: undefined,
        auditStatus: undefined,
        beginCreateTime: undefined,
        endCreateTime: undefined
      }
      this.getList()
    },
    quickFilter(auditStatus) {
      this.queryParams.auditStatus = auditStatus
      this.handleQuery()
    },
    getList() {
      this.loading = true
      const params = { ...this.queryParams }
      if (params.auditStatus !== undefined) {
        params.status = params.auditStatus
      }
      getPrescribeList(params).then(res => {
        const data = res.data || res
        this.list = data.list || data.rows || []
        this.total = data.total || 0
      }).finally(() => {
        this.loading = false
      })
    },
    isPending(row) {
      const current = (row.auditStatus != null ? row.auditStatus : row.status)
      return current === 1 || current === '1'
    },
    handleAudit(row) {
      const current = (row.auditStatus != null ? row.auditStatus : row.status)
      if (!(current === 1 || current === '1')) {
        this.$message.warning('仅待审核记录可操作')
        return
      }
      this.auditForm.prescribeId = row.prescribeId
      this.auditForm.auditStatus = 1
      this.auditForm.auditReason = row.auditReason || ''
      this.auditDialog.open = true
    },
    submitAudit() {
      if (this.auditForm.auditStatus === 3 && (!this.auditForm.auditReason || !this.auditForm.auditReason.trim())) {
        this.$message.error('请填写拒绝原因')
        return
      }
      const payload = { prescribeId: this.auditForm.prescribeId, status: this.auditForm.auditStatus, auditReason: this.auditForm.auditReason }
      auditPrescribe(payload).then(() => {
        this.$message.success('审核成功')
        this.auditDialog.open = false
        this.getList()
      }).catch(() => {
        this.$message.error('审核失败')
      })
    },
    viewDrugs(row) {
      const raw = row && row.drugs ? row.drugs : []
      this.drugsList = (raw || []).map(d => ({
        drugImgUrl: d.drugImgUrl || d.imgUrl || d.imageUrl || '',
        drugName: d.drugName || d.name || '-',
        drugSpec: d.drugSpec || d.spec || '-',
        usageMethod: d.usageMethod || d.usage || '-',
        drugNum: (d.drugNum != null ? d.drugNum : (d.num != null ? d.num : '-'))
      }))
      this.drugsDialog.open = true
    },
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
