<template>
  <section class="list-header">
    <p class="common-title">{{ ruleObj.title }}</p>
    <section class="operate-btn">
      <section class="operate-vl">
        <el-button type="primary" size="small" v-if="!editMode" @click="onClickEdit">编辑</el-button>
        <el-button type="primary" size="small" v-else @click="onClickEdit">取消</el-button>
        <el-button type="plain" :disabled="!editMode" @click="onSave">保存</el-button>
      </section>
      <section class="operate-vr">
        <el-button type="primary" plain size="small">全部更新</el-button>
        <el-button type="primary" plain size="small">增量更新</el-button>
      </section>
    </section>
    <section class="main-wrap">
      <ul>
        <li class="formObj-form-item" v-for="(item, ind) in listData" :key="item.key">
          <section class="form-vl">
            <el-select v-model="item.ruleNameId" placeholder="请选择" size="small" clearable :disabled="!editMode">
              <el-option
                v-for="(ot, oInd) in ruleObj.selectArr"
                :disabled="isChose(ot, oInd)"
                :key="ot.ruleNameId"
                :label="ot.name"
                :value="ot.ruleNameId"
              ></el-option>
            </el-select>
          </section>
          <section class="operate-areas">
            <el-button
              :disabled="listData.length === 1 || !editMode"
              type="text"
              icon="el-icon-remove-outline"
              class="gray-color"
              @click.prevent="onDel(ind)"
            ></el-button>
          </section>
        </li>
      </ul>
    </section>
    <!-- <el-button
      :disabled="listData.length >= 2 || !editMode"
      type="text"
      icon="el-icon-circle-plus-outline"
      
    >
    </el-button> -->
    <section class="add-btn" @click="onAdd" :class="{ 'add-btn-noclick': listData.length >= 2 || !editMode }">
      <svg-icon class-name="add-rule" icon-class="add-rule" />
      <span>添加新的规则</span>
    </section>
  </section>
</template>

<script>
import { uid } from '@/utils'
import { isEmpty, cloneDeep, omit } from 'lodash'
import { updateRule, addRule, updateRules } from '@/api/grid/relationRules.js'

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

export default {
  props: {
    ruleObj: {
      type: Object,
      default: () => ({})
    },
    oriList: {
      type: Array,
      default: () => []
    },
    ruleType: {
      type: String,
      default: ''
    },
    editMode: {
      type: Boolean,
      required: true
    }
  },
  watch: {
    listData: {
      handler(arr) {
        console.log(arr, '-------------')
        // this.$emit('getRuleArr', {
        //   arr: arr?.map((ot, oInd) =>
        //     omit(
        //       cloneDeep({
        //         ...ot,
        //         ruleOrder: oInd + 1
        //       }),
        //       'key'
        //     )
        //   ),
        //   ruleName: this.ruleName
        // })
      },
      deep: true
    },
    ruleObj: {
      handler(obj) {
        if (!isEmpty(obj.rulesData)) {
          this.listData = obj.rulesData?.map((it) => ({
            ...it
          }))
          console.log(this.listData, '++')
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      listData: [
        {
          name: '',
          key: uid(),
          relateType: relateTypeMap[this.ruleName]
        }
      ]
    }
  },
  created() {},
  methods: {
    onClickEdit() {
      this.$emit('update:editMode', !this.editMode)
    },
    onAdd() {
      if (this.listData.length >= 2 || !this.editMode) {
        return
      }
      const newItems = {
        ruleKey: '',
        key: uid(),
        relateType: relateTypeMap[this.ruleName]
      }
      this.listData.push(newItems)
    },
    onDel(index) {
      this.listData.splice(index, 1)
    },
    isChose(row, tag) {
      const listArr = this.listData?.filter((ot) => ot.ruleNameId === row.ruleNameId)
      return !isEmpty(listArr)
    },
    onSave() {
      const ghArr = this.oriList?.filter((item) => item.param?.startsWith('gh_') && item.ruleType === this.ruleType)
      const apiUrl = isEmpty(ghArr) ? addRule : updateRule
      apiUrl(this.rules).then((response) => {
        if (response.code === 200) {
          this.$message.success(response.data)
          this.open = false
          this.getList()
        } else {
          this.$message.error(response.msg || '操作失败')
        }
      })
    }
  }
}
</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 20% 20px 20%;
  &::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;
    }
  }
}
.operate-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.add-rule {
  width: 20px;
  height: 20px;
}
.add-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  &.add-btn-noclick {
    cursor: not-allowed;
  }
  span {
    color: #4886f8;
    line-height: 20px;
    margin-left: 4px;
  }
}
.main-wrap {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  ul {
    li {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>