<template>
  <a-modal :closable="false" :visible="isShow1" class="main" :footer="null" title="选项编辑" centered>
    <div class="addItem" @click="handleAdd">
      <img src="../../assets/img/icon-add.png" alt="">
      添加选项
    </div>
    <!-- <a-form :model="optionState" @finish="rootTreeAdd">
      <a-form-item
        has-feedback
        label="分类名称"
        name="name"
        :rules="[
          {
            required: true,
            message: '请填写分类名称',
          },
        ]"
      >
        <a-input v-model:value="optionState.name" />
      </a-form-item>
      <a-form-item
        has-feedback
        label="分类key"
        name="key"
        :rules="[
          {
            required: true,
            message: '请填写分类Key',
            // validator: &quot;validateKey&quot;,
          },
        ]"
      >
        <a-input v-model:value="optionState.key" />
      </a-form-item>
      <a-form-item style="margin-left: 280px">
        <a-button type="primary" html-type="submit">确认</a-button>
        <a-button style="margin-left: 10px" @click="cancel">取消</a-button>
      </a-form-item>
    </a-form> -->
    <a-table class="table" :pagination="false" bordered :data-source="dataSource" :columns="columns">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'name'">
          <div class="editable-cell">
            <!-- <div v-if="editData1[record.key]" class="editable-cell-input-wrapper"> -->
            <a-input v-model:value="dataSource[record.key].name" @pressEnter="save1({ column, record })" />
            <!-- <check-outlined class="editable-cell-icon-check" @click="save1(record.key)" />
            </div>
            <div v-else class="editable-cell-text-wrapper">
              {{ text || ' ' }}
              <edit-outlined class="editable-cell-icon" @click="edit1(record.key)" />
            </div> -->
          </div>
        </template>
        <template v-if="column.dataIndex === 'value'">
          <div class="editable-cell">
            <!-- <div v-if="editData2[record.key]" class="editable-cell-input-wrapper"> -->
            <a-input v-model:value="dataSource[record.key].value" @pressEnter="save2(record.key)" />
            <!-- <check-outlined class="editable-cell-icon-check" @click="save2(record.key)" />
            </div> -->
            <!-- <div v-else class="editable-cell-text-wrapper">
              {{ text || ' ' }}
              <edit-outlined class="editable-cell-icon" @click="edit2(record.key)" />
            </div> -->
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'delete'">
          <a-popconfirm
            v-if="dataSource.length"
            title="是否确认删除?"
            @confirm="onDelete(record.key)"
          >
            <delete-outlined />
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <div class="btn">
      <z-button type="primary" @click="confirm">确认</z-button>
      <z-button style="margin-left: 10px" @click="cancel">取消</z-button>
    </div>
  </a-modal>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRefs } from 'vue'

export default defineComponent({
  name: 'OptionModal',
  components: {

  },
  props: {
    modalShow: {
      type: Boolean,
      default: undefined
    }
  },
  setup(props, { emit }) {
    const isShow = ref(props.modalShow)
    const state = reactive({
      isShow1: isShow,
      optionState: {
        name: '',
        key: ''
      },
      columns: [{
        title: '序号',
        dataIndex: 'index',
        width: '15%'
      }, {
        title: '选项名称',
        dataIndex: 'name'
      }, {
        title: '选项值',
        dataIndex: 'value'
      }, {
        title: '操作',
        dataIndex: 'delete'
      }],
      dataSource: [{
        key: '0',
        index: '01',
        name: '选项1',
        value: 'aaaa'
      }, {
        key: '1',
        index: '02',
        name: '选项2',
        value: 'bbbb'
      }]
    })
    const count = computed(() => state.dataSource.length + 1)
    console.log('count', count)
    const editData1 = reactive({})
    const editData2 = reactive({})
    const cancel = () => {
      console.log(1)
      state.isShow1 = false
    }
    const confirm = () => {
      // console.log('datasource', state.dataSource)
      emit('options', state.dataSource)
      state.isShow1 = false
    }
    const edit1 = key => {
      // console.log('key', key)
      // console.log('--------------', 'state.dataSource', state.dataSource)
      editData1[key] = JSON.parse(JSON.stringify(state.dataSource.filter(item => key === item.key)[0]))
    }

    const save1 = key => {
      console.log('{ column, record }', key)
      // Object.assign(state.dataSource.filter(item => key === item.key)[0], editData1[key])
      // delete editData1[key]
    }
    const edit2 = key => {
      editData2[key] = JSON.parse(JSON.stringify(state.dataSource.filter(item => key === item.key)[0]))
    }

    const save2 = key => {
      Object.assign(state.dataSource.filter(item => key === item.key)[0], editData2[key])
      delete editData2[key]
    }
    const onDelete = key => {
      state.dataSource = state.dataSource.filter(item => item.key !== key)
    }

    const handleAdd = () => {
      const newData = {
        key: count.value,
        index: `0${count.value}`,
        name: `选项 ${count.value}`,
        value: `new${count.value}`
      }
      state.dataSource.push(newData)
    }
    return {
      isShow,
      count,
      cancel,
      confirm,
      edit1,
      save1,
      edit2,
      save2,
      onDelete,
      handleAdd,
      editData1,
      editData2,
      ...toRefs(state)
    }
  }
})
</script>

<style scoped lang='less'>
.editable-cell {
  position: relative;
  // .editable-cell-input-wrapper,
  // .editable-cell-text-wrapper {
  //   padding-right: 24px;
  // }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
.main{
  .addItem{
  cursor: pointer;
  color: #2956f2;
}
.btn{
  margin-top: 20px;
  display: flex;
  justify-content: right;
}
}
</style>
