<!-- 设备收发管理详情 -- 任务单信息 -->
<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 { getOrderDetail } from '@/api/business/manager/order'
import type { dictType } from '@/global'
const props = defineProps({
  orderId: { // 任务单id
    type: String,
  },
})
// 表单
const form: Ref<IForm> = ref({
  orderNo: '', // 任务单编号
  delivererId: '', // 送检人id
  deliverer: '', // 送检人
  customerId: '', // 委托方id
  customerNo: '', // 委托方代码
  customerName: '', // 委托方名称
  customerPhone: '', // 委托方电话
  customerAddress: '', // 委托方地址
  planDeliverTime: '', // 预计送达时间
  requireOverTime: '', // 要求检完时间
  isUrgent: '', // 是否加急
  maintainMajor: '', // 检修专业
  createUserId: '', // 创建人id
  createUserName: '', // 创建人
  createTime: '', // 创建时间
  measureCompany: '', // 检定（校准）单位
  undertakerId: '', // 承接人id
  undertakerName: '', // 承接人
  undertakeTime: '', // 承接时间
  receiveStatus: '', // 接收状态
  receiveIllustrate: '', // 接收说明
})
// -------------------------------------------字典------------------------------------------
const isUrgentMap = ref({}) as any // 是否加急{1: 是}
const isUrgentList = ref<dictType[]>([])// 是否加急
const statusList = ref<dictType[]>([]) // 接收状态
const statusMap = ref({}) as any // 检定完成度、样品检定状态

// 获取字典值
async function getDict() {
  // 检测完成度
  const res = await getDictByCode('sampleStatus')
  res.data.forEach((item: any) => {
    statusMap.value[`${item.value}`] = item.name
  })
  // 是否加急
  getDictByCode('isUrgent').then((response) => {
    isUrgentList.value = response.data
  })
  // 接收状态
  getDictByCode('orderStatus').then((response) => {
    statusList.value = response.data
  })
}
// -------------------------------------------表格------------------------------------------
const list = ref<IDetailTableList[]>([])// 表格数据
// 表头
const columns = ref([
  { text: '统一编号', value: 'sampleNo', align: 'center', width: '160', disabled: true, required: true },
  { text: '设备名称', value: 'sampleName', align: 'center', required: false },
  { text: '型号规格', value: 'sampleModel', align: 'center', required: false },
  { text: '附件', value: 'appendixDescn', align: 'center', required: true },
  { text: '外观和功能检查', value: 'appearanceInspect', align: 'center', required: true },
  { text: '特殊要求', value: 'specialRequire', align: 'center', required: true },
  { text: '检校项目', value: 'measureContent', align: 'center', required: true },
  { text: '受检设备状态', value: 'sampleStatus', align: 'center' },
  { text: '检定完成度', value: 'measureCompletePercent', align: 'center' },
  { text: '检定完成时间', value: 'measureCompleteTime', align: 'center', width: '180' },
])

// 获取详细信息
const getInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getOrderDetail({ id: props.orderId }).then((res) => {
    form.value = res.data.data
    form.value.isUrgent = `${res.data.data.isUrgent}` // 是否加急
    list.value = res.data.data.customerSampleInfoList.map((item: { editable: Boolean; sampleStatus: string | number }) => {
      return {
        ...item,
        editable: false,
        sampleStatus: `${item.sampleStatus}` ? statusMap.value[item.sampleStatus] : item.sampleStatus,
      }
    })
    loading.close()
  })
}

onMounted(async () => {
  getDict().then(() => {
    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.orderNo"
              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.customerPhone"
              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.maintainMajor"
              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.createUserName" 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.measureCompany"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="承接人:">
            <el-input v-model="form.undertakerName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="承接时间:">
            <el-date-picker
              v-model="form.undertakeTime"
              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-select v-model="form.receiveStatus" disabled class="full-width-input">
              <el-option
                v-for="i in statusList"
                :key="i.value"
                :label="i.name"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="marg" prop="receiveIllustrate">
        <el-col :span="12">
          <el-form-item label="接收说明:">
            <el-input
              v-model="form.receiveIllustrate"
              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%;"
    >
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in columns"
        :key="item.value"
        show-overflow-tooltip
        :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>