<template>
  <div class="security-check-total-wrapper">
    <el-table
      :data="cerlTypes"
      style="width: 100%"
      row-key="cerlId"
      :expand-row-keys="curSelectedRow"
      @expand-change="rowChange"
    >
      <el-table-column type="expand">
        <template
          slot-scope="scope1"
        >
          <el-table
            :data="scope1.row.cerlItems"
          >
            <el-table-column
              label="检查内容"
              width="840"
            >
              <template
                slot-scope="scope2"
              >
                <el-input
                  v-model="scope2.row.cerlContent"
                  type="textarea"
                  placeholder="请输入检查内容"
                  autosize
                />
              </template>
            </el-table-column>
            <el-table-column
              label="检查情况"
              width="120"
            >
              <template slot-scope="scope2">
                <el-radio v-model="scope2.row.cerlQualified" :label="1">符合</el-radio>
                <el-radio v-model="scope2.row.cerlQualified" :label="0">未符合</el-radio>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              width="360"
            >
              <template
                slot-scope="scope2"
              >
                <el-input
                  v-model="scope2.row.cerlRemark"
                  type="textarea"
                  placeholder="请输入备注"
                  autosize
                />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template
                slot-scope="scope2"
              >
                <div v-if="scope2.$index !== (scope1.row.cerlItems.length - 1)">
                  <el-button type="warning" @click="saveToCerlItem(scope2.row)">保存</el-button>
                  <el-button type="danger" @click="deleteToCerlItem(scope2.row)">删除</el-button>
                </div>
                <div v-else>
                  <el-button type="success" @click="submitCerlItem(scope2.row)">提交</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="安全检查类别"
        prop="cerlType"
      />
    </el-table>
  </div>
</template>

<script>
import { adRiskStandingBook, deleteRiskStandingBook, editRiskStandingBook, getRiskStandingBook, getRiskStandingBookType } from '../../api/industry'
import { getResponseList, postResponseList, putResponseList, deleteResponseList } from '../../api/industry'
export default {
  data() {
    // 返回想要的数据
    return {
      // 当前所有安全检查项的数组
      checkTypes: [],
      // 当前选中的行
      curSelectedRow: [],
      // 当前展开的行
      curExpandedRow: [],
      // 当前所有的安全主体责任清单类型
      cerlTypes: []
    }
  },
  mounted() {
    // 获取公司id
    this.companyId = this.$route.params.name.split('&')[0]
    // 获取公司名称
    this.companyName = this.$route.params.name.split('&')[1]
    /**
     * cerlContent       清单内容
     * cerlId  integer   清单id
     * cerlQualified     是否符合
     * cerlType          类型
     * cerlRemark        备注
     * companyId         企业id
    */
    // 初始化所有的安全检查项
    // this.initAllCheckTypes()
    // 初始化所有的安全主体责任清单
    this.initAllCerl()
  },
  methods: {
    // 初始化所有的安全检查项
    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 })]
    },
    // 初始化所有的安全主体清单项
    async initAllCerl() {
      this.cerlTypes = []
      await getResponseList(this.companyId).then(res => {
        for (let i = 0; i < res.content.length; i++) {
          const tempItem = this.cerlTypes.filter(item => item.cerlType === res.content[i].cerlType)
          if (tempItem.length === 0) {
            this.cerlTypes.push({
              cerlType: res.content[i].cerlType,
              cerlId: res.content[i].cerlId,
              cerlItems: [res.content[i]]
            })
          } else {
            tempItem[0].cerlItems.push(res.content[i])
          }
        }
      })
      this.cerlTypes.forEach(item => {
        item.cerlItems.push({
          cerlContent: '',
          cerlQualified: 0,
          cerlRemark: '',
          cerlType: item.cerlType,
          companyId: this.companyId
        })
      })
      this.curSelectedRow = [...this.curExpandedRow.map(item => { return item.cerlId })]
    },
    // 当前展开的行
    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('编辑失败')
      })
    },
    // 保存安全主体责任清单项
    saveToCerlItem(row2) {
      console.log(row2, '保存安全主体责任清单项')
      const tempReplaceItem = {}
      tempReplaceItem.companyId = this.companyId
      tempReplaceItem.cerlContent = row2.cerlContent
      tempReplaceItem.cerlId = row2.cerlId
      tempReplaceItem.cerlQualified = row2.cerlQualified
      tempReplaceItem.cerlType = row2.cerlType
      tempReplaceItem.cerlRemark = row2.cerlRemark
      putResponseList(tempReplaceItem).then(res => {
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
        this.initAllCerl()
      }, () => {
        this.$message.error('编辑失败')
      })
    },
    // 删除
    deleteToCheckItem(row) {
      this.$confirm('确定要删除此安全检查项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(
        () => {
          deleteRiskStandingBook([row.rsbId]).then(res => {
            this.$message({
              message: '刪除成功',
              type: 'success'
            })
            this.initAllCheckTypes()
          }, () => {
            this.$message({
              type: 'info',
              message: '已取消刪除'
            })
          })
        }
      )
    },
    // 删除安全责任主体清单项
    deleteToCerlItem(row) {
      this.$confirm('确定要删除此主体责任清单项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(
        () => {
          deleteResponseList(row.cerlId).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.initAllCerl()
          }, () => {
            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')

        // })
      })
    },
    // 提交安全责任主体清单项
    submitCerlItem(row2) {
      console.log(row2, '提交安全责任主体清单项')
      const tempReplaceItem = {}
      tempReplaceItem.cerlContent = row2.cerlContent
      tempReplaceItem.cerlQualified = row2.cerlQualified
      tempReplaceItem.cerlType = row2.cerlType
      tempReplaceItem.cerlRemark = row2.cerlRemark
      tempReplaceItem.companyId = this.companyId
      postResponseList(tempReplaceItem).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.initAllCerl()
      }, () => {
        this.$message({
          message: '添加失败',
          type: 'info'
        })
      })
    },
    // 写一个更新数组检查项的
    updateCheckItem(row) {
      console.log(row)
    }
  }
}
</script>

<style lang="scss">

</style>
