<template>
  <div class="request-page">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="form-card" shadow="never">
          <div slot="header" class="card-header">
            <span>用印申请</span>
           
          </div>
          <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" size="small" class="metal-form">
            <div class="form-summary">
              <div class="summary-left">
                <div class="summary-title">发起用印</div>
                <div class="summary-sub">请完善信息后提交，系统会推送部门负责人审批</div>
              </div>
              <div class="summary-right">
                <div class="summary-item">
                  <div class="k">申请人</div>
                  <div class="v">{{ currentApplicantText }}</div>
                </div>
                <div class="summary-item">
                  <div class="k">用印类型</div>
                  <div class="v">{{ form.sealType || '-' }}</div>
                </div>
              </div>
            </div>

            <el-form-item label="审批部门" prop="deptId">
              <el-select v-model="form.deptId" placeholder="请选择审批部门" filterable @change="onDeptChange" style="width: 100%">
                <el-option
                  v-for="item in deptOptions"
                  :key="item.deptId"
                  :label="item.deptName + (item.leaderNickName ? '（负责人：' + item.leaderNickName + '）' : '（无负责人）')"
                  :value="item.deptId"
                />
              </el-select>
              <div class="hint-text">系统将根据部门负责人自动创建审批任务</div>
            </el-form-item>

            <el-form-item label="用印类型" prop="sealType">
              <el-select
                v-model="form.sealType"
                filterable
                allow-create
                default-first-option
                clearable
                placeholder="选择或输入用印类型"
                style="width: 100%"
              >
                <el-option
                  v-for="dictItem in (dict.type.hrm_stamp_image || [])"
                  :key="dictItem.value"
                  :label="dictItem.label"
                  :value="dictItem.label"
                />
              </el-select>
              <div class="hint-text">优先从字典选择；若字典未配置，可直接输入</div>
            </el-form-item>

            <div class="block-title">用途与材料</div>
            <el-form-item label="用途说明" prop="purpose">
              <el-input v-model="form.purpose" type="textarea" :rows="4" placeholder="请说明用印用途、对象、份数等" show-word-limit maxlength="200" />
            </el-form-item>

            <el-form-item label="待盖章PDF" prop="applyFileIds">
              <file-upload
                v-model="form.applyFileIds"
                :limit="1"
                :file-size="50"
                :file-type="['pdf']"
              />
              <div class="hint-text">仅支持 PDF，单个文件不超过 50MB</div>
            </el-form-item>

            <el-form-item label="盖章页码" prop="pageNo" v-if="form.applyFileIds">
              <el-input-number
                v-model="form.pageNo"
                :min="1"
                :max="999"
                controls-position="right"
                placeholder="请输入需要盖章的页码（从第1页开始）"
                style="width: 100%"
              />
              <div class="hint-text">请输入需要盖章的页码，从第1页开始计数</div>
            </el-form-item>

            <el-form-item label="需要回执" prop="receiptRequired">
              <el-switch v-model="form.receiptRequired" :active-value="1" :inactive-value="0" />
              <div class="hint-text">开启后，盖章完成通常需要回传回执文件</div>
            </el-form-item>

            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="可选：补充说明" show-word-limit maxlength="200" />
            </el-form-item>

            <div class="form-actions">
              <el-button @click="$router.back()">取消</el-button>
              <el-button type="primary" :loading="submitting" @click="submit">提交申请</el-button>
            </div>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="list-card" shadow="never">
          <div slot="header" class="card-header">
            <span>我的用印申请</span>
            <div class="actions">
              <el-button size="mini" icon="el-icon-refresh" @click="getList">刷新</el-button>
            </div>
          </div>
          <el-table v-loading="listLoading" :data="sealList" border>
            <el-table-column label="状态" align="center" width="100">
              <template slot-scope="scope">
                <el-tag :type="statusType(scope.row.status)">{{ statusText(scope.row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="用印类型" align="center" prop="sealType" />
            <el-table-column label="用途说明" align="center" prop="purpose" show-overflow-tooltip />
            <el-table-column label="申请时间" align="center" prop="createTime" width="160">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="goDetail(scope.row)">查看</el-button>
                <el-button v-if="canPreviewReceipt(scope.row)" size="mini" type="text" @click="previewReceipt(scope.row)">预览</el-button>
                <el-button v-if="canPreviewReceipt(scope.row)" size="mini" type="text" @click="downloadReceipt(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-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { addSealReq, listSealReq } from '@/api/wms/seal'
import { listDept } from '@/api/wms/dept'
import FileUpload from '@/components/FileUpload'

export default {
  name: 'WmsSealRequest',
  dicts: ['hrm_stamp_image'],
  components: { FileUpload },
  data() {
    return {
      submitting: false,
      listLoading: false,
      deptOptions: [],
      sealList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createBy: this.$store.getters.name
      },
      form: {
        empId: this.$store.getters.id,
        deptId: '',
        sealType: '',
        purpose: '',
        applyFileIds: '',
        pageNo: 1,
        receiptRequired: 0,
        remark: ''
      },
      rules: {
        deptId: [{ required: true, message: '请选择审批部门', trigger: 'change' }],
        sealType: [{ required: true, message: '请选择/输入用印类型', trigger: 'change' }],
        purpose: [{ required: true, message: '请填写用途说明', trigger: 'blur' }],
        applyFileIds: [{ required: true, message: '请上传 PDF 附件', trigger: 'change' }],
        pageNo: [{ required: true, message: '请输入盖章页码', trigger: 'blur' }],
        receiptRequired: [{ required: true, message: '请选择是否需要回执', trigger: 'change' }]
      }
    }
  },
  computed: {
    currentApplicantText() {
      const user = this.$store?.state?.user || {}
      return user.nickName || user.userName || '当前用户'
    }
  },
  created() {
    this.loadDeptList()
    this.getList()
  },
  methods: {
    async loadDeptList() {
      try {
        const res = await listDept()
        this.deptOptions = res.data || []
      } catch (e) {
        this.deptOptions = []
      }
    },
    onDeptChange() {},
    statusText(status) {
      const map = { running: '审批中', draft: '草稿', approved: '已通过', rejected: '已驳回', canceled: '已撤销', pending: '待审批' }
      return map[status] || status || '-'
    },
    statusType(status) {
      const map = { running: 'warning', draft: 'info', approved: 'success', rejected: 'danger', canceled: 'info', pending: 'warning' }
      return map[status] || 'info'
    },
    getList() {
      this.listLoading = true
      listSealReq(this.queryParams)
        .then(res => {
          this.sealList = res.rows || []
          this.total = res.total || 0
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    goDetail(row) {
      this.$router.push({ path: '/job/sealDetail', query: { bizId: row.bizId } })
    },
    canPreviewReceipt(row) {
      return row.status === 'approved' && row.receiptFileIds
    },
    previewReceipt(row) {
      if (row.receiptFileIds) {
        window.open(row.receiptFileIds, '_blank')
      }
    },
    downloadReceipt(row) {
      if (row.receiptFileIds) {
        window.open(row.receiptFileIds, '_blank')
      }
    },
    async submit() {
      try {
        await this.$refs.formRef.validate()
        this.submitting = true
        let remark = this.form.remark || ''
        if (this.form.pageNo) {
          remark = remark ? `${remark}\n[盖章页码:第${this.form.pageNo}页]` : `[盖章页码:第${this.form.pageNo}页]`
        }
        const payload = {
          empId: this.form.empId,
          deptId: this.form.deptId,
          sealType: this.form.sealType,
          purpose: this.form.purpose,
          applyFileIds: this.form.applyFileIds,
          receiptRequired: this.form.receiptRequired,
          remark,
          status: 'pending'
        }
        await addSealReq(payload)
        this.$message.success('提交成功')
        this.getList()
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.request-page {
  padding: 16px 20px 32px;
  background: transparent;
}
.form-card {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
}
.list-card {
  border: 1px solid #eef0f4;
  border-radius: 10px;
  box-shadow: none;
  background: #ffffff;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #2b2f36;
}
.actions {
  display: flex;
  gap: 8px;
}
.metal-form { padding-right: 8px; }
.block-title {
  margin: 18px 0 10px;
  padding-left: 10px;
  font-weight: 600;
  color: #2f3440;
  border-left: 2px solid #cbd1db;
}
.hint-text {
  margin-top: 6px;
  font-size: 12px;
  color: #8a8f99;
  line-height: 1.4;
}
.form-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  margin-bottom: 12px;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  background: transparent;
}
.summary-title { font-size: 15px; font-weight: 700; color: #2b2f36; }
.summary-sub { margin-top: 4px; font-size: 12px; color: #8a8f99; }
.summary-right { display: flex; gap: 16px; }
.summary-item .k { font-size: 12px; color: #8a8f99; }
.summary-item .v { margin-top: 2px; font-weight: 600; color: #2b2f36; }
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
@media (max-width: 1200px) {
  .summary-right { display: none; }
}
</style>
