<template>
  <el-dialog :close-on-click-modal="false" :title="title" :type="type" :visible.sync="isVisible" center width="48%"
    top="50px" class="group-dialog">
    <div class="add-dialog-component">
      <el-alert :style="{ backgroundColor: '#fff' }" title="保存后将生效在移动端的分类里" type="info" :closable="false" />
      <el-tree class="tree-box" :data="treeData" :props="{ children: 'childs' }" node-key="id" default-expand-all
        :expand-on-click-node="false">

        <div slot-scope="{ node, data }" class="custom-tree-node">
          <div class="content">
            <template v-if="data.depth < 3">
              <el-input v-model="data.categoryName" class="input" :disabled="isCheck" maxlength="6" size="mini"
                :placeholder="data.depth | placeholderTips" />

              <el-upload class="upload-uploader" :on-success="handleImageSuccessOne" :multiple="false"
                :show-file-list="false" :action="action" :file-list="data.categoryImgArray">
                <img v-if="data.categoryImgArray.length && data.categoryImgArray[0].imgPath" width="80" height="80"
                  :src="data.categoryImgArray.length && data.categoryImgArray[0].imgPath">
                <i v-else class="el-icon-plus" />
              </el-upload>
            </template>
            <template v-else>
              <div class="content" :class="isCheck ? 'disabled' : ''">
                <el-input v-model="data.categoryName" class="input" :disabled="isCheck" size="mini" maxlength="6"
                  placeholder="输入三级类别名称（最大6个字符）" />
                <el-upload :headers="headers" :data="dataObj" :multiple="false" :show-file-list="false"
                  :file-list="data.categoryImgArray" :on-success="handleImageSuccess" class="upload-uploader"
                  :action="action">
                  <img v-if="data.categoryImgArray && data.categoryImgArray[0].url
                    " width="80" height="80" :src="data.categoryImgArray && data.categoryImgArray[0].url
    ">
                  <i v-else class="el-icon-plus" />
                </el-upload>
              </div>
            </template>
          </div>
          <div v-if="!isCheck" class="setting-box">
            <el-button type="text" size="mini" @click="() => append(data)">
              {{ data.depth | addTips }}
            </el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">
              删除
            </el-button>
          </div>
        </div>
      </el-tree>
      <div class="add-btn-wrap">
        <template v-if="isCheck">
          <el-button class="add" type="primary" size="small" @click="close">
            确定
          </el-button>
        </template>
        <template v-else>
          <el-button v-if="type === 'add'" class="add" type="primary" size="small" @click="addClassification">
            添加一级类别名称
          </el-button>
          <el-button type="primary" size="small" @click="onSubmit">
            保存
          </el-button>
        </template>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { uploadUrl } from '@/utils/request'

import { factoryClassListById, updateFactoryClass, addFactoryClass } from '../../../api/business'
import { fullPicUrl } from '../../../utils'

let idx = 1000
let imgId = 1
export default {
  filters: {
    addTips(depth) {
      depth = depth + ''
      const tipsMp = {
        1: '添加二级类别名称',
        2: '添加三级类别名称'
      }
      return tipsMp[depth]
    },
    placeholderTips(depth) {
      depth = depth + ''
      const tipsMp = {
        1: '输入一级类别名称（最大6个字符）',
        2: '输入二级类别名称（最大6个字符）'
      }
      return tipsMp[depth]
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      params: {
        categoryName: ''
      },
      file: this.image ? this.image : '',
      imgList: [],
      customParams: {
        current: 1,
        map: {},
        model: {
          config: '',
          isCustom: true,
          isDelete: 0,
          name: ''
        },
        order: 'descending',
        size: 100,
        sort: 'id'
      },
      treeData: [],
      headers: {
        Authorization: ''
      },
      action: uploadUrl,
      dataObj: {
        folderId: 1
      },
      deleteArr: []
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
        this.reset()
      }
    },
    title() {
      const stateMap = {
        add: '新建类别',
        edit: '修改类别',
        check: '查看类别'
      }
      return stateMap[this.type]
    },
    isCheck() {
      return this.type === 'check'
    }
  },
  async created() {
    /*
    const res = await getSelect({
      dictName: '商品类别链接'
    })
    console.log(res)
    this.dictList = res.data
    */
  },
  methods: {
    async queryOneCategory(oneClassifyId) {
      console.log(oneClassifyId)
      if (oneClassifyId === undefined) {
        this.treeData = []
        return
      }
      const res = await factoryClassListById({
        oneClassifyId
      })
      console.log(res)
      const resData = res.data
      const treeFilter = (item) => {
        const {
          level: depth, storeName: categoryName, categoryPath, link, id, picUrl, parentName
        } = item

        const categoryImgArray = picUrl ? [{ imgPath: fullPicUrl(picUrl) }] : []
        const newMap = {
          depth,
          categoryName,
          categoryPath: categoryPath || '',
          parentName,
          categoryImgArray,
          link,
          id
        }
        console.log(depth)
        if (depth == 3) {
          newMap.categoryImgArray = [
            {
              url: picUrl ? fullPicUrl(picUrl) : 'https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/rrl9aiojchn29z7q079k.png'
            }
          ]
        }
        if (item.childs && item.childs.length) {
          newMap.childs = item.childs.map(treeFilter)
        }
        return newMap
      }
      if (resData) {
        resData.categoryName = resData.storeName
        resData.depth = 1
        resData.categoryImg = fullPicUrl(resData.picUrl)
        resData.categoryImgArray = [{
          status: 'success',
          uid: Date.now() + Math.random(),
          imgPath: fullPicUrl(resData.picUrl)
        }]
        resData.childs =
          resData && resData.childs && resData.childs.map(treeFilter)
        this.treeData = [resData]
      } else {
        this.treeData = []
      }
      console.log(this.treeData)
    },
    handleImageSuccess(response, file, fileList) {
      console.log(response)
      const url = response.data.url
      fileList[0].url = url
    },
    handleImageSuccessOne(response, file, fileList) {
      const url = response.data.url
      console.log(fileList)
      fileList[0].imgPath = url
    },
    close() {
      this.$emit('close')
    },
    reset() {
      this.treeData = []
    },
    addClassification() {
      this.treeData.push({
        placeholder: '输入一级类别名称',
        addTips: '添加二级类别名称',
        categoryName: '',
        categoryPath: '',
        depth: 1,
        idx: idx++,
        categoryImgArray: [
          {
            id: imgId++,
            imgPath: ''
          }
        ]
      })
    },
    append(data) {
      console.log(data)
      const { categoryName } = data
      const depth = data.depth + 1
      let newChild
      if (!data.childs) {
        this.$set(data, 'childs', [])
      }
      if (depth < 3) {
        newChild = {
          placeholder: '输入二级类别名称',
          addTips: '添加三级类别名称',
          depth,
          parentName: categoryName,
          categoryName: '',
          categoryPath: '',
          categoryImgArray: [
            {
              id: imgId++,
              imgPath: ''
            }
          ],
          childs: [],
          idx: idx++
        }
      } else {
        newChild = {
          parentName: categoryName,
          categoryImgArray: [
            {
              id: imgId++,
              url: ''
            }
          ],
          depth: 3,
          categoryName: '',
          idx: idx++
        }
      }
      data.childs.push(newChild)
    },
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.childs || parent.data
      const index = children.findIndex((d) => d.idx === data.idx)
      if (index !== -1) {
        children.splice(index, 1)
        this.deleteArr.push(data.id || '')
      } else {
        this.$message.warning('数据错误，请重试')
      }
    },
    onSubmit() {
      console.log(this.type)
      if (this.type === 'add') {
        this.addGroup()
      } else {
        this.updateGroup()
      }
    },
    async addGroup() {
      console.log(this.treeData)
      const treeFilter = (item) => {
        const {
          categoryName,
          categoryImgArray,
          parentName,
          depth,
          id
        } = item
        const newMap = {
          id,
          storeName: categoryName,
          picUrl: '',
          parentName
        }
        if (categoryImgArray) {

          if (depth == 3) {
            newMap.picUrl = categoryImgArray[0].url
          } else {
            newMap.picUrl = categoryImgArray[0].imgPath
          }
        }

        if (!newMap.picUrl) {
          this.$message.error('分类\"' + categoryName + '\"请上传分类图片')
          throw new Error('未上传分类图片')
        }
        if (item.childs && item.childs.length) {
          newMap.childs = item.childs.map(treeFilter)
        }
        return newMap
      }
      const params = this.treeData.map(treeFilter)

      if (params.length === 0) {
        this.$message.error('请添加分类')
        return
      }
      const obj = {
        shopCategory: params
      }
      const res = await addFactoryClass(obj)
      if (res.code === '') {
        this.isVisible = false
        this.$message({
          message: '新增成功',
          type: 'success'
        })
        this.$emit('success')
        this.deleteArr = []
      }
    },
    async updateGroup() {
      const treeFilter = (item) => {
        const {
          categoryName,
          categoryImgArray,
          depth,
          id,
        } = item
        const newMap = {
          id,
          storeName: categoryName,
          picUrl: ''
        }

        if (categoryImgArray && categoryImgArray[0]) {
          if (depth == 3) {
            newMap.picUrl = categoryImgArray[0].url
          } else {
            newMap.picUrl = categoryImgArray[0].imgPath
          }
        }

        if (!newMap.picUrl) {
          this.$message.error('分类\"' + categoryName + '\"请上传分类图片')
          throw new Error('未上传分类图片')
        }
        if (item.childs && item.childs.length) {
          newMap.childs = item.childs.map(treeFilter)
        }
        return newMap
      }
      console.log(this.treeData)
      const params = this.treeData.map(treeFilter)

      const obj = {
        shopCategory: params,
        deleteIds: this.deleteArr
      }
      const res = await updateFactoryClass(obj)
      if (res.code === '') {
        this.isVisible = false
        this.$message({
          message: '成功',
          type: 'success'
        })
        this.$emit('success')
        this.deleteArr = []
      }
    },
    setParams({ id }) {
      console.log(id)
      this.queryOneCategory(id)
    }
  }
}
</script>

<style lang="scss">
.add-dialog-component {
  .tree-box {
    .el-tree-node__content {
      margin-bottom: 15px;
      height: auto;
    }
  }
}
</style>

<style
  lang="scss"
  scoped
>
@import url("../../../styles/elDialog.scss");

.group-dialog {
  .el-dialog {
    min-width: 500px;
    max-width: 600px;
  }
}

.add-dialog-component {
  padding: 15px 20px;
  max-height: 60vh;
  overflow: auto;

  .el-tree-node__content {
    &:hover {
      background-color: #fff;
    }
  }

  .tree-box {
    margin: 15px 0;

    .custom-tree-node {
      display: flex;
      width: 100%;
      text-align: left;

      .content {
        flex: 1;
        display: flex;
        align-items: center;

        .input {
          width: 60%;
          margin-right: 20px;
        }

        .textarea-input {
          width: 100%;
          margin-left: 15px;

          textarea {
            height: 80px;
          }
        }
      }

      .level-3-wrap {
        display: flex;
        width: 300px;

        .upload-wrap {
          position: relative;

          &.disabled::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 999;
            background-color: #f5f7fa;
            opacity: 0.5;
          }

          .el-upload {
            border: 1px dashed #d9d9d9;
          }

          i {}

          img {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }

  .add-btn-wrap {
    text-align: center;
  }
}

.upload-uploader {
  margin-left: 30px;
}
</style>
