<template>

  <el-container>
    <el-main>
      <el-row>
        <el-col :span="12">
          <el-input v-model="searchText" placeholder="请输入内容" prefix-icon="el-icon-search" clearable />
        </el-col>
        <el-col :span="6" :offset="6">
          <el-button style="float: right;" type="success" @click="() => {addDialogVisible = true; editData = null}">添加记录
          </el-button>
        </el-col>
      </el-row>
      <!-- <div class="test-div" /> -->
      <el-divider />

      <el-dialog
        title="添加记录"
        :visible.sync="addDialogVisible"
        width="70%"
        :close-on-click-modal="true"
        :show-close="true"
      >
        <el-card>
          <AddDialogForm ref="addDialogDom" :show.sync="addDialogVisible" :edit-data="editData" />

          <!-- <el-divider /> -->
          <!-- <el-button type="primary">添加</el-button>
          <el-button @click="addDialogVisible = false">取消</el-button> -->
          <!-- </el-form> -->

        </el-card>
      </el-dialog>

      <template>
        <el-card>
          <el-row>
            <el-col :span="12">
              <p>故障记录</p>
            </el-col>
            <el-col :span="12">
              <el-button v-if="false" style="float: right;" @click="clearFilter">清除筛选</el-button>
            </el-col>
          </el-row>

          <div v-if="false" class="filter-tag-div">
            <el-tag v-for="tag in selectedFilter" :key="tag.name" closable :type="tag.type">
              {{ tag.name }}
            </el-tag>
          </div>

          <el-table ref="table" class="table-style" :data="tableData" style="width: 100%" @filter-change="onTableFilterChange">
            <el-table-column prop="id" label="序号" width="36px" align="center" />
            <el-table-column prop="faultNumber" label="故障编号" width="54px" align="center" />
            <el-table-column prop="workingProcedure" label="工序名称" width="90px" align="center" />
            <el-table-column prop="deviceName" label="设备名称" width="180px" />
            <el-table-column prop="faultDate" label="故障日期" width="98px" align="center" />
            <el-table-column prop="level" label="事故分级" width="54px" align="center" />
            <el-table-column prop="describe" label="故障描述" width="136px" />
            <!-- <el-table-column prop="reasonDescribe" label="故障原因简述" width="136px" /> -->
            <el-table-column prop="reasonDescribe" label="故障原因简述" show-overflow-tooltip />
            <el-table-column prop="affectingProductionTime" label="影响生产时间" width="90px" align="center" />
            <el-table-column prop="faultTime" label="故障时间" width="54px" align="center" />

            <el-table-column label="事故损失">
              <el-table-column prop="repairLoss" label="修复损失(万元)" width="90px" align="center" />
              <el-table-column prop="yeildLoss" label="产量损失(吨)" width="90px" align="center" />
            </el-table-column>

            <el-table-column label="责任追究">
              <el-table-column prop="personLiable" label="责任人" width="72px" align="center" />
              <el-table-column prop="assessment" label="考核" width="90px" align="center" />
              <el-table-column prop="assessmentBasis" label="考核依据" width="54px" align="center" />
            </el-table-column>

            <el-table-column label="故障统计">
              <el-table-column prop="faultDiscipline" label="故障专业" width="54px" align="center" />
              <el-table-column prop="faultCause" label="故障原因" width="90px" align="center" />
              <el-table-column prop="faultType" label="故障分类" width="90px" align="center" />
              <el-table-column prop="faultSpecial" label="特殊故障" width="54px" align="center" />
              <el-table-column
                prop="integral"
                label="标准是否健全"
                width="70em"
                align="center"
              />
              <!-- <el-table-column
                prop="integral"
                label="标准是否健全"
                width="70em"
                align="center"
                :filters="settingToFilter(faultSetting.integral)"
                :filter-method="tableFilterHandler"
              /> -->
            </el-table-column>

            <el-table-column prop="remarks" label="备注" show-overflow-tooltip />

            <el-table-column fixed="right" label="操作" width="100px">
              <template slot-scope="scope">
                <div>
                  <!-- <el-button type="text" @click="editData(scope.row.id)">详细</el-button> -->
                  <el-button type="text" @click="onClickEditData(scope.row.id)">编辑</el-button>
                  <el-button type="text" @click="onClickDelData(scope.row.id)">删除</el-button>
                </div>
              </template>

            </el-table-column>

          </el-table>

          <div style="text-align: center; margin-top:24px;">
            <el-pagination background layout="prev, pager, next" :total="1000" />
          </div>

        </el-card>
      </template>
    </el-main>
  </el-container>
</template>

<script>

import AddDialogForm from './addDialogForm/index.vue'
import faultSetting from './fault_setting'

export default {
  name: 'RepairFault',
  components: {
    AddDialogForm
  },
  props: {},
  data() {
    return {
      addDialogVisible: false,
      searchText: '',

      faultSetting: faultSetting,
      selectedFilter: [],

      editData: null,
      tableData: [{
        id: 1,
        faultNumber: '#101',
        workingProcedure: '冷轧保障作业区',
        deviceName: '设备名称11',
        faultDate: '2012.1.31',
        level: '设备故障',
        describe: '罩式炉19#天车副钩电缆卷筒故障',
        reasonDescribe: 'Test01_打开损坏的电缆卷筒检查卷簧，发现卷簧从根部第2圈处断裂。卷筒在平时使用中无异常声音，内部无犯卡情况，卷簧断裂是因为卷簧机械疲劳导致，这个卷筒使用时间为8个多月，因此判断该卷簧质量存在问题',
        affectingProductionTime: '35分钟',

        faultTime: '',
        repairLoss: '',
        yeildLoss: '',

        personLiable: '许成龙',
        assessment: '',
        assessmentBasis: '',

        faultDiscipline: '',
        faultCause: '备件质量',
        faultType: '甲方故障',
        faultSpecial: '重复故障',
        integral: '标准不完善',

        remarks: ''
      }, {
        id: 2,
        workingProcedure: '冷轧保障作业区',
        faultNumber: '#102',
        deviceName: '设备名称22',
        faultDate: '2012.11.31',
        level: '设备故障',
        describe: '罩式炉19#天车副钩电缆卷筒故障',
        reasonDescribe: 'Test02_打开损坏的电缆卷筒检查卷簧，发现卷簧从根部第2圈处断裂。卷筒在平时使用中无异常声音，内部无犯卡情况，卷簧断裂是因为卷簧机械疲劳导致，这个卷筒使用时间为8个多月，因此判断该卷簧质量存在问题',
        affectingProductionTime: '35分钟',

        faultTime: '',
        repairLoss: '',
        yeildLoss: '',

        personLiable: '许成龙',
        assessment: '',
        assessmentBasis: '',

        faultDiscipline: '',
        faultCause: '备件质量',
        faultType: '甲方故障',
        special: false,
        integral: '标准健全',

        remarks: ''
      }]
    }
  },
  computed: {

  },
  created() { },
  mounted() {
    console.log('[Setting]', this.faultSetting)
  },
  methods: {
    onClickEditData(id) {
      // console.log('[Refs]', this.$refs)
      this.editData = null
      this.editData = this.findTableData(id)
      // if (this.$refs.addDialogDom) {
      //   this.$refs.addDialogDom.setEditData(this.editData)
      // }
      // this.$refs.addDialogDom.ttest()
      // this.$refs['addDialogDom'].ttest()
      // this.$refs['addDialogDom'].setEditData(this.findTableData(id))
      // this.editData = this.findTableData(id)
      // console.log('[Edit]', id, this.editData)

      this.addDialogVisible = true
    },
    onClickDelData(id) {
      console.log('[Edl]', id)
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    findTableData(id) {
      for (let i = 0; i < this.tableData.length; i++) {
        const item = this.tableData[i]
        if (parseInt(item.id) === id) {
          return item
        }
      }

      return null
    },

    // /////////////////////////////
    // filters
    // /////////////////////////////
    settingToFilter(data) {
      const retArray = []
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        retArray.push({
          text: item,
          value: item
        })
      }

      return retArray
    },
    tableFilterHandler(value, row, column) {
      console.log('[Filter]', value, column.property)
      console.log('[Filter-Column]', column.property)
      const property = column['property']
      console.log('[Filter-Row]', row[property])

      let addToSelectedArray = true
      for (let i = 0; i < this.selectedFilter.length; i++) {
        const item = this.selectedFilter[i]
        if (item.property === property && item.name === value) {
          addToSelectedArray = false
          break
        }
      }

      if (addToSelectedArray) {
        this.selectedFilter.push({
          property: property,
          name: value, type: ''
        })
      }

      return row[property] === value
    },

    onTableFilterChange(data) {
      console.log('[FilterChange]', data)
    },

    clearFilter(name) {
      this.$refs.table.clearFilter(name)

      const removeIndex = []
      if (name !== null) {
        for (let i = 0; i < this.selectedFilter.length; i++) {
          const item = this.selectedFilter[i]
          if (item.property === name) removeIndex.unshift(i)
        }

        for (let i = 0; i < removeIndex.length; i++) {
          this.selectedFilter.splice(removeIndex[i], 1)
        }
      } else {
        this.selectedFilter = []
      }
    }
  }
}
</script>

<style lang='stylus' >
  .test-div
    width: 120px
    height 120px
    background #f00
  .el-table th
    text-align: center !important
  .hover-height-div
    max-height: 120px
    &:hover
      max-height: auto
</style>
