<template>
  <a-modal
    v-model="localVisible"
    title="工单详情"
    width="65vw"
    @cancel="handleCancel"
  >
    <a-form layout="inline" style="display: flex;justify-content: space-between ">
      <a-form-item style="margin-left: 5px" label="工单编号">{{ dataSource.id }}</a-form-item>
      <a-form-item label="开工时间">{{ dataSource.startTime }}</a-form-item>
      <a-form-item label="设备">{{ dataSource.deviceId_dictText }}</a-form-item>
      <a-form-item label="工单负责人">{{ dataSource.coordinator_dictText }}</a-form-item>
      <!--      <a-form-item label="工单配合人">{{ dataSource.executor_dictText }}</a-form-item>-->
    </a-form>
    <a-row class="review-row" v-if="regular">
      <!--      <a-col :span="5" class="review-col">-->
      <!--        <div class="label">工单编号：</div>-->
      <!--        <div>{{ dataSource.id }}</div>-->
      <!--      </a-col>-->
      <a-col :span="6" v-for="i in 4" :key="i" class="review-col">
        <template v-if="regular[`review${i}`]">
          <div class="label">{{ regular[`review${i}`] }}：</div>
          <div>{{ dataSource[`review${i}_dictText`] }}</div>
        </template>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :loading="loading"
      :data-source="dataSource.workOrderDetailModels"
      :pagination="false"
      :scroll="{ y: 500 }"
      bordered
      row-key="id"
    >
      <template slot="dictSlot" slot-scope="text,record">
        <j-dict-tag :text="text" dict-code="bu_device_type,type_name,id" />
      </template>
      <template slot="resultSlot" slot-scope="text,record">
        <a-badge :count="record.collectNum>1?1:0" dot @click="checkOldVersion(record)">
          <p style="color: #00DB00" v-if="text === '0'">&#x221A;</p>
          <p style="color: red" v-else-if="text == null">&#x00D7;</p>
          <p v-else :style="{
            whiteSpace: 'pre-line',
            backgroundColor: record.resultOverGauge ? '#d8ffe3' : '#ffd7d7'
          }">{{ text }}</p>
        </a-badge>
      </template>
      <!--      <template slot="checkSlot" slot-scope="text,record">-->
      <!--        <a-tag v-if="text === '合格'" color="green">合格</a-tag>-->
      <!--        <a-tag v-else color="red">不合格</a-tag>-->
      <!--      </template>-->
      <template #isMutual="text, record">
        <div v-if="text===0">——</div>
        <div v-else>{{ record.mutualInspection }}</div>
      </template>
      <template #isPersonalized="text, record">
        <div v-if="text===0">——</div>
        <div v-else>{{ record.specialInspection }}</div>
      </template>
    </a-table>
    <template #footer>
      <div class="footer-buttons" v-if="masterFlag && regular">
        <div v-for="index in 4" :key="index">
          <a-button
            v-if="regular[`review${index}`] && !dataSource[`review${index}`]"
            type="primary"
            @click="handleReviewClick(regular[`review${index}`],index)"
          >
            {{ regular[`review${index}`] }}审核
          </a-button>
        </div>
      </div>
    </template>

    <a-modal
      v-model="recordVisible"
      title="采集日志"
      width="40vw"
      :footer="null"
      @cancel="closeRecords"
    >
      <a-table
        bordered
        rowKey="id"
        :columns="rcolumns"
        :dataSource="records"
        :loading="rloading"
        :pagination="false"
        :scroll="{ y: 350 }"
      >
        <template slot="resultSlot" slot-scope="text,record">
          <p :style="{
              backgroundColor: record.resultOverGauge ? '#d8ffe3' : '#ffd7d7'
            }">{{ text }}</p>
        </template>
      </a-table>
    </a-modal>
  </a-modal>
</template>

<script>
import { putAction, getAction } from '@api/manage'
import { containsAny } from '@/utils/util'
const columns = [
  {
    title: "#",
    dataIndex: "dispOrder",
    width: 55,
    align: 'center',
  },
  {
    title: "检查类型",
    dataIndex: "checkType_dictText",
    width: "10%",
    align: 'center',
  },
  {
    title: "检查项点",
    dataIndex: "depard_dictText",
    width: "15%",
    align: 'center',
  },
  {
    title: "检查内容及要求",
    dataIndex: "content",
    width: "30%",
    align: 'center',
  },
  {
    title: "检查/测量结果",
    dataIndex: "checkResult",
    width: "15%",
    align: 'center',
    scopedSlots: { customRender: "resultSlot" },
  },
  {
    title: "自检",
    dataIndex: "selfInspection",
    width: "10%",
    align: 'center',
    // scopedSlots: { customRender: "checkSlot" },
  },
  {
    title: "互检",
    dataIndex: "isMutual",
    width: "10%",
    align: 'center',
    scopedSlots: { customRender: "isMutual" },
  },
  {
    title: "专检",
    dataIndex: "isPersonalized",
    width: "10%",
    align: 'center',
    scopedSlots: { customRender: "isPersonalized" },
  },
]
const REVIEW_CONFIGS = {
  title: '设备工程师审核',
  content: '设备是否可以交付使用?',
  okText: '是',
  cancelText: '否'
};
const EQUIP_STR = ['设备工程师','专业工程师'];
export default {
  name: 'WorkOrderDetailModel',
  props:{
    // 控制对话框显示/隐藏
    visible: {
      type: Boolean,
      default: false,
    },
    masterFlag: {
      type: Boolean,
      default: false,
    },
    orderId:{
      type: String,
      default: '',
    }
  },
  data(){
    return{
      columns, // 表格列定义
      localVisible: this.visible,
      loading: false, // 加载状态
      dataSource: {}, // 表格数据
      regular: {},
      editUrl: "/workOrder/workOrder/edit",
      // 表头
      rcolumns: [
        {
          title:'版本',
          align:"center",
          width: 70,
          dataIndex: 'collectNum'
        },
        {
          title:'测量值',
          align:"center",
          width: 120,
          dataIndex: 'numericValue',
          scopedSlots: { customRender: "resultSlot" },
        },
        {
          title:'单位',
          align:"center",
          width: 90,
          dataIndex: 'unit'
        },
        {
          title:'测量人',
          align:"center",
          width: 100,
          dataIndex: 'inspector'
        },
        {
          title:'测量时间',
          align:"center",
          width: 200,
          dataIndex: 'inspecTime'
        },
        {
          title:'备注',
          align:"center",
          dataIndex: 'remark'
        },
      ],
      recordVisible: false,
      records: [],
      rloading: false,
    }
  },
  watch: {
    visible(newVal) {
      this.localVisible = newVal
      if(newVal) {
        this.loadDataSource();
      }
    }
  },
  // mounted(){
  //   this.loadDataSource()
  // },
  methods: {
    loadDataSource() {
      this.loading = true
      getAction('/workOrder/workOrder/getDetailbyId', {id: this.orderId, queryAll:1}).then(res=>{
        if (res.success && res.result != null) {
          console.log("detail",res.result);
          this.dataSource = res.result;
          this.regular = this.dataSource.regular;
          this.loading = false
        }
      })
    },

    handleReviewClick(reviewLabel,reviewType) {
      if (containsAny(reviewLabel,EQUIP_STR)) {
        this.$confirm({
          ...REVIEW_CONFIGS,
          onOk: () => this.handleReview(reviewType, 1),
          onCancel: () => this.handleReview(reviewType, 0)
        });
      } else {
        this.handleReview(reviewType);
      }
    },
    // 公共方法：处理审核逻辑
    handleReview(reviewType, isDeliverable = null) {
      this.loading = true;
      const payload = {
        id: this.dataSource.id,
        reviewType,
        ...(isDeliverable !== null && { isDeliverable })
      };

      putAction(this.editUrl, payload)
        .then((res) => {
          this.$message[res.success ? 'success' : 'warning'](res.message);
        })
        .finally(() => {
          this.loadDataSource();
          this.loading = false;
        });
    },
    // 点击取消按钮
    handleCancel() {
      this.localVisible = false;
      this.$emit("close"); // 触发取消事件
    },
    checkOldVersion(record) {
      if(record.collectNum>1) {
        console.log("******", record.regularInputId)
        this.rloading = true;
        this.recordVisible = true;
        getAction("/workOrder/workRecord/list/nopage",
          {regularInputId:record.regularInputId,workOrder:record.workOrder})
          .then(res=>{
            if (res.success) {
              this.records = res.result;
            }
          }).finally(()=>{
          this.rloading = false;
        });
      }
    },
    closeRecords() {
      this.recordVisible = false;
      this.records = [];
    }
  },
}
</script>

<style scoped>
/deep/ .ant-modal-body {
  padding: 5px 24px;
}
.review-row {
  margin-left: 5px;
}
.review-col {
  display: flex;
}
.label {
  color: black;
}
.footer-buttons {
  display: flex;
  gap: 10px;  /* 按钮之间的间距 */
  justify-content: flex-end;
}
.collect-backgroud{
  background: #eff3f1;
  color: black;
}
</style>