<template>
  <div class="mod-config">
    <el-form :inline="true"  label-position="top" :model="searchData" @keyup.enter.native="getDataList()">
      <el-form-item :label="'反馈单编码'">
        <el-input v-model="searchData.feedBackID"  style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'设备编码'">
        <el-input v-model="searchData.objectID"  style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'计划执行人员编码'">
        <el-input v-model="searchData.planOperator"  style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label="'状态'">
        <el-select filterable v-model="searchData.status" style="width: 130px">
          <el-option label="全部" value=""></el-option>
          <el-option label="未开工" value="未开工"></el-option>
          <el-option label="已完工" value="已完工"></el-option>
          <el-option label="已取消" value="已取消"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'反馈日期：'">
        <el-date-picker
          style="width: 120px"
          v-model="searchData.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-top: 23px;">
        <laber style="margin-left: -9px;font-size: 19px">&#10142</laber>
      </el-form-item>
      <el-form-item  :label="' '">
        <el-date-picker
          style="width: 120px"
          v-model="searchData.endDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item  :label="' '">
        <el-button @click="getDataList()">查询</el-button>

<!--        <el-button  type="primary" @click="addModal()">新增</el-button>-->
      </el-form-item>
    </el-form>
    <el-table
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        :selectable="selectFlag"
        width="50">
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="100"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" v-if="scope.row.status=='未开工'" @click="cancelOrder(scope.row)">取消工单</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 100, 500, 1000]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>


    <Chooselist ref="baseList"  @getBaseData="getBaseData"></Chooselist>

  </div>
</template>

<script>
  import {
    eamFeedBackSearch,
    cancelOrder,

  } from "@/api/eam/eam.js"
  import Chooselist from '@/views/modules/common/Chooselist_eam'
  export default {
    components: {
      Chooselist
    },
    watch: {
      searchData: {
        deep: true,
        handler: function (newV, oldV) {
          this.searchData.groupID = this.searchData.groupID.toUpperCase()
        }
      },

      modalData: {
        deep: true,
        handler: function (newV, oldV) {
          this.modalData.groupID = this.modalData.groupID.toUpperCase()
        }
      }
    },
    data () {
      return {
        tagNo:'',
        searchData: {
          site: this.$store.state.user.site,
          feedBackID: '',
          objectID: '',
          planOperator: '',
          functionType: 'C',
          status: '',
          startDate:'',
          endDate:'',
          page: 1,
          limit: 10,
        },
        height: 200,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,

        dataList: [],
        dataListLoading: false,
        dataListSelections: [],
        modalFlag:false,
        modalDisableFlag:false,
        modalData:{
          flag:'',
          site: this.$store.state.user.site,
          groupID:'',
          groupDesc:'',
          active:'',
        },
        departmentList:[],
        // 展示列集
        columnList: [
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableSite',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'site',
            headerAlign: "center",
            align: "left",
            columnLabel: '工厂编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableFeedBackID',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'feedBackID',
            headerAlign: "center",
            align: "left",
            columnLabel: '反馈单号',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableFeedBackDesc',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'feedBackDesc',
            headerAlign: "center",
            align: "left",
            columnLabel: '反馈描述',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 180,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableDefectID',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'defectID',
            headerAlign: "center",
            align: "left",
            columnLabel: '故障代码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableDefectDesc',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'defectDesc',
            headerAlign: "center",
            align: "left",
            columnLabel: '故障原因',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 120,
          },

          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableObjectID',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'objectID',
            headerAlign: "center",
            align: "left",
            columnLabel: '设备编码',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableObjectDesc',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'objectDesc',
            headerAlign: "center",
            align: "left",
            columnLabel: '设备名称',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableStatus',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'status',
            headerAlign: "center",
            align: "left",
            columnLabel: '状态',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TablePlanOperatorName',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'planOperatorName',
            headerAlign: "center",
            align: "left",
            columnLabel: '计划机修人员',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableActualOperatorName',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'actualOperatorName',
            headerAlign: "center",
            align: "left",
            columnLabel: '实际机修人员',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableActualDefectDate',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'defectDate',
            headerAlign: "center",
            align: "left",
            columnLabel: '故障发现日期',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 130,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableActualCreatedDate',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'createdDate',
            headerAlign: "center",
            align: "left",
            columnLabel: '反馈时间',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 160,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableActualCreatedBy',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'createdBy',
            headerAlign: "center",
            align: "left",
            columnLabel: '反馈账号',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 100,
          },
          {
            userId: this.$store.state.user.name,
            functionId: 101020,
            serialNumber: '101020TableActualRemark',
            tableId: "101020Table",
            tableName: "common",
            columnProp: 'remark',
            headerAlign: "center",
            align: "left",
            columnLabel: '备注',
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 150,
          },
        ],

      }
    },
    mounted () {
      this.$nextTick(() => {
        this.height = window.innerHeight - 210
      })
    },
    created () {
      this.getDataList()
    },
    methods: {
      // 获取基础数据列表S
      getBaseList (val,type) {
        this.tagNo = val
        this.$nextTick(() => {
          let strVal = ''

          if (val === 201) {
            strVal = this.planOperator
            this.$refs.baseList.init(val, strVal)
          }
        })
      },
      /* 列表方法的回调 */
      getBaseData (val) {
        if (this.tagNo === 201) {
          this.planOperator = val.AdminID
          this.planOperatorName = val.AdminName
        }

      },
      // 获取数据列表
      getDataList () {
        this.searchData.limit = this.pageSize
        this.searchData.page = this.pageIndex
        eamFeedBackSearch(this.searchData).then(({data}) => {
          if (data.code == 0) {
            this.dataList = data.page.list
            this.pageIndex = data.page.currPage
            this.pageSize = data.page.pageSize
            this.totalPage = data.page.totalCount
          }
          this.dataListLoading = false
        })
      },

      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      cancelOrder(row){
        this.$confirm(`是否取消选定工单?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'

        }).then(() => {
          cancelOrder(row).then(({data}) => {
            if (data && data.code === 0) {
              this.getDataList()
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                }
              })
            } else {
              this.$alert(data.msg, '错误', {
                confirmButtonText: '确定'
              })
            }
          })
        }).catch(() => {
        })
      },
      selectFlag(row,index){
        if(row.status!='未开工'){
          return false;
        }else {
          return true;
        }
      },

    }
  }
</script>
