<template>
  <!-- 记录事项 -->
  <div class="detail-dialog">
    <!-- <el-dialog :title='`${major}${tabName}记录事项`' width='80%' :visible.sync='visible' style='height:900px;overflow-y:scroll;'> -->
    <div class="bottom-table" style="height: 100%;">
      <el-table
        :data="tableData"
        :height="800"
        :border="true"
        style="width: 100%; margin-bottom: 12px;"
        :span-method="objectSpanMethod"
        v-if="tableData.length > 0"
      >
        <el-table-column label="位置" prop width="230" show-overflow-tooltip resizable>
          <template slot-scope="{ row }">{{ row.smswz || '--' }}</template>
        </el-table-column>
        <el-table-column label="设备" width="280" resizable>
          <template slot-scope="{ row }">{{ row.smsasset || '--' }}</template>
        </el-table-column>
        <el-table-column label="记录事项" show-overflow-tooltip resizable>
          <template slot="header" slot-scope="scope">
            <div style="display:flex;justify-content:space-between">
              <div>记录事项</div>
              <div v-if="showMore">
                <p>
                  <span
                    class="morestyle"
                    @click="changeOpensta()"
                    v-show="showNewlist"
                  >
                    <i>展开全部</i>
                    <i class="el-icon-caret-bottom"></i>
                  </span>
                </p>
                <p>
                  <span
                    class="morestyle"
                    @click="changeOpensta()"
                     v-show="!showNewlist"
                  >
                    <i>收起</i>
                    <i class="el-icon-caret-top"></i>
                  </span>
                </p>
              </div>
            </div>
          </template>
          <template slot-scope="{ row , $index }">
            <p class="p-style" v-for="(item, index) in row.children" :key="item.id">
              <span v-if="item.lable==1">{{ index + 1 }}) {{ item.matter }}</span>
            </p>
            <!-- showNewlist 表示是否有新增记录事项如果有，才展示跟多收起功能 -->
            <!-- <p>
              <span
                class="morestyle"
                @click="changeOpensta($index)"
                v-if="row.showNewlist && row.close"
              >
                <i>更多</i>
                <i v-if="row.close" class="el-icon-caret-bottom"></i>
              </span>
            </p>-->
            <section v-if="!showNewlist">
              <p class="p-style" style="color:#025baa" v-for="(item, index) in row.children" :key="item.id">
                <span v-if="item.lable==2">{{ index + 1 }}) {{ item.matter }}</span>
              </p>
            </section>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip resizable>
          <template slot="header" slot-scope="scope">
            <p>维护结果</p>
            <p>(本年度内此工作出现次数/此工作涉及到的设备数量)</p>
          </template>
          <template slot-scope="{ row }">
            <p
              class="p-style"
              v-for="(item, index) in row.children"
              @click="goTabs(row,item)"
              :key="item.id"
            >
              <span class="lastp">
                <span
                  v-if="item.lable==1"
                >{{ item.workNum?item.workNum:'-' }} / {{ item.equipmentNum?item.equipmentNum:'-'}}</span>
                <span
                  v-if="item.lable==2 && !showNewlist"
                >{{ item.workNum?item.workNum:'-' }} / {{ item.equipmentNum?item.equipmentNum:'-'}}</span>
              </span>
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { queryRecord } from "@/api/equipmentList.js";

export default {
  props: {
    paramsdata: {
      type: Array,
      default: () => {
        return [];
      }
    },
    smsxt: {
      type: [Number, String],
      default: "1002"
    }
  },
  data() {
    return {
      visible: false,
      major: "",
      tabName: "",
      tableData: [],
      showNewlist:true
    };
  },
  computed: {
    newparamsdata() {
      return this.paramsdata.slice(1, this.paramsdata.length - 1).map(item => {
        return {
          system_code: this.smsxt,
          apply: item.param.apply,
          plazaId: this.$store.state.plazaId,
          wznw: item.param.wznw,
          difference: item.param.difference,
          tab_code: item.param.tab_code,
          onlyMainAsset: this.smsxt != "1008" ? true : false, //类型：Boolean  必有字段  备注：土建装饰为false，其他为true
        };
      });
    },
    /**
     * @description 计算是否展示展开跟多按钮,当所有设备中存在一个新的扩充项，tableData.children中某一项的labal为2
     * 则代表有新增
     */
    showMore(){
      let falg = false;
      for (let index = 0; index < this.tableData.length; index++) {
        const element = this.tableData[index];
        if(element.children.some(k => {
          if (k.lable == 2) {
            return true;
          }
        })){
          falg = true;
          break;
        }
      };
      return falg
    },
    tableHeight() {
      if (window.screen.height <= 768) {
        return 560;
      } else {
        return 800;
      }
    },
    height() {
      if (window.screen.height <= 768) {
        return 500;
      } else {
        return 600;
      }
    }
  },
  methods: {
    changeOpensta() {
      this.showNewlist = !this.showNewlist;
    },
    goTabs(val, val2) {
      this.$emit("change-table", {
        tab_code: val.tab_code,
        from_mainpage: true,
        smsasset: val.smsasset,
        marks: val2.matter,
        lable:val2.lable,
        sblist:val2.equipmentCode || []
      });
    },
    async addGetRecordList() {
      const result1 = await this.getRecordList(this.newparamsdata[0]);
      if (this.newparamsdata.length > 1) {
        const result2 = await this.getRecordList(this.newparamsdata[1]);
        this.tableData = [...result1, ...result2];
      } else {
        this.tableData = [...result1];
      }
      // debugger
      this.tableData.forEach(item => {
        if (item.children && item.children.length > 0) {
          //判断是否有新增得数据，lable为2 显示更多按钮，全是1不显示
          if (
            item.children.some(k => {
              if (k.lable == 2) {
                return true;
              }
            })
          ) {
            item.showNewlist = true;
            this.$set(item, "close", true);
          }
          item.children.sort((a, b) => {
            return a.lable - b.lable;
          });
        }
      });
    },
    open({ system_code, wznw, apply, difference }) {
      this.visible = true;
      this.getRecordList({ system_code, wznw, apply, difference });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.col0Count > 0) {
          return {
            rowspan: row.col0Count,
            colspan: 1
          };
        }
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    },
    /**
     * @param { string } system_code 八大系统code
     * @param { string } wznw   区分各系统内外(如: 慧云机房内,慧云机房外)
     * @param { string } apply  事项类型, 含: 维修维保,专维及其
     */
    getRecordList(params) {
      const getParams = { ...params };
      // 处理给排水
      if (getParams.difference) {
        delete getParams.wznw; //不上传内外
      }
      if (getParams.wznw == "0" || getParams.wznw == "-1") {
        delete getParams.wznw; //不上传内外
      }
      return new Promise((resolve, reject) => {
        queryRecord({ getParams })
          .then(res => {
            const tableData = [];
            res.data.forEach(i => {
              i.children.forEach((j, index) => {
                tableData.push({
                  tab_code: params.tab_code,
                  tableType: getParams.wznw,
                  smswz: i.smswz,
                  smsasset: j.smsasset,
                  col0Count: index === 0 ? i.children.length : 0,
                  children: j.children
                });
              });
            });
            resolve(tableData);
          })
          .catch(err => {
            console.log(err);
            reject(err);
          });
      });
    }
  },
  mounted() {
    this.addGetRecordList();
  }
};
</script>
<style lang="less" scoped>
.morestyle {
  color: #025baa;
  margin-left: 10px;
  cursor: pointer;
  i {
    color: #025baa;
  }
}
.lastp {
  cursor: pointer;
}
</style>
<style lang="less">
.detail-dialog {
  .el-dialog__wrapper {
    // overflow: hidden !important;
  }
  .el-dialog__header {
    // background: #fff !important;
    // color: #909399 !important;
  }
  .el-dialog__title {
    color: #fff !important;
  }
  .el-dialog__close {
    // color: #909399 !important ;
  }
  /deep/.el-dialog {
    margin-top: 7vh !important;
    padding-bottom: 5px;
  }
}
</style>
