<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick" />

    <!-- 列表 -->
    <base-table :max-height="tableH" :table-props="tableProps" :page="queryParams.pageNo" :limit="queryParams.pageSize"
      :table-data="list" @emitFun="handleEmitFun">
      <!-- <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" :method-list="tableBtn"
        @clickBtn="handleTableBtnClick" /> -->
    </base-table>

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

    <!-- 对话框(添加 / 修改) -->
  </div>
</template>

<script>
import moment from 'moment';
import { getPdList,} from '@/api/core/monitoring/auto';
import { getFactoryPage } from '@/api/core/base/factory';
import basicPageMixin from '@/mixins/lb/basicPageMixin';
import { getTranslucentPage, exportTranslucent } from '@/api/monitoring/defectSummary';
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
export default {
  name: 'QualityInspectionType',
  mixins: [basicPageMixin, tableHeightMixin],
  data() {
    return {
      // tableBtn: [
      //   this.$auth.hasPermi('base:quality-inspection-type:update')
      //     ? {
      //       type: 'edit',
      //       btnName: '修改',
      //     }
      //     : undefined,
      //   this.$auth.hasPermi('base:quality-inspection-type:delete')
      //     ? {
      //       type: 'delete',
      //       btnName: '删除',
      //     }
      //     : undefined,
      // ].filter((v) => v),
      tableProps: [
        // {
        //   prop: 'createTime',
        //   label: '添加时间',
        //   fixed: true,
        //   width: 180,
        //   filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
        // },
        { prop: 'factoryName', label: '工厂' },
        { prop: 'lineName', label: '产线' },
        { prop: 'timeVal', label: '时间段' },
        { prop: 'totalNum', label: '玻璃总数' },
        { prop: 'goodNum', label: '一等品数量' },
        { prop: 'passNum', label: '二等品数量' },
        { prop: 'scrapNum', label: '废片数' },
        { prop: 'passRate', label: '合格率' },
      ],
      //
      searchBarFormConfig: [
        {
          type: 'select',
          label: '工厂',
          selectOptions: [],
          param: 'factoryId',
        },
        {
          type: 'select',
          label: '产线',
          selectOptions: [],
          param: 'lineId',
        },
        {
          type: 'datePicker',
          label: '时间范围',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'timeVal',
          width: 350
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary',
        },
        // {
        // 	type: 'button',
        // 	btnName: '重置',
        // 	name: 'reset',
        // },
        {
          type: 'separate',
        },
        // {
        //   type: this.$auth.hasPermi('base:quality-inspection-type:create')
        //     ? 'button'
        //     : '',
        //   btnName: '新增',
        //   name: 'add',
        //   plain: true,
        //   color: 'success',
        // },
        {
          type: this.$auth.hasPermi('monitoring:translucent:export')
        		? 'button'
        		: '',
        	btnName: '导出',
        	name: 'export',
        	color: 'warning',
        },
      ],
      // 表单配置
      // formRows: [
      // 	[
      // 		{
      // 			input: true,
      // 			label: '检测类型名称',
      // 			prop: 'name',
      // 			rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
      // 			// bind: {
      // 			// 	disabled: true, // some condition, like detail mode...
      // 			// }
      // 		},
      // 	],
      // 	[{ input: true, label: '检测类型编码', prop: 'code' }],
      // 	[{ input: true, label: '备注', prop: 'remark' }],
      // ],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        lineId: undefined,
        factoryId: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      // 表单参数
      form: {},
    };
  },
  // watch: {
  // 	form: {
  // 		handler: (val) => {
  // 			console.log('form changed', val);
  // 		},
  // 		deep: true
  // 	},
  // },
  created() {
    this.getList();
    this.getDict()
  },
  methods: {
    getDict() {
      getPdList().then(res => {
        this.searchBarFormConfig[1].selectOptions = res.data || [];
      });
      getFactoryPage({ pageSize: 100, pageNo: 1 }).then(res => {
        this.searchBarFormConfig[0].selectOptions = res.data.list || [];
      });
    },
    /** base table related */
    handleTableBtnClick({ data, type }) {
      switch (type) {
        case 'edit':
          this.handleUpdate(data);
          break;
        case 'delete':
          this.handleDelete(data);
          break;
      }
    },
    /** search bar related */
    handleSearchBarBtnClick(btn) {
      console.log('btn',btn);

      // const keys = ['name'];
      switch (btn.btnName) {
        case 'search':
          this.queryParams.lineId = btn.lineId ? btn.lineId : undefined
          this.queryParams.factoryId = btn.factoryId ? btn.factoryId : undefined
          this.queryParams.startTime = btn.timeVal ? btn.timeVal[0] : undefined
          this.queryParams.endTime = btn.timeVal ? btn.timeVal[1] : undefined
          // keys.forEach((key) => {
          //   this.queryParams[key] = btn[key] || null;
          // });
          this.getList();
          break;
        case 'add':
          this.handleAdd();
          break;
        case 'export':
          this.handleExport();
          break;
        case 'reset':
          this.$refs['search-bar'].resetForm();
          this.resetQuery();
          break;
      }
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getTranslucentPage(this.queryParams).then((res) => {
        this.list = res.data.list ? res.data.list.map((item) => {
          const startTime = item.startTime ? moment(item.startTime).format('YYYY-MM-DD HH:mm:ss') : '';
          const endTime = item.endTime ? moment(item.endTime).format('YYYY-MM-DD HH:mm:ss') : '';

          // 拼接开始时间和结束时间，中间用“至”连接
          const timeVal = startTime && endTime ? `${startTime} 至 ${endTime}` : '';

          return {
            ...item,
            timeVal: timeVal
          };
        }) :[]
        this.total = res.data.total;
        this.loading = false;
      });
    },
    /** 表单重置 */
    // reset() {
    //   this.form = {
    //     id: undefined,
    //     name: undefined,
    //     code: undefined,
    //     remark: undefined,
    //   };
    //   this.resetForm('form');
    // },
    /** 新增按钮操作 */
    // handleAdd() {
    //   this.reset();
    //   this.open = true;
    //   this.title = '添加质量检测类型基础';
    // },
    /** 修改按钮操作 */
    // handleUpdate(row) {
    //   this.reset();
    //   const id = row.id;
    //   getQualityInspectionType(id).then((response) => {
    //     this.form = response.data;
    //     this.open = true;
    //     this.title = '修改质量检测类型基础';
    //   });
    // },
    /** 提交按钮 */
    // submitForm() {
    //   // console.log('this.$refs.form', this.$refs.form);
    //   // return;
    //   this.$refs['form'].validate((valid) => {
    //     if (!valid) {
    //       return;
    //     }
    //     console.log('final form', JSON.stringify(this.form));
    //     // 修改的提交
    //     if (this.form.id != null) {
    //       updateQualityInspectionType(this.form).then((response) => {
    //         this.$modal.msgSuccess('修改成功');
    //         this.open = false;
    //         this.getList();
    //       });
    //       return;
    //     }
    //     // 添加的提交
    //     createQualityInspectionType(this.form).then((response) => {
    //       this.$modal.msgSuccess('新增成功');
    //       this.open = false;
    //       this.getList();
    //     });
    //   });
    // },
    handleExport() {
      // 处理查询参数
      let params = { ...this.queryParams };
      // params.pageNo = undefined;
      // params.pageSize = undefined;
      this.$modal
        .confirm('是否确认导出透光率检测?')
        .then(() => {
          this.exportLoading = true;
          return exportTranslucent(params);
        })
        .then((response) => {
          this.$download.excel(response, '透光率检测.xls');
          this.exportLoading = false;
        })
        .catch(() => { });
    },
  },
};
</script>
