<template>
  <div class="edit-check-wrapper">
    <!-- <div class="edit-check-tools">
      <el-button type="primary" @click="addSecurityType">增加安全检查类别</el-button>
      <el-button :disabled="!(checktypesselected.length === 1)" type="warning" @click="editSecurityType">编辑安全检查类别</el-button>
      <el-button :disabled="checktypesselected.length === 0" type="danger">删除</el-button>
    </div> -->
    <el-table
      ref="editcheckTable"
      v-loading="isloadingSecurityCheck"
      :data="checktypes"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @expand-change="checkExpand"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        type="expand"
      >
        <template
          slot-scope="props"
        >
          <!-- <div>{{ props.row }}</div> -->
          <el-row :gutter="12">
            <el-col :span="10">
              <div>检查内容</div>
            </el-col>
            <el-col :span="4">
              <div>是否检查</div>
            </el-col>
            <el-col :span="8">
              <div>备注</div>
            </el-col>
            <el-col :span="2">
              <div>操作</div>
            </el-col>
          </el-row>
          <el-row v-for="(item, index) in props.row.checkitemlist" :key="item.rsbId" :gutter="12">
            <el-col :span="10">
              <textarea v-model="item.rsbInspectContent" />
            </el-col>
            <el-col :span="4">
              <input v-model="item.rsbInspectCase" type="checkbox">
            </el-col>
            <el-col :span="8">
              <textarea v-model="item.rsbRemark" />
            </el-col>
            <el-col :span="2">
              <el-button type="warning" @click="saversbEditItem(props.row, index)">保存修改</el-button>
              <el-button type="danger" @click="deletersbItem(props.row, index)">删除条目</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="10">
              <!-- <textarea :value="props.row.temprsbInspectContent" @input="tricInput($event,)"></textarea> -->
              <textarea v-model="props.row.temprsbInspectContent" />
            </el-col>
            <el-col :span="4">
              <input
                v-model="props.row.temprsbInspectCase"
                type="checkbox"
              >
            </el-col>
            <el-col :span="8">
              <textarea v-model="props.row.temprsbRemark" />
            </el-col>
            <el-col :span="2">
              <el-button type="success" @click="saveUploadToBook(props.row)">添加</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="安全检查类别"
        prop="rsbtType"
      />
    </el-table>
    <el-dialog
      title="添加安全检查类别"
      :visible.sync="addSecurityCheckDialog"
      :close-on-click-modal="false"
    >
      <el-form v-model="formTypeInfo">
        <el-form-item
          label="安全检查类别"
        >
          <el-input v-model="formTypeInfo.rsbtType" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSecurityCheckDialog = false">取消</el-button>
        <el-button type="primary" @click="submitSecurityCheckDialog">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑安全检查类别"
      :visible.sync="editSecurityCheckDialog"
      :close-on-click-modal="false"
    >
      <el-form v-model="formTypeInfo">
        <el-form-item
          label="安全检查类别"
        >
          <el-input v-model="formTypeInfo.rsbtType" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editSecurityCheckDialog = false">取消</el-button>
        <el-button @click="submitEditSecurityCheckDialog">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 企业台账
import { getRiskStandingBook, adRiskStandingBook, editRiskStandingBook, deleteRiskStandingBook, getRiskStandingBookType, addRiskStandingBookType, editRiskStandingBookType, deleteRiskStandingBookType } from '../../api/industry.js'
export default {
  data() {
    return {
      companyId: 0,
      companyName: '',
      // 当前安全检查类别数组
      checktypes: [],
      // 当前选中的安全检查类别数组
      checktypesselected: [],
      // 当前增加security-check dialog
      addSecurityCheckDialog: false,
      // 当前编辑security-check dialog
      editSecurityCheckDialog: false,
      // 表单信息
      formTypeInfo: {
        rsbtId: 0,
        rsbtType: ''
      },
      // 是否安全检查加载
      isloadingSecurityCheck: false
    }
  },
  mounted() {
    this.companyId = this.$route.params.name.split('&')[0]
    this.companyName = this.$route.params.name.split('&')[1]
    // getRiskStandingBook(this.companyId).then(res => {
    //   console.log(res, 'the world break!')
    // })
    this.initAllType()
  },
  methods: {
    // 初始化所有安全检查类别
    async initAllType() {
      this.isloadingSecurityCheck = true
      // 获取所有的安全检查类别
      await getRiskStandingBookType().then(res => {
        this.checktypes = [...res.content]
        for (let i = 0; i < this.checktypes.length; i++) {
          this.checktypes[i].checkitemlist = []
          this.checktypes[i].temprsbInspectContent = ''
          this.checktypes[i].temprsbInspectCase = false
          this.checktypes[i].temprsbRemark = ''
        }
      }, () => {
        console.log('这里获取失败了')
      })
      await getRiskStandingBook(this.companyId).then(res => {
        // 先把当前 checktypes 初始化了
        res.content.forEach(item => {
          for (let i = 0; i < this.checktypes.length; i++) {
            if (Number(this.checktypes[i].rsbtId) === Number(item.rsbtId)) {
              const tempreplaceitem = { ...item }
              tempreplaceitem.rsbInspectCase = item.rsbInspectCase === false ? 0 : 1
              this.checktypes[i].checkitemlist.push(tempreplaceitem)
            }
          }
        })
      })
      this.isloadingSecurityCheck = false
    },
    // 初始化所有的台账
    async initAllGroupType() {
      await getRiskStandingBook(this.companyId).then(res => {
        // 先把当前checktypes初始化了
        res.content.forEach(item => {
          for (let i = 0; i < this.checktypes.length; i++) {
            if (Number(this.checktypes[i].rsbtId) === Number(item.rsbtId)) {
              const tempreplaceitem = { ...item }
              tempreplaceitem.rsbInspectCase = item.rsbInspectCase === false ? 0 : 1
              this.checktypes[i].checkitemlist.push(tempreplaceitem)
            }
          }
        })
      })
    },
    // 选中的类别
    handleSelectionChange(val) {
      this.checktypesselected = val
    },
    // 展开事件
    checkExpand(row, expanded) {
      // row -> 当前展开或折叠的行
      // expanded -> 所有的展开的
      // console.log(row, expanded, 'helloworld')
      // // rsbtId
      // let isFindcheck = false
      // expanded.forEach(item => {
      //   if (item.rsbtId === row.rsbtId) {
      //     isFindcheck = true
      //   }
      // })
      // if (isFindcheck === true && row && row.checkitemlist && row.checkitemlist.length === 0) {
      //   // 封装一下，一会再说
      // }
    },
    // 提交风险检查类别
    submitSecurityCheckDialog() {
      const replaceSecurityCheckDetail = { ... this.formTypeInfo }
      delete replaceSecurityCheckDetail.rsbtId
      addRiskStandingBookType(replaceSecurityCheckDetail).then(res => {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        this.initAllType()
      }, () => {
        this.$message.error('提交失败')
      })
    },
    // 编辑风险检查类别
    submitEditSecurityCheckDialog() {
      editRiskStandingBookType(this.formTypeInfo).then(res => {
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
        this.editSecurityCheckDialog = false
        this.initAllType()
      }, () => {
        this.$message.error('编辑失败')
      })
    },
    // 点击增加安全检查类别对话框
    addSecurityType() {
      this.addSecurityCheckDialog = true
    },
    // 编辑安全检查类别对话框
    editSecurityType() {
      this.formTypeInfo = { ...this.checktypesselected[0] }
      this.editSecurityCheckDialog = true
    },
    // 添加台账项
    saveUploadToBook(item) {
      const tempBody = {}
      tempBody.rsbtId = item.rsbtId
      tempBody.rsbInspectContent = item.temprsbInspectContent
      tempBody.rsbInspectCase = item.temprsbInspectCase === false ? 0 : 1
      tempBody.rsbRemark = item.temprsbRemark
      tempBody.companyId = this.companyId
      adRiskStandingBook(tempBody).then(res => {
        console.log(res, 'helloworld2')
        // this.initAllType()
        // this.initAllGroupType()
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.initAllType()
      }, () => {
        this.$message.error('添加失败')
      })
    },
    // 保存修改
    saversbEditItem(row, index) {
      console.log(row, index, 'save edit item')
      // 创建临时变量保存
      const tempReplaceItem = {}
      tempReplaceItem.rsbtId = row.rsbtId
      tempReplaceItem.rsbtType = row.rsbtType
      tempReplaceItem.rsbId = row.checkitemlist[index].rsbId
      tempReplaceItem.companyId = row.checkitemlist[index].companyId
      tempReplaceItem.rsbInspectCase = row.checkitemlist[index].rsbInspectCase
      tempReplaceItem.rsbInspectContent = row.checkitemlist[index].rsbInspectContent
      tempReplaceItem.rsbRemark = row.checkitemlist[index].rsbRemark

      editRiskStandingBook(tempReplaceItem).then(res => {
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
      }, () => {
        this.$message.error('编辑失败')
      })
    },
    // 删除修改
    deletersbItem(row, index) {
      deleteRiskStandingBook([row.checkitemlist[index].rsbId]).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.initAllType()
      }, () => {
        this.$message.error('删除失败')
      })
    }
  }
}
</script>

<style>

</style>
