<template>
  <view class="gather-dataCenter">
    <uni-forms
      v-for="(item, parentIndex) in list"
      :key="item.dictLabel"
      :modelValue="item"
      label-width="82px"
      class="inspection-item"
      :ref="`forms_${parentIndex}`"
      :rules="rules"
    >
      <uni-forms-item class="row-item" label="巡检项">
        <view class="text">{{ item.dictLabel }}</view>
      </uni-forms-item>
      <uni-forms-item required class="row-item" label="巡检结论">
        <view class="tags">
          <view
            v-for="(ele, eleIndex) in item.resultArr"
            class="tag"
            :key="eleIndex"
            @click="tagClick(parentIndex, eleIndex, ele.isActive)"
            :class="ele.isActive ? 'active-tag' : ''"
            >{{ ele.label }}
          </view>
        </view>
      </uni-forms-item>

      <!-- 异常状态时显示 -->
      <uni-forms-item
        required
        class="row-item"
        label="异常定位"
        name="measuredDataArr"
        v-if="item.inspectionResult == 1"
      >
        <view class="tags">
          <view
            v-for="(ele, eleIndex) in item.postionList"
            class="tag"
            @click="postionChange(parentIndex, eleIndex, ele.isActive)"
            :class="
              item.measuredDataArr.includes(ele.dictValue) ? 'active-tag' : ''
            "
            >{{ ele.dictLabel }}
          </view>
        </view>
      </uni-forms-item>

      <!-- 异常状态时显示 -->
      <uni-forms-item
        v-if="item.inspectionResult == 1"
        required
        class="row-item note-item"
        label="情况摘要"
        name="notes"
      >
        <textarea
          type="text"
          :disabled="isDisable"
          v-model="item.notes"
          placeholder="请输入内容"
        />

        <view class="qucik-content">
          <view v-if="!isDisable" class="quick-input"> 快捷输入 </view>
          <view v-if="!isDisable">
            <text
              class="qucik-text"
              v-for="quickItem in quickTextList"
              :key="quickItem.text"
              @click="clickQuick(item, quickItem)"
              >{{ quickItem.text }}</text
            >
          </view>
        </view>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>
<script>
import {
  pad_1_3_inspection_items,
  pad_1_3_inspection_position,
  pad_room_type,
} from "@/utils/dict.js";

/**
 * 电池间
 */
export default {
  props: {
    isDisable: {
      type: Boolean,
    },
  },
  data() {
    return {
      list: [],
      rules: {
        // 对notes字段进行必填验证
        notes: {
          rules: [
            {
              required: true,
              errorMessage: "请输入情况摘要",
            },
          ],
        },
        measuredDataArr: {
          rules: [
            {
              required: true,
              errorMessage: "请选择",
            },
          ],
        },
      },

      roomTypeLabel: "电池间巡检", // 用于获取类型值
      quickTextList: [
        {
          text: "有异常",
        },
        {
          text: "已处理",
        },
        {
          text: "需派单维修",
        },
      ],
    };
  },
  mounted() {
    this.coverlist();
  },
  methods: {
    // tag 点击事件
    tagClick(parentIndex, eleIndex, isActive) {
      if (isActive || this.isDisable) {
        return;
      }
      this.list[parentIndex].resultArr.forEach((element) => {
        element.isActive = false;
      });

      const item = this.list[parentIndex].resultArr[eleIndex];
      item.isActive = !isActive;
      this.list[parentIndex].resultArr[eleIndex] = item;

      // 赋值数据
      this.list[parentIndex].inspectionResult = item.value; // 记录结论
      this.list[parentIndex].postionList.forEach(
        (item) => (item.isActive = false)
      );
      this.list[parentIndex].measuredDataArr = []; // 重置异常位置
      this.list[parentIndex].notes = ""; // 重置摘要信息
    },
    // tag 点击事件
    postionChange(parentIndex, eleIndex, isActive) {
      if (this.isDisable) {
        return;
      }
      const postionList = this.list[parentIndex].postionList;
      const item = postionList[eleIndex];
      item.isActive = !isActive;
      postionList[eleIndex] = item;

      this.list[parentIndex].postionList = postionList;
      this.list[parentIndex].measuredDataArr = postionList
        .filter((item) => item.isActive)
        .map((item) => item.dictValue);
    },

    // 数据结构重组
    coverlist() {
      const roomTypeLabel = this.roomTypeLabel;
      const roomType = pad_room_type.rows.filter(
        (item) => item.dictLabel == roomTypeLabel
      )[0].dictValue;

      const temp = pad_1_3_inspection_items.rows.map((item) => {
        return {
          //   ...item,
          dictLabel: item.dictLabel,
          dictValue: item.dictValue,
          notes: "", // 情况摘要
          inspectionResult: 0, // 异常
          itemCode: item.dictValue, // 检查项  如:门禁
          roomType, // 机房类型
          resultArr: [
            {
              value: 0,
              label: "正常",
              isActive: true,
            },
            {
              value: 1,
              label: "异常",
            },
          ],
          measuredData: "", // 逗号分隔字符串
          measuredDataArr: [], // 前端本地使用
          postionList: pad_1_3_inspection_position.rows.map((item) => {
            return {
              ...item,
            };
          }),
        };
      });

      this.list = temp;
    },
    // 回显数据
    setForm(componentData) {
      this.list = componentData;
    },
    // 获取数据
    getForm() {
      const temp = this.list.map((item) => {
        return {
          ...item,
          measuredData: item.measuredDataArr.join(","),
        };
      });
      return temp;
    },

    // 校验数据 所有表单
    async vaildForm() {
      const temp = this.list.map((item, index) => {
        return this.$refs[`forms_${index}`][0]
          .validate()
          .then(() => {
            return {
              result: true,
              index,
            };
          })
          .catch(() => {
            return {
              result: false,
              item,
            };
          });
      });

      return Promise.all(temp).then((res) => {
        const allVaildList = res.filter((item) => item.result);
        const formData = this.getForm();
        return {
          vaild: this.list.length == allVaildList.length,
          formData,
        };
      });
    },

    clickQuick(item, quickItem) {
      item.notes = `${item.notes}${quickItem.text}`;
    },
  },
};
</script>

<style lang="less" scoped>
.gather-dataCenter {
  .inspection-item {
    border: 1px solid;
    margin-bottom: 12px;
    background: #ffffff;
    border: 0.4px solid rgba(224, 224, 224, 1);
    border-radius: 12px;
    padding: 24px 24px 8px 24px;
    .text {
      font-size: 16px;
      color: #000000;
      line-height: 24px;
      font-weight: bold;
    }
    .row-item {
      border-bottom: 1px solid #eee;
      //   border: 1px solid;
      padding-bottom: 18px;
      margin-bottom: 12px;
      &:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
      }
      .tags {
        display: flex;
        align-items: center;
        .tag {
          background: #f2f3f5;
          width: 55px;
          height: 36px;
          border-radius: 10px;
          text-align: center;
          line-height: 36px;
          margin-right: 10px;
          font-size: 14px;
          color: #4a4a4a;
          text-align: center;
          font-weight: 400;
        }
        .active-tag {
          background: #3774f6;
          color: #fff;
        }
      }
    }
  }

  .note-item {
    textarea{
      width: 100%;
      min-height: 96px;
      background: #f7f7f7;
      border-radius: 1px;
      font-size: 14px;
      color: #4a4a4a;
      padding: 16px;
      font-weight: 400;
    }
    .qucik-content {
      display: flex;
      align-items: center;

      .quick-input {
        margin: 16px 18px 18px 0 ;
        font-size: 14px;
        color: #7c7c7c;
        font-weight: 400;
      }
      .qucik-text {
        display: inline-block;
        border: 1px solid rgba(242, 242, 242, 1);
        border-radius: 8px;
        padding: 0 10px;
        height: 32px;
        font-size: 12px;
        color: #4a4a4a;
        line-height: 20px;
        font-weight: 400;
        margin-right: 12px;
        line-height: 32px;
        text-align: center;
      }
    }
  }

  /deep/ .uni-forms-item__content {
    display: flex;
    align-items: center;
  }

  .note-item {
    /deep/ .uni-forms-item__content {
      display: block;
    }
  }
}
</style>
