<template>
  <view class="tabs-component">
    <view class="tabs-list">
      <view
        v-for="(item, index) in list"
        :key="item.name"
        class="tab-item"
        @click="tabClick(index, item)"
        :class="index == activeIndex ? 'active-tab-item' : ''"
      >
        <text
          class="iconfont icon-yiwancheng1"
          :class="item.isVaild ? 'vaild-icon' : ''"
        ></text>
        {{ item.name }}</view
      >
    </view>

    <!-- 描述 -->
    <view class="descript">
      <view v-if="(list[activeIndex] || {}).position" class="descript-item">
        <text class="name">巡检位置</text>
        <text class="text">{{
          (list[activeIndex].position || []).map((item) => item.dictLabel).join("、")
        }}</text>
      </view>
      <view class="descript-item">
        <text class="name">巡检说明</text>
        <text class="text"> {{ (list[activeIndex] || {}).descript }}</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    options: {
      tyep: Array,
    },
  },
  data() {
    return {
      activeIndex: 0,
      list: [],
    };
  },
  created() {},
  mounted() {
    this.list = this.options;
  },
  watch: {
    options(newData) {
      this.list = newData;
    },
  },
  methods: {
    tabClick(index, item) {
      this.activeIndex = index;

      this.$emit("change", index, item);
    },
    /**
     * 设置单个校验状态
     * @param index
     * @param vaild
     * @param iSwtich  是否自动切换到下一个tab
     */
    setTabVaild(index, vaild = false, iSwtich = true) {
      return new Promise((resolve, reject) => {
        this.list[index].isVaild = vaild;

        if (iSwtich && index < this.list.length - 1) {
          this.tabClick(index + 1, {});
        }

        resolve();
      });
    },

    // 校验所有内容是否填写完成
    isAllVails() {
      return this.list.every((item) => {
        return item.isVaild;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.tabs-component {
  .tabs-list {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .iconfont {
      margin-right: 5px;
      color: #999;
      font-size: 14px;
    }
    .tab-item {
      margin-right: 24px;
      font-size: 14px;
      color: #000000;
      line-height: 22px;
      font-weight: 400;
      position: relative;
      padding-bottom: 5px;
      &::after {
        content: " ";
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 3px;
        border-radius: 10px;
        left: 0;
      }
    }
    .vaild-icon {
      color: #3774f6;
    }
    .active-tab-item {
      color: #3774f6;
      &::after {
        background: #3774f6;
      }
    }
  }
  .descript {
    padding: 8px 16px;
    background: #e0f1ff;
    border: 0.4px solid rgba(224, 224, 224, 1);
    border-radius: 8px;
    .descript-item {
      font-size: 12px;
      color: #959595;
      line-height: 28px;
      font-weight: 400;
      .name {
        margin-right: 8px;
      }
      .text {
        color: #000000;
      }
    }
  }
}
</style>
