<template>
  <div class="app-container">
    <!-- left -->
    <div class="left-container">
      <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
      <base-table
        :top-btn-config="topBtnConfig"
        :page="listQuery.current"
        :limit="listQuery.size"
        :height="tableH"
        :high-index="highIndex"
        :table-config="tableProps"
        :table-data="list"
        :is-loading="listLoading"
        @clickTopBtn="clickTopBtn"
        @selectRow="selectRow"
      >
        <method-btn
          v-if="tableBtn.length"
          slot="handleBtn"
          :method-list="tableBtn"
          :width="trueWidth"
          @clickBtn="handleClick"
        />
      </base-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getList()"
      />
    </div>
    <!-- right -->
    <div class="right-container">
      <top-title
        :base-title="this.$t('module.equipmentManager.inspectionManage.inspectionItem')"
        style="font-size: 14px; padding-bottom: 14px;"
      />
      <base-table
        :page="1"
        :limit="999"
        :height="tableHR"
        :table-config="tablePropsR"
        :table-data="listR"
        :is-loading="listLoading"
        @emitFun="updateStatus"
      >
        <method-btn
          v-if="tableBtn.length"
          slot="handleBtn"
          :method-list="tableBtnR"
          :width="trueWidthR"
          @clickBtn="handleClickR"
        />
      </base-table>
    </div>
    <einspectionitem-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
    <einspectionitemlog-add v-if="addOrUpdateVisibleR" ref="addOrUpdateR" @refreshDataList="getInspectionItem" />
  </div>
</template>
<script>
import HeadForm from '@/components/basicData/HeadForm'
import i18n from '@/lang'
import topTitle from '@/components/TopTitle'
import BaseTable from '@/components/BaseTable'
import Pagination from '@/components/Pagination'
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import { tableHeight } from '@/utils/index'
import {
  equipmentList,
  inspectionLog,
  einspectionLogD,
  einspectionItList,
  einspectionItemLogU
} from '@/api/equipment/inspectionManager'
import einspectionitemAdd from './components/einspectionitemAdd.vue'
import einspectionitemlogAdd from './components/einspectionitemlogAdd.vue'
import { timeFormatter } from '@/filters'
import StatusBtn from './components/statusBtn.vue'
import statusTag from './components/statusTag.vue'
// import newBasicData from '@/filters/newBasicData'

import { Random } from 'mockjs'

const topBtnConfig = [
  {
    type: 'add',
    btnName: 'btn.add'
  }
]
const tableBtn = [
  {
    type: 'detail',
    btnName: 'btn.detail'
  },
  {
    type: 'edit',
    btnName: 'btn.edit'
  },
  {
    type: 'delete',
    btnName: 'btn.delete'
  }
]
const tableBtnR = [
  {
    type: 'detail',
    btnName: 'btn.detail'
  },
  {
    type: 'edit',
    btnName: 'btn.edit'
  }
]
const tableProps = [
  // {
  //   prop: 'createTime',
  //   label: i18n.t('module.equipmentManager.inspectionManage.addTime'),
  //   filter: timeFormatter
  // },
  {
    prop: 'equipmentName',
    label: i18n.t('module.equipmentManager.inspectionManage.equipmentName')
  },
  {
    prop: 'inspectionStartTime',
    label: i18n.t('module.equipmentManager.inspectionManage.startTime'),
    filter: timeFormatter,
    width: 160
  },
  {
    prop: 'inspectionEndTime',
    label: i18n.t('module.equipmentManager.inspectionManage.endTime'),
    filter: timeFormatter,
    width: 160
  },
  // {
  //   prop: 'source',
  //   label: i18n.t('module.equipmentManager.inspectionManage.source'),
  //   filter: newBasicData('1523941494259912706')
  // },
  {
    prop: 'inspectionWorker',
    label: i18n.t('module.equipmentManager.inspectionManage.inspectionWorker'),
    width: 150
  }
]
const tablePropsR = [
  {
    prop: 'inspectionItem',
    label: i18n.t('module.equipmentManager.inspectionManage.inspectionItem')
  },
  {
    prop: 'inspectionContent',
    label: i18n.t('module.equipmentManager.inspectionManage.inspectionContent')
  },
  {
    prop: 'status',
    label: i18n.t('module.equipmentManager.inspectionManage.completion'),
    subcomponent: StatusBtn,
    emitFullData: true
  },
  {
    prop: 'type',
    label: i18n.t('module.equipmentManager.inspectionManage.type'),
    subcomponent: statusTag,
    width: 100
  }
]
export default {
  name: 'InspectionRecord',
  components: { HeadForm, Pagination, BaseTable, MethodBtn, topTitle, einspectionitemAdd, einspectionitemlogAdd },
  data() {
    return {
      topBtnConfig,
      tableBtn,
      trueWidth: 110,
      trueWidthR: 80,
      tableH: tableHeight(280),
      highIndex: true,
      list: [],
      total: 0,
      listLoading: false,
      tableProps,
      listQuery: {
        current: 1,
        size: 20,
        equipmentId: '',
        startTime: '',
        endTime: ''
      },
      headFormConfig: [
        {
          type: 'select',
          label: this.$t('module.equipmentManager.inspectionManage.equipmentName'),
          selectOptions: [],
          param: 'equipmentId',
          width: 200,
          filterable: true
        },
        {
          type: 'datePicker',
          label: this.$t('module.basicData.knowledge.time'),
          dateType: 'daterange',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          rangeSeparator: '-',
          startPlaceholder: this.$t('module.basicData.knowledge.startTime'),
          endPlaceholder: this.$t('module.basicData.knowledge.endTime'),
          param: 'searchTime'
        },
        {
          type: 'button',
          btnName: 'btn.search',
          name: 'search',
          color: 'primary'
        }
      ],
      headFormValue: {},
      equipmentInspectionId: '',
      tableHR: tableHeight(280),
      tablePropsR,
      listR: [],
      tableBtnR,

      addOrUpdateVisible: false,
      addOrUpdateVisibleR: false
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(280)
      this.tableR = tableHeight(280)
    })
    this.getEquipmentList()
    this.getList()
  },
  methods: {
    // 获取设备list
    getEquipmentList() {
      equipmentList({
        current: 1,
        size: 999
      }).then(res => {
        if (res.data) {
          this.headFormConfig[0].selectOptions = res.data
        }
      })
    },
    handleClick(raw) {
      if (raw.type === 'delete') {
        this.$confirm(
          `${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.equipmentName}]?`,
          this.$t('module.basicData.visual.Tips'),
          {
            confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
            cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
            type: 'warning'
          }
        )
          .then(() => {
            einspectionLogD({
              id: raw.data.id
            }).then(res => {
              this.$message({
                message: this.$t('module.basicData.visual.success'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.listQuery.current = 1
                  this.getList()
                }
              })
            })
          })
          .catch(() => {})
      } else if (raw.type === 'detail') {
        this.addNew(raw.data.id, 'detail')
      } else if (raw.type === 'edit') {
        this.addNew(raw.data.id, 'edit')
      }
    },
    getList() {
      this.listLoading = true
      this.listQuery.equipmentId = this.headFormValue.equipmentId
      this.listQuery.startTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[0] + 'T00:00:00' : ''
      this.listQuery.endTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[1] + 'T23:59:59' : ''
      inspectionLog(this.listQuery).then(res => {
        if (res.data.records) {
          // this.list = res.data.records
          // 11-mes 修改模拟时间
          this.list = res.data.records.map(item => {
            let startDate = 2022 + '-' + '11-' + Random.integer(1, 29)
            let startHour = Random.integer(1, 22)
            return {
              ...item,
              inspectionStartTime:
                startDate + ' ' + (startHour < 10 ? '0' + startHour : '' + startHour) + Random.datetime(':mm:ss'),
              inspectionEndTime:
                startDate +
                ' ' +
                (startHour + 1 < 10 ? +'0' + (startHour + 1) : 1 + startHour + '') +
                Random.datetime(':mm:ss')
            }
          })
          // console.log('list;', this.list)
          this.equipmentInspectionId = this.list[0].id

          this.getInspectionItem()
        } else {
          this.list = []
          this.listR.splice(0, this.listR.length)
        }
        this.total = res.data.total
        this.listLoading = false
      })
    },
    getInspectionItem() {
      if (this.equipmentInspectionId) {
        this.listR.splice(0, this.listR.length)
        einspectionItList({
          equipmentInspectionId: this.equipmentInspectionId
        }).then(res => {
          if (res.data) {
            this.listR = res.data
          } else {
            this.listR.splice(0, this.listR.length)
          }
        })
      }
    },
    selectRow(val) {
      // 点击左侧列表
      this.equipmentInspectionId = val.id
      this.getInspectionItem()
    },
    // 新增
    addNew(id, name) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id, name)
      })
    },
    btnClick(val) {
      this.headFormValue = val
      // 如果点击的是搜索栏的其他按钮在这里继续写判断
      if (this.headFormValue.btnName === 'search') {
        this.listQuery.current = 1
        this.getList()
      }
    },
    clickTopBtn(val) {
      if (val === 'add') {
        this.addNew() // 新增
      }
    },
    // 右侧切换启停状态
    updateStatus(val) {
      einspectionItemLogU({
        id: val.data.id,
        status: val.data.status
      }).then(res => {
        this.$message({
          message: this.$t('module.basicData.visual.success'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.getInspectionItem()
          }
        })
      })
    },
    handleClickR(raw) {
      if (raw.type === 'detail' || raw.type === 'edit') {
        this.addOrUpdateVisibleR = true
        this.$nextTick(() => {
          this.$refs.addOrUpdateR.init(raw.data.id, raw.type)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding-top: 0;
  .left-container {
    display: inline-block;
    // width: 500px;
    width: 50%;
    border-right: 8px solid #f2f4f9;
    height: 100%;
    padding-top: 16px;
  }
  .right-container {
    display: inline-block;
    // width: calc(100% - 510px);
    width: 49%;
    vertical-align: top;
    height: 100%;
    padding-top: 23px;
  }
}
</style>
