<template>
		<el-dialog
		:visible.sync="isLook"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="closeDia"
		width="800px"
		v-dialogDrag
		center>
			<div slot="title" class="dialog-title">
				<img :src="$icons.auth" />
				<span>{{lookTitle}}</span>
			</div>
			<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 slot-scope="scope">{{scope.row.ClassifyName}}</template>
          </el-table-column>
          <el-table-column label="品种" align="center">
            <template slot-scope="scope">{{scope.row.PermissionName}}</template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">{{scope.row.Status}}</template>
          </el-table-column>
          <el-table-column label="服务期限" align="center" min-width="200">
            <template slot-scope="scope">{{scope.row.StartDate+'~'+scope.row.EndDate|formatTime}}</template>
          </el-table-column>
          <el-table-column label="剩余天数" align="center">
            <template slot-scope="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 slot-scope="scope">{{scope.row.PermissionName}}</template>
          </el-table-column>
          <el-table-column label="产品类型" v-if="isPermissionTypeShow" align="center">
            <template slot-scope="scope">{{scope.row.PermissionTypeName}}</template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">{{scope.row.Status}}</template>
          </el-table-column>
          <el-table-column label="服务期限" align="center" min-width="200">
            <template slot-scope="scope">{{scope.row.StartDate+'~'+scope.row.EndDate|formatTime}}</template>
          </el-table-column>
          <el-table-column label="剩余天数" align="center">
            <template slot-scope="scope">{{scope.row.ExpireDay}}</template>
          </el-table-column>
			  </el-table>
			</template>
			<div style="padding:20px 0;"></div>
		</el-dialog>
</template>

<script>
  export default {
    props:{
      isLook:{
        type:Boolean,
        required:true
      },
      lookTitle:{
        type:String,
        default:'未知公司名'
      },
      lookAuthList:{
        type:Array,
        default:()=> []
      },
      lookAuthListEquity:{
        type:Array,
        default:()=> []
      }
    },
    watch:{
      lookAuthList(value){
        if(value.length>0){
          this.getRowSpan();
        }
      },
      lookAuthListEquity(value){
        if(value.length>0){
          this.isPermissionTypeShow = this.lookAuthListEquity.some(item => !item.IsMerge)
					this.getSpanArr(this.lookAuthListEquity) //权益
        }
      }
    },
    data() {
      return {
			  rowSpanArr: [],//处理合并行数组结构
			  position: 0,
        //权益
        spanArrEquity: [],
			  posEquity: 0,
			  isPermissionTypeShow:false,
			  indexArrEquity: []
      }
    },
  methods:{
      /* 处理合并数组 */
      getRowSpan() {
        console.log(this.lookAuthList,'method');
        this.rowSpanArr = [];
        /* [2,0,1] */
        this.lookAuthList.forEach((item, index) => {
          if (index === 0) {
            this.rowSpanArr.push(1);
            this.position = 0;
          } else {
            if (this.lookAuthList[index].ClassifyName === this.lookAuthList[index - 1].ClassifyName) {
              this.rowSpanArr[this.position] += 1; //项目名称相同，合并到同一个数组中
              this.rowSpanArr.push(0);
              this.lookAuthList[index].ClassifyName = this.lookAuthList[index - 1].ClassifyName;
            } else {
              this.rowSpanArr.push(1);
              this.position = index;
            }
          }
        });
      },
      /* 合并行规则 */
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.rowSpanArr[rowIndex];
            return {
              rowspan: _row,
              colspan: 1
            };
        }
      },
      /* 权益处理数据 */
		  getSpanArr(data) {
        data.map((v, i, s) => {
          if (!v.PermissionTypeName) {
          this.indexArrEquity.push(i);
          }
        });
				for (var i = 0; i < data.length; i++) {
					let element = data[i]
					if (i === 0) {
						this.spanArrEquity.push(1);
						this.posEquity = 0;
					} else {
						// 判断当前元素与上一个元素是否相同（line为标记）
						if (element.PermissionName === data[i - 1].PermissionName) {
							if(element.IsMerge){
								// 主客观都有，需要合并
								this.spanArrEquity[this.posEquity] += 1;
								this.spanArrEquity.push(0);
							}else{
								// 主客观都有 不需要合并，说明是服务期限或者状态不一样
								this.spanArrEquity[this.posEquity] += 0.5;
								this.spanArrEquity.push(0.5);
							}
						} else {
							this.spanArrEquity.push(1);
							this.posEquity = i;
						}
					}
				}
    	},
      /* 权益处理数组合并 */
      objectSpanMethodEquity({ row, column, rowIndex, columnIndex}){
        if(!this.isPermissionTypeShow){
          // 产品类型不显示
          const _row = this.spanArrEquity[rowIndex];
          if(_row == 0){
            return {
              rowspan: _row,
              colspan: 0,
            };
          }
        }else{
          //处理行的合并
          if (this.indexArrEquity.includes(rowIndex)) {
            if (columnIndex === 0) {
              return {
                rowspan: 1,
                colspan: 2,
              };
            } else if (columnIndex === 1) {
              return {
                rowspan: 0,
                colspan: 0,
              };
            }
          }
          // 权益行业主客观合并
          const _row = this.spanArrEquity[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,
              };
            }
          }
        }
      },
      closeDia(){
			  this.spanArrEquity = []
			  this.indexArrEquity = []
        this.$emit('closeDia')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-title{
    display:flex;
    align-items:center;
    img{
      color:#fff;
      width:16px;
      height:16px;
      margin-right:5px;
    }
    span{
      font-size:16px;
    }
  }
</style>