<!--
    filename: ProcessBomList.vue
    author: liubin
    date: 2023-10-20 15:00:58
    description:
-->

<template>
  <section class="process-bom">
    <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick" />
    <!-- <small-title :no-padding="true">
      设备名称: {{ name }}
    </small-title> -->
    <div class="btns" style="
				text-align: right;
				position: absolute;
				top: 20px;
				right: 20px;
				display: flex;
			">
      <!-- <el-input icon="el-icon-search" placeholder="搜索" v-model="searchText" style="margin-left: 20px">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" plain :disabled="currentDet == null" class="btn-create" icon="el-icon-plus">
        分配设备
      </el-button> -->
    </div>

    <!-- 列表 -->
    <el-row>
      <div style="margin-bottom: 10px;font-size: 16px;">设备名称：{{ name }}</div>
      <el-col class="custom-tabs">
        <el-tabs v-model="activeName" :stretch="true" @tab-click="handleTabClick">
          <el-tab-pane :label="'\u2002物料追溯\u2002'" name="material">
            <!-- 列表 -->
            <base-table class="base-table__margin" :table-props="materialTableProps" :page="1" :limit="10"
              :table-data="materialList" @emitFun="handleEmitFun"></base-table>
          </el-tab-pane>
          <el-tab-pane :label="'\u3000参数追溯\u3000'" name="value" style="overflow: inherit">
            <base-table class="base-table__margin" :table-props="valueTableProps" :page="1" :limit="10"
              :table-data="valueList" @emitFun="handleEmitFun"></base-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </section>
</template>

<script>
// import SmallTitle from './SmallTitle';
import {
  getDetMaterial,
  getDetValue
} from '@/api/quality/processTraceabilityDetail';
import StatusBtn from './statusBtn.vue'
export default {
	name: 'ProcessBom',
  components: {
    // SmallTitle
  },
	props: {
		currentDet: {
			type: Object,
			default: null
		}
	},
	data() {
    return {
      detId:undefined,
      activeName: 'material',
      searchBarFormConfig: [{ label: '设备参数及物料追溯' },
      	{
          type: 'datePicker',
          label: '时间段',
          dateType: 'daterange', // datetimerange
          // format: 'yyyy-MM-dd HH:mm:ss',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          rangeSeparator: '-',
          startPlaceholder: '开始日期',
          endPlaceholder: '结束日期',
          defaultTime: ['00:00:00', '23:59:59'],
          param: 'timeVal',
          // width: 350,
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary',
        },],
			materialTableProps: [
				// {
				// 	prop: 'createTime',
				// 	label: '添加时间',
				// 	fixed: true,
				// 	width: 180,
				// 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
				// },
        { prop: 'name', label: '物料名称' },
        { prop: 'planNum', label: '预计使用数量' },
        { prop: 'actualNum', label: '实际使用数量' },
      ],
      name:null,
      materialList: [],
      valueTableProps: [
        // {
        // 	prop: 'createTime',
        // 	label: '添加时间',
        // 	fixed: true,
        // 	width: 180,
        // 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
        // },
        { prop: 'name', label: '参数名' },
        {
          prop: 'name', label: '设定范围最小- 最大 / 标准',
          subcomponent: StatusBtn
        },
        {
          prop: 'code', label: '最小值',
          children: [
            {
              prop: 'minValueSet',
              label: '值'
            },
            {
              prop: 'minValueAppearTime',
              label: '出现时间'
            }
          ]
        },
        {
          prop: 'code', label: '最大值',
          children: [
            {
              prop: 'maxValueSet',
              label: '值'
            },
            {
              prop: 'maxValueAppearTime',
              label: '出现时间'
            }
          ]
        },
        {
          prop: 'averageValueAppear', label: '平均值',
        },
      ],
     valueList: [],
			total: 0,
			tableBtn: [],
			queryParams: {
				pageNo: 1,
        pageSize: 10,
			},
			searchText: ''
		};
  },
  // components: {
  //   SmallTitle,
  // },
	watch: {
		currentDet: {
			handler(val) {
				if (val != null) {
          this.getList(val);
          this.detId = val.detId
          console.log(val);
				} else {
					this.clearList();
				}
			},
			immediate: true,
			deep: true
		}
	},
  methods: {
    handleSearchBarBtnClick(val) {
      console.log(val)
      getDetMaterial({
        pageNo: 1,
        pageSize: 10,
        orderId: this.$route.params.orderId,
        flowDetId: [this.detId],
        // orderId: this.$route.params.orderId,

      },).then((res) => {
        console.log(res);
      })
      // if (timeVal && timeVal.length > 0) {
      //   this.queryParams.time = timeVal;
      // } else {
      //   this.queryParams.time = [];
      // }
      // await this.handleQuery();
    },
		handleEmitFun() { },
		handleTableBtnClick() { },
		put(payload) {
			return this.http(this.updateUrl, 'put', payload);
		},
		post(payload) {
			return this.http(this.addUrl, 'post', payload);
		},
		recv(payload) {
			return this.http(this.pageUrl, 'get', payload);
		},
		info(payload) {
			return this.http(this.infoUrl, 'get', payload);
		},
		http(url, method, payload) {
			return this.$axios({
				url,
				method,
				params: method === 'get' ? payload : null,
				data: method !== 'get' ? payload : null,
			})
		},

		// getList({ detId, detName, detDesc, flowId, sectionName } = {}) {
		// 	console.log('get list')

    // },
    handleTabClick(val) {
      // console.log(this.activeName);
      if (this.activeName === 'material') {
        getDetMaterial({
          pageNo: 1,
          pageSize: 10,
          orderId: this.$route.params.orderId,
          flowDetId: [this.detId],
          // orderId: this.$route.params.orderId,

        },).then((res) => {
          this.materialList = res.data[0].data
          this.name = res.data[0].name
        })
      } else {
        getDetValue({
          pageNo: 1,
          pageSize: 10,
          orderId: this.$route.params.orderId,
          flowDetId: [this.detId],
          // orderId: this.$route.params.orderId,

        }).then((res) => {
          this.valueList = res.data[0].data
          this.name = res.data[0].name
        })
      }
    },
    getList(val) {
      console.log(val);
      getDetMaterial({
        pageNo: 1,
        pageSize: 10,
        orderId: this.$route.params.orderId,
        flowDetId: [this.detId],
      }).then((res) => {
        console.log(res);
        this.materialList = res.data[0].data
        this.name = res.data[0].name
      })
		},
		clearList() {
			this.list = [];
		}
	},
};
</script>

<style scoped lang="scss">
.process-bom {
	position: relative;
	flex: 1;
	padding: 12px 20px;
	background: #fff;
	border-radius: 8px;
}
:deep(.custom-tabs) {
  .el-tabs__header {
    margin-bottom: 8px;
    display: inline-block;
    transform: translateY(-12px);
  }

  .el-tabs__content {
    overflow: visible;
  }

  .el-tabs__item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 36px !important;
    height: 36px;
  }
}
</style>
