<template>
  <div class="tab-content" v-loading="laoding">
    <div class="subtitle"><span></span> <el-button type="primary" v-auth="'edit'" size="small" @click="edit()">编辑</el-button></div>
    <el-descriptions class="margin-top" :column="2" border>
      <el-descriptions-item label="项目名称">{{ data.name }} </el-descriptions-item>
      <el-descriptions-item label="关键客户">{{ data.customName }} </el-descriptions-item>
      <el-descriptions-item label="地区">{{ data.address ? JSON.parse(data.address)?.name : '' }} </el-descriptions-item>
      <el-descriptions-item label="渠道商">{{ data.channelMerchants }} </el-descriptions-item>
      <el-descriptions-item label="维修公司">{{ data.repairCompany }} </el-descriptions-item>
      <el-descriptions-item label="维修电话">{{ data.repairMobile }} </el-descriptions-item>
      <el-descriptions-item label="详细地址">{{ data.addressDetail }} </el-descriptions-item>
    </el-descriptions>
    <EditForm ref="editFormRef" @getList="getInfo()"></EditForm>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';
import EditForm from '../list/edit-dialog.vue';
import api from '/@/api/projects';
import { ref } from 'vue';
const route = useRoute();

const code = route.params.id as string

const laoding = ref(false);
const editFormRef = ref();
const data = ref<any>({});
getInfo()
function getInfo() {
  api.detail(code).then((res: any) => {
    data.value = res
  }).finally(() => laoding.value = false)
}

function edit() {
  editFormRef.value.open(data.value);
}
</script>
