<template>
  <div>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <div style="width:100%">
            <el-row>
              <el-col :span="17">数据接收环节的四性检测项设置</el-col>
              <el-col :span="7" style="text-align:right">
                已选{{multipleSelectionOne.length}}条数据
                <span @click="stopProp">
                  <el-button :loading="btnloading.YJ" type="primary" size="mini" @click="submit(1)">保存</el-button>
                </span>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="height:500px">
          <el-table ref="tableOne" height="500" border :data="tableDataOne"
            @selection-change="handleSelectionChangeOne">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column label="编号" width="100px" prop="number"></el-table-column>
            <el-table-column label="检测类型" width="120px" prop="detectionType"></el-table-column>
            <el-table-column label="检测项目" width="200px" prop="testItems"></el-table-column>
            <el-table-column label="检测对象" width="180px" prop="detectionObject"></el-table-column>
            <el-table-column label="检测依据和方法" prop="testBasisMethod"></el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <div style="width:100%">
            <el-row>
              <el-col :span="17">对“未入库”数据的四性检测项设置</el-col>
              <el-col :span="7" style="text-align:right">
                已选{{multipleSelectionTwo.length}}条数据
                <span @click="stopProp">
                  <el-button :loading="btnloading.GD" type="primary" size="mini" @click="submit(2)">保存</el-button>
                </span>
              </el-col>
            </el-row>
            <!-- <i class="header-icon el-icon-info"></i> -->
          </div>
        </template>
        <div style="height:500px">
          <el-table ref="tableTwo" height="500" border :data="tableDataTwo"
            @selection-change="handleSelectionChangeTwo">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column label="编号" width="120px" prop="number"></el-table-column>
            <el-table-column label="检测类型" width="120px" prop="detectionType"></el-table-column>
            <el-table-column label="检测项目" width="200px" prop="testItems"></el-table-column>
            <el-table-column label="检测对象" width="180px" prop="detectionObject"></el-table-column>
            <el-table-column label="检测依据和方法" prop="testBasisMethod"></el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template slot="title">
          <div style="width:100%">
            <el-row>
              <el-col :span="17">对“已入库”数据的四性检测项设置</el-col>
              <el-col :span="7" style="text-align:right">
                已选{{multipleSelectionThree.length}}条数据
                <span @click="stopProp">
                  <el-button :loading="btnloading.BC" type="primary" size="mini" @click="submit(3)">保存</el-button>
                </span>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="height:500px">
          <el-table ref="tableThree" height="500" border :data="tableDataThree"
            @selection-change="handleSelectionChangeThree">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column label="编号" width="120px" prop="number"></el-table-column>
            <el-table-column label="检测类型" width="120px" prop="detectionType"></el-table-column>
            <el-table-column label="检测项目" prop="testItems"></el-table-column>
            <el-table-column label="检测对象" prop="detectionObject"></el-table-column>
            <el-table-column label="检测依据和方法" prop="testBasisMethod"></el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
  import {
    getFourCheckStandard,
    getFourCheckSetting,
    itemCheck,
    updateFourCheckSetting
  } from "@/api/system-management/templateSetting"
  import {
    message
  } from '@/utils/common'
  export default {
    props: {
      tableDataOne: {
        type: Array,
        default: () => []
      },
      tableDataTwo: {
        type: Array,
        default: () => []
      },
      tableDataThree: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        activeName: [],
        multipleSelectionOne: [],
        multipleSelectionTwo: [],
        multipleSelectionThree: [],
        btnloading: {
          'YJ': false,
          'GD': false,
          'BC': false,
        }
      }
    },
    methods: {
      handleSelectionChangeOne(val) {
        this.multipleSelectionOne = val
      },
      handleSelectionChangeTwo(val) {
        this.multipleSelectionTwo = val
      },
      handleSelectionChangeThree(val) {
        this.multipleSelectionThree = val
      },
      submit(val) {

        switch (val) {
          case 1:
            let idOne = []
            this.multipleSelectionOne.forEach(item => {
              idOne.push(item.number)
            })
            let dataOne = {
              checkItem: idOne.join(","),
              checkLink: 'YJ',
            }
            this.btnloading.YJ = true;
            updateFourCheckSetting(dataOne).then(res => {
              this.btnloading.YJ = false;
              message('success', '保存成功', 3000)
            }).catch(err=>{
              this.btnloading.YJ = false;
            })
            break;
          case 2:
            let idTwo = []
            this.multipleSelectionTwo.forEach(item => {
              idTwo.push(item.number)
            })
            let dataTwo = {
              checkItem: idTwo.join(","),
              checkLink: 'GD',
            }
            this.btnloading.GD = true;
            updateFourCheckSetting(dataTwo).then(res => {
              this.btnloading.GD = false;
              message('success', '保存成功', 3000)
            }).catch(err=>{
              this.btnloading.GD = false;
            })
            break;
          case 3:
            let idThree = []
            this.multipleSelectionThree.forEach(item => {
              idThree.push(item.number)
            })
            let dataThree = {
              checkItem: idThree.join(","),
              checkLink: 'BC',
            }
            this.btnloading.BC = true;
            updateFourCheckSetting(dataThree).then(res => {
              this.btnloading.BC = false;
              message('success', '保存成功', 3000)
            }).catch(err=>{
              this.btnloading.BC = false;
            })
            break;
        }
      },
      stopProp(e) {
        e.stopPropagation()
      }
    },
    created() {}
  }

</script>
<style lang='scss' scoped>
  ::v-deep .el-collapse-item__header {
    border: 1px solid #e2e2e2;
    text-indent: 15px;
    background: rgb(235, 235, 235);
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
  }

  ::v-deep .el-collapse-item__content {
    border-right: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    padding: 10px 18px;
  }

</style>
