<template>
  <div class="AddBuildingBox">
    <PageHeader></PageHeader>
    <div class="AddBuildingBody">
      <div class="title flex flex-items-center justify-between">
        <div>
          <span>基本信息</span>
          <el-button class="ml-10px" link type="primary"> 编辑</el-button>
        </div>
        <el-button @click="cancelForm"> 返回</el-button>
      </div>
      <div class="addBuildingFormBody">
        <div class="infobox">
          <div class="info_item">
            <div class="label">设备分类：</div>
            <span class="value">{{ form.categoryName }}</span>
          </div>
          <div class="info_item">
            <div class="label">设备名称：</div>
            <span class="value">{{ form.deviceName }}</span>
          </div>
          <div class="info_item">
            <div class="label">设备编号：</div>
            <span class="value">{{ form.deviceCode }}</span>
          </div>
          <div class="info_item">
            <div class="label">品牌型号：</div>
            <span class="value">{{ form.deviceModel }}</span>
          </div>
          <div class="info_item">
            <div class="label">所在区域：</div>
            <span class="value">{{ form.area }}</span>
          </div>
          <div class="info_item">
            <div class="label">设备状态：</div>
            <span class="value">电梯</span>
          </div>
          <div class="info_item">
            <div class="label">维护人员：</div>
            <span class="value">{{ form.maintainUserListName }}</span>
          </div>
          <div class="info_item">
            <div class="label">添加时间：</div>
            <span class="value">{{ form.createTime }}</span>
          </div>
          <div></div>
          <div class="info_item">
            <div class="label">备注：</div>
            <span class="value">{{ form.remark }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="AddBuildingBody">
      <div class="title">维修记录</div>
      <div class="addBuildingFormBody">
        <el-table v-loading="loading" :data="deviceRepairList">
          <el-table-column type="index" align="center" />
          <el-table-column label="设备名称" align="center" prop="deviceName" />
          <el-table-column label="设备编号" align="center" prop="deviceCode" />
          <el-table-column label="维修人员" align="center" prop="maintainUserNames" />
          <el-table-column label="故障描述" align="center" prop="faultDesc" />
          <el-table-column label="维修结果" align="center" prop="repairResult">
            <template #default="scope">
              <dict-tag :options="com_equipment_repair_status" :value="scope.row.repairResult"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" @click="handleMain(scope.row)">详情</el-button>
              <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getlist" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { getDevice } from '@/api/system/equipment/archive';
import { DeviceRepairVO } from '@/api/system/equipment/Repair/type';
import { delDeviceRepair, listDeviceRepair } from '@/api/system/equipment/Repair';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_equipment_repair_status } = toRefs<any>(proxy?.useDict('com_equipment_repair_status'));

const router = useRouter();
const route = useRoute();
const form = ref({
  id: null,
  categoryName: '', // 分类id、
  deviceName: '', // 设备名称
  deviceCode: '', // 编号
  deviceModel: '', // 型号
  area: '', // 区域
  status: '0', // 区域
  maintainUserIds: '', // 设备维护人员
  maintainUserListName: '', // 设备维护人员
  createTime: '', // 设备维护人员
  remark: '' // 备注
});

const userid = ref(null);
const total = ref(0);
const loading = ref(false);
const deviceRepairList = ref([]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10
});

function init() {
  if (route.query.id) {
    userid.value = route.query.id;
    getDevice(userid.value).then(async (res) => {
      form.value = {
        id: res.data.id,
        categoryName: res.data.categoryName,
        deviceName: res.data.deviceName,
        deviceCode: res.data.deviceCode,
        deviceModel: res.data.deviceModel,
        area: res.data.area,
        status: res.data.status,
        maintainUserIds: res.data.maintainUserIds,
        remark: res.data.remark,
        createTime: res.data.createTime,
        maintainUserListName: ''
      };
      if (res.data.maintainUserList && res.data.maintainUserList.length > 0) {
        form.value.maintainUserListName = res.data.maintainUserList
          .map((it) => (it.nickName ? it.nickName : null))
          .filter((it) => it !== null)
          .join(',');
      }
      getlist();
    });
  }
}
init();

async function getlist() {
  loading.value = true;
  listDeviceRepair()
    .then((rows) => {
      deviceRepairList.value = rows.rows;
      deviceRepairList.value.forEach((item) => {
        item.maintainUserNames = item.maintainUserList
          .map((i) => i.nickName)
          .filter((i) => i)
          .join(',');
      });
      total.value = rows.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 删除按钮操作 */
const handleDelete = async (row?: DeviceRepairVO) => {
  const _ids = row?.id;
  await proxy?.$modal.confirm('是否确认删除维修工单？');
  await delDeviceRepair(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  getlist();
};

const handleMain = (row) => {
  router.push({
    path: '/equipment/equipmentRepairMain',
    query: {
      id: row.id
    }
  });
};
const handleEdit = (row) => {
  router.push({
    path: '/equipment/editEquipmentRepair',
    query: {
      id: row.id
    }
  });
};
// 推出
const cancelForm = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.AddBuildingBox {
  padding: 15px;
  height: 100%;
  width: 100%;
}
.AddBuildingBody {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  padding: 15px;
  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    border-bottom: 1px solid #bbbbbb;
    margin-bottom: 30px;
  }

  .addBuildingFormBody {
    padding-left: 20px;
    .infobox {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(3, 1fr);
      .info_item {
        display: flex;
        align-items: center;
        .label {
          font-size: 15px;
          width: 100px;
          text-align: right;
        }
        .value {
          font-weight: 450;
        }
      }
    }
  }
}
</style>
