<!-- 设备收发管理详情 -- 任务单信息 -->
<script lang="ts" setup name="SendReceiveDetailOrder">
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
import type { IDetailTableList, IForm } from '@/views/business/manager/order/order-interface'
import { getDictByCode } from '@/api/system/dict'
import { getUid } from '@/utils/getUid'
import type { dictType } from '@/global'
const infoId = ref('') // id
// 表单
const form: Ref<IForm> = ref({
  orderCode: '', // 任务单编号
  createUserId: '', // 创建人id
  creator: '', // 创建人
  createTime: '', // 创建时间
  deliverer: '', // 送检人
  customerId: '', // 委托方id
  customerNo: '', // 委托方代码
  customerName: '', // 委托方名称
  customerAddress: '', // 委托方地址
  phone: '', // 委托方电话
  planDeliverTime: '', // 预计送达时间
  requireOverTime: '', // 要求检完时间
  isUrgent: '', // 是否加急
  major: '', // 检修专业
  company: '', // 检定（校准）单位
  cjr: '', // 承接人
  cjsj: '', // 承接时间
  status: '', // 接收状态
  state: '', // 接收说明
})
// -------------------------------------------字典------------------------------------------
const isUrgentMap = ref({}) as any // 是否加急{1: 是}
const isUrgentList = ref<dictType[]>([])// 是否加急
const statusMap = ref<dictType[]>([]) // 接收状态

// 获取字典值
function getDict() {
  // 是否加急
  getDictByCode('isUrgent').then((response) => {
    isUrgentList.value = response.data
  })
  // 接收状态
  getDictByCode('orderStatus').then((response) => {
    statusMap.value = response.data
  })
}
// -------------------------------------------表格------------------------------------------
const list = ref<IDetailTableList[]>([])// 表格数据
// 表头
const columns = ref([
  { text: '统一编号', value: 'equipmentNo', align: 'center', width: '240', disabled: true, required: true },
  { text: '设备名称', value: 'equipmentName', align: 'center', required: false },
  { text: '型号规格', value: 'model', align: 'center', required: false },
  { text: '附件', value: 'fj', align: 'center', required: true },
  { text: '外观和功能检查', value: 'wghgnjc', align: 'center', required: true },
  { text: '特殊要求', value: 'tsyq', align: 'center', required: true },
  { text: '检校项目', value: 'jjxm', align: 'center', required: true },
  { text: '检定完成度', value: 'jdwcd', align: 'center', required: true },
  { text: '检定完成时间', value: 'jdwcsj', align: 'center', required: true, width: '180' },
])

// 获取详细信息
const getInfo = () => {
  // const loading = ElLoading.service({
  //   lock: true,
  //   background: 'rgba(255, 255, 255, 0.8)',
  // })
}

onMounted(async () => {
  await getDict()
  getInfo() // 获取任务单详情
})
</script>

<template>
  <detail-block title="">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :label-width="130"
      label-position="right"
    >
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="任务单编号:" prop="orderCode">
            <el-input
              v-model="form.orderCode"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="送检人:" prop="deliverer">
            <el-input
              v-model="form.deliverer"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托方" prop="customerName">
            <el-input
              v-model="form.customerName"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话" prop="phone">
            <el-input
              v-model="form.phone"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预计送达时间:" prop="planDeliverTime">
            <el-date-picker
              v-model="form.planDeliverTime"
              type="datetime"
              placeholder=""
              class="detail-input"
              disabled
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="要求检完时间:" prop="requireOverTime">
            <el-date-picker
              v-model="form.requireOverTime"
              type="datetime"
              placeholder=""
              class="detail-input"
              disabled
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否加急:" prop="isUrgent">
            <el-select v-model="form.isUrgent" placeholder="" disabled class="full-width-input">
              <el-option
                v-for="i in isUrgentList"
                :key="i.value"
                :label="i.name"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检修专业:" prop="major">
            <el-input
              v-model="form.major"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="创建人:">
            <el-input v-model="form.creator" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间:">
            <el-date-picker
              v-model="form.createTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="委托方地址:">
            <el-input
              v-model="form.customerAddress"
              type="textarea"
              autosize
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检定（校准）单位:">
            <el-input
              v-model="form.company"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="承接人:">
            <el-input v-model="form.cjr" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="承接时间:">
            <el-date-picker
              v-model="form.cjsj"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              disabled
              class="full-width-input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="接收状态:">
            <el-input v-model="form.status" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg" prop="state">
        <el-col :span="12">
          <el-form-item label="接收说明:">
            <el-input
              v-model="form.state"
              type="textarea"
              autosize
              disabled
              class="detail-input"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </detail-block>
  <!-- 表格 -->
  <detail-block title="任务单列表">
    <el-table
      :data="list"
      border
      style="width: 100%;"
      max-height="600"
    >
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in columns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        :width="item.width"
        align="center"
      />
    </el-table>
  </detail-block>
</template>

<style lang="scss" scoped>
.customer-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  margin: 24px 0;

  .img {
    width: 32px;
    height: 32px;
    margin-right: 14px;
    vertical-align: middle;
  }
}

.customer-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  margin: 40px 0;

  .content {
    display: flex;
    font-size: 14px;

    .title {
      font-weight: 600;
      color: #000;
    }

    .value {
      margin-left: 10px;
    }
  }
}

.selectBtn {
  position: absolute;
  top: 0;
  right: 0;
}

.receipt-signature {
  display: flex;
  justify-content: flex-end;
  margin-right: 300px;
  // padding: 50px 250px 50px 150px;
  padding: 50px;
  font-size: 28px;
  color: #000;
  font-weight: 600;

  .content {
    display: flex;
    position: relative;

    .img {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
    }

    .img-name {
      position: absolute;
      left: 220px;
      top: -30px;
      z-index: 1;
    }

    .title {
      margin-right: 32px;
      letter-spacing: 6px;
    }

    .deliverer-time {
      display: flex;
      flex-direction: column;

      .text-title {
        letter-spacing: 2px;
      }

      .time {
        margin-top: 30px;
        letter-spacing: 2px;
      }

      .text {
        font-size: 24px;
        font-weight: 500;
        margin-left: 10px;
      }
    }
  }
}
</style>