<template>
  <section class="list-header">
    <p class="common-title">{{ ruleTitle }}</p>
    <section class="main-wrap">
      <span class="rule-name-label">分配规则</span>
      <ul class="list-main">
        <li class="formObj-form-item" v-for="(item, ind) in listData" :key="item.key">
          <section class="form-vl">
            <span>第{{ ind + 1 }}优先级</span>
            <el-select v-model="item.ruleKey" placeholder="请选择" size="small" clearable>
              <el-option v-for="(ot, oInd) in ruleArr" :disabled="isChose(ot, oInd)||ot.disabled" :key="ot.value" :label="ot.label" :value="ot.value"></el-option>
            </el-select>
          </section>
          <section class="operate-areas">
            <el-button
              :disabled="customShow||listData.length==1"
              type="text"
              icon="el-icon-remove-outline"
              class="gray-color"
              ref="del"
              @click.prevent="onDel(ind)"
            ></el-button>
            <el-button
              type="text"
               :disabled="customShow||listData.length>=2"
              ref="add"
              icon="el-icon-circle-plus-outline"
              class="gray-color"
              @click.prevent="onAdd(ind)"
              :class="specialType?'specialClass':''"
            ></el-button>
          </section>
        </li>
      </ul>
    </section>
  </section>
</template>

<script>
import {} from '@/api/grid/address/tree.js'
import { uid } from '@/utils'
import { isEmpty, cloneDeep, omit } from 'lodash'

const relateTypeMap = {
  personal: '个人',
  company: '企业',
  merchant: '商户'
}

export default {
  props: {
    ruleTitle: {
      type: String,
      default: ''
    },
    ruleArr: {
      type: Array,
      default: () => []
    },
    ruleName: {
      type: String,
      default: ''
    },
    defaultListData: {
      type: Array,
      default: () => []
    },
    
    customShow: {
        type: Boolean,
        default: false
    },
    specialType: {
        type: Boolean,
        default: false
    },
  },
  watch: {
    listData: {
      handler(arr) {
        
        this.$emit('getRuleArr', {
          arr: arr?.map((ot, oInd) =>
            omit(
              cloneDeep({
                ...ot,
                ruleOrder: oInd + 1
              }),
              'key'
            )
          ),
          ruleName: this.ruleName
        })
      },
      deep: true
    },
    defaultListData: {
      
      handler(arr) {
        
        if (!isEmpty(arr)) {
          // alert(this.customShow)
  
          this.listData = arr?.map((it) => ({
            ...it,
            ruleKey: `${it.ruleKey}`,
            key: uid()
          }))
          console.log(this.listData,'this.listDatathis.listData')
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      iscustomShow:false,
      listData: [
        {
          ruleKey: '',
          key: uid(),
          relateType: relateTypeMap[this.ruleName]
        }
      ]
    }
  },
  methods: {
    onAdd(tag) {
      const newItems = {
        ruleKey: '',
        key: uid(),
        relateType: relateTypeMap[this.ruleName]
      }
      this.listData.splice(tag + 1, 0, newItems)
    },
    onDel(index) {
      this.listData.splice(index, 1)
    },
    isChose(row, tag) {
      const listArr = this.listData?.filter((ot) => ot.ruleKey === row.value)
      return !isEmpty(listArr)
    }
  }
}
</script>

<style lang="scss" scoped>
.common-title {
  position: relative;
  color: #222222;
  line-height: 16px;
  font-weight: 600;
  font-size: 16px;
  padding-left: 10px;
  margin: 0 auto;
  &::before {
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    left: 0;
    content: '';
    width: 3px;
    background-color: #4886f8;
    height: 16px;
    border-radius: 2px;
  }
}
.formObj-form-item {
  display: flex;
  align-items: center;
  .operate-areas {
    margin-left: 16px;

    ::v-deep .el-icon-circle-plus-outline {
      color: #4886f8;
      font-size: 20px;
    }
    ::v-deep .el-icon-remove-outline {
      font-size: 20px;
    }
    ::v-deep .gray-color {
      color: #999999;
    }
  }
  .form-vl {
    display: flex;
    align-items: center;
    span {
      margin-right: 10px;
      font-size: 14px;
      color: #606266;
    }
  }
}
.main-wrap {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  margin-top: 20px;
  .rule-name-label {
    width: 18%;
    text-align: right;
    padding-right: 24px;
    line-height: 36px;
    font-size: 14px;
    font-weight: 400;
    color: #3d3d3d;
    &::after {
      content: '*';
      left: 5px;
      color: #ff4d42;
      position: relative;
      top: 2px;
    }
  }
  ul {
    li {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.list-main{
  position: relative;
  .specialClass{
    position: absolute;
    left: -14px;
    bottom: -51px;
    color: #4886f8 !important;
    display: flex;
    align-items: center;
  }
}
</style>