<!--
 * @Description: 描述
 * @Author: chd
 * @Date: 2021-02-01 10:24:15
 * @LastEditors: chd
 * @LastEditTime: 2021-07-02 14:42:27
-->
<script>
export default {
  name: 'status-list',
  data() {
    return {
      statusCode: '',
    }
  },
  mounted() {
    if (!this.statusCode && this.statuslist.length > 0) {
      this.statusCode = this.statuslist[this.defauntIndex].statusCode
    }
  },
  props: {
    statuslist: {
      type: Array,
      defaunt: () => {},
    },
    defauntIndex: {
      type: Number,
      defaunt: 0,
    },
    isHide: {
      type: Boolean,
      defaunt: false,
    },
  },
  watch: {
    statuslist(list) {
      if (
        !this.statusCode &&
        this.defauntIndex !== null &&
        this.defauntIndex !== undefined
      ) {
        this.statusCode = list[this.defauntIndex].statusCode
      }
      if (
        this.isHide &&
        this.defauntIndex !== null &&
        this.defauntIndex !== undefined
      ) {
        this.statusCode = list[this.defauntIndex].statusCode
      }
    },
  },
  methods: {
    setTabIndex(item, index) {
      this.statusCode = item.statusCode
      this.$emit('statusChange', { item, index })
    },
    changeStatusCode(code) {
      this.statusCode = code
    },
  },
  render() {
    const elItem = (item, index) => (
      <li
        key={item.statusCode}
        style={
          this.isHide
            ? {
                display: index !== 0 && item.quantity === 0 ? 'none' : 'block',
              }
            : { display: item.show === false ? 'none' : 'block' }
        }
        onClick={() => this.setTabIndex(item, index)}
        class={`tabs-item ${
          this.statusCode === item.statusCode ? 'active' : ''
        }`}>
        {item.statusName}({item.quantity})
        <span class="right_btn">
          {this.$scopedSlots.operate && this.$scopedSlots.operate(item)}
        </span>
      </li>
    )
    return (
      <ul>
        {this.statuslist.map((item, index) => {
          if (item.children) {
            return (
              <div key={index}>
                {elItem(item, index)}
                <ul style="margin-left:1em">
                  {item.children.map((item1, index1) => {
                    if (item1.children) {
                      return (
                        <div key={item1.statusCode}>
                          {elItem(item1, index1)}
                          <ul style="margin-left:1em">
                            {item1.children.map((item2, index2) => {
                              return elItem(item2, index2)
                            })}
                          </ul>
                        </div>
                      )
                    } else {
                      return elItem(item1, index1)
                    }
                  })}
                </ul>
              </div>
            )
          } else {
            return elItem(item, index)
          }
        })}
      </ul>
    )
  },
}
</script>
<style scoped>
.tabs-item {
  font-size: 14px;
  padding: 5px 10px 5px 20px;
  cursor: pointer;
  position: relative;
}

.tabs-item:hover,
.tabs-item.active {
  color: #4168FF;
  background: #ddd;
}
.subtitle {
  margin-left: 1em;
}
.right_btn {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}
.tabs-item:hover .right_btn {
  display: block;
}
</style>
