<template>
  <!--<div class="security-check-total-wrapper">
    <el-table
      :data="checkTypes"
      style="width: 100%"
      row-key="rsbtId"
      :expand-row-keys="curSelectedRow"
      @expand-change="rowChange"
    >
      <el-table-column type="expand">
        <template
          slot-scope="scope1"
        >
          <el-table
            :data="scope1.row.checkItemList"
          >
            <el-table-column
              label="检查内容"
              width="840"
            >
              <template
                slot-scope="scope2"
              >
                <el-input
                  v-model="scope2.row.rsbInspectContent"
                  type="textarea"
                  placeholder="请输入检查内容"
                  autosize
                />
              </template>
            </el-table-column>
            <el-table-column
              label="检查情况"
              width="120"
            >
              <template slot-scope="scope2">
                <el-radio v-model="scope2.row.rsbInspectCase" :label="1">符合</el-radio>
                <el-radio v-model="scope2.row.rsbInspectCase" :label="0">未符合</el-radio>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              width="360"
            >
              <template
                slot-scope="scope2"
              >
                <el-input
                  v-model="scope2.row.rsbRemark"
                  type="textarea"
                  placeholder="请输入备注"
                  autosize
                />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template
                slot-scope="scope2"
              >
                <div v-if="scope2.$index !== (scope1.row.checkItemList.length - 1)">
                  <el-button type="warning" @click="saveToCheckItem(scope1.row, scope2.row)">保存</el-button>
                  <el-button type="danger" @click="deleteToCheckItem(scope2.row)">删除</el-button>
                </div>
                <div v-else>
                  <el-button type="success" @click="submitCheckItem(scope1.row, scope2.row, scope1.$index)">提交</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="安全检查类别"
        prop="rsbtType"
      />
    </el-table>
  </div>-->
  <div class="dec-total">
    <div
      class="security-data"
      @click.stop="isShowSecurityData = !isShowSecurityData"
    >
      <div
        class="security-data-wrapper"
        style="display: flex; align-items: center;cursor: pointer;"
      >
        <div class="triangle-wrapper">
          <div v-if="isShowSecurityData">
            <svg
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3183"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="26"
              height="26"
            >
              <path
                d="M913.536524 551.447587H116.910163c-23.637854 0-42.977915-19.340062-42.977916-42.977916s19.340062-42.977915 42.977916-42.977915h796.626361c23.637854 0 42.977915 19.340062 42.977916 42.977915s-19.340062 42.977915-42.977916 42.977916z"
                p-id="3184"
              ></path>
            </svg>
          </div>
          <div v-else>
            <svg
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="26"
              height="26"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <path
                d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"
                fill="#2c2c2c"
              ></path>
            </svg>
          </div>
        </div>
        <div class="hd-type-name" style="margin-left: 20px;">
          <span style="">安全类别: </span><span></span>
        </div>
      </div>
      <el-table :data="securityData" border v-show="isShowSecurityData">
        <el-table-column
          prop="category"
          label="类别"
          width="180"
        ></el-table-column>
        <!--<el-table-column prop="type" label="类型" width="140"></el-table-column>-->
        <el-table-column
          prop="inspectionContent"
          label="检查内容"
          width="340"
        ></el-table-column>
        <el-table-column
          prop="matter"
          label="发现问题"
          width="240"
        ></el-table-column>
        <el-table-column
          prop="basis"
          label="检查依据"
          width="380"
        ></el-table-column>
        <el-table-column
          prop="suggestion"
          label="整改建议"
          width="380"
        ></el-table-column>
        <el-table-column label="是否符合" width="140">
          <template slot-scope="scope">
            <el-radio
              v-model="scope.row.satisfaction"
              label="符合"
              @input="satisfy(scope.row)"
              >符合</el-radio
            >
            <el-radio
              v-model="scope.row.satisfaction"
              label="不符合"
              @input="unsatisfy(scope.row)"
              >不符合</el-radio
            >
            <el-radio
              v-model="scope.row.satisfaction"
              label="空项"
              @input="emptyItem(scope.row)"
              >空项</el-radio
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="site-manage" @click.stop="isShowSiteManage = !isShowSiteManage">
      <div
        class="triangle-wrapper"
        style="display: flex; align-items: center;cursor: pointer;"
      >
        <div v-if="isShowSiteManage">
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3183"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="26"
            height="26"
          >
            <path
              d="M913.536524 551.447587H116.910163c-23.637854 0-42.977915-19.340062-42.977916-42.977916s19.340062-42.977915 42.977916-42.977915h796.626361c23.637854 0 42.977915 19.340062 42.977916 42.977915s-19.340062 42.977915-42.977916 42.977916z"
              p-id="3184"
            ></path>
          </svg>
        </div>
        <div v-else>
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            width="26"
            height="26"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <path
              d="M426.666667 426.666667H85.546667A85.418667 85.418667 0 0 0 0 512c0 47.445333 38.314667 85.333333 85.546667 85.333333H426.666667v341.12c0 47.274667 38.186667 85.546667 85.333333 85.546667 47.445333 0 85.333333-38.314667 85.333333-85.546667V597.333333h341.12A85.418667 85.418667 0 0 0 1024 512c0-47.445333-38.314667-85.333333-85.546667-85.333333H597.333333V85.546667A85.418667 85.418667 0 0 0 512 0c-47.445333 0-85.333333 38.314667-85.333333 85.546667V426.666667z"
              fill="#2c2c2c"
            ></path>
          </svg>
        </div>
        <div class="hd-type-name" style="margin-left: 20px;">
          <span style="">现场管理: </span><span></span>
        </div>
      </div>
      <el-table :data="siteManageData" border v-show="isShowSiteManage">
        <el-table-column
          prop="category"
          label="类别"
          width="180"
        ></el-table-column>
        <!--<el-table-column prop="type" label="类型" width="140"></el-table-column>-->
        <el-table-column
          prop="inspectionContent"
          label="检查内容"
          width="340"
        ></el-table-column>
        <el-table-column
          prop="matter"
          label="发现问题"
          width="240"
        ></el-table-column>
        <el-table-column
          prop="basis"
          label="检查依据"
          width="380"
        ></el-table-column>
        <el-table-column
          prop="suggestion"
          label="整改建议"
          width="380"
        ></el-table-column>
        <el-table-column label="是否符合" width="140">
          <template slot-scope="scope">
            <el-radio
              v-model="scope.row.satisfaction"
              label="符合"
              @input="satisfy(scope.row)"
              >符合</el-radio
            >
            <el-radio
              v-model="scope.row.satisfaction"
              label="不符合"
              @input="unsatisfy(scope.row)"
              >不符合</el-radio
            >
            <el-radio
              v-model="scope.row.satisfaction"
              label="空项"
              @input="emptyItem(scope.row)"
              >空项</el-radio
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--<el-table :data="securityCheck" border>
      <el-table-column
        prop="category"
        label="类别"
        width="180"
      ></el-table-column>
      <el-table-column prop="type" label="类型" width="140"></el-table-column>
      <el-table-column
        prop="inspectionContent"
        label="检查内容"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="matter"
        label="发现问题"
        width="180"
      ></el-table-column>
      <el-table-column label="是否符合" width="140">
        <template slot-scope="scope">
          <el-radio
            v-model="scope.row.satisfaction"
            label="符合"
            @input="satisfy(scope.row)"
            >符合</el-radio
          >
          <el-radio
            v-model="scope.row.satisfaction"
            label="不符合"
            @input="unsatisfy(scope.row)"
            >不符合</el-radio
          >
        </template>
      </el-table-column>
    </el-table>-->
  </div>
</template>

<script>
// import { adRiskStandingBook, deleteRiskStandingBook, editRiskStandingBook, getRiskStandingBook, getRiskStandingBookType } from '../../api/industry'
import {
  findMattsByEnterpriseId,
  postUnSatify,
  deleteSatify
} from "@/api/secFound.js";
export default {
  data() {
    // 返回想要的数据
    return {
      // 当前所有安全检查项的数组
      checkTypes: [],
      // 当前选中的行
      curSelectedRow: [],
      // 当前展开的行
      curExpandedRow: [],
      // 当前企业的安全检查
      securityCheck: [],
      isShowSiteManage: false,
      isShowSecurityData: false,
      securityData: [],
      siteManageData: []
    };
  },
  mounted() {
    // 获取公司id
    this.companyId = this.$route.params.name.split("&")[0];
    // 获取公司名称
    this.companyName = this.$route.params.name.split("&")[1];
    // 初始化所有的安全检查项
    this.getAllSecCheckItems();
  },
  methods: {
    // 获取所有的安全检查项目
    async getAllSecCheckItems() {
      findMattsByEnterpriseId(this.companyId).then(res => {
        this.securityCheck = [...res];
        this.securityData = this.securityCheck.filter(item => {
          return item.type === "安全资料类";
        });
        this.siteManageData = this.securityCheck.filter(item => {
          return item.type === "现场检查类";
        });
      });
    },
    // 初始化所有的安全检查项
    async initAllCheckTypes() {
      // 获取风险类型
      await getRiskStandingBookType().then(
        async res => {
          // 检查类型
          this.checkTypes = [...res.content];
          // 初始化checkItemList
          for (let i = 0; i < this.checkTypes.length; i++) {
            this.checkTypes[i].checkItemList = [];
          }
          // getRiskStandingBook(this.companyId).then(res => {
          //   // 根据当前 rsbtId 匹配出来
          //   for (let i = 0; i < this.checkTypes.length; i++) {
          //     this.checkTypes[i].checkItemList = res.content.filter(item => {
          //       return Number(item.rsbtId) === Number(this.checkTypes[i].rsbtId)
          //     })
          //   }
          //   for (let i = 0; i < this.checkTypes.length; i++) {
          //     this.checkTypes[i].checkItemList.push({
          //       rsbInspectContent: '',
          //       rsbInspectCase: 0,
          //       rsbRemark: ''
          //     })
          //   }
          // })
          // this.curSelectedRow = [...this.curExpandedRow.map(item => { return item.rsbtId })]
        },
        () => {
          console.log("这里获取失败了");
        }
      );
      await getRiskStandingBook(this.companyId).then(res => {
        for (let i = 0; i < this.checkTypes.length; i++) {
          this.checkTypes[i].checkItemList = res.content.filter(item => {
            return Number(item.rsbtId) === Number(this.checkTypes[i].rsbtId);
          });
        }
        for (let i = 0; i < this.checkTypes.length; i++) {
          this.checkTypes[i].checkItemList.push({
            rsbInspectContent: "",
            rsbInspectCase: 0,
            rsbRemark: ""
          });
        }
      });
      this.curSelectedRow = [
        ...this.curExpandedRow.map(item => {
          return item.rsbtId;
        })
      ];
    },
    // 当前展开的行
    rowChange(row, expanded) {
      this.curExpandedRow = [...expanded];
    },
    // 保存
    saveToCheckItem(row1, row2) {
      const tempReplaceItem = {};
      // tempReplaceItem.companyId = row2.companyId
      tempReplaceItem.companyId = this.companyId;
      tempReplaceItem.rsbInspectContent = row2.rsbInspectContent;
      tempReplaceItem.rsbInspectCase = row2.rsbInspectCase;
      tempReplaceItem.rsbRemark = row2.rsbRemark;
      tempReplaceItem.rsbId = row2.rsbId;
      tempReplaceItem.rsbtType = row1.rsbtType;
      tempReplaceItem.rsbtId = row1.rsbtId;
      editRiskStandingBook(tempReplaceItem).then(
        res => {
          this.$message({
            message: "编辑成功",
            type: "success"
          });
          this.initAllCheckTypes();
        },
        () => {
          this.$message.error("编辑失败");
        }
      );
    },
    // 删除
    deleteToCheckItem(row) {
      console.log(row, "hehehehehhehehehehehehehehehheheheheheheheheheheheheh");
      this.$confirm("确定要删除此安全检查项", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteRiskStandingBook([row.rsbId]).then(
          res => {
            this.$message({
              message: "刪除成功",
              type: "success"
            });
            this.initAllCheckTypes();
          },
          () => {
            this.$message({
              type: "info",
              message: "已取消刪除"
            });
          }
        );
      });
    },
    // 提交安全检查项
    submitCheckItem(row1, row2, index) {
      const tempReplaceItem = {};
      tempReplaceItem.rsbtId = row1.rsbtId;
      tempReplaceItem.rsbtType = row1.rsbtType;
      tempReplaceItem.companyId = this.companyId;
      tempReplaceItem.rsbInspectCase = row2.rsbInspectCase;
      tempReplaceItem.rsbInspectContent = row2.rsbInspectContent;
      tempReplaceItem.rsbRemark = row2.rsbRemark;

      adRiskStandingBook(tempReplaceItem).then(res => {
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.initAllCheckTypes();

        // 这里可以重写个方法只增加自己列
        // getRiskStandingBook(this.companyId).then(res => {
        //   console.log(res, 'helloworldhelloworld')
        //   this.checkTypes[index].checkItemList = res.content.filter(item => {
        //     return Number(item.rsbtId) === Number(row1.rsbtId)
        //   })
        //   console.log('这里被调用了吗, fhhfhfhdhfhfdhfhfdhsfaehwuruiwrhie')

        // })
      });
      console.log(
        this.curSelectedRow,
        "fhsdkfhksahfuehwuifaheiwuhfuiehiuwfhhsdfhjdksahfksa"
      );
    },
    // 写一个更新数组检查项的
    updateCheckItem(row) {
      console.log(row);
    },
    satisfy(row) {
      deleteSatify(this.companyId, row.matterId).then(
        res => {
          this.$message({
            type: "success",
            message: "修改成功"
          });
        },
        () => {
          this.$message.error("修改失败");
        }
      );
    },
    unsatisfy(row) {
      postUnSatify(this.companyId, row.matterId).then(
        res => {
          this.$message({
            type: "success",
            message: "修改成功"
          });
        },
        () => {
          this.$message.error("修改失败");
        }
      );
    },
    emptyItem(row) {
      console.log(row, "hehhe");
    }
  }
};
</script>

<style lang="scss" scoped>
.dec-total {
  padding-left: 30px;
  padding-top: 30px;
}
</style>
