<template>
  <!-- 充装管理 -->
  <div>
    <actionBar menuTitle="充装管理" :formList="formList" :ruleForm="searchRuleForm" @searchProtocol="searchProtocol">
    </actionBar>
    <tables :key="Math.random()" :suspension="false" :tableList="tableList" :tableData="tableData"
      @buttonData="buttonData"></tables>
    <!-- 分页 -->
    <div class="paging_bottom" v-if="Total">
      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
        @changeCurrent="changeCurrent">
      </pagination>
    </div>
    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="60%" :close-on-click-modal="false">
      <forms ref="childRules" :formNewList="formRuleList" :ruleForm="ruleForm" labelWidth="100px"></forms>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getFillData,
    getStation,
    getUserFillData
  } from '@/api/inspection'
  import actionBar from '@/components/actionBar'
  import tables from '@/components/tables'
  import pagination from '@/components/pagination'
  import forms from '@/components/forms'
  import {
    formRules,
    employee
  } from "./filling.js";
  export default {
    components: {
      actionBar,
      tables,
      pagination,
      forms
    },
    data() {
      return {
        staffTitle: '添加',
        staffDialogVisible: false,
        formList: [{
          type: 'picker',
          label: '订单时间',
          field: 'time',
          placeholder: '订单时间',
        }, {
          type: 'select',
          label: '所属气站',
          field: 'stationId',
          placeholder: '所属气站',
          options: [],
        }, {
          type: 'select',
          label: '充装员',
          field: 'userId',
          placeholder: '充装员',
          options: [],
        }, {
          type: 'input',
          label: '单位内编码',
          field: 'innerCode',
          placeholder: '单位内编码',
        }, {
          type: 'input',
          label: '高频编码',
          field: 'chipId',
          placeholder: '高频编码',
        }],
        searchRuleForm: {
          time: [],
          stationId: '',
          userId: '',
          innerCode: '',
          chipId: '',
        },
        tableList: employee(),
        tableData: [],
        Pagination: {
          PageIndex: 1,
          PageSize: 10,
        },
        Total: 0,
        formRuleList: [],
        searchValue: {},
        ruleForm: {}
      }
    },
    mounted() {
      const dataList = formRules();
      this.formRuleList = dataList;
      this.getList()
    },
    methods: {
      // 搜索
      searchProtocol(value) {
        this.searchValue = value
        if (value.time) {
          this.searchValue.orderStartTime = value.time[0]
          this.searchValue.orderEndTime = value.time[1]
          delete this.searchValue.time
        }
        this.getList()
      },
      // 获取钢瓶档案列表
      getList() {
        var params = {
          page: this.Pagination.PageIndex,
          pageSize: this.Pagination.PageSize,
          ...this.searchValue
        }
        getFillData(params).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.tableData.forEach((item) => {
              item.area = item.tbFillData.area
              item.city = item.tbFillData.city
            })
            this.Total = res.data.count
            this.getGasStation()
          }
        })
      },
      // 获取气站
      getGasStation() {
        getStation().then(res => {
          if (res.code == 200) {
            const arr = res.data.list
            let arrList = []
            arr.forEach(item1 => {
              var arrData = {
                label: null,
                value: null,
              }
              arrData.label = item1.station.name
              arrData.value = item1.station.id
              arrList.push(arrData)
            })
            this.formList.forEach((item, index) => {
              if (item.field == 'stationId') {
                item.options = arrList
              }
            })
          }
          this.getFillingPersonnel()
        })
      },
      // 获取充装人员
      getFillingPersonnel() {
        getUserFillData().then(res => {
          if (res.code == 200) {
            const arr = res.data.list
            let arrList = []
            arr.forEach(item1 => {
              var arrData = {
                label: null,
                value: null,
              }
              arrData.label = item1.user.nickName
              arrData.value = item1.user.id
              arrList.push(arrData)
            })
            this.formList.forEach((item, index) => {
              if (item.field == 'userId') {
                item.options = arrList
              }
            })
          }
        })
      },
      buttonData(row, type) {
        this.operationType = type
        if (type == 'edit') {
          this.staffTitle = '编辑'
        } else {
          this.staffTitle = '详情'
        }
        this.staffDialogVisible = true
      },
      changeSize(val) {
        this.Pagination.PageSize = val
        this.getList()
      },
      changeCurrent(val) {
        this.Pagination.PageIndex = val
        this.getList()
      },
    }
  }
</script>

<style lang="scss" scoped>
</style>
