<template>
  <div style="margin-top: 20px">
    <el-button type="primary" @click="addCate">添加工艺类</el-button>
    <div style="color: #f56; font-weight: bold">
      <span>工艺计算为上方价格计算后的附加价格，可用参数为price(底价)，count(数量)，number(款数)，x(工艺项特有参数)</span>
    </div>
    <div>
      <template v-for="(item, index) in data">
        <div class="el-flex mt10" style="justify-content: space-between">
          <div class="el-flex">
            <el-input class="mr20" v-model="item.title" placeholder="请输入名称" style="width: 200px"></el-input>
            <el-checkbox label="是否必选" v-model="item.isReq"></el-checkbox>
            <el-checkbox label="是否单选" v-model="item.isOnly"></el-checkbox>
          </div>
          <div class="el-flex">
            <el-button type="primary" @click="delCate(index)">删除</el-button>
            <el-button type="primary" @click="addCraft(index)">添加工艺</el-button>
          </div>
        </div>
        <template v-for="(v, k) in item.children">
          <div class="el-flex mt10 ml20" style="justify-content: space-between">
            <div class="el-flex">
              <el-input class="mr20" v-model="v.title" placeholder="请输入工艺名称" style="width: 100px"></el-input>
              <el-input class="mr20" v-model="v.arg" placeholder="请输入参数值" style="width: 100px"></el-input>
              <el-input class="mr20" v-model="v.compute" placeholder="请输入工艺计算" style="width: 200px"></el-input>
              <el-input class="mr20" type="number" v-model="v.minPrice" placeholder="请输入工艺最低价格" style="width: 150px"></el-input>
              <el-select v-model="v.repel" multiple collapse-tags collapse-tags-tooltip filterable placeholder="选择不能共选" style="width: 180px" @change="selectChange(v)">
                <template v-for="item in selectData" :key="item">
                  <el-option :label="item" :value="item" v-if="item != v.title" />
                </template>
              </el-select>
            </div>
            <div class="el-flex">
              <el-button size="small" @click="delCraft(index, k)">删除</el-button>
              <el-button size="small" @click="addParams(index, k)">添加工艺选项</el-button>
            </div>
          </div>
          <template v-for="(i, j) in v.params">
            <div class="el-flex mt10 ml40" style="justify-content: space-between">
              <div class="el-flex">
                <el-input class="mr20" v-model="i.title" placeholder="请输入工艺名称" style="width: 100px"></el-input>
                <el-input class="mr20" v-model="i.arg" placeholder="请输入参数值" style="width: 100px"></el-input>
                <el-input class="mr20" v-model="i.compute" placeholder="请输入工艺计算" style="width: 200px"></el-input>
                <el-input class="mr20" type="number" v-model="i.minPrice" placeholder="请输入工艺最低价格" style="width: 150px"></el-input>
              </div>
              <div class="el-flex">
                <el-button size="small" @click="delParams(index, k, j)">删除</el-button>
              </div>
            </div>
          </template>
        </template>
      </template>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
});

const emits = defineEmits(['update:data']);
const selectData = computed(() => {
  /**
   * 获取childern的title
   */
  let list = [];
  props.data.map(item => {
    item?.children?.map(i => {
      list.push(i.title);
    });
  });
  return list;
});

function addCate() {
  let data = props.data;
  data.push({ title: '', isReq: false, isOnly: false });
  emits('update:data', data);
}
function delCate(index) {
  let data = props.data;
  data.splice(index, 1);
  emits('update:data', data);
}

function addCraft(index) {
  let data = props.data;
  if (!data[index].children) {
    data[index].children = [];
  }
  data[index].children.push({ title: '', minPrice: '', compute: '', arg: '' });
  emits('update:data', data);
}

function delCraft(index, k) {
  let data = props.data;
  data[index].children.splice(k, 1);
  emits('update:data', data);
}

function addParams(index, k) {
  let data = props.data;
  if (!data[index].children[k].params) {
    data[index].children[k].params = [];
  }
  data[index].children[k].params.push({ title: '', minPrice: '', compute: '', arg: '' });
  emits('update:data', data);
}

function delParams(index, k, i) {
  let data = props.data;
  data[index].children[k].params.splice(i, 1);
  emits('update:data', data);
}

function selectChange(option) {
  let title = option?.title;
  let data = props.data;
  let repel = option.repel;
  /**先删除对应的 */
  data.map(item => {
    item?.children?.map(k => {
      k.repel = k.repel?.filter(i => i != title);
    });
  });
  if (repel.length > 0) {
    /**添加对应的 */
    data.map(item => {
      item?.children?.map(k => {
        if (repel.indexOf(k.title) > -1) {
          if (!k.repel) {
            k.repel = [];
          }
          k.repel?.push(title);
        }
      });
    });
  }
  emits('update:data', data);
}
</script>
