<script lang="ts" setup>
import { useFormGroup } from '@idux/cdk'
import DisposeRecodeApi from '@/pages/dispose-recode/dispose-recode-api.ts'
import Toast from '@/components/toast'
import { showAuditStatus } from '@/common/app/contants.ts'

const show = ref(false)
const ins = ref<HTMLElement | null>(null)
const data = reactive<DisposeRecodeTypes.DisposeRecodeData>({
  id: '',
  origin: '',
  clearingCompany: '',
  licensePlate: '',
  contact: '',
  contactPhone: '',
  inWeight: '',
  outWeight: '',
  suttleWeight: '',
  inTime: '',
  outTime: '',
  disposalSite: '',
  inFrontPhoto: '',
  inBodyPhoto: '',
  outFrontPhoto: '',
  outBodyPhoto: '',
  timeOutStatus: '',
  timeOutStatusTxt: '',
  tspPhotos: [],
  zcPhotos: [],
  auditStatus: 'YiShenHe',
  auditStatusTxt: '',
  problemDesc: ''
})
const container = ref<HTMLElement | undefined>(undefined)

const auditData = useFormGroup<{
  auditStatus: 'YiShenHe' | 'YouWenTi',
  problemDesc: string
}>({
  auditStatus: [ 'YiShenHe' ],
  problemDesc: [ '' ],
})

auditData.get('auditStatus')?.watchValue((val) => {
  if (val === 'YiShenHe') {
    auditData.get('problemDesc')?.setValue('')
  }
})

const disabledDesc = computed(() => {
  const value = auditData.get('auditStatus')?.getValue()
  return value === 'YiShenHe'
})

const auditStatusDataSource = [
  {key: 'YiShenHe', label: '确认'},
  {key: 'YouWenTi', label: '有问题'},
]

function auditHandler() {
  if (auditData.valid.value) {
    DisposeRecodeApi.audit({
      id: data.id,
      auditStatus: auditData.get('auditStatus')?.getValue()!,
      problemDesc: auditData.get('problemDesc')?.getValue()!,
    }).then(() => {
      Toast.success('审核成功')
      closeHandler()
    }).catch(() => {
      Toast.error('审核失败')
    })
  } else {
    auditData.markAsDirty()
    Toast.error('请填写完整信息')
  }
}

function closeHandler() {
  container.value!.style!.width = '0'
  container.value!.style!.height = '0'
  show.value = false
}

defineExpose({
  open(detail: DisposeRecodeTypes.DisposeRecodeData) {
    Object.assign(data, detail)
    container.value!.style.width = '100%'
    container.value!.style.height = '100%'
    show.value = true
  }
})

</script>

<template>
  <div ref="container" style="position: absolute;width: 0;height: 0">
    <IxModal ref="ins" v-model:visible="show" :container="container"
        :mask="false"
        :on-before-close="closeHandler" cancel-text="关闭" class="dispose-recode-detail" draggable header="处置详情" maskClosable type="default" width="50rem">
      <div class="dispose-recode-detail-info">
        <p class="detail-item"><span>来源地：</span><span>{{ data.origin ?? '-' }}</span></p>
        <p class="detail-item"><span>清运公司：</span><span>{{ data.clearingCompany ?? '-' }}</span></p>
        <p class="detail-item"><span>车牌号：</span><span>{{ data.licensePlate ?? '-' }}</span></p>
        <p class="detail-item"><span>联系人：</span><span>{{ data.contact ?? '-' }}</span></p>
        <p class="detail-item"><span>联系电话：</span><span>{{ data.contactPhone ?? '-' }}</span></p>
        <p class="detail-item"><span>进场磅重（吨）：</span><span>{{ data.inWeight ?? '-' }}</span></p>
        <p class="detail-item"><span>出场磅重（吨）：</span><span>{{ data.outWeight ?? '-' }}</span></p>
        <p class="detail-item"><span>净重（吨）：</span><span>{{ data.suttleWeight ?? '-' }}</span></p>
        <p class="detail-item"><span>进场时间：</span><span>{{ data.inTime ?? '-' }}</span></p>
        <p class="detail-item"><span>出场时间：</span><span>{{ data.outTime ?? '-' }}</span></p>
        <p class="detail-item"><span>消纳场名称：</span><span>{{ data.disposalSite ?? '-' }}</span></p>
        <p class="detail-item"><span>超时状态：</span><span>{{ data.timeOutStatusTxt ?? '-' }}</span></p>
        <p v-if="showAuditStatus" class="detail-item"><span>审查状态：</span><span>{{ data.auditStatusTxt ?? '-' }}</span></p>
        <p v-if="showAuditStatus" class="detail-item"><span>问题描述：</span><span>{{ data.problemDesc ?? '-' }}</span></p>
      </div>
      <div class="dispose-recode-detail-img-title">车辆照片</div>
      <div class="dispose-recode-detail-img">
        <div class="detail-item img-card">
          <div class="img-title">进场车头照</div>
          <IxImage :src="data.inFrontPhoto" alt="进场前"/>
        </div>
        <div class="detail-item img-card">
          <div class="img-title">进场车身照</div>
          <IxImage :src="data.inBodyPhoto" alt="进场后"/>
        </div>
        <div class="detail-item img-card">
          <div class="img-title">出出场车头照</div>
          <IxImage :src="data.outFrontPhoto" alt="出场前"/>
        </div>
        <div class="detail-item img-card">
          <div class="img-title">出场车身照</div>
          <IxImage :src="data.outBodyPhoto" alt="出场后"/>
        </div>
      </div>
      <div class="dispose-recode-detail-img-title">现场照片</div>
      <div v-if="data.tspPhotos == null || data.tspPhotos.length === 0">
        <IxEmpty/>
      </div>
      <div v-else class="dispose-recode-detail-img">
        <p v-for="tspPhoto in data.tspPhotos" class="detail-item img-card"><span class="img-title"></span>
          <IxImage :src="tspPhoto" alt="装车照片"/>
        </p>
      </div>
      <div class="dispose-recode-detail-img-title">装车照片</div>
      <div v-if="data.zcPhotos == null || data.zcPhotos.length === 0">
        <IxEmpty/>
      </div>
      <div v-else class="dispose-recode-detail-img">
        <p v-for="tspPhoto in data.zcPhotos" class="detail-item img-card"><span class="img-title"></span>
          <IxImage :src="tspPhoto" alt="装车照片"/>
        </p>
      </div>
      <div class="dispose-recode-detail-img-title">轨迹图</div>
      <img alt="" class="guiji" src="@/assets/images/temp.gif">
      <template #footer>
        <IxPopconfirm v-if="showAuditStatus &&data.auditStatus === 'DaiShenHe'" icon="whitelist" placement="top" title="审查" @ok="auditHandler">
          <IxButton mode="primary">审查</IxButton>
          <template #content>
            <IxForm :control="auditData" layout="inline">
              <IxFormItem messageTooltip>
                <IxRadioGroup :dataSource="auditStatusDataSource" control="auditStatus" name="audit"></IxRadioGroup>
              </IxFormItem>
              <IxFormItem messageTooltip>
                <IxInput :placeholder="disabledDesc?'':'请输入问题描述'" :readonly="disabledDesc" control="problemDesc"/>
              </IxFormItem>
            </IxForm>
          </template>
        </IxPopconfirm>
        <IxButton @click="closeHandler">关闭</IxButton>
      </template>
    </IxModal>
  </div>
</template>

<style lang="stylus" scoped>
.dispose-recode-detail-info, .dispose-recode-detail-img {
  display grid !important
  grid-template-columns 1fr 1fr
  grid-gap 1rem
}

.dispose-recode-detail-img-title {
  color #1F2937
  font-weight bold
  margin-bottom .5rem
}

.img-card {
  background-color: rgb(249 250 251);
  padding .5rem
  border-radius .5rem
  width: 100%;

  .img-title {
    text-align center
  }

  :deep(.ix-image) {
    width: 100%;

    img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      min-height unset
      min-width unset;
    }
  }
}


.detail-item {

  span, img {
    display block
  }

  span:first-child {
    color #6B7280
  }

  span:nth-child(2) {
    color #111827
  }
}

:deep(.ix-modal-body) {
  max-height: 45rem;
}

:deep(.ix-modal-wrapper),
:deep(.ix-mask) {
  position absolute
}

.guiji {
  width 100%
}

</style>
