<template>
  <div>
    <ContentWrap class="search">
      <el-form
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
        style="margin-bottom: -17px"
        label-width="100px"
      >
        <el-form-item label="项目" style="width: calc(20% - 32px)">
          <el-select
            v-model="queryParams.proCode"
            placeholder="请选择项目"
            clearable
            style="width: 100%"
          >
            <el-option v-for=" (item) in projectList" :key="item" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="物料" style="width: calc(20% - 32px)">
          <el-select
            v-model="queryParams.itemCode"
            placeholder="请选择物料"
            clearable
            style="width: 100%"
            @change="detectionItemChange"
          >
            <el-option v-for=" (item) in itemList" :key="item" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="物料类型" style="width: calc(20% - 32px)">
          <el-select
            v-model="queryParams.detectionType"
            placeholder="请选择检测类型"
            clearable
            style="width: 100%"
            @change="detectionItemChange"
          >
            <el-option v-for="dict in getIntDictOptions(DICT_TYPE.ITEMBASIC_TYPE)" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="检测项" style="width: calc(20% - 32px)">
          <el-select
            v-model="queryParams.detectionItemContentId"
            placeholder="请选择检测项"
            clearable
            style="width: 100%"
            @change="deItemChange"
          >
            <el-option v-for=" (item) in detectionItemList" :key="item" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="检测日期" style="width: calc(20% - 32px)">
          <el-date-picker
            v-model="queryParams.detectionDate"
            type="date"
            placeholder="请选择日期"
            clearable
            value-format="YYYY-MM-DD"
            @change="deDateChange"
          />
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="info" plain @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
        </el-form-item> -->
      </el-form>
    </ContentWrap>
    <ContentWrap class="search">
      <div class="title">制程能力指数（CPK）</div>
      <div class="cpk" v-loading="pnaLoading">
        <div class="cpk-item">
          <div class="cpk-item-1">
            <div class="cpk-item-label">CP</div>
            <div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.cp : '' }}</div>
          </div>
          <div class="cpk-item-1">
            <div class="cpk-item-label">CPK</div>
            <div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.cpk : '' }}</div>
          </div>
        </div>
        <div class="cpk-item">
          <div class="cpk-item-1">
            <div class="cpk-item-label">PP</div>
            <div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.pp : '' }}</div>
          </div>
          <div class="cpk-item-1">
            <div class="cpk-item-label">PPK</div>
            <div class="cpk-item-value">{{ datas.tzrv != null? datas.tzrv.ppk : '' }}</div>
          </div>
        </div>
        <div class="cpk-item1">
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>零件号</span> <span>{{ datas.tzrv != null? datas.tzrv.itemCode : '' }}</span></div>
            <div class="cpk-item-label"><span>检测内容</span> <span>{{ datas.tzrv != null? datas.tzrv.detectionItemContents : '' }}</span></div>
          </div>
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>公差下限</span> <span>{{ datas.tzrv != null? datas.tzrv.detectionItemDownLimt : '' }}</span></div>
            <div class="cpk-item-label"><span>公差上限</span> <span>{{ datas.tzrv != null? datas.tzrv.detectionItemUpLimit : '' }}</span></div>
          </div>
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>X中值</span> <span>{{ datas.tzrv != null? datas.tzrv.xavg : '' }}</span></div>
            <div class="cpk-item-label"><span>R中值</span> <span>{{ datas.tzrv != null? datas.tzrv.ravg : '' }}</span></div>
          </div>
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>UCLx</span> <span>{{ datas.tzrv != null? datas.tzrv.uclx : '' }}</span></div>
            <div class="cpk-item-label"><span>LCLx</span> <span>{{ datas.tzrv != null? datas.tzrv.lclx : '' }}</span></div>
          </div>
          <div class="cpk-item-2">
            <div class="cpk-item-label"><span>UCLn</span> <span>{{ datas.tzrv != null? datas.tzrv.ucln : '' }}</span></div>
            <div class="cpk-item-label"><span>LCLn</span> <span>{{ datas.tzrv != null? datas.tzrv.lcln : '' }}</span></div>
          </div>
        </div>
      </div>
      <table border="1" width="100%" align="center" border-collapse="collapse" v-loading="tabLoading">
        <tr class="td-bg">
          <td colspan="2">样本</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
        </tr>
        <tr v-for="(item , index) in datas.tvList" :key="item">
          <td v-if="index == 0" rowspan="8" class="td-bg">检测记录</td>
          <td v-if="index == 5" class="td-bg">合计值</td>
          <td v-else-if="index == 6" class="td-bg">平均值</td>
          <td v-else-if="index == 7" class="td-bg">极差值</td>
          <td v-else class="td-bg">{{ index + 1 }}</td>
          <td>{{ item.oneDv }}</td>
          <td>{{ item.twoDv }}</td>
          <td>{{ item.thrDv }}</td>
          <td>{{ item.fouDv }}</td>
          <td>{{ item.fivDv }}</td>
        </tr>
      </table>
    </ContentWrap>
    <ContentWrap class="search">
      <div class="tabs">
        <div class="title" :class="tabIndex == 0 ? 'active' : ''" @click="changTabIndex(0)">控制图</div>
        <div class="title" :class="tabIndex == 1 ? 'active' : ''" @click="changTabIndex(1)">CPK分析图</div>
        <div class="title" :class="tabIndex == 2 ? 'active' : ''" @click="changTabIndex(2)">样本运行图</div>
        <div class="title" :class="tabIndex == 3 ? 'active' : ''" @click="changTabIndex(3)">均值运行图</div>
      </div>
      <div class="charts" v-show="tabIndex == 0">
        <div id="myEcharts1" :style="{ width: '50%', height: '300px' }" v-loading="ec1Loading"></div>
        <div id="myEcharts2" :style="{ width: '50%', height: '300px' }" v-loading="ec2Loading"></div>
      </div>
      <div class="charts" v-show="tabIndex == 1">
        <!-- <div id="myEcharts3" :style="{ width: '80vw', height: '300px' }" v-loading="ec3Loading"></div> -->
        <ZtfbView ref="myEcharts3Ref" v-loading="ec3Loading" />
      </div>
      <div class="charts" v-show="tabIndex == 2">
        <div id="myEcharts4" :style="{ width: '80vw', height: '300px' }" v-loading="ec4Loading"></div>
      </div>
      <div class="charts" v-show="tabIndex == 3">
        <div id="myEcharts5" :style="{ width: '80vw', height: '300px' }" v-loading="ec5Loading"></div>
      </div>
    </ContentWrap>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import * as ZlnalysisAPI from '@/api/tjanalysis/zlanalysis'
import * as ProjecAPI from '@/api/spc/project'
import * as ItembasicApi from '@/api/spc/itembasic'
import * as TemplateItemDetailsApi from '@/api/spc/templateItemDetails'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import {formatDate} from '@/utils/formatTime'
import ZtfbView from './components/ztfbview.vue'

let echart = echarts
const myEcharts3Ref = ref()

// 项目列表
const projectList = ref()
// 物料列表
const itemList = ref()
// 检测项列表
const detectionItemList = ref()
const pnaLoading = ref(true)
const tabLoading = ref(true)
const ec1Loading = ref(true)
const ec2Loading = ref(true)
const ec3Loading = ref(true)
const ec4Loading = ref(true)
const ec5Loading = ref(true)


const queryParams = reactive({
  proCode: '',
  itemCode: '',
  detectionType: '',
  detectionItemContentId: null,
  detectionDate: formatDate(new Date() , 'YYYY-MM-DD'),
  ecTab: '1'
})

const datas = reactive({
  tvList : null,
  tzrv: null,
  echatrtData: null,
  ranData: null
})

const tabIndex = ref(0)

// 设置延期未交付数据
function setChart1(datavv) {
  let chart = echart.init(document.getElementById('myEcharts1'), 'light')
  // 把配置和数据放这里
  chart.setOption({
    title: {
      text: 'RANGE CHART'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: datavv != null? datavv.legend : [],
      top: '0',
      right: '3%'
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: datavv != null? datavv.xDatas : []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: datavv != null? datavv.legend[0] : '',
        data: datavv != null? datavv.yDatas[0] : [],
        type: 'line'
      },
      {
        name: datavv != null? datavv.legend[1] : '',
        data: datavv != null? datavv.yDatas[1] : [],
        type: 'line'
      },
      {
        name: datavv != null? datavv.legend[2] : '',
        data: datavv != null? datavv.yDatas[2] : [],
        type: 'line'
      },
      {
        name: datavv != null? datavv.legend[3] : '',
        data: datavv != null? datavv.yDatas[3] : [],
        type: 'line'
      },
      {
        name: datavv != null? datavv.legend[4] : '',
        data: datavv != null? datavv.yDatas[4] : [],
        type: 'line'
      },
      {
        name: datavv != null? datavv.legend[5] : '',
        data: datavv != null? datavv.yDatas[5] : [],
        type: 'line'
      }
    ]
  })

  window.onresize = function () {
    //自适应大小
    chart.resize()
  }
}
function setChart2(rangeData) {
  let chart = echart.init(document.getElementById('myEcharts2'), 'light')
  // 把配置和数据放这里
  chart.setOption({
    title: {
      text: 'RANGE CHART'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: rangeData != null ? rangeData.legend : [],
      top: '0',
      right: '3%'
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: rangeData != null ? rangeData.xDatas : []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: rangeData != null ? rangeData.legend[0] : '',
        data: rangeData != null ? rangeData.yDatas[0] : [],
        type: 'line'
      },
      {
        name: rangeData != null ? rangeData.legend[1] : '',
        data: rangeData != null ? rangeData.yDatas[1] : [],
        type: 'line'
      },
      {
        name: rangeData != null ? rangeData.legend[2] : '',
        data: rangeData != null ? rangeData.yDatas[2] : [],
        type: 'line'
      },
      {
        name: rangeData != null ? rangeData.legend[3] : '',
        data: rangeData != null ? rangeData.yDatas[3] : [],
        type: 'line'
      }
    ]
  })
  window.onresize = function () {
    //自适应大小
    chart.resize()
  }
}
function setChart3(ztData) {
  // console.log(ztData , 'daikun')
  if (ztData != null) {
    myEcharts3Ref.value.open(ztData.datas , ztData.downLimit , ztData.upLimit)
  }
}
function setChart4(ybData) {
  let chart = echart.init(document.getElementById('myEcharts4'), 'light')
  // 把配置和数据放这里
  chart.setOption({
    // title: {
    //   text: '样本运行图'
    // },
    tooltip: {
      trigger: 'axis'
    },
    // legend: {
    //   data: ['Highest', 'Lowest'],
    //   top: '0',
    //   right: '3%'
    // },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ybData != null ? ybData.xDatas : []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '检测值',
        data: ybData != null ? ybData.yDatas : [],
        type: 'line'
      }
    ]
  })
  window.onresize = function () {
    //自适应大小
    chart.resize()
  }
}
function setChart5(jzData) {
  let chart = echart.init(document.getElementById('myEcharts5'), 'light')
  // 把配置和数据放这里
  chart.setOption({
    // title: {
    //   text: '均值运行图'
    // },
    tooltip: {
      trigger: 'axis'
    },
    // legend: {
    //   data: ['Highest', 'Lowest'],
    //   top: '0',
    //   right: '3%'
    // },
    grid: {
      left: '3%',
      right: '4%',
      top: '15%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: jzData != null ? jzData.xDatas : []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '均值',
        data: jzData != null ? jzData.yDatas : [],
        type: 'line'
      }
    ]
  })
  window.onresize = function () {
    //自适应大小
    chart.resize()
  }
}

const detectionItemChange = async()=> {
  detectionItemList.value = null
  queryParams.detectionItemContentId = null
  const _detectionItemList = await TemplateItemDetailsApi.selectDetectionItems(queryParams.itemCode , queryParams.detectionType)
  if (_detectionItemList != null && _detectionItemList.length != 0) {
    detectionItemList.value = _detectionItemList
    queryParams.detectionItemContentId = _detectionItemList[0].value
  }
  initData()
}

const deItemChange = async(value)=> {
  queryParams.detectionItemContentId = value
  initData()
}

const deDateChange = async (value) => {
  initData()
}

const changTabIndex = async (tIndexV) => {
  ec1Loading.value = true
  ec2Loading.value = true
  ec3Loading.value = true
  ec4Loading.value = true
  ec5Loading.value = true
  tabIndex.value = tIndexV
  queryParams.ecTab = tIndexV
  const dvDatas = await ZlnalysisAPI.getZcnlEcharts(queryParams)
  // console.log(dvDatas , '333333')
  if (dvDatas != null) {
    if (tIndexV == 0) {
      setChart1(dvDatas.menMap)
      setChart2(dvDatas.ranMap)
      ec1Loading.value = false
      ec2Loading.value = false
    } else if (tIndexV == 1) {
      setChart3(dvDatas.ztMap)
      ec3Loading.value = false
    } else if (tIndexV == 2) {
      setChart4(dvDatas.ybMap)
      ec4Loading.value = false
    } else if (tIndexV == 3) {
      setChart5(dvDatas.jzMap)
      ec5Loading.value = false
    }
  }
}

const initData = async () => {
  await resetDats()
  const _datas = await ZlnalysisAPI.getZcnlInfos(queryParams)
  if (_datas != null) {
    datas.tvList = _datas.tvList
    datas.tzrv = _datas.tzrv
    setChart1(_datas.menMap)
    setChart2(_datas.ranMap)
  } else {
    setChart1(null)
    setChart2(null)
  }

  pnaLoading.value = false
  tabLoading.value = false
  ec1Loading.value = false
  ec2Loading.value = false
}

const initQuerys = async () => {
  const dictOptions = await getIntDictOptions(DICT_TYPE.ITEMBASIC_TYPE)
  if (dictOptions != null && dictOptions.length != 0) {
    queryParams.detectionType = dictOptions[0].value + ''
  }
  const _projectList = await ProjecAPI.selectAllPros()
  if (_projectList != null && _projectList.length != 0) {
    projectList.value = _projectList
  }
  const _itemList = await ItembasicApi.selectItems()
  if (_itemList != null && _itemList.length != 0) {
    itemList.value = _itemList
    queryParams.itemCode = _itemList[0].code
  }
  const _detectionItemList = await TemplateItemDetailsApi.selectDetectionItems(queryParams.itemCode , queryParams.detectionType)
  if (_detectionItemList != null && _detectionItemList.lenght != 0) {
    detectionItemList.value = _detectionItemList
    queryParams.detectionItemContentId = _detectionItemList[0].value
  }

  initData()
} 

function resetDats() {
  pnaLoading.value = true
  tabLoading.value = true
  ec1Loading.value = true
  ec2Loading.value = true
  ec3Loading.value = true
  ec4Loading.value = true
  ec5Loading.value = true

  datas.tvList = null
  datas.tzrv  = null
  datas.echatrtData = null
  datas.ranData = null
}

onMounted(async () => {
  initQuerys()
})
</script>
<style lang="scss" scoped>
.search {
  background: white;
}
::v-deep.el-form-item--default .el-form-item__label {
  padding: 0px 20px !important;
  background: rgb(53, 158, 256) !important;
  color: white !important;
}
.title {
  margin-bottom: 20px;
  margin-right: 20px;
}
.cpk {
  display: flex;
  align-items: center;
  .cpk-item {
    display: flex;
    align-items: center;
    width: 10%;
    margin-right: 10px;
    background: rgb(235, 243, 255);
    border: 1px solid rgb(44, 135, 255);
    height: 60px;
    justify-content: center;
    .cpk-item-1 {
      text-align: center;
      margin: 0px 10px;
      .cpk-item-label {
        color: #a8a8a8;
        font-size: 12px;
      }
      .cpk-item-value {
        color: #000000;
        font-size: 16px;
      }
    }
  }
  .cpk-item1 {
    background: rgb(245, 245, 245);
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    .cpk-item-2 {
      .cpk-item-label {
        color: #a8a8a8;
        font-size: 12px;
        span {
          &:nth-child(1) {
            width: 60px;
            display: inline-block;
            text-align: right;
            margin-right: 6px;
          }
          &:nth-child(2) {
            margin-right: 6px;
            color: #000;
          }
        }
      }
    }
  }
}
table {
  width: 100%;
  /*居中*/
  margin: 20px auto 0px;
  /*边框*/
  /* border: 1px solid black; */

  border-collapse: collapse;
  /*设置背景颜色*/
  /* background-color: #bfa; */
}

/*
       * 设置边框
       */
td,
th {
  border: 1px solid rgb(200, 200, 200);
  text-align: center;
  font-size: 14px;
}

/*
     * 设置隔行变色
     */
// tbody > tr:nth-child(even) {
//   background-color: #bfa;
// }

/*
     * 鼠标移入到tr以后，改变颜色
     */
// tr:hover {
//   background-color: #ff0;
// }
.td-bg {
  background: rgb(231, 244, 248);
}
.tabs {
  display: flex;
  align-items: center;
  > div {
    height: 30px;
    cursor: pointer;
  }
  .active {
    color: rgb(44, 135, 255);
    font-weight: bold;
    border-bottom: 2px solid rgb(44, 135, 255);
  }
}
.charts {
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>