<!-- 级联选择器  -->
import { fail } from 'assert';
<template>
  <div class="cascader">
    <input
      type="text"
      :value="firstItem.classname"
      :placeholder="placeholder"
      ref="input"
      @focus="cascaderFouce"
      v-if="!secondItem.classifyid"
      @blur="cascaderBlur"
    />

    <input
      type="text"
      :value="firstItem.classname+'/'+secondItem.classifyname"
      readonly
      :placeholder="placeholder"
      ref="input"
      @focus="cascaderFouce"
      v-if="secondItem.classifyid"
      @blur="cascaderBlur"
    />

    <div class="cascader-body flex flex-col-top flex-row-left" v-show="showFirst">
      <!-- -->
      <div class="cascder-l left">
        <div class="cascader-item nodata" v-if="list.length==0">无数据</div>

        <div
          :class="['cascader-item flex flex-row-between flex-col-center',firstItem.classid==item.classid?'cascader-active':'']"
          v-for="(item,index) in list"
          :key="index"
        >
          <span class="ellipsis-line1" @click="handelFirstItem(item)">{{item.classname}}</span>
          <i class="el-icon-arrow-right" v-if="item.classifys.length>0"></i>

          <div class="cascder-r right" v-if="item.classifys.length>0">
            <div
              :class="['cascader-item flex flex-row-between flex-col-center',secondItem.classifyid==item1.classifyid?'cascader-active':'']"
              v-for="(item1,index1) in item.classifys"
              :key="index1"
            >
              <span @click="handleSecondItem(item,item1)">{{item1.classifyname}}</span>
              <!-- <i class="el-icon-arrow-right"></i> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "请选择"
    },
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  created() {},
  data() {
    return {
      showFirst: false,
      showSecond: false,
      secondList: [],
      firstItem: {},
      secondItem: {}
    };
  },
  methods: {
    inputChange() {
      console.log("change");
    },
    // input 聚焦
    cascaderFouce() {
      this.showFirst = !this.showFirst;
      if (this.showFirst) {
        this.$refs.input.style.borderColor = "#5386F6";
      } else {
        this.$refs.input.style.borderColor = "#DCDFE6";
      }
    },
    cascaderBlur() {
      setTimeout(() => {
        this.showFirst = false;
        if (this.showFirst) {
          this.$refs.input.style.borderColor = "#5386F6";
        } else {
          this.$refs.input.style.borderColor = "#DCDFE6";
        }
      }, 200);
    },

    // 一级分类右箭头点击
    handelFirstClass(item) {
      this.showSecond = true;
      this.secondItem = {};
      this.secondList = item.classifys;
      this.firstItem = item;
    },
    // 一级分类选中
    handelFirstItem(item) {
      this.firstItem = item;
      this.secondItem = {};
      this.showFirst = false;
      this.showSecond = false;

      this.$emit("change", {
        firstItem: this.firstItem,
        secondItem: this.secondItem
      });
    },
    // 二级分类选中
    handleSecondItem(item, item1) {
      this.firstItem = item;
      this.secondItem = item1;
      this.showFirst = false;
      this.showSecond = false;
      this.$emit("change", {
        firstItem: this.firstItem,
        secondItem: this.secondItem
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/common.scss";

.cascader {
  width: 100%;
  position: relative;

  input {
    width: 100%;
    height: 28px;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    outline: none;
    outline-color: #5386f6;
    outline-width: 0.5px;
    font-size: 12px;
  }

  input::-webkit-input-placeholder {
    color: #c4c4cc;
  }

  input::placeholder {
    color: #c4c4cc;
  }

  .cascader-body {
    width: 100%;

    position: absolute;
    top: 35px;
    left: 0px;
    right: 0px;
  }

  .cascder-l,
  .cascder-r {
    width: 100%;
    background: #fff;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #e4e7ed;
    border-radius: 4px;
    padding: 0px 0;
  }

  .cascder-r {
    // display: none;
    position: absolute;
    left: 98%;
    display: none;
    top: 0;
  }

  .cascder-l .cascader-item:hover .cascder-r {
    display: block;
  }

  .cascader-active {
    background: #f5f7fa !important;
    color: #5386f6 !important;
  }

  .cascader-item {
    font-size: 14px;
    padding: 10px;
    color: #606266;
    // position: relative;

    span {
      flex: 1;
    }

    i {
      width: 16px;
      margin-left: 6px;
    }
  }

  .cascader-item:hover {
    background: #f5f7fa;
  }

  .nodata {
    text-align: center;
    padding: 10px;
    color: #999;
    // #F5F7FA
  }
}
</style>