<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    border
    style="width: 100%"
  >
    <el-table-column prop="stdNum" label="标准编号" align="center" />
    <el-table-column prop="stdCode" label="英文名" align="center" />
    <el-table-column prop="stdName" label="中文名" align="center" />
    <el-table-column label="类型" prop="stdType" width="150">
      <template #default="scope">
        <el-tag v-if="scope.row.stdType == '0'" type="primary">基础数据</el-tag>
        <el-tag v-else type="warning">指标数据</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="securityLevel" label="安全等级" align="center" />
    <el-table-column prop="sourceSystem" label="来源系统" align="center" />
    <el-table-column prop="codeNum" label="代码编号" align="center" />
    <el-table-column label="变更类型" align="center">
      <template #default="{ row }">
        {{ changeTypeMap[row.changeType] || row.changeType }}
      </template>
    </el-table-column>
    <el-table-column label="审批状态" align="center">
      <template #default="{ row }">
        {{ approStatusMap[row.approStatus] || row.approStatus }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100" align="center">
      <template #default="scope">
        <el-button @click="handleView(scope.row.id)" size="small" type="primary">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 弹窗 -->
  <el-dialog v-model="formVisible" title="标准详情" width="70%" @close="formData = {}">
    <el-form :model="formData" label-position="left" ref="formRef" label-width="120px" class="custom-form-container">
      <!-- 第一行：3列 -->
      <el-row gutter="20">
        <el-col :span="6">
          <el-form-item prop="stdNum">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.stdNum) }">标准编号：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.stdNum) }">{{ formatValue(formData.stdNum) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="stdName">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.stdName) }">标准中文名：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.stdName) }">{{ formatValue(formData.stdName) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="stdCode">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.stdCode) }">标准英文名：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.stdCode) }">{{ formatValue(formData.stdCode) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行：3列 -->
      <el-row gutter="20">
        <el-col :span="6">
          <el-form-item prop="stdMenu">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.stdMenu) }">标准业务定义：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.stdMenu) }">{{ formatValue(formData.stdMenu) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="stdType">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.stdType) }">标准类型：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.stdType) }">{{ formatValue(stdTypeMap[formData.stdType] || formData.stdType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="stdSrc">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.stdSrc) }">标准来源：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.stdSrc) }">{{ formatValue(formData.stdSrc) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行：4列 -->
      <el-row gutter="20">
        <el-col :span="6">
          <el-form-item prop="dataClas">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.dataClas) }">数据类别：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.dataClas) }">{{ formatValue(dataClasMap[formData.dataClas] || formData.dataClas) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="sourceSystem">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.sourceSystem) }">来源系统：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.sourceSystem) }">{{ formatValue(formData.sourceSystem) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="securityLevel">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.securityLevel) }">安全等级：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.securityLevel) }">{{ formatValue(formData.securityLevel) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="codeNum">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.codeNum) }">代码编号：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.codeNum) }">{{ formatValue(formData.codeNum) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行：2列 -->
      <el-row gutter="20">
        <el-col :span="12">
          <el-form-item prop="bussDeptId">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.bussDeptId) }">业务认责部门：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.bussDeptId) }">{{ formatValue(formData.bussDeptId) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="bussUser">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.bussUser) }">业务认责人员：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.bussUser) }">{{ formatValue(formData.bussUser) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第五行：2列 -->
      <el-row gutter="20">
        <el-col :span="12">
          <el-form-item prop="techDeptId">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.techDeptId) }">技术认责部门：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.techDeptId) }">{{ formatValue(formData.techDeptId) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="techUser">
            <template #label>
              <span :class="{ 'changed-label': isChanged(formData.techUser) }">技术认责人员：</span>
            </template>
            <span :class="{ 'changed-value': isChanged(formData.techUser) }">{{ formatValue(formData.techUser) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="formVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { listStdMainAppr, getStdMainAppr } from '@/api/datastd/std';

const props = defineProps({
  flowId: {
    type: String,
    required: true
  }
});
const isChanged = (val) => typeof val === 'string' && val.includes('==>')
const formatValue = (val) => {
  if (!val) return ''
  if (isChanged(val)) {
    const [oldVal, newVal] = val.split('==>')
    return `${oldVal.trim()} ==> ${newVal.trim()}`
  }
  return val
}
const loading = ref(false);
const tableData = ref([]);

const changeTypeMap = {
  add: '新增',
  edit: '修改',
  delete: '删除'
};

const approStatusMap = {
  waiting: '待审核',
  pending: '审核中',
  succeed: '通过',
  rejected: '拒绝',
  canceled: '已取消'
};

const stdTypeMap = {
  0: '基础数据',
  1: '指标数据'
};

const dataClasMap = {
  '日期类': '日期类',
  '文本类': '文本类',
  '数值类': '数值类',
  '金额类': '金额类',
  '编码类': '编码类',
  '标志类': '标志类',
  '码值类': '码值类'
};

const formVisible = ref(false);
const formData = ref({});

const getList = async () => {
  loading.value = true;
  try {
    const params = { flowId: props.flowId };
    const res = await listStdMainAppr(params);
    tableData.value = res.data || [];
  } catch (e) {
    console.error('加载失败', e);
  } finally {
    loading.value = false;
  }
};

watch(() => props.flowId, (newVal) => {
  if (newVal) {
    getList();
  }
});
onMounted(() => {
  if (props.flowId) {
    getList();
  }
});
const handleView = async (id) => {
  try {
    const res = await getStdMainAppr(id);
    const data = res.data || {};
    data.stdType = stdTypeMap[data.stdType] || data.stdType;
    data.dataClas = dataClasMap[data.dataClas] || data.dataClas;
    formData.value = data;
    formVisible.value = true;
  } catch (e) {
    console.error('获取详情失败', e);
  }
};
</script>

<style scoped>
.custom-form-container .el-form-item {
  margin-bottom: 15px; /* 增加表单项间距 */
  margin-left: 20px;
}
.changed-label,
.changed-value {
  color: rgb(137, 189, 58) !important;;
  font-weight: bold;
}
.custom-form-container .el-form-item .el-input,
.custom-form-container .el-form-item .el-select {
  width: 100%; /* 输入框和选择框宽度填满 */
}

.custom-form-container .el-form-item span {
  font-size: 14px; /* 字体大小 */
  color: #333; /* 字体颜色 */
}

.custom-form-item label {
  font-weight: bold; /* 加粗标签 */
  margin-right: 10px; /* 为标签添加右侧间距 */
}

.el-dialog__footer {
  text-align: center;
}

.dialog-footer-btn {
  width: 100px; /* 按钮宽度 */
  font-size: 14px;
}
</style>