<template>
  <div class="edit-check-wrapper">
    <div class="select-item-type-wrapper">
      <el-select v-model="selectchecktype" placeholder="请选择安全检查类别" @change="selectCheckTypeChange">
        <el-option
          v-for="item in checktypes"
          :key="item.rsbtId"
          :label="item.rsbtType"
          :value="item.rsbtId"
        />
      </el-select>
    </div>
    <div class="select-item-all-wrapper">
      <el-table
        :data="checkItemList"
        style="width: 100%"
      >
        <el-table-column
          label="检查内容"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.rsbInspectContent"
              type="textarea"
              placeholder="请输入检查内容"
              autosize
            />
          </template>>
        </el-table-column>
        <el-table-column
          label="检查情况"
          width="90"
        >
          <template slot-scope="scope">
            <!-- <input v-model="scope.row.rsbInspectCase" type="checkbox"> -->
            <el-radio v-model="scope.row.rsbInspectCase" :label="1">是</el-radio>
            <el-radio v-model="scope.row.rsbInspectCase" :label="0">否</el-radio>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.rsbRemark"
              type="textarea"
              placeholder="请输入备注"
              autosize
            />
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="primary" @click="saveToCheckItem(scope.row)">保存</el-button>
            <el-button type="danger" @click="saveToCheckDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="upload-check-item-wrapper">
      <el-table
        :data="curInputCheckInput"
        style="100%"
      >
        <el-table-column
          label="检查内容"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.rsbInspectContent"
              type="textarea"
              placeholder="请输入检查内容"
              autosize
            />
          </template>
        </el-table-column>
        <el-table-column
          label="检查情况"
          width="90"
        >
          <template slot-scope="scope">
            <el-radio v-model="scope.row.rsbInspectCase" :label="1">是</el-radio>
            <el-radio v-model="scope.row.rsbInspectCase" :label="0">否</el-radio>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
        >
          <template
            slot-scope="scope"
          >
            <el-input
              v-model="scope.row.rsbRemark"
              type="textarea"
              placeholder="请输入备注"
              autosize=""
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template
            slot-scope="scope"
          >
            <el-button type="success" @click="submitItem(scope.row)">提交检查项</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-row :gutter="12">
        <el-col :span="10">
          <div>检查内容</div>
        </el-col>
        <el-col :span="2">
          <div>检查情况</div>
        </el-col>
        <el-col :span="8">
          <div>备注</div>
        </el-col>
        <el-col :span="4">
          <div>操作</div>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="10">
          <el-input
            v-model="currsbInsepctContent"
            type="textarea"
            autosize
            placeholder="请输入检查内容"
          />
        </el-col>
        <el-col :span="2">
          <input v-model="currsbInspectCase" type="checkbox">
        </el-col>
        <el-col :span="8">
          <el-input
            v-model="currsbRemark"
            type="textarea"
            autosize
            placeholder="请输入备注"
          />
        </el-col>
        <el-col :span="4">
          <el-button type="success" round>提交检查项</el-button>
        </el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script>
import { getRiskStandingBook, adRiskStandingBook, getRiskStandingBookType, editRiskStandingBook, deleteRiskStandingBook } from '../../api/industry'
export default {
  data() {
    // 返回想要的数据
    return {
      // 当前所有安全检查项的类别
      checktypes: [],
      // 当前所选的安全检查项
      checkItemList: [],
      // 当前选择的类别
      selectchecktype: '',
      // 是否安全检查加载
      isloadingSecurityCheck: false,
      // 当前输入的安全检查项
      curInputCheckInput: [
        {
          // 当前检查内容
          rsbInsepctContent: '',
          // 当前检查情况
          rsbInspectCase: 0,
          // 当前备注
          rsbRemark: ''
        }
      ]
    }
  },
  mounted() {
    // 获取公司id
    this.companyId = this.$route.params.name.split('&')[0]
    // 获取公司名称
    this.companyName = this.$route.params.name.split('&')[1]
    // 获取公司名称
    // 先获取所有的安全检查类别
    this.initAllType()
  },
  methods: {
    // 初始化所有安全检查类别
    async initAllType() {
      // this.isloadingSecurityCheck = true
      // 获取所有的安全检查类别
      await getRiskStandingBookType().then(res => {
        this.checktypes = [...res.content]
        console.log('this.checktypes', this.checktypes)
      }, () => {
        console.log('这里获取失败了')
      })
    },
    // 初始化所有的台账
    async initAllGroupType(rsbtId) {
      this.isloadingSecurityCheck = true
      let replaceRsbtItem = []
      // 当前 rsbtId
      await getRiskStandingBook(this.companyId).then(res => {
        // 根据当前rsbtId 匹配出来
        replaceRsbtItem = res.content.filter(item => {
          return Number(item.rsbtId) === Number(rsbtId)
        })
        // console.log(replaceRsbtItem, 'this is hello world')
        // 将replaceRsbItem 进一步做转换，0-1 -> 转换为 false-true
      })
      this.isloadingSecurityCheck = false
      // return replaceRsbtItem
      // console.log(replaceRsbtItem, 'replaceRsbtItem')
      this.checkItemList = replaceRsbtItem
    },
    // 选择类别变化
    selectCheckTypeChange() {
      // console.log('select check type change')
      // 初始化所有的安全检查类别
      this.initAllGroupType(this.selectchecktype)
    },
    // 保存当前函数检查项函数
    async saveToCheckItem(row) {
      console.log(row, 'hello world')
      this.isloadingSecurityCheck = true
      // 创建临时变量保存
      editRiskStandingBook(row).then(res => {
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
        this.initAllGroupType(this.selectchecktype)
      }, () => {
        this.$message.error('编辑失败')
      })
      this.isloadingSecurityCheck = false
    },
    // 删除当前安全检查项函数
    async saveToCheckDelete(row) {
      console.log(row, 'hello world')
      this.$confirm('确定要删除此安全检查项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.isloadingSecurityCheck = true
        await deleteRiskStandingBook([row.rsbId]).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.initAllGroupType(this.selectchecktype)
        }, () => {
          this.$message.error('删除失败')
        })
        this.isloadingSecurityCheck = false
      }, () => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 提交检查项
    submitItem(row) {
      console.log(row, 'helloworld helloworld')
      if (this.selectchecktype) {
        const tempReplaceItem = {}
        tempReplaceItem.rsbtId = this.selectchecktype
        tempReplaceItem.rsbtType = this.checktypes.filter(item => Number(item.rsbtId) === Number(this.selectchecktype))
        tempReplaceItem.companyId = this.companyId
        tempReplaceItem.rsbInspectCase = this.curInputCheckInput[0].rsbInspectCase
        tempReplaceItem.rsbInspectContent = this.curInputCheckInput[0].rsbInspectContent
        tempReplaceItem.rsbRemark = this.curInputCheckInput[0].rsbRemark

        adRiskStandingBook(tempReplaceItem).then(res => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.initAllGroupType(Number(this.selectchecktype))
          this.curInputCheckInput[0].rsbInspectContent = ''
          this.curInputCheckInput[0].rsbRemark = ''
        }, () => {
          this.$message.error('添加失败')
        })
      }
    }
  }
}
</script>

<style lang="scss">
  .edit-check-wrapper {
    .select-item-type-wrapper {
      border: 1px solid #eee;
      padding: 20px;
      margin: 10px;
      box-shadow: -2px 2px 5px 1px rgba(204, 204, 204, .3)
    }
    .select-item-all-wrapper {
      border: 1px solid #eee;
      padding: 20px;
      margin: 10px;
      box-shadow: -2px 2px 5px 1px rgba(204, 204, 204, .3);
    }
    .upload-check-item-wrapper {
      border: 1px solid #eee;
      padding: 20px;
      margin: 10px;
      box-shadow: -2px 2px 5px 1px rgba(204, 204, 204, .3);
    }
  }
</style>
