<!-- 设备收发管理详情 -- 任务单信息 -->
<script lang="ts" setup name="SendReceiveDetailOrder">
import type { Ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { DateModelType, 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'
import { getUserList } from '@/api/system/user'

const props = defineProps({
  orderId: { // 任务单id
    type: String,
  },
})
const emits = defineEmits(['giveCustomerId'])

// 表单
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: '', // 接收说明
  isOnSiteCheck: 0, // 是否现场检定
  onSiteCheckTime: '', // 现场检定时间
  siteExecutiveId: '', // 现场测试、校准或检定审批单id
  siteExecutiveName: '', // 现场测试、校准或检定审批单名称
  siteExecutiveNo: '', // 现场测试、校准或检定审批单编号
})
const onSiteCheckTimeRange = ref<[DateModelType, DateModelType]>(['', '']) // 现场检定时间范围
// -------------------------------------------字典------------------------------------------
const isUrgentMap = ref({}) as any // 是否加急{1: 是}
const isUrgentList = ref<dictType[]>([])// 是否加急
const statusList = ref<dictType[]>([]) // 接收状态
const statusMap = ref({}) as any // 检定完成度、样品检定状态
const userList = ref<{ [key: string]: string }[]>([]) // 用户列表

// 获取字典值
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
  })
  // 获取用户列表
  getUserList({ offset: 1, limit: 999999 }).then((res: any) => {
    userList.value = res.data.rows
  })
}
// -------------------------------------------表格------------------------------------------
const list = ref<IDetailTableList[]>([])// 表格数据
// 表头
const columns = ref([
  { text: '统一编号', value: 'sampleNo', align: 'center', width: '180', disabled: true, required: true },
  { text: '设备名称', value: 'sampleName', align: 'center', required: false },
  { text: '型号规格', value: 'sampleModel', align: 'center', required: false },
  { text: '出厂编号', value: 'manufactureNo', align: 'center', required: false },
  { text: '生产厂家', value: 'manufacturer', align: 'center', required: false },
  { text: '辅助字段', value: 'helpInstruction', align: 'center', required: false },
  { text: '附件', value: 'appendixDescn', align: 'center', required: true },
  { text: '特殊要求', value: 'specialRequire', align: 'center', required: false },
  { text: '受检设备状态', value: 'sampleStatusName', 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
    emits('giveCustomerId', res.data.data.customerId)
    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,
      }
    })
    if (res.data.data.onSiteCheckTime) {
      onSiteCheckTimeRange.value = res.data.data.onSiteCheckTime.split(',')
    }
    loading.close()
  })
}
watch(onSiteCheckTimeRange, (val) => { // 监听现场检定时间
  if (val) {
    form.value.onSiteCheckTime = val.join(',')
  }
  else {
    form.value.onSiteCheckTime = ''
  }
})
onMounted(async () => {
  getDict().then(() => {
    getInfo()
  })
})
</script>

<template>
  <detail-block title="" class="mytask-order-detail">
    <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="orderNo">
            <el-input
              v-model="form.orderNo"
              placeholder="任务单编号"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="送检人" prop="delivererId">
            <el-select
              v-model="form.deliverer"
              filterable
              placeholder="送检人"
              class="detail-input"
              disabled
            >
              <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托方" prop="customerName">
            <el-input
              v-model="form.customerName"
              placeholder="委托方"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="使用部门">
            <el-input
              v-model="form.deptName"
              placeholder="使用部门"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话" prop="customerPhone">
            <el-input
              v-model="form.customerPhone"
              placeholder="电话"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="是否现场检定:" prop="isOnSiteCheck">
            <el-radio-group v-model="form.isOnSiteCheck" disabled>
              <el-radio :label="1">
                是
              </el-radio>
              <el-radio :label="0">
                否
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.isOnSiteCheck === 1" :span="12">
          <el-form-item label="现场检定时间:" prop="onSiteCheckTime">
            <el-date-picker
              v-model="onSiteCheckTimeRange"
              type="datetimerange"
              range-separator="至"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              start-placeholder="现场检定时间(开始)"
              end-placeholder="现场检定时间(结束)"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.isOnSiteCheck === 1" :span="6">
          <el-form-item label="现场检定审批单">
            <el-input
              v-model="form.siteExecutiveId"
              placeholder="现场检定审批单"
              class="detail-input"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.isOnSiteCheck === 0" :span="6">
          <el-form-item label="预计送达时间:" prop="planDeliverTime">
            <el-date-picker
              v-model="form.planDeliverTime"
              type="datetime"
              class="full-width-input"
              placeholder="预计送达时间"
              disabled
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.isOnSiteCheck === 0" :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="maintainMajor">
            <el-input
              v-model="form.maintainMajor"
              placeholder="检修专业"
              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"
              placeholder="委托方地址"
              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" placeholder="接收状态" 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
              laceholder="接收说明"
              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>

<style lang="scss">
.mytask-order-detail {
  .el-radio__label {
    display: block !important;
  }
}
</style>