<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="isVisible"
    width="60%"
    class="group-dialog"
    @open="open"
  >
    <div class="add-dialog-component">
      <el-form ref="form" class="form-inline" label-width="80px">
        <template v-if="deep===1">
          <el-form-item label="一级分类">
            <el-select v-model="value" placeholder="请选择" @change="change(value, 1)">
              <el-option
                v-for="item in categorys"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类">
            <el-select v-model="value1" placeholder="请选择" @change="change(value1, 2)">
              <el-option
                v-for="item in secondaryList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </template>
        <el-form-item label="三级分类">
          <el-select v-model="value2" placeholder="请选择" @change="change(value2, 3)">
            <el-option
              v-for="item in level3List"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="add-btn-wrap">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Classification from '@/api/Classification.js'
import Goods from '@/api/Goods.js'
export default {
  props: {
    exclude: {
      type: Array,
      default() {
        return []
      }
    },
    deep: {
      type: Number,
      default() {
        return 1
      }
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formParams: {
        pageSize: 100,
        pageIndex: 1
      },
      value: '',
      value1: '',
      value2: '',
      categoryList: [],
      secondaryList: [],
      level3List: [],
      currentObj: {}
    }
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.close()
        this.reset()
      }
    },
    title () {
      return '选择分类'
    },
    categorys() {
      return this.categoryList.filter(i => {
        return this.exclude.indexOf(i.id) === -1
      })
    }
  },

  methods: {
    async getProductCategory () {
      const res = await Classification.getProductCategory(this.formParams)
      const categoryList = res.data.data && res.data.data.productCategoryList || []
      this.categoryList = categoryList.filter(i => {
        return this.exclude.indexOf(i.id) === -1 && i.categoryName
      })
    },
    change(id, deep) {
      if (deep === 1) {
        this.categoryList.map(i => {
          if (i.id === id) {
            this.currentObj = {
              id,
              categoryName: i.categoryName
            }
          }
        })
      }
      if (deep === 2) {
        this.value2 = ''
        this.secondaryList.map(i => {
          if (i.id === id) {
            this.currentObj = {
              id,
              categoryName: i.categoryName
            }
          }
        })
      }
      if (deep === 3) {
        this.level3List.filter(i => {
          if (i.id === id) {
            this.currentObj = {
              id,
              categoryName: i.categoryName
            }
          }
        })
      }
      if (deep !== 3) {
        this.queryChildCategory(id, deep)
      }
    },
    async queryChildCategory (id, deep) {
      const res = await Classification.queryChildCategory({
        id
      })
      const list = res.data.data || []
      if (deep === 1) {
        this.secondaryList = list.filter(i => {
          return this.exclude.indexOf(i.id) === -1
        })
        this.value1 = ''
        this.value2 = ''
        this.level3List = []
      }
      if (deep === 2) {
        this.value2 = ''
        this.level3List = list.filter(i => {
          return this.exclude.indexOf(i.id) === -1
        })
      }
    },
    async  findCategoryList() {
      const res = await Goods.findCategoryList(this.deep)
      const categoryList = res.data.data || []
      this.level3List = categoryList
    },
    onSubmit () {
      this.$emit('success', this.currentObj)
      this.close()
    },
    close () {
      this.$emit('close')
      this.reset()
    },
    open() {
      if (this.deep === 1) {
        this.getProductCategory()
      } else {
        this.findCategoryList()
      }
    },
    reset () {
      this.value = ''
      this.value1 = ''
      this.value2 = ''
      this.currentObj = {}
      this.secondaryList = []
      this.level3List = []
    }
  }
}
</script>
<style lang="less">
.add-dialog-component {
  .form-inline{
    display: inline-block;
    margin: auto;
  }
  .tree-box {
    .el-tree-node__content {
      margin-bottom: 15px;
      height: auto;
    }
  }
}
</style>
<style lang="less" scoped>
.group-dialog {
  /deep/ .el-dialog {
    min-width: 620px;
    max-width: 800px;
    text-align: center;
  }
}
.add-dialog-component {
  padding: 0 20px;
  max-height: 60vh;
  overflow: auto;
  .tree-box {
    margin: 15px 0;
    .custom-tree-node {
      display: flex;
      width: 100%;
      text-align: left;
      .content {
        flex: 1;
        .input {
          width: 180px;
        }
        .textarea-input {
          width: 100%;
          margin-left: 15px;
          /deep/ textarea {
            height: 80px;
          }
        }
      }
      .level-3-wrap {
        display: flex;
        .upload-wrap {
          margin-bottom: 25px;
          /deep/ .el-upload {
            border: 1px dashed #d9d9d9;
          }
          i {
            width: 80px;
            height: 80px;
            line-height: 80px;
          }
          img {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
  .add-btn-wrap {
    text-align: center;
  }
}
</style>
