<template>
  <div>
    <div class="header">
      <el-page-header @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3"> {{ dataObj.id }} </span>
        </template>
      </el-page-header>
    </div>

    
    <div class="form-data" v-loading="loading">
      <el-form label-width="160" ref="projectFormRef" :model="form">


        <el-row justify="space-evenly">
          <el-col :span="6">
            <el-form-item label="操作项：" prop="duty">
              <dict-tag :options="change_type" :value="parseInt(dataObj.changeType)"></dict-tag>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="操作人：" prop="duty">
              <span>{{ dataObj.createBy }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-evenly">
          <el-col :span="6">
            <el-form-item label="IP地址：" prop="duty">
              <span>{{ dataObj.operIp }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="操作时间：" prop="duty">
              <span>{{ dataObj.createTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="before-list">
          <el-col :offset="4" :span="16">
            <el-form-item label="操作前内容：" prop="duty">
              <p v-if="dataObj.changeType == '1'" class="before-item"> / </p>
              <p v-else class="before-item" v-for="(value,key) in beforeObj">
                <span>{{ key }}：</span>
                <div v-if="typeof(value) == 'object'">
                  <span v-for="(v,i) in value" :key="i">{{ Object.keys(v)[0] }}:{{ Object.values(v)[0] }} ; {{ Object.keys(v)[1] }}:{{ Object.values(v)[1] }}<el-divider v-if="i != value.length - 1"  direction="vertical"></el-divider></span>
                </div>
                <span v-else>{{ value }}</span>
              </p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="after-list">
          <el-col :offset="4" :span="16">
            <el-form-item label="操作后内容：" prop="duty">
              <p v-if="dataObj.changeType == '3'" class="after-item"> / </p>
              <p v-else class="after-item" v-for="(value,key) in afterObj">
                <span>{{ key }}：</span>
                <div v-if="typeof(value) == 'object'">
                  <span v-for="(v,i) in value" :key="i">{{ Object.keys(v)[0] }}:{{ Object.values(v)[0] }} ; {{ Object.keys(v)[1] }}:{{ Object.values(v)[1] }}<el-divider v-if="i != value.length-1"  direction="vertical"></el-divider></span>
                </div>
                <span v-else>{{ value }}</span>
              </p>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>

  </div>
</template>

<script setup lang="ts">
import { getChange } from '@/api/backStage/remain';
import {  actionForm  } from '@/api/project/maintain/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { change_type } = toRefs<any>(proxy?.useDict('change_type'));
const loading = ref(false);
const initForm: actionForm = {   //初始表单
  actionItem:'',
};
const form = ref({ ...initForm })
const route = useRoute();
const router = useRouter();
const dataObj = ref({
  id:'',
  
  businessType:'',
  changeType:'',
  createBy:'',
  createTime:'',
  operIp:'',

  afterChange:{},
  beforeChange:{},
});
const beforeObj = ref([]);
const afterObj = ref([]);
const getData =async (id)=>{
  loading.value = true
  const res = await getChange(id).finally(()=>{loading.value = false;})
  console.log(`ersrr`,res);
  beforeObj.value = JSON.parse(res.data.beforeChange);
  afterObj.value = JSON.parse(res.data.afterChange);
  
  
  dataObj.value = res.data;
  
}

const goBack = () => {
  router.back();
}

onActivated (()=>{
  getData(route.query.id);
})
onMounted (()=>{
  getData(route.query.id);
})
</script>

<style lang="scss" scoped>
.header{
  padding: 1.5vh 0 0 2vw;
}
.before-item , .after-item{
  margin: 0;
}
.before-list , .after-list{
  :deep(.el-form-item__content){
    display: flex;
    flex-direction: column;
    align-items: start;
  }
}
</style>