<template>
  <view class="gather-dataCenter">
    <uni-forms
      label-position="top"
      :modelValue="form"
      :ref="`forms`"
      :rules="rules"
      class="inspection-item"
    >
      <uni-forms
        v-for="(item, parentIndex) in list"
        :key="item.dictLabel"
        :modelValue="item"
        label-width="82px"
        :ref="`forms_${parentIndex}`"
        :rules="rules"
      >
        <uni-forms-item class="row-item" label="巡检项" name="name">
          <view class="text">{{ item.dictLabel }}</view>
        </uni-forms-item>
        <uni-forms-item required class="row-item" label="巡检结论" name="name">
          <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"
              :key="eleIndex"
              @click="postionChange(parentIndex, eleIndex, ele.isActive)"
              :class="
                item.measuredDataArr.includes(ele.dictValue) ? 'active-tag' : ''
              "
              >{{ ele.dictLabel }}
            </view>
          </view>
        </uni-forms-item>
      </uni-forms>

      <!-- 结论 -->
      <uni-forms-item
        required
        class="row-item textarea-form"
        label="结论"
        name="conclusion"
      >
        <textarea
          class="textarea"
          v-model="form.conclusion"
          :disabled="isDisable"
          placeholder-style="color:#C7C7C7"
          placeholder="请输入"
        />
        <view>
          <text v-if="!isDisable" class="quick-input"> 快捷输入 </text>
          <text v-if="!isDisable">
            <text
              class="qucik-text"
              v-for="item in quickTextList"
              :key="item.text"
              @click="clickQuick(item)"
              >{{ item.text }}</text
            >
          </text>
        </view>
      </uni-forms-item>
    </uni-forms>
  </view>
</template>
<script>
import {
  pad_2_1_inspection_items,
  pad_2_1_floor,
  pad_room_type,
} from "@/utils/dict.js";

/**
 * 汇集机房
 */
export default {
  props: {
    isDisable: {
      type: Boolean,
    },
  },
  data() {
    return {
      list: [],
      form: {
        conclusion: ''
      },
      rules: {
        // 对notes字段进行必填验证
        notes: {
          rules: [
            {
              required: true,
              errorMessage: "请输入情况摘要",
            },
          ],
        },
        conclusion: {
          rules: [
            {
              required: true,
              errorMessage: "请选择",
            },
          ],
        },
        measuredDataArr: {
          rules: [
            {
              required: true,
              errorMessage: "请选择",
            },
          ],
        },
      },
      quickTextList: [
        {
          text: "全部正常",
        },

        {
          text: "门禁异常：",
        },
        {
          text: "卫生异常：",
        },
        {
          text: "设备告警：",
        },
        {
          text: "有",
        },
        {
          text: "无",
        },
      ],
      // roomTypeLabel: "汇聚机房巡检", // 用于获取类型值
    };
  },
  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_2_1_inspection_items.rows.map((item) => {
        return {
          //   ...item,
          dictLabel: item.dictLabel,
          dictValue: item.dictValue,
          notes: "", // 情况摘要
          // roomType,
          inspectionResult: 0, // 异常结论
          itemCode: item.dictValue, // 检查项  如:门禁
          resultArr: [
            {
              value: 0,
              label: "正常",
              isActive: true,
            },
            {
              value: 1,
              label: "异常",
              isActive: false,
            },
          ],
          measuredData: "", // 逗号分隔字符串
          measuredDataArr: [], // 前端本地使用
          postionList: pad_2_1_floor.rows.map((item) => {
            return {
              ...item,
              isActive: false,
            };
          }),
        };
      });

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

    // 校验数据 所有表单
    async vaildForm() {
      return new Promise(async (resolve, reject) => {
        let result = "";
        this.$refs.forms
          .validate()
          .then((res) => {
            result = true;
          })
          .catch((error) => {
            result = false;
          });

        const temp = this.list.map((item, index) => {
          return this.$refs[`forms_${index}`][0]
            .validate()
            .then(() => {
              return {
                result: true,
                index,
              };
            })
            .catch(() => {
              return {
                result: false,
                item,
              };
            });
        });

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

        return;
      });
    },
    clickQuick(item) {
      this.form.conclusion= `${this.form.conclusion}${item.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;
    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;
      }
    }
  }

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

  .textarea-form {
    /deep/ .uni-forms-item__content {
      display: block;
    }
    border-bottom: none;
    margin-bottom: 0;

    .textarea {
      width: 100%;
      min-height: 96px;
      background: #f7f7f7;
      border-radius: 12px;
      font-size: 14px;
      color: #4a4a4a;
      padding: 16px;
      font-weight: 400;
      margin-bottom: 14px;
    }
    .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;
    }
  }
}
</style>
