<template>
  <div class="detail-layout">
    <div class="cacp-group__box cacp-pd-m">
      <el-row justify="space-between">
        <el-col :span="12">
          <span class="back-btn" @click="onGoBack"
            ><el-icon :size="20" class="back"><Back /></el-icon></span
          ><span class="title">单据详情</span>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="primary" @click="onEdit">{{ state.isEdit ? '完成' : '修改' }}</el-button>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <div class="scroll-content">
        <el-scrollbar>
          <cacp-group-container title="单据信息">
            <template #content>
              <el-form
                :model="state.orderInfo"
                label-width="auto"
                label-position="left"
                :disabled="!state.isEdit"
                style="width: 550px"
              >
                <el-form-item label="单据号" prop="orderId">
                  <el-input v-model="state.orderInfo.orderId" disabled />
                </el-form-item>
                <el-form-item label="分类" prop="name">
                  <el-select v-model="state.orderInfo.categoryCode">
                    <el-option
                      v-for="item in categoryInfoList"
                      :key="item.categoryCode"
                      :label="item.categoryName"
                      :value="item.categoryCode"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="级别" prop="orderLevel">
                  <el-select v-model="state.orderInfo.orderLevel">
                    <el-option v-for="item in levelList" :key="item.code" :label="item.name" :value="item.code" />
                  </el-select>
                </el-form-item>
                <el-form-item label="数量" prop="orderAmount"
                  ><el-input-number v-model="state.orderInfo.orderAmount"></el-input-number
                ></el-form-item>
                <el-form-item label="创建人" prop="userName"
                  ><el-input v-model="state.orderInfo.userName" disabled></el-input
                ></el-form-item>
                <el-form-item label="附件" prop="accessoryList">
                  <accessory-uploader
                    v-model="state.orderInfo.accessoryList"
                    category="basic"
                    :disabled="!state.isEdit"
                    :limit="4"
                  ></accessory-uploader>
                </el-form-item>
              </el-form>
            </template>
          </cacp-group-container>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount } from 'vue'
import { type OrderInfo } from '@/types/order'
import { getOrder, updateOrder } from '@/apis/order'
import { useCategoryStore, useLevelStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { SuccessResultCode } from '@cacp/ui'
import AccessoryUploader from '@/components/accessory/AccessoryUploader.vue'
interface State {
  isEdit: boolean
  orderInfo: OrderInfo | null
}

const state = reactive<State>({
  isEdit: false,
  orderInfo: {
    categoryCode: '',
    orderAmount: 0,
    orderLevel: '',
    orderId: '',
    parentId: '',
    userId: '',
    userName: '',
    createTime: '',
    accessoryList: []
  }
})

const route = useRoute()
const router = useRouter()
const stores = useCategoryStore()
const { initCategory } = stores
const { categoryInfoList } = storeToRefs(stores)
const levelStores = useLevelStore()
const { initLevel } = levelStores
const { levelList } = storeToRefs(levelStores)

async function onLoadData(orderId: string) {
  const res = await getOrder(orderId)
  if (res.code == SuccessResultCode) {
    Object.assign(state.orderInfo, res.data)
  }
}

function onEdit() {
  state.isEdit = !state.isEdit
  if (!state.isEdit) {
    updateOrder({ ...state.orderInfo })
  }
}

function onGoBack() {
  router.back()
}

onBeforeMount(async () => {
  initLevel()
  initCategory()
  const orderId = route.query.orderId as string
  if (orderId) {
    onLoadData(orderId)
  }
})
</script>
<style scoped>
.el-divider {
  margin: 10px 0;
}
.detail-layout {
  overflow: hidden;
  height: 100%;
  padding: var(--cacp-margin-space-l);
}
.cacp-group__box {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cacp-group__container {
  padding-left: 0;
  padding-right: 0;
}

.scroll-content {
  flex: 1;
  overflow: hidden;
}
.back-btn {
  margin-right: var(--cacp-margin-space-m);
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
}
.title {
  font-weight: bold;
  vertical-align: middle;
}
</style>
