<!--
 * @Author: zwq
 * @Date: 2022-12-01 14:52:41
 * @LastEditors: zwq
 * @LastEditTime: 2023-06-21 16:32:15
 * @Description: 
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
    <span class="blue-block"></span>
      <el-form-item :label="$t('sampleSize')">
        <el-input size="small" type="number" v-model="dataForm.name" :placeholder="$t('placeholder.sampleSize')" clearable />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="getDataList()">
          {{$t('query')}}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      :header-cell-style="{
        background: '#eef1f6',
        color: '#606266',
      }"
      class="rowClass"
      v-loading="dataListLoading"
      style="width: 100%;"
    >
      <el-table-column align="center" prop="name" label="样本大小" fixed="left"> </el-table-column>
      <el-table-column align="center" label="均值管制图">
        <el-table-column align="center" label="控制限系数">
          <el-table-column align="center" prop="A" label="A"> </el-table-column>
          <el-table-column align="center" prop="A1" label="A1"> </el-table-column>
          <el-table-column align="center" prop="A2" label="A2"> </el-table-column>
          <el-table-column align="center" prop="A3" label="A3"> </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="中线系数">
        <el-table-column align="center" label="控制限系数">
          <el-table-column align="center" prop="m3" label="m3"> </el-table-column>
          <el-table-column align="center" prop="m3A2" label="m3A2"> </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="标准差管制图">
        <el-table-column align="center" label="中线系数">
          <el-table-column align="center" prop="C2" label="C2"> </el-table-column>
          <el-table-column align="center" prop="C4" label="C4"> </el-table-column>
          <el-table-column align="center" prop="1/C4" label="1/C4"> </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="控制限系数">
          <el-table-column align="center" prop="B1" label="B1"> </el-table-column>
          <el-table-column align="center" prop="B2" label="B2"> </el-table-column>
          <el-table-column align="center" prop="B3" label="B3"> </el-table-column>
          <el-table-column align="center" prop="B4" label="B4"> </el-table-column>
          <el-table-column align="center" prop="B5" label="B5"> </el-table-column>
          <el-table-column align="center" prop="B6" label="B6"> </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="极差管制图">
        <el-table-column align="center" label="中线系数">
          <el-table-column align="center" prop="d2" label="d2"> </el-table-column>
          <el-table-column align="center" prop="1/d2" label="1/d2"> </el-table-column>
          <el-table-column align="center" prop="d3" label="d3"> </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="控制限系数">
          <el-table-column align="center" prop="D1" label="D1"> </el-table-column>
          <el-table-column align="center" prop="D2" label="D2"> </el-table-column>
          <el-table-column align="center" prop="D3" label="D3"> </el-table-column>
          <el-table-column align="center" prop="D4" label="D4"> </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { list } from "./components/controlRatio";
export default {
  data() {
    return {
      dataList: [],
      dataForm: {
        name: "",
      },
      dataListLoading: false,
    };
  },
  components: {},
  activated() {
    this.getDataList();
  },
  methods: {
    getDataList() {
      this.dataListLoading = true;
      if(parseInt(this.dataForm.name)>=2&&parseInt(this.dataForm.name)<=25){
      this.dataList = list().filter((item,index) => {
            return parseInt(this.dataForm.name) === (index+2);
          })
      }else{
          this.dataList = list()
      }
      this.dataListLoading = false;
    },
  },
};
</script>
<style scoped>
.blue-block {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0B58FF;
  border-radius: 1px;
  margin-right: 8px;
  margin-top: 12px;
}
.rowClass >>> td {
  padding: 2px 0;
}
.rowClass >>> th {
  padding: 4px 0;
}
</style>
