<template>
  <a-modal
    :title="title"
    :width="960"
    :visible="visible"
    :confirm-loading="loading"
    @cancel="handleCancel"
  >
    <!-- 左右布局容器 -->
    <div class="measure-copy-layout">
      <!-- 左侧：修程列表 -->
      <a-card title="修程" class="left-panel">
        <a-list
          size="small"
          :data-source="regularList"
          :split="false"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a @click="selectRegular(item.id,item.rapairRange_dictText)">{{ item.rapairRange_dictText }}</a>
          </a-list-item>
        </a-list>
      </a-card>

      <!-- 右侧：检修项表格 -->
      <a-card :title="cardTitle" class="right-panel" :body-style="{padding: 0}">
        <a-table
          size="small"
          rowKey="id"
          :columns="columns"
          :dataSource="inputRegularDetailList"
          bordered
          :rowSelection="rowSelection"
          :scroll="{ y: 420 }"
          :pagination="false"
          :locale="{ emptyText: '当前修程下无测量类检修项' }"
        >
          <span slot="customColumn" slot-scope="text">{{ text }}</span>
          <div slot="content" slot-scope="text" class="content-cell" :title="text">
            {{ text }}
          </div>
        </a-table>
      </a-card>
    </div>

    <!-- 底部操作区 -->
    <template slot="footer">
      <a-button @click="onClearSelected">清空选择</a-button>
      <a-popconfirm
        title="参照将会覆盖原有数据，是否参照？"
        okText="确定"
        cancelText="取消"
        @confirm="copyMeasure"
      >
        <a-button type="primary" :disabled="selectedRowKeys.length === 0">
          参照
        </a-button>
      </a-popconfirm>
    </template>
  </a-modal>
</template>

<script>
import { getAction } from '@api/manage'

export default {
  name: 'MeasureCopy',
  data() {
    return {
      title: '',
      cardTitle: '',
      loading: false,
      visible: false,
      regularList: [],
      inputRegularDetailList: [],
      selectedRowKeys: [],
      columns: [
        {
          title: '#',
          align: 'center',
          width: 55,
          dataIndex: 'dispOrder'
        },
        {
          title: '部件',
          align: 'center',
          width: 140,
          dataIndex: 'depard_dictText',
          scopedSlots: { customRender: 'customColumn' }
        },
        {
          title: '检修要求',
          align: 'center',
          dataIndex: 'content',
          width: 360,
          scopedSlots: { customRender: 'content' }
        }
      ],
      url: {
        listSimpleRegular: '/regular/regular/simplelist',
        listRegularDetailInput: '/regular/regularDetail/list'
      }
    }
  },
  computed: {
    rowSelection() {
      return {
        type: 'radio',
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
        columnWidth: '40px',
        preserveSelectedRowKeys: false
      }
    }
  },
  methods: {
    show(deviceTypeId) {
      this.visible = true
      this.selectedRowKeys = []
      this.inputRegularDetailList = []

      getAction(this.url.listSimpleRegular, { deviceTypeId }).then((res) => {
        if (res.success && res.result && res.result.length > 0) {
          this.regularList = [...(res.result || [])]
          this.title = res.result[0].deviceTypeId_dictText || '检修项参照'
          // 默认加载第一个修程的检修项
          this.selectRegular(res.result[0].id,res.result[0].rapairRange_dictText)
        } else {
          this.regularList = []
          this.title = '无修程数据'
        }
      })
    },
    // 选择修程之后展示该修程下所有有测量项的条目
    selectRegular(regularId,text) {
      this.cardTitle = '检修项-测量';
      this.loading = true
      getAction(this.url.listRegularDetailInput, {
        regularId: regularId,
        measure: '1'
      }).then((res) => {
        this.loading = false
        if (res.success) {
          this.inputRegularDetailList = res.result.records || []
        } else {
          this.inputRegularDetailList = []
        }
      }).catch(() => {
        this.loading = false
        this.inputRegularDetailList = []
      })
      this.cardTitle = text + this.cardTitle;
    },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    onClearSelected() {
      this.selectedRowKeys = []
    },

    handleCancel() {
      this.visible = false
    },

    copyMeasure() {
      if (this.selectedRowKeys.length === 0) return
      this.$emit('copyItems', this.selectedRowKeys[0])
      this.visible = false
    }
  }
}
</script>

<style scoped>
.measure-copy-layout {
  display: flex;
  gap: 16px; /* Antdv 1.x 支持 gap，若不支持可改用 margin */
  height: 520px;
}

.left-panel {
  width: 120px;
  overflow: auto;
}

.right-panel {
  flex: 1;
  overflow: hidden;
}

.content-cell {
  white-space: normal;     /* 允许换行 */
  word-break: break-all;   /* 长单词/URL 也换行 */
  text-overflow: ellipsis;
}
</style>