<template>
  <div class="repairing">
    <el-row type="flex" class="row-bg titleBt MarB10" justify="space-between">
      <el-col :span="3">
        <span class="title">急修管理 / 急修中</span>
      </el-col>
    </el-row>
    <div class="repairTable">
      <div>
        <div class="totalTitle">
          <span>总记录条数</span>
          <i>{{listPage.total}}</i>
          <span>条</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{'background-color': '#fafafa',
    'font-weight':'800'}"
        style="width: 100%"
      >
        <!-- <el-table-column prop="registrationCode" label="电梯注册代码" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="projectName" label="项目名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="devicePosition" label="电梯位置" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column label="电梯状态" show-overflow-tooltip>
          <template slot-scope="scope" show-overflow-tooltip>
            <div>{{scope.row.liftCompanyStatus==1?"保养中":scope.row.liftCompanyStatus==2?"急修中":"停保"}}</div>
          </template>
        </el-table-column>-->
        <el-table-column prop="waitDuration" label="急修等待时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createName" label="发起人" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workerName" label="维修工" show-overflow-tooltip></el-table-column>
        <el-table-column label="召修原因" show-overflow-tooltip>
          <template slot-scope="scope" show-overflow-tooltip>
            <div>{{scope.row.repairReason==0?"其它":scope.row.repairReason==1?"停电":"故障"}}</div>
          </template>
        </el-table-column>
        <el-table-column label="召修来源" show-overflow-tooltip>
          <template slot-scope="rows">
            <div>{{rows.row.source==1?"物业":rows.row.source==2?"维保":"物联"}}</div>
          </template>
        </el-table-column>
        <el-table-column label="关人" show-overflow-tooltip>
          <template slot-scope="scope" show-overflow-tooltip>
            <div>{{scope.row.isTrapped==0?"否":"是"}}</div>
          </template>
        </el-table-column>
        <el-table-column label="紧急" show-overflow-tooltip>
          <template slot-scope="scope" show-overflow-tooltip>
            <div>{{scope.row.isCritical==0?"否":"是"}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="Address" label="状态" show-overflow-tooltip>
          <template slot-scope="scope" show-overflow-tooltip>
            <div>{{scope.row.status==-1?"暂停中":scope.row.status==0?"待修理":scope.row.status==1?"修理中":scope.row.status==2?"已完成":"已关闭"}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="170" fixed="right">
          <template slot-scope="Operation">
            <div>
              <el-button
                size="mini"
                round
                type="primary"
                plain
                @click="handleClick3(Operation.row)"
                v-if="Operation.row.status<1&&UrgentRepairBtn.UrgentRepairBtn107"
              >转派</el-button>
              <el-button
                size="mini"
                type="primary"
                plain
                @click="handleClick1(Operation.row)"
                round
              >查看</el-button>
              <el-button
                size="mini"
                plain
                type="warning"
                v-if="UrgentRepairBtn.UrgentRepairBtn108"
                @click="handleClick2(Operation.row)"
                round
              >关闭</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagenation">
      <span>
        <el-pagination
          background
          layout="prev, pager, next, sizes, total, jumper"
          :total="listPage.total"
          @current-change="handleCurr"
          @size-change="handleSizeChange"
          :page-sizes="[5, 15, 25, 50]"
          :page-size="listPage.pagesize"
          @prev-click="prevClickList"
          @next-click="nextClickList"
        ></el-pagination>
      </span>
    </div>
    <!-- DETAIL -->
    <el-dialog :visible.sync="DetailSate" class="D_I_A_Detail" title="急修详情" width="980px">
      <h6>故障电梯信息描述</h6>
      <el-row type="flex" justify="space-between" :gutter="12" class="marT20">
        <el-col :span="12">
          <el-row>
            <el-col :xs="4" :sm="4" :md="4" :lg="4">
              <p>项目名称</p>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
              <p class="BorderFrame">{{CheckDetails.projectName}}</p>
            </el-col>
            <el-col :xs="4" :sm="4" :md="4" :lg="4">
              <p>项目电梯</p>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
              <p
                class="BorderFrame"
              >{{"("+CheckDetails.devicePosition+")"+CheckDetails.registrationCode}}</p>
            </el-col>
          </el-row>
          <el-row class="marT10">
            <el-col :xs="4" :sm="4" :md="4" :lg="4">
              <p>召修原因</p>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
              <p
                class="BorderFrame"
              >{{CheckDetails.repairReason==0?"其它":CheckDetails.repairReason==1?"停电":"故障"}}</p>
            </el-col>
            <el-col :xs="4" :sm="4" :md="4" :lg="4">
              <p>是否关人</p>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2">
              <p class="BorderFrame">{{CheckDetails.isTrapped==0?"否":"是"}}</p>
            </el-col>
            <el-col :xs="4" :sm="4" :md="4" :lg="4">
              <p>是否紧急</p>
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2">
              <p class="BorderFrame">{{CheckDetails.isCritical==0?"否":"是"}}</p>
            </el-col>
          </el-row>
          <el-row class="marT10">
            <el-col :xs="4" :sm="4" :md="4" :lg="4">
              <p>报修人</p>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
              <p class="BorderFrame">{{CheckDetails.createName}}</p>
            </el-col>
            <el-col :xs="4" :sm="4" :md="4" :lg="4">
              <p>保修电话</p>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
              <p class="BorderFrame">{{CheckDetails.callerTel}}</p>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between" class="marT10">
            <el-col :span="4">
              <p>情况说明</p>
            </el-col>
            <el-col :span="20">
              <div class="Explain">{{CheckDetails.callerFaultDescription}}</div>
            </el-col>
          </el-row>
          <h6 class="marT10">急修人员</h6>
          <el-row class="marT10">
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              <p>指派急修人员</p>
            </el-col>
            <el-col :xs="14" :sm="14" :md="14" :lg="14">
              <p class="BorderFrame">{{CheckDetails.workerName}}</p>
            </el-col>
          </el-row>
          <h6 class="marT10">时间</h6>
          <div class="marT10 DetailsTable">
            <table>
              <tr>
                <th>状态</th>
                <th>时间</th>
              </tr>
              <tr>
                <td>报修时间</td>
                <td>{{CheckDetails.callerDate}}</td>
              </tr>
              <tr>
                <td>派工时间</td>
                <td>{{CheckDetails.assignTime}}</td>
              </tr>
              <tr>
                <td>接收时间</td>
                <td>{{CheckDetails.takingTime}}</td>
              </tr>
              <tr>
                <td>到达时间</td>
                <td>{{CheckDetails.arriveTime}}</td>
              </tr>
              <tr>
                <td>停止时间</td>
                <td>{{CheckDetails.stopDate}}</td>
              </tr>
              <tr>
                <td>恢复时间</td>
                <td>{{CheckDetails.recoveryDate}}</td>
              </tr>
            </table>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="amap-wrapper">
            <el-amap vid="amapContainer" :zoom="zoom" :center="markers.center" class="amap-demo">
              <el-amap-marker
                :position="markers.center"
                :visible="markers.visible"
                :draggable="markers.draggable"
              ></el-amap-marker>
            </el-amap>
            <!-- <span @click="emitEvent"></span> -->
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <!--  -->
    <!-- down -->
    <el-dialog :visible.sync="CloseRepair" title="关闭急修" width="500px" class="CloseRepair">
      <div class="plansNext">
        <div>
          <i class="iconfont iconjinggao"></i>
        </div>
        <div>
          <span>是否关闭本条急修？确认后此条维修单关闭</span>
        </div>
        <div>
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
        </div>
        <div>
          <span>
            <el-button size="small" plain type="info" @click="CloseRepair=false">取消</el-button>
            <el-button size="small" plain type="primary" @click="stopRepair">确定</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!--  -->
    <!--  -->
    <el-dialog :visible.sync="CloseRepair2" title="转派急修人员" width="450px">
      <div class="plansNext">
        <div class="MarB10">
          <span
            style="display:inline-block;padding-right:20px;line-height:40px;height:40px;"
          >指派急修人员:</span>
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.userId"
              :label="item.name"
              :value="item.userId"
            ></el-option>
          </el-select>
        </div>
        <div style="text-align:right">
          <span>
            <el-button @click="CloseRepair2=false" size="small" plain type="info">取消</el-button>
            <el-button size="small" plain type="primary" @click="isTransfer">确定</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!--  -->
  </div>
</template>

<script>
// 引入高德使用高德
import aMap from "vue-amap";
import { lazyAMapApiLoaderInstance } from "vue-amap";
// 初始化高德
aMap.initAMapApiLoader({
  key: "937eb4405db2a8895695506871c3a1d5",
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor"
  ],
  v: "1.4.4",
  uiVersion: "1.0.11"
});
export default {
  components: {},
  name: "project",
  data() {
    return {
      textarea: "",
      tableData: [],
      listPage: {
        pagesize: 15,
        currpage: 1,
        total: 0
      },
      DetailSate: false,
      CloseRepair: false,
      CloseRepair2: false,
      // map
      zoom: 14,
      markers: {
        center: [114.305252, 30.592762],
        position: [],
        visible: true,
        draggable: false,
        template: "<span>8888</span>"
      },
      options: [],
      value: null,
      oldEmery: null,
      CheckDetails: {},
      UrgentRepairBtn: {
        UrgentRepairBtn107: 0,
        UrgentRepairBtn108: 0
      }
    };
  },
  created() {
    var UrgentRepairBtn = {};
    this.getButton(106).then(result => {
      if (result.data.statusCode === "1") {
        UrgentRepairBtn = result.data.data;
        UrgentRepairBtn.map(item => {
          if (item.id == 107) {
            this.UrgentRepairBtn.UrgentRepairBtn107 = item.checked ? 1 : 0;
          } else if (item.id == 108) {
            this.UrgentRepairBtn.UrgentRepairBtn108 = item.checked ? 1 : 0;
          }
        });
      }
    });
  },
  mounted() {
    this.getRepairList();
  },
  methods: {
    handleClick1(a) {
      this.DetailSate = true;
      this.CheckDetails = a;

      this.markers = {
        content:
          '<i class="iconfont icondingwei" style="color:#51B0FF;font-size:32px;"></i>',
        center: a.position.length < 1 ? [114.305252, 30.592762] : a.position,
        visible: a.position.length < 1 ? false : true,
        position: [],
        draggable: false,
        template: "<span>8888</span>"
      };
    },
    // 点击页码
    handleCurr(val) {
      this.listPage.currpage = val;
      this.getRepairList();
    },
    // 分页显示条数
    handleSizeChange(val) {
      this.listPage.pagesize = val;
      this.listPage.currpage = 1;
      this.getRepairList();
    },
    // 上一页
    prevClickList(val) {
      this.listPage.currpage = val;
      this.getRepairList();
    },
    // 下一页
    nextClickList(val) {
      this.listPage.currpage = val;
      this.getRepairList();
    },
    handleClick2(a) {
      this.textarea = "";
      this.CloseRepair = true;
      this.oldEmery = a;
    },
    // 转派
    handleClick3(a) {
      this.value = null;
      this.CloseRepair2 = true;
      this.oldEmery = a;
      var url = "system/companyuser/getUrgentRepairs";
      var param = {
        companyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "0") {
          this.$message({
            type: "warning",
            message: res.message
          });
          this.options = [];
          this.CloseRepair2 = false;
        } else {
          this.options = res.data;
        }
      });
    },
    // 获取急修列表
    getRepairList() {
      var url = "business/emergency/emergency-repair/list";
      var param = {
        pageNum: this.listPage.currpage,
        pageSize: this.listPage.pagesize,
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
        // mtCompanyId: "1001102106531"
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "0") {
          this.$message({
            message: res.message,
            type: "warning"
          });
        } else {
          this.tableData = res.data.page.rows;
          this.listPage.currpage = res.data.pageNum;
          this.listPage.total = res.data.page.total;
        }
      });
    },
    // 确定转派
    isTransfer() {
      var url = "business/emergency/emergency-repair/transfer";
      var param = { id: this.oldEmery.id, workerId: this.value };
      if (this.value == null)
        return this.$message({ type: "warning", message: "请选择维保工" });
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.$message({
            type: "success",
            message: res.message
          });
          this.getRepairList();
          this.CloseRepair2 = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 停止急修
    stopRepair() {
      var url = "business/emergency/emergency-repair/close";
      var param = { id: this.oldEmery.id, closeReason: this.textarea };
      if (this.textarea == "")
        return this.$message({ type: "warning", message: "请填写原因" });
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.$message({
            type: "success",
            message: res.message
          });
          this.getRepairList();
          this.CloseRepair = false;
        } else {
          this.$message.error(res.message);
        }
      });
    }
  }
};
</script>

<style lang="stylus">
.repairing {
  background: #fff;
  padding: 10px;
}
</style>

