<template>
  <div v-if="showTitle" class="title-row">
    <div class="h-title">策略信息</div>
    <el-button v-if="!isLook" plain @click="invokeTemplate" v-preReClick>合约模板调用</el-button>
  </div>
  <el-table class="strategyTable" ref="strategyTableRef" v-loading="strategyDataLoading" :data="strategyData"
    :height="isReport ? 'auto' : '250px'" :highlight-current-row="true" stripe tooltip-effect="light" border :span-method="arraySpanMethod">
    <el-table-column label="序号" width="56" align="center" fixed="left" :formatter="formatIndex" />
    <el-table-column prop="action" label="操作行为" :width="isReport ? 'auto' : '150px'" :min-width="isReport ? '100px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #header>
        <span>操作行为</span>
        <span style="color:red;margin-left: 2px;">*</span>
      </template>
      <template #default="scope">
        <el-select v-if="!isLook" v-model="scope.row['action']" placeholder="请选择" :disabled="isLook"
          @change="(val) => selectOperationChange(val, scope)" clearable filterable>
          <el-option
            v-for="opt in actionOptionsList.filter(a => scope.row.action == a.policyName || !strategyData.some(s => s.action == a.policyName))"
            :key="opt['policyName']" :label="opt['policyName']" :value="opt['policyName']" />
        </el-select>
        <span v-else>{{ scope.row['action'] || '--' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="actionEnName" label="操作行为英文名称" :width="isReport ? 'auto' : '150px'" :min-width="isReport ? '120px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #default="scope">
        <el-input v-if="!isLook" v-model="scope.row['actionEnName']" :disabled="true" placeholder="-"></el-input>
        <span v-else>{{ scope.row['actionEnName'] || '--' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="constraintName" label="约束条件" :width="isReport ? 'auto' : '150px'" :min-width="isReport ? '100px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #header>
        <span>约束条件</span>
        <span style="color:red;margin-left: 2px;">*</span>
      </template>
      <template #default="scope">
        <el-select v-if="!isLook" v-model="scope.row['constraintName']" placeholder="请选择" :disabled="isLook"
          @change="(val) => selectConditionChange(val, scope)" clearable filterable>
          <el-option v-for="opt in constraintOptionsList" :key="opt['policyName']" :label="opt['policyName']"
            :value="opt['policyName']" />
        </el-select>
        <span v-else>{{ scope.row['constraintName'] || '--' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="constraintEnName" label="约束条件英文名称" :width="isReport ? 'auto' : '150px'" :min-width="isReport ? '120px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #default="scope">
        <el-input v-if="!isLook" v-model="scope.row['constraintEnName']" :disabled="true" placeholder="-"></el-input>
        <span v-else>{{ scope.row['constraintEnName'] || '--' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="constraintOperatorCode" label="运算符" :width="isReport ? 'auto' : '150px'" :min-width="isReport ? '100px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #header>
        <span>运算符</span>
        <span style="color:red;margin-left: 2px;">*</span>
      </template>
      <template #default="scope">
        <el-select v-if="!isLook" v-model="scope.row['constraintOperatorCode']" placeholder="请选择" :disabled="isLook"
          clearable filterable @change="(val) => handleOperatorSelectChange(val, scope, 'constraintOperatorCode')">
          <el-option v-for="opt in getActualOperationList(scope)" :key="opt['value']" :label="opt['label']"
            :value="opt['value']" />
        </el-select>
        <span v-else>{{ scope.row['constraintOperatorName'] || '--' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="constraintValue" label="约束值" :width="isReport ? 'auto' : '240px'" :min-width="isReport ? '160px' : undefined" align="left" :show-overflow-tooltip="!isReport">
      <template #header>
        <span>约束值</span>
        <span style="color:red;margin-left: 2px;">*</span>
      </template>
      <template #default="scope">
        <el-input
          v-if="!isLook && !((scope.row.constraintEnName == 'limitedDeliveryConnector' || scope.row.constraintEnName == 'limitedUseConnector' || scope.row.constraintEnName == 'limitField'))"
          v-model="scope.row['constraintValue']" placeholder="请输入" :maxlength="200"
          @change="(val) => handleOperatorSelectChange(val, scope, 'constraintValue')" clearable></el-input>
        <!-- 限定连接器 -->
        <el-select
          v-else-if="!isLook && (scope.row.constraintEnName == 'limitedDeliveryConnector' || scope.row.constraintEnName == 'limitedUseConnector')"
          v-model="scope.row['constraintConnectorValue']" :remote="true" :remote-method="remoteMethod" filterable clearable placeholder="请选择">
          <el-option v-for="opt in connectorList" :key="opt['guid']" :label="opt['connectorName']"
            :value="opt['guid']" />
        </el-select>
        <!-- 加密字段 -->
        <el-select v-else-if="!isLook && scope.row.constraintEnName == 'limitField'"
          v-model="scope.row['constraintValue']" filterable clearable placeholder="请选择">
          <el-option v-for="opt in productFieldList" :key="opt['enName']" :label="opt['chName']"
            :value="opt['guid']" />
        </el-select>
        <span v-else>{{ scope.row['constraintFieldValue'] || '--' }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="!isLook" label="操作" width="140px" align="left" fixed="right" show-overflow-tooltip>
      <template #default="scope">
        <span class="text_btn" @click="handleConditionClickAdd(scope)" v-preReClick>添加约束</span>
        <el-divider direction="vertical" />
        <span class="text_btn" @click="handleConditionDelete(scope)">删除</span>
      </template>
    </el-table-column>
  </el-table>
  <div v-if="!isLook" class="row-add-btn">
    <el-button link @click="addStrategy" :icon="CirclePlus" v-preReClick>添加操作行为</el-button>
  </div>
  <!-- 选择合约模板对话框 -->
  <Dialog_form :dialogConfigInfo="templateDialogInfo" />
</template>

<script lang="ts" setup name="strategyTable">
import { useValidator } from "@/hooks/useValidator";
import { CirclePlus } from "@element-plus/icons-vue";
import {
  getValidContractTemplateList
} from "@/api/modules/dataSmartContract"

const { required } = useValidator();
const { proxy } = getCurrentInstance() as any;

const props = defineProps({
  isLook: { //是否是查看页面，详情查看不需要展示输入框。
    type: Boolean,
    default: false
  },
  value: { // 是个表格数组
    type: Array<any>,
    default: <any>[]
  },
  showTitle: {
    type: Boolean,
    default: false
  },
  actionOptionsList: {//策略操作行为下拉列表
    type: Array<any>,
    default: []
  },
  constraintOptionsList: {//约束行为下拉列表
    type: Array<any>,
    default: []
  },
  operatorOptionList: {//运算符字典下拉列表
    type: Array<any>,
    default: []
  },
  isReport: {
    type: Boolean,
    default: false
  }
})

const getActualOperationList = (scope) => {
  let val = scope.row.constraintName;
  let conditionItem = val && props.constraintOptionsList.find(c => c.policyName == val);
  let constraintOperatorCodes = conditionItem?.constraintOperatorCodes || [];
  if (!constraintOperatorCodes?.length) {
    return props.operatorOptionList;
  }
  let list: any = constraintOperatorCodes?.map((c, index) => {
    return {
      value: c,
      label: conditionItem?.constraintOperatorCodesName?.[index] || c
    }
  });
  return list;
}

const strategyDataLoading = ref(false);

/** 策略信息结构最终值，带children层级结构 */
const strategyValueInfo: any = ref([{
  index: 1,
  action: '',
  children: [{ childIndex: 1 }]
}]);

/** 将数据库存储的值转化为该组件接收的树形结构 */
const transferValueToNew = (val) => {
  let detailPolicyListValue: any[] = []
  val?.forEach((p, index) => {
    let lastItem = detailPolicyListValue?.[detailPolicyListValue.length - 1];
    let childInfo = Object.assign({}, p);
    delete childInfo.children; //删掉冗余信息，否则后续修改会覆盖正确的值
    delete childInfo.action;
    delete childInfo.actionEnName;
    if (!lastItem || lastItem.action != p.action) {
      detailPolicyListValue.push(Object.assign({
        index: detailPolicyListValue.length + 1,
      }, p, {
        children: [Object.assign({ childIndex: 1 }, childInfo)]
      }))
    } else {
      lastItem.children.push(Object.assign({ childIndex: lastItem.children?.length + 1 }, childInfo));
    }
  })
  return detailPolicyListValue;
}

watch(() => props.value, (val) => {
  strategyValueInfo.value = transferValueToNew(val);
}, {
  deep: true,
  immediate: true
})

/** 策略信息表格数据 */
const strategyData = computed(() => {
  let v: any = [];
  strategyValueInfo.value.forEach(s => {
    s.children?.forEach(sc => {
      v.push(Object.assign({}, {
        guid: sc.guid,
        action: s.action,
        actionEnName: s.actionEnName,
        index: s.index,
        orderNum: s.orderNum
      }, sc));
    })
  })
  return v;
});

/** 操作行为下拉框改变，带出英文名称等信息 */
const selectOperationChange = (val, scope) => {
  let index = scope.row.index;
  let sv = strategyValueInfo.value.find(s => s.index == index);
  sv && (sv.actionEnName = props.actionOptionsList.find(o => o.policyName == val)?.policyEnName);
  sv && (sv.action = val);
}

/** 约束条件下拉框改变，带出英文名称 */
const selectConditionChange = (val, scope) => {
  let index = scope.row.index;
  let sv = strategyValueInfo.value.find(s => s.index == index);
  let svChild = sv.children?.find(c => c.childIndex == scope.row.childIndex);
  svChild && (svChild.constraintEnName = props.constraintOptionsList.find(o => o.policyName == val)?.policyEnName);
  svChild && (svChild.constraintName = val);
}

const handleOperatorSelectChange = (val, scope, field) => {
  let index = scope.row.index;
  let sv = strategyValueInfo.value.find(s => s.index == index);
  let svChild = sv.children?.find(c => c.childIndex == scope.row.childIndex);
  svChild && (svChild[field] = val);
}

/** 添加策略信息的操作行为行 */
const addStrategy = () => {
  let len = strategyValueInfo.value.length;
  if (len == props.actionOptionsList?.length) {
    proxy.$ElMessage.warning('暂无可添加的操作行为!');
    return;
  }
  let lastIndex = strategyValueInfo.value.at(-1)?.index || 0;
  strategyValueInfo.value.push({
    index: lastIndex + 1,
    action: '',
    children: [{ childIndex: 1 }]
  })
}

/** 添加约束条件 */
const handleConditionClickAdd = (scope) => {
  /** 根据index值进行添加删除 */
  let index = scope.row.index;
  let sv = strategyValueInfo.value.find(s => s.index == index);
  if (sv) {
    let childIndex = scope.row.childIndex;
    let lastIndex = sv.children.at(-1)?.childIndex || 0;
    sv.children.splice(childIndex, 0, { childIndex: lastIndex + 1 })
  }
}

const handleConditionDelete = (scope) => {
  let index = scope.row.index;
  let sv = strategyValueInfo.value.find(s => s.index == index);
  if (!sv) {
    return;
  }
  if (sv?.children?.length > 1) {
    //删除约束条件。
    proxy.$openMessageBox("确定要删除该约束条件吗?", () => {
      let childIndex = scope.row.childIndex;
      let delIndex = sv.children.findIndex(c => c.childIndex == childIndex);
      delIndex > -1 && sv.children.splice(delIndex, 1);
      proxy.$ElMessage.success('删除成功');
    }, () => {
      proxy.$ElMessage.info("已取消删除");
    })
  } else {
    //同步删除操作行为
    proxy.$openMessageBox("确定要删除该操作行为和约束条件吗?", () => {
      let index = scope.row.index;
      strategyValueInfo.value.splice(index - 1, 1);
      proxy.$ElMessage.success('删除成功');
    }, () => {
      proxy.$ElMessage.info("已取消删除");
    })
  }
}

// 计算合并后的序号
const mergedIndexes = computed(() => {
  let index = 1;
  const mergedIndexes: any[] = [];
  
  for (let i = 0; i < strategyData.value.length; i++) {
    if (i === 0 || strategyData.value[i - 1]['action'] != strategyData.value[i]['action'] || strategyData.value[i - 1]['index'] != strategyData.value[i]['index']) {
      // 新合并组开始
      mergedIndexes.push(index);
      index++;
    } else {
      // 同一合并组
      mergedIndexes.push(0); // 0表示不显示序号
    }
  }
  
  return mergedIndexes;
});

// 序号格式化
const formatIndex = (row, column, cellValue, index) => {
  return <string>mergedIndexes.value[index] || '';
};

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex > 2) {
    return [1, 1];
  }

  // 查找当前字段值相同的连续行
  let startRow = rowIndex;
  let endRow = rowIndex;
  let field = column.field;
  // 向前查找
  while (startRow > 0 && strategyData.value[startRow - 1][field] === strategyData.value[rowIndex][field] && strategyData.value[startRow - 1]['index'] == strategyData.value[rowIndex]['index']) {
    startRow--;
  }

  // 向后查找
  while (endRow < strategyData.value.length - 1 && strategyData.value[endRow + 1][field] === strategyData.value[rowIndex][field] && strategyData.value[endRow + 1]['index'] === strategyData.value[rowIndex]['index']) {
    endRow++;
  }

  // 如果当前行不是相同值组的起始行，则不显示
  if (startRow !== rowIndex) {
    return [0, 0];
  }

  // 返回合并的行数
  const rowspan = endRow - startRow + 1;
  return [rowspan, 1];
}

/** 弹出模板选择对话框 */
const invokeTemplate = () => {
  /** 调用获取启用的模板列表接口，如果返回null则提示没有可调用的模板。 */
  getValidContractTemplateList().then((res: any) => {
    if (res?.code == proxy.$passCode) {
      const listData = res.data || [];
      if (!listData?.length) {
        proxy.$ElMessage.warning('当前没有可调用的合约模板');
        return;
      }
      templateFormItems.value[0].options = listData;
      templateFormItems.value[0].default = '';
      templateDialogInfo.value.visible = true;
    } else {
      res?.msg && proxy.$ElMessage.error(res?.msg)
    }
  })
}

const templateFormItems = ref([{
  type: 'select',
  label: '合约模板名称',
  field: 'guid',
  default: '',
  block: true,
  placeholder: '请选择',
  options: [],
  props: {
    value: 'guid',
    label: 'templateName'
  },
  filterable: true,
  clearable: true,
  required: true
}]);

const templateFormRules = ref({
  guid: [required("请选择合约模板名称")],
});

const templateDialogInfo = ref({
  visible: false,
  size: 480,
  title: "合约模板调用",
  type: 'edit',
  formInfo: {
    id: 'copy-form',
    items: templateFormItems.value,
    rules: templateFormRules.value
  },
  btns: {
    submit: (btn, info) => {
      templateDialogInfo.value.visible = false;
      //将选择的值带入表格 TODO，跟经理确认是全量覆盖，还是保留操作行为不同的行。暂时先做成全量覆盖吧。
      let item: any = templateFormItems.value[0].options?.find((i: any) => i.guid == info.guid);
      strategyValueInfo.value = transferValueToNew(item?.policyRSVOS || []);
    },
    cancel: () => {
      templateDialogInfo.value.visible = false;
    }
  },
  submitBtnLoading: false
});

const validateValue = () => {
  for (const d of strategyData.value) {
    if (!d.action) {
      proxy.$ElMessage.error('操作行为必填，请填写完整');
      return false;
    }
    if (!d.constraintName) {
      proxy.$ElMessage.error('约束条件必填，请填写完整');
      return false;
    }
    if (!d.constraintOperatorCode) {
      proxy.$ElMessage.error('运算符必填，请填写完整');
      return false;
    }
    if (!d.constraintValue) {
      proxy.$ElMessage.error('约束值必填，请填写完整');
      return false;
    }
  }
  return true;
}

defineExpose({
  strategyData,
  validateValue
})
</script>

<style lang="scss" scoped>
.row-add-btn {
  .el-button--default {
    padding: 4px 0px;
    margin-top: 4px;
  }

  :deep(.el-icon) {
    width: 16px;
    height: 16px;

    svg {
      width: 16px;
      height: 16px;
    }
  }
}

.title-row {
  display: flex;
  flex-direction: row;
  height: 44px;
  align-items: center;

  .el-button {
    color: var(--el-button-hover-text-color);
    border-color: var(--el-button-hover-border-color);
  }
}

.h-title {
  font-size: 14px;
  color: #212121;
  font-weight: 600;
  margin-right: 8px;
}
</style>