<template>
  <div class="pd10">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <Area @click="handleNodeClick" ref="area"></Area>
      </el-form-item>

      <el-form-item>
        <Timeinterval :interval="1" ref="interval"></Timeinterval>
      </el-form-item>

      <el-form-item label="工单状态:">
        <el-select v-model="form.orderStatus" clearable placeholder="请选择工单状态">
          <el-option v-for="item in workOrderStatusList" :key="item.code" :label="item.name"
            :value="item.code"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" class="ml10" icon="el-icon-search" @click="pageListInit()">查询</el-button>
        <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
      </el-form-item>
      <el-form-item style="float: right;margin-right: 10px">
        <el-button type="primary" icon="el-icon-upload" @click="uploadGw">上报反馈措施</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="24">
        <vxe-table :data="pageData" :height="height" border size="mini" ref="workOrderTable" style="width: 100%"
          v-loading="isLoading" header-cell-class-name="table_header" @checkbox-all="selectAllChangeEvent"
          @checkbox-change="handleSelectionChange">
          <vxe-table-column key="checkboxs" type="checkbox" align="center" width="55"></vxe-table-column>

          <template v-for="(item, index) in tableHeaderQualitystatistics">
            <vxe-table-column align="center" :field="item.prop" :title="item.label" :key="index" :min-width="item.width"
              :formatter="tableDateFilter">
            </vxe-table-column>
          </template>

          <vxe-table-column key="orderStatus" field="orderStatus" title="工单状态" fixed="right" align="center" width="100">
            <template slot-scope="scope">
              <el-tag type="primary" size="small" style="color: #fc0303; background: #ecf5ff"
                v-if="scope.row.orderStatus == '01'">
                未处理
              </el-tag>
              <el-tag type="primary" size="small" style="color: #3d34fc; background: #f0f9eb"
                v-if="scope.row.orderStatus == '02'">
                处理中
              </el-tag>
              <el-tag type="primary" size="small" style="color: #f3a508; background: #f4f4f5"
                v-if="scope.row.orderStatus == '03'">
                已上报
              </el-tag>
              <el-tag type="primary" size="small" style="color: #4ba203; background: #f4f4f5"
                v-if="scope.row.orderStatus == '04'">
                已闭环
              </el-tag>

            </template>
          </vxe-table-column>

          <vxe-table-column key="operate" field="" show-overflow align="center" title="操作" min-width="200px"
            fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="open(scope.row)">反馈填写</el-button>

            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination background align="right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageNum" :page-sizes="[20, 30, 40, 50, 100]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="pageData.length" class="mt10"></el-pagination>
      </el-col>
    </el-row>


    <el-dialog title="工单反馈信息填写" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form style="height: 200px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
        class="demo-ruleForm pd10">
        <el-form-item label="处理措施" prop="handlingMeasures">
          <el-input type="textarea" :rows="4" v-model="ruleForm.handlingMeasures"></el-input>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'
import { pageList, feedBackAdd, receiveFeedbackInfo } from '@/api/workOrder/workOrder'
import { dicData } from "@/assets/commjs/dictypeData";

export default {
  components: { Area, Timeinterval },
  data() {
    return {
      vh: '',
      height: null,
      isLoading: false,
      form: {
        searchEndTime: '',
        maintainerId: '',
        searchBeginTime: '',
        type: '',
        orderStatus: "",
      },
      dialogVisible: false,
      ruleForm: {
        handlingMeasures: ''
      },
      rules: {

        handlingMeasures: [
          { required: true, message: '请填写处理措施', trigger: 'blur' }
        ]
      },

      workOrderStatusList: [],
      workOrderTypeList: [],
      workBusinessSortList: [],
      workOrderSourceList: [],


      multipleSelection: [],


      tableHeaderQualitystatistics: [

        { prop: 'provinceName', label: '省公司', width: 180 },
        { prop: 'cityOrgName', label: '市公司', width: 180 },
        { prop: 'orgLevel', label: '单位等级', width: 100 },
        { prop: 'maintainerName', label: '运维单位', width: 180 },
        { prop: 'maintcrewName', label: '运维班组', width: 180 },
        { prop: 'orderId', label: '工单编号', width: 160 },
        { prop: 'orderType', label: '工单类型', width: 120 },

        { prop: 'orderSource', label: '工单来源', width: 120 },
        { prop: 'businessType', label: '业务分类', width: 300 },
        { prop: 'orderContent', label: '工单内容', width: 300, showOverflow: true },
        { prop: 'eventTime', label: '事件时间', width: 120 },
        { prop: 'distributeTime', label: '下发时间', width: 150 },
        { prop: 'distributeUser', label: '下发人员', width: 120 },
        { prop: 'planRectificationTime', label: '要求整改时间', width: 120 },
        { prop: 'closedLoopTime', label: '闭环时间', width: 150 },

        { prop: 'isFeedback', label: '是否反馈', width: 120 },
        { prop: 'feedbackUser', label: '反馈人员', width: 120 },
        { prop: 'feedbackTime', label: '反馈时间', width: 120 },
        { prop: 'handlingMeasures', label: '处理措施', width: 120, showOverflow: true },
        { prop: 'receiveTime', label: '接收时间', width: 150 },
        { prop: 'uploadStatus', label: '上报状态', width: 120 },
        { prop: 'uploadTime', label: '上报时间', width: 120 },


      ],
      pageData: [],
      pageNum: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 20 // 每页的数据条数
    }
  },
  created() {

    this.workOrderStatusList = dicData("Gw_Work_Order_Status", [])
    this.workOrderTypeList = dicData("Gw_Work_Order_Type", [])
    this.workBusinessSortList = dicData("Gw_Business_Sort", [])
    this.workOrderSourceList = dicData("Gw_Work_Order_Source", [])
    this.form.maintainerId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
    console.log(this.workOrderTypeList)

  },
  mounted() {
    this.pageListInit()
    this.setHeight()
    window.addEventListener('resize', this.setHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setHeight)
  },
  methods: {
    setHeight() {
      this.height = window.sessionStorage.getItem('appheight') - 110
    },
    //获取主网运行指标统计数据
    pageListInit() {
      this.isLoading = true
      this.form.searchBeginTime = this.$refs.interval.timeValue[0]
      this.form.searchEndTime = this.$refs.interval.timeValue[1]
      this.form.pageNum = this.pageNum
      this.form.pageSize = this.pageSize
      pageList(this.form).then(res => {
        this.pageData = res.data.records
        this.isLoading = false
      })
    },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
      this.form.maintainerId = data.id
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val
      this.pageListInit()
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.pageNum = val
      this.pageListInit()
    },
    //重置
    Reset() {
      this.$refs.area.form.valueTitle = '全国'
      this.$refs.interval.intervald = 1
    },
    //导出
    exportEvent() {
      this.$refs.workOrderTable.exportData({
        filename: 'export', // 文件名字
        sheetName: 'Sheet1',
        type: 'xlsx', //导出文件类型 xlsx 和 csv
        useStyle: true,
        data: this.pageData
      })
    },

    //工单
    open(row) {
      this.ruleForm.objId = row.objId
      if (row.handlingMeasures) {
        if (row.handlingMeasures != null && row.handlingMeasures != '') {
          this.ruleForm.handlingMeasures = row.handlingMeasures
        }
      }
      this.dialogVisible = true;
    },
    openDown(row) {

    },

    handleClose() {
      this.resetForm('ruleForm')
      this.dialogVisible = false;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          feedBackAdd(this.ruleForm).then(res => {
            this.$message({
              message: "填写成功!",
              type: "success",
            });
            this.handleClose()
            this.pageListInit()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },


    //上报网公司按钮触发
    uploadGw() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: '请选择一条工单反馈上送!!!',
          type: 'warning'
        })
        return
      }

      let flag = this.multipleSelection.some(item => item.orderStatus == '04')
      if (flag) {
        this.$message({
          showClose: true,
          message: '请选择未闭环的工单反馈上送!!!',
          type: 'warning'
        })
        return
      }


      this.$confirm('是否确认反馈上送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let planIds = []
        this.multipleSelection.forEach(item => {
          planIds.push(item.objId)
        })

        receiveFeedbackInfo(planIds).then(res => {
          if ((res.code == 'A0000')) {
            this.$message({
              type: 'success',
              message: res.message
            })
          }
          this.onSubmit()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消上送'
        })
      })

    },


    handleSelectionChange(val) {
      this.multipleSelection = val.records
    },
    selectAllChangeEvent(val) {
      this.multipleSelection = val.records
    },

    tableDateFilter(row, column) {
      if (row.column.property == 'orgLevel') {
        if ("3" == row.row.orgLevel) {
          return "省"
        } else {
          return "市"
        }
      } else if (row.column.property == 'orderType') {
        let title = ''
        this.workOrderTypeList.forEach(item => {
          if (item.code == row.row.orderType) {
            title = item.name
          }
        })
        console.log(title)
        return title
      } else if (row.column.property == 'businessType') {
        let title = ''
        this.workBusinessSortList.forEach(item => {
          if (item.code == row.row.businessType) {
            title = item.name
          }
        })
        return title
      } else if (row.column.property == 'orderSource') {
        let title = ''
        this.workOrderSourceList.forEach(item => {
          if (item.code == row.row.orderSource) {
            title = item.name
          }
        })
        return title
      } else if (row.column.property == 'isFeedback') {
        if ("0" == row.row.isFeedback) {
          return "否"
        } else {
          return "是"
        }

      } else if (row.column.property == 'uploadStatus') {
        if ("0" == row.row.uploadStatus) {
          return "否"
        } else {
          return "是"
        }

      } else {
        return row.row[row.column.property]
      }
    }

  }
}
</script>
<style lang="less" scoped></style>
