<template>
  <section class="typeManage">
    <v-drag v-model="list" @move="handleMove">
      <div class="item" v-for="(e,i) in list" :key="i">
        <u-icon name="list"/>
        <u-input v-model="e.name" border :focus="!e.id" @blur="submitCategory(e,i)" maxlength="6"/>
        <div btn @tap="handleDel(e,i)">删除</div>
      </div>
    </v-drag>
    <div v-if="!adding" class="item" @tap="handleAdd">
      <u-icon name="plus-circle" size="38" color="#1365DD"/>
      <div btn>添加新的分组</div>
    </div>
    <div bottom>
      <u-button @tap="back">返回</u-button>
    </div>
  </section>
</template>

<script>
import VDrag from "../../components/VDrag";

export default {
  name: "typeManage",
  components: {VDrag},
  data() {
    return {
      list: [],
      adding: false,
      moveIndex: 0
    }
  },
  methods: {
    back() {
      uni.redirectTo({url: "./quickReply"})
    },
    getList() {
      this.$http.post("/app/wxcp/wxspeechtechniquecategory/listAll", null, {
        params: {type: this.$route.query?.type}
      }).then(res => {
        if (res?.data) {
          this.list = res.data.map(e => ({...e, disabled: true})).sort((a, b) => a.showIndex - b.showIndex)
        }
      })
    },
    handleAdd() {
      this.adding = true
      this.list.push({
        showIndex: this.list.length,
        type: this.$route.query?.type
      })
    },
    handleDel(item, index) {
      this.$confirm("是否要删除该分类?").then(() => {
        if (item?.id) {
          this.$http.post("/app/wxcp/wxspeechtechniquecategory/delete", null, {
            params: {id: item.id}
          }).then(() => {
            this.$u.toast("删除成功!")
            this.getList()
          })
        } else this.list.splice(index, 1)
      })
    },
    submitCategory(item, index) {
      this.adding = false
      if (item?.name) {
        this.$http.post("/app/wxcp/wxspeechtechniquecategory/addOrUpdate", item).then(() => {
          this.getList()
        })
      } else {
        this.list.splice(index, 1)
      }
    },
    handleMove({moved}) {
      if (moved) {
        let {oldIndex, newIndex} = moved,
            list = JSON.parse(JSON.stringify(this.list)),
            item = list?.[oldIndex]
        if (oldIndex < newIndex) {
          list.splice(newIndex + 1, 0, item)
          list.splice(oldIndex, 1)
        } else {
          list.splice(oldIndex, 1)
          list.splice(newIndex, 0, item)
        }
        this.$http.post("/app/wxcp/wxspeechtechniquecategory/updateSort",
            list.map((e, showIndex) => ({id: e.id, showIndex}))
        ).then(res => {
          if (res?.code == 0) {
            this.getList()
          }
        })
      }
    }
  },
  created() {
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.typeManage {
  padding: 32px 0 80px;
  border-top: 1px solid #D4D4D4;
  display: flex;
  flex-direction: column;

  & > * + * {
    margin-top: 32px;
  }

  uni-movable-area {
    width: 100%;
    height: auto;
  }

  .item {
    display: flex;
    height: 88px;
    width: 100%;
    align-items: center;
    position: relative;

    & + .item {
      margin-top: 32px;
    }

    &:hover {
      z-index: 9;
    }
  }

  .iconfont, .u-icon {
    font-size: 38px;
    padding: 0 32px;
    color: #89b;

    & + div[btn] {
      padding: 0;
    }
  }

  div[btn] {
    color: #1365DD;
    padding: 0 26px;
    cursor: pointer;
  }

  ::v-deep .u-input {
    background: #FBFBFB;
    border-radius: 4px;
    border: 1px solid #CCCCCC;
    height: 100%;

    uni-input {
      height: 100%;
    }
  }
}
</style>
