<template>
  <section class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <span>地区：{{info.proName + info.cityName + info.disName }}</span>
      </el-col>
      <el-col :span="6"><span>工单编号：{{info.workCode }}</span></el-col>
      <el-col :span="6">
        <span>告警等级：{{info.warningLevel==='1'?'一级': info.warningLevel==='2'?'二级':'三级'}}</span>
      </el-col>
      <el-col :span="6"><span>告警名称：{{info.warningName }}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"><span>产品名称：{{info.productName }}</span></el-col>
      <el-col :span="6"><span>所属客户：{{info.nickName }}</span></el-col>
      <el-col :span="6"><span>设备SN：{{info.deviceSn }}</span></el-col>
      <el-col :span="6"><span>告警状态：{{info.status }}</span></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"><span>工单状态：{{info.workStatus==='1'?'待接单': info.workStatus==='2'?'待回单':'已回单' }}</span></el-col>
      <el-col :span="6"><span>建单时间：{{info.createTime | formatDate }}</span></el-col>
    </el-row>
    <!-- 表格区域 -->
        <el-table v-loading="loading" :data="info.workStepList" style="width: 100%">
            <el-table-column prop="userName" align="center" label="操作人" min-width="150"></el-table-column>
            <el-table-column align="center" label="接单时间" min-width="150">
              <template slot-scope="scope">
                {{ scope.row.workGetTime | formatDate }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="回单时间" min-width="150">
              <template slot-scope="scope">
                {{ scope.row.workBackTime | formatDate }}
              </template>
            </el-table-column>
            <el-table-column prop="warningDetails" align="center" label="故障原因" min-width="150"></el-table-column>
            <el-table-column prop="workMethod" align="center" label="处理方法" min-width="150"></el-table-column>
        </el-table>
        <div class="submit-btn">
          <el-button type="primary" plain v-if="info.workStatus==='1'" @click="openMeet">接单</el-button>
          <el-button type="primary" plain v-else-if="info.workStatus==='2'" @click="getReturn">回单</el-button>
        </div>
        <!-- 回单的对话框 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogReturn"
          width="30%">
          <el-form :rules="rules" ref="ruleReturnForm" :model="query" label-width="80px">
            <el-form-item label="操作人：">
              {{info.workStepList?info.workStepList[0].userName:null}}
            </el-form-item>
            <el-form-item label="故障原因：" label-width="100px" prop="warningDetails">
              <el-input type="textarea" v-model="query.warningDetails"></el-input>
            </el-form-item>
            <el-form-item label="处理方法：" label-width="100px" prop="workMethod">
              <el-input type="textarea" v-model="query.workMethod"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogReturn = false">取 消</el-button>
            <el-button type="primary" @click="upReturn">确 定</el-button>
          </span>
        </el-dialog>
  </section>
</template>

<script>
import { info,modify } from '@/api/work/order';
import { getProvinceByCode } from "@/api/hardware/province";
export default {
  name: "TicketDetail",
  data () {
    return {
      loading:false,
      id: '',
      info: {},
      dialogReturn:false, // 回单对话框
      query: {
        warningDetails:'', // 故障原因
        workMethod:'', // 处理方法的消息
      },
      signal: [],
      signalUpdateTime: '',
      deviceTypeList: [
        { 'label': '锐能设备', 'value': 'rn', },
        { 'label': '铁塔设备', 'value': 'tt', },
      ],
      rules: {
          warningDetails: [
            { required: true, message: '请输入故障原因', trigger: 'blur' },
          ],
          workMethod: [
            { required: true, message: '请输入处理方法', trigger: 'blur' },
          ],
        }
    };
  },
  created () {
    let { id } = this.$route.query;
    if (!id) {
      this.msgError('无工单ID');
      this.$router.go(-1);
      return;
    }
    this.id = id;
    this.getDetail()
  },
  methods: {
    getDetail () {
      info(this.id).then(async ({ code, msg, info }) => { 
        console.log(code, msg, info)
        if (200 == code) {
          // info.proName = await this.getProvinceByCode(info.proCode);
          // info.cityName = await this.getProvinceByCode(info.cityCode);
          // info.disName = await this.getProvinceByCode(info.disCode);
          this.info = info;
          // if (info.deviceSignal) {
          //   let deviceSignal = JSON.parse(info.deviceSignal.signalJsonTurn);
          //   this.signal = deviceSignal.signal;
          //   this.signalUpdateTime = info.deviceSignal.updateTime;
          // }
        } else {
          this.msgError(msg);
        }
      })
    },
    async openMeet() {
        const boo = await this.$confirm(
        '此操作将此工单接单, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
       if (boo !== 'confirm') {
        return this.$message.info('您已取消接单操作')
      }
      // 接单事件
      const {code,msg} = await modify({
        userId: this.$store.getters.userId,
        workId: this.info.id
      })
      if(code!==200) return this.$message.error('接单失败')
        this.$message.success('接单成功')
        this.getDetail()
      },
      // 回单事件
      async getReturn(){
        this.dialogReturn=true
        console.log('点击回单了');
      },
      // 提交回单数据
      upReturn(){
        this.$refs.ruleReturnForm.validate(async valid=>{
          if (!valid) return this.$message.error('请输入必填项信息')
          const {code,msg} = await modify(Object.assign({
          userId: this.$store.getters.userId,
          workId: this.info.id,
        }, this.query))
        if(code!==200) return this.$message.error('回单失败')
        this.$message.success('回单成功')
        this.dialogReturn=false
        this.getDetail()
        })
      }, 
    getProvinceByCode (code) {
      return new Promise((resolve, reject) => {
        getProvinceByCode(code).then(({ code, msg, data }) => {
          if (code == 200) {
            resolve(data.cityName);
          } else {
            this.$message.error(msg);
            reject({ msg, code })
          }
        }).catch(error => {
          reject(error)
        })
      })
    },
  }

}
</script>

<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;
  }
  .el-table{
    margin-top: 50px;
  }
  .submit-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    .el-button{
      font-size: 20px;
    }
  }
</style>