<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  isLook:{
    type:Boolean,
    required:true
  },
  lookTitle:{
    type:String,
    default:'未知公司名'
  },
  lookAuthList:{
    type:Array,
    default:()=> []
  },
  lookAuthListEquity:{
    type:Array,
    default:()=> []
  }
})

const emit = defineEmits(['closeDia'])


/* 处理合并数组 */
const position =  ref(0)
const rowSpanArr = ref([])//处理合并行数组结构
function getRowSpan() {
  rowSpanArr.value = [];
  /* [2,0,1] */
  props.lookAuthList.forEach((item, index) => {
    if (index === 0) {
      rowSpanArr.value.push(1);
      position.value = 0;
    } else {
      if (props.lookAuthList[index].ClassifyName === props.lookAuthList[index - 1].ClassifyName) {
        rowSpanArr.value[position.value] += 1; //项目名称相同，合并到同一个数组中
        rowSpanArr.value.push(0);
        props.lookAuthList[index].ClassifyName = props.lookAuthList[index - 1].ClassifyName;
      } else {
        rowSpanArr.value.push(1);
        position.value = index;
      }
    }
  });
}
/* 合并行规则 */
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    const _row = rowSpanArr.value[rowIndex];
      return {
        rowspan: _row,
        colspan: 1
      };
  }
}

/* 权益处理数据 */
const spanArrEquity = ref([])
const posEquity = ref(0)
const isPermissionTypeShow = ref(false)
const indexArrEquity = ref([])
function getSpanArr(data) {
  data.map((v, i, s) => {
    if (!v.PermissionTypeName) {
    indexArrEquity.value.push(i);
    }
  });
  for (var i = 0; i < data.length; i++) {
    let element = data[i]
    if (i === 0) {
      spanArrEquity.value.push(1);
      posEquity.value = 0;
    } else {
      // 判断当前元素与上一个元素是否相同（line为标记）
      if (element.PermissionName === data[i - 1].PermissionName) {
        if(element.IsMerge){
          // 主客观都有，需要合并
          spanArrEquity.value[posEquity.value] += 1;
          spanArrEquity.value.push(0);
        }else{
          // 主客观都有 不需要合并，说明是服务期限或者状态不一样
          spanArrEquity.value[posEquity.value] += 0.5;
          spanArrEquity.value.push(0.5);
        }
      } else {
        spanArrEquity.value.push(1);
        posEquity.value = i;
      }
    }
  }
}
/* 权益处理数组合并 */
function objectSpanMethodEquity({ row, column, rowIndex, columnIndex}){
  if(!isPermissionTypeShow.value){
    // 产品类型不显示
    const _row = spanArrEquity.value[rowIndex];
    if(_row == 0){
      return {
        rowspan: _row,
        colspan: 0,
      };
    }
  }else{
    //处理行的合并
    if (indexArrEquity.value.includes(rowIndex)) {
      if (columnIndex === 0) {
        return {
          rowspan: 1,
          colspan: 2,
        };
      } else if (columnIndex === 1) {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    }
    // 权益行业主客观合并
    const _row = spanArrEquity.value[rowIndex];
    if(_row == 2){
      // 为2 是主客观都有，合并，这时合并行业和产品类型
      if(columnIndex === 0){
        return {
          rowspan: 1,
          colspan: 2,
        };
      }else if(columnIndex === 1){
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    }else if(_row == 0){
      // 为0 表示不需要这行，被合并掉了
      return {
        rowspan: _row,
        colspan: 0,
      };
    }else if(_row == 1.5){
      // 为1.5 是主客观都有，但不合并，这时合并行业
      if(columnIndex === 0){
        return {
          rowspan: 2,
          colspan: 1,
        };
      }
    }else if(_row == 0.5){
      if(columnIndex === 0){
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    }
  }
}

function closeDia(){
  spanArrEquity.value = []
  indexArrEquity.value = []
  emit('closeDia')
}

watch(
  () => props.lookAuthList,
  (value) => {
    if(value.length>0){
      getRowSpan();
    }
})
watch(
  () => props.lookAuthListEquity,
  (newvalue) => {
    if(newvalue.length>0){
      isPermissionTypeShow.value = newvalue.some(item => !item.IsMerge)
      getSpanArr(newvalue) //权益
    }
})

</script>
<template>
		<el-dialog
		:model-value="isLook"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="closeDia"
		width="800px"
		draggable
		center>
      <template #header>
        <div class="dialog-title">
          <img :src="$icons.auth" />
          <span>{{lookTitle}}</span>
        </div>
      </template>
			<template v-if="lookAuthList && lookAuthList.length > 0">
				<div>
					FICC权限
				</div>
        <el-table
        :data="lookAuthList"
        :span-method="objectSpanMethod"
        border
        max-height="300"
        style="width: 100%; margin-top: 20px;margin-bottom: 20px">
          <el-table-column label="所属类目" align="center">
            <template #default="scope">{{scope.row.ClassifyName}}</template>
          </el-table-column>
          <el-table-column label="品种" align="center">
            <template #default="scope">{{scope.row.PermissionName}}</template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template #default="scope">{{scope.row.Status}}</template>
          </el-table-column>
          <el-table-column label="服务期限" align="center" min-width="200">
            <template #default="scope">{{scope.row.StartDate+'~'+scope.row.EndDate}}</template>
          </el-table-column>
          <el-table-column label="剩余天数" align="center">
            <template #default="scope">{{scope.row.ExpireDay}}</template>
          </el-table-column>
        </el-table>
			</template>
			<template v-if="lookAuthListEquity && lookAuthListEquity.length > 0">
				<div>
					权益权限
				</div>
				<el-table
        :data="lookAuthListEquity"
        :span-method="objectSpanMethodEquity"
        border
        max-height="300"
        style="width: 100%; margin-top: 20px">
          <el-table-column label="行业" align="center">
            <template #default="scope">{{scope.row.PermissionName}}</template>
          </el-table-column>
          <el-table-column label="产品类型" v-if="isPermissionTypeShow" align="center">
            <template #default="scope">{{scope.row.PermissionTypeName}}</template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template #default="scope">{{scope.row.Status}}</template>
          </el-table-column>
          <el-table-column label="服务期限" align="center" min-width="200">
            <template #default="scope">{{scope.row.StartDate+'~'+scope.row.EndDate}}</template>
          </el-table-column>
          <el-table-column label="剩余天数" align="center">
            <template #default="scope">{{scope.row.ExpireDay}}</template>
          </el-table-column>
			  </el-table>
			</template>
			<div style="padding:20px 0;"></div>
		</el-dialog>
</template>
<style scoped lang="scss">

</style>