<template>
<div>
  <Card class="category">
    <Tree :data="data5" :render="renderContent" expand-node class="demo-tree-render"></Tree>
  </Card>
    <Modal
        v-if="this.type == 1"
        title="增加类目"
        v-model="modal10"
        class-name="vertical-center-modal">
        <Form
            ref="addCate"
            :model="addCate"
            :label-width="120"
        >
        <FormItem label="类目名称：" prop="name" class="shopList">
          <Input
            placeholder="请输入类目名称"
            v-model="addCate.name"
            :maxlength="30"
          />
        </FormItem>

        <FormItem label="缩略图：" prop="thumb" class="shopList">
            <file-upload
                v-model="thum"
                :maxNum="1"
                :defaultList="this.defaultThumb"
            />
        </FormItem>
      </Form>

      <div slot="footer">
        <Button
          @click="updateCategory"
          :loading="updatePwdLoading"
          type="primary"
          long
          >确 定</Button
        >
      </div>
    </Modal>
    <Modal
        v-if="this.type == 2"
        title="修改商品类目"
        v-model="modal10"
        class-name="vertical-center-modal">
        <Form
            ref="addCate"
            :model="eidtCate"
            :label-width="120"
        >
        <FormItem label="类目名称：" prop="name" class="shopList">
          <Input
            placeholder="请输入类目名称"
            v-model="eidtCate.name"
            :maxlength="30"
          />
        </FormItem>

        <FormItem label="缩略图：" prop="thumb" class="shopList">
            <file-upload
                v-model="thum"
                :maxNum="1"
                :defaultList="this.defaultThumb"
            />
        </FormItem>
      </Form>

      <div slot="footer">
        <Button
          @click="eidotCategory"
          :loading="updatePwdLoading"
          type="primary"
          long
          >确 定</Button
        >
      </div>
    </Modal>
</div>

</template>
<script>
import FileUpload from '_c/file-upload'
// import { formatRes } from "@/libs/formatRes";
export default {
  components: {
    FileUpload
  },
  data () {
    return {
      data5: [
        {
          title: 'parent 1',
          expand: true,
          categoryId: '',
          level: '',
          render: (h, { root, node, data }) => {
            // console.log('data11111',data)
            return h('span', {
              style: {
                display: 'inline-block',
                width: '100%',
                fontSize: '22px',
                fontFamily: 'PingFangSC-Medium, PingFang SC',
                fontWeight: '500',
                color: '#140603',
                lineHeight: '30px'
              }
            }, [
              h('span', [
                h('Icon', {
                  props: {
                    // type: 'ios-folder-outline'
                  },
                  style: {
                    marginRight: '8px'

                  }
                }),
                h('span', data.title)
              ]),
              h('span', {
                style: {
                  display: 'inline-block',
                  float: 'right',
                  marginRight: '32px'
                }
              }, [
                h('Button', {
                  props: Object.assign({}, this.buttonProps, {
                    icon: 'ios-add',
                    type: 'primary'
                  }),
                  style: {
                    width: '130px',
                    height: '40px',
                    fontSize: '20px'

                  },
                  //  style: {
                  //   marginRight: '8px',
                  //   fontSize:'18px'
                  // },
                  on: {
                    click: () => {
                      console.log('data', data)
                      this.modal10 = true
                      this.thum = []
                      this.type = 1
                      this.addCate.categoryId = data.categoryId
                      this.addCate.level = data.level
                    }
                  }
                })
              ])
            ])
          },
          children: [
            {
              title: '二级类目',
              expand: true
            }
          ]
        }
      ],
      buttonProps: {
        type: 'default',
        size: 'small'
      },
      modal10: false,
      updatePwdLoading: false,
      addCate: {
        categoryId: '',
        level: 0,
        name: '',
        thumb: ''
      },
      eidtCate: {
        categoryId: '',
        updateTime: '',
        name: '',
        thumb: ''
      },
      defaultThumb: [],
      thum: [],
      type: 1

    }
  },
  created () {
    this.categoryList()
  },
  methods: {
    renderContent (h, { root, node, data }) {
      // console.log('data.thumb', data.thumb)
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%',
          fontSize: '14px',
          fontFamily: 'PingFangSC-Medium, PingFang SC',
          fontWeight: '500',
          color: '#000000',
          lineHeight: '20px'
        }
      }, [
        h('span', [
          h('img', {
            attrs: {
              src: data.thumb
              // type: 'ios-paper-outline'
            },
            style: {
              width: '30px',
              height: '30px',
              marginRight: '8px',
              objectFit: 'cover'
            }
          }, data.thumb),
          h('span', data.title)
        ]),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '32px'
          }
        }, [
          // 修改类目
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-create'
            }),
            style: {
              marginRight: '8px',
              fontSize: '18px'
            },
            on: {
              click: () => {
                console.log('data', data)
                this.thum = []
                this.type = 2
                this.modal10 = true
                this.eidtCate.name = data.title
                this.thum.push(data.thumb)
                this.eidtCate.categoryId = data.categoryId
                this.eidtCate.updateTime = data.updateTime
              }
            }
          }),
          // 增加类目
          h('Button', {
            props: Object.assign({}, this.buttonProps, {

              icon: 'ios-add'
            }),
            style: {
              marginRight: '8px',
              fontSize: '18px'
            },
            on: {
              click: () => {
                // console.log('data', data)
                console.log('this.eidtCate.name', this.eidtCate.name)
                this.modal10 = true
                this.thum = []
                this.type = 1
                this.addCate.categoryId = data.categoryId
                this.addCate.level = data.level
              }
            }
          }),
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-remove'
            }),
            style: {
              marginRight: '8px',
              fontSize: '18px'
            },
            on: {
              click: () => {
                let categoryId = data.categoryId
                this.$Modal.confirm({
                  title: '提示',
                  content: `您确定删除 “${data.title}” 吗？`,
                  onOk: () => {
                    this.api({
                      apiName: 'categoryDelete',
                      postdata: categoryId,
                      success: (res) => {
                        console.log('res', res)
                        this.$Message.info('删除成功')
                        this.categoryList()
                      }
                    })
                  },
                  onCancel: () => {
                    this.$Message.info('取消')
                  }
                })
              }
            }
          })
        ])
      ])
    },
    // 查询商品类目
    categoryList () {
      this.api({
        apiName: 'categoryList',
        success: (res) => {
          // console.log('res',res.data)
          let value = this.formatRes(res.data)
          // console.log('value',value)
          this.data5.forEach(item => {
            // console.log('item',item)
            item.title = value[0].title
            item.children = value[0].children
            item.categoryId = value[0].categoryId
            item.level = value[0].level
          })
        }
      })
    },
    // 添加商品目录
    updateCategory () {
      if (!this.addCate.name) {
        this.$Message.warning(`请填写类目名称！`)
        return
      }
      // this.updatePwdLoading = true
      this.addCate.thumb = this.thum[0]
      // console.log('addCate',this.addCate)
      this.api({
        apiName: 'categorySave',
        postdata: this.addCate,
        success: (res) => {
          // console.log('res',res.data)
          this.thum = []
          this.addCate.name = ''
          this.modal10 = false
          this.categoryList()
        }
      })
    },
    // 修改商品类目
    eidotCategory () {
      if (!this.eidtCate.name) {
        this.$Message.warning(`请填写类目名称！`)
        return
      }
      // this.updatePwdLoading = true
      this.eidtCate.thumb = this.thum[0]
      // console.log('addCate', this.eidtCate)
      this.api({
        apiName: 'categoryUpdate',
        postdata: this.eidtCate,
        success: (res) => {
          // console.log('res',res.data)
          this.modal10 = false
          this.categoryList()
        }
      })
    },
    formatRes (res) {
      const arr = []
      let obj = {}
      res.forEach(item => {
        const tmp = { ...item }
        // console.log('tmp',item)
        if (item.name) {
          // console.log('tmp',tmp)
          if (tmp.childList) {
            tmp.children = this.formatRes(tmp.childList)
            // console.log('tmp', tmp)
            obj = {
              title: tmp.name,
              children: tmp.children,
              categoryId: tmp.categoryId,
              level: tmp.level,
              clazzId: tmp.clazzId,
              thumb: tmp.thumb,
              updateTime: tmp.updateTime
            }
          }
          arr.push(obj)
        }
      })
      return arr
    }
  }
}
</script>
<style lang="less" scoped>
.category{
  // width: 80%;
  padding:20px ;
}
    .demo-tree-render .ivu-tree-title{
        width: 80%;
        margin: 0 auto;
    }
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
    /deep/.ivu-tree-arrow{
      width: 24px;
      >i{
        font-size: 18px;
      }
    }
</style>
