<template>
  <!-- 基本信息 -->
  <div class="fullHeight">
  <!-- <vue-scroll style="height: 100%"> -->

    <div class="basicInfo">
      <div class="searchBox whiteBlock">
        <el-form
          :inline="true"
          size="medium"
          class="demo-form-inline"
        >
          <!-- <el-form-item :label="$t('message.lifter.devNumber')">
            <el-input
              v-model="devSn"
              :placeholder="
                $t('message.lifter.pleaseSelect') +
                $t('message.lifter.devNumber')
              "
            ></el-input>
          </el-form-item>-->

          <el-form-item>
            <!-- <el-button type="primary" @click="onSubmit" plain>{{
              $t("message.lifter.demand")
            }}</el-button>  -->

            <!-- 刷新 -->
            <el-button type="warning" plain @click="getLifterList">{{
              $t("message.lifter.refresh")
            }}</el-button>
            <!-- 新增 -->
            <el-button type="primary" @click="addLifterBtn">{{ $t("message.lifter.add") }}</el-button>
          </el-form-item>
        </el-form>
        <!-- 对接协议下载 -->
        <span class="downloadBtn primaryText" @click="downloadFn">{{ $t("message.lifter.protocolDownload") }}</span>
      </div>
      <div class="table_wrap whiteBlock">
        <el-table
          :data="tableData"
          class="tables"
          style="width: 100%"
          height="600px"
        >
        <!-- 设备名称 -->
          <el-table-column prop="devName" :label="$t('message.lifter.devName')"> </el-table-column>
          <!-- 设备编号 -->
          <el-table-column prop="devSn" :label="$t('message.lifter.devNumber')"> </el-table-column>
          <!-- 最大高度(m) -->
          <el-table-column prop="maxHeight" :label="$t('message.lifter.maximumHeight')">
          </el-table-column>
          <!-- 工作循环最大载重 -->
          <el-table-column prop="maxLoad" :label="$t('message.lifter.maximumPayload')">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column prop="address" align="left" :label="$t('message.lifter.operation')">
            <template style="text-align: right"  slot-scope="scope">
              <div class="tableBtns">
                <!-- <el-button
                  class="operationText"
                  type="text"
                  @click="showDriver = true"
                  >详情</el-button
                > -->
                <div class="operationText" @click="editBtn(scope.row)">
                  <img src="@/assets/images/icon-edit.png" />
                  <!-- 编辑 -->
                  <span>{{ $t("message.lifter.edit") }}</span>
                </div>
                <div class="operationText" @click="deleteBtn(scope.row)">
                  <img src="@/assets/images/icon-delete.png" />
                  <!-- 删除 -->
                  <span>{{ $t("message.lifter.delete") }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          class="pagerBox"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
          background
        ></el-pagination> -->
      </div>
    </div>

    <!--配置模块-->
    <el-dialog
      :modal-append-to-body="false"
      :title="lifterTitle"
      :visible.sync="lifterCraneDialog"
      width="680px"
      :close-on-click-modal="false"
    >
      <div class="dialog_content">
        <el-form
          :model="lifterForm"
          :rules="rules"
          ref="lifterForm"
          label-width="130px"
          class="demo-lifterForm" size="medium"
        >
          <!-- 设备名称 -->
          <el-form-item :label="$t('message.lifter.devName')" prop="devName">
            <el-input v-model="lifterForm.devName"></el-input>
          </el-form-item>
          <!-- 设备编号 -->
          <el-form-item :label="$t('message.lifter.devNumber')" prop="devSn">
            <!-- 2022-06-08 注释 -->
            <!-- <el-input
              v-model="lifterForm.devSn"
              :disabled="true"
              :placeholder="$t('message.lifter.systemGeneration')"
            ></el-input> -->
            <el-input
              v-model="lifterForm.devSn"
              :disabled="lifterTitle == $t('message.lifter.newElevator') ? false : true"
              :placeholder="$t('message.lifter.systemGeneration')"
            ></el-input>
            <!-- systemGeneration 系统生成 -->
          </el-form-item>
          <!-- 机械设备备案号 -->
          <el-form-item :label="$t('message.lifter.machineryRecordNo')" prop="registNo">
            <el-input v-model="lifterForm.registNo"></el-input>
          </el-form-item>
          <!-- 最大高度(m) -->
          <el-form-item :label="$t('message.lifter.maximumHeight')" prop="maxHeight">
            <el-input v-model="lifterForm.maxHeight"  type="number"></el-input>
          </el-form-item>
          <!-- 最大载重(kg) -->
          <el-form-item :label="$t('message.lifter.maximumPayload')" prop="maxLoad" >
            <el-input v-model="lifterForm.maxLoad"  type="number"></el-input>
          </el-form-item>
          <!-- 总楼层数 -->
          <el-form-item :label="$t('message.lifter.totalFloors')" prop="totalFloor">
            <el-input type="number" v-model="lifterForm.totalFloor"></el-input>
          </el-form-item>
          <!-- 升降机操作人员 liftOperator   司机 driver  -->
          <el-form-item :label="company == 'longguang'? $t('message.lifter.liftOperator') : $t('message.lifter.driver') " prop="recordNumber">
            <el-select
              v-model="lifterForm.driverList"
              filterable
              multiple
              collapse-tags
              style="width: 100%"
              :placeholder="$t('message.lifter.pleaseSelect')"
            >
              <el-option
                v-for="item in driverList"
                :key="item.id"
                :label="item.workerName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 摄像头 -->
          <el-form-item :label="$t('message.lifter.camera')" prop="recordNumber">
            <el-select
              v-model="lifterForm.videoList"
              multiple
              collapse-tags
              style="width: 100%"
              :placeholder="$t('message.lifter.pleaseSelect')"
            >
              <el-option
                v-for="item in videoList"
                :key="item.itemId"
                :label="item.videoName"
                :value="item.itemId+''"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 报警推送人 -->
          <el-form-item :label="$t('message.lifter.alarmPusher')" prop="recordNumber" v-if="!this.editType">
            <el-select
              v-model="lifterForm.alarmPushWorkerId"
              filterable
              multiple
              collapse-tags
              style="width: 100%"
              :placeholder="$t('message.lifter.pleaseSelect')"
            >
              <el-option
                v-for="item in accountList"
                :key="item.userId"
                :label="item.realName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 总包单位 -->
          <el-form-item v-if="company == 'longguang'" :label="$t('message.lifter.generalContracting')" prop="generalContractorsId">
                <el-select
                  v-model="lifterForm.generalContractorsId"
                  filterable
                  style="width: 100%"
                  :placeholder="$t('message.lifter.pleaseSelect')"
                >
                  <el-option
                      v-for="item in enterpriseInfoList"
                      :key="item.id+'d'"
                      :label="item.enterpriseName"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>
          </el-form-item>

        </el-form>
        <div class="dialog-footer">
          <!-- 取 消 -->
          <el-button
            class="cancleBtn"
            @click="lifterCraneDialog = false"
            icon="el-icon-circle-close"
            size="medium"
            >{{ $t('message.lifter.cancel') }}</el-button
          >
          <!-- 确 定 -->
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="saveLifterBtn"
            size="medium"
            >{{ $t('message.lifter.determine') }}</el-button
          >
        </div>
      </div>
    </el-dialog>
  <!-- </vue-scroll> -->
  </div>
</template>
<script>
import {
  getWorkerInfoListApi,
  getVideoItemListApi,
  addLifterApi,
  getLifterListApi,
  getLifterDetailApi,
  deleteLifterApi,
  editLifterApi

} from "@/assets/js/api/lifter";
import {
  getEnterpriseInfoList
} from "@/assets/js/api/laborPerson";
import {
  getProjectChilderSystemUserListApi
} from "@/assets/js/api/configManage";
export default {
  data() {
    return {
      enterpriseInfoList: [],
      company:COMPANY,
      driverList: [],
      videoList: [],
      lifterTitle: this.$t('message.lifter.newElevator'), // 新增升降机
      projectSn: "",
      devSn:'',
      lifterForm: {
        devName: "",
        devSn: "",
        registNo: "",
        maxHeight: "",
        maxLoad: "",
        driverList: "",
        videoList: "",
        totalFloor: "",
        generalContractorsId: "",
        alarmPushWorkerId:[],
      },
      rules: {
        devName: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      editType:false,
      lifterCraneDialog: false,
      showDriver: false,
      accountList: []
    };
  },

  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getLifterList();
    this.selectEnterpriseInfoList()
  },

  methods: {
    selectEnterpriseInfoList(){
      getEnterpriseInfoList({
        enterpriseTypeId: 9,
        projectSn: this.projectSn
      }).then(res=>{
        console.log(res)
        if(res.code == 200){
          this.enterpriseInfoList = res.result
        }
      })
    },
     getAccountList() {
        getProjectChilderSystemUserListApi({ projectSn: this.projectSn }).then((result) => {
                this.accountList = result.result;
                console.log(' this.accountList====', this.accountList);
            }
        );
    },
    downloadFn(){
                window.open('/doc/'+this.$t('message.lifter.dockingProtocol')+'.docx')
                // dockingProtocol 升降机对外对接协议
            },
    //获取列表数据
    getLifterList() {
      let data = {
        projectSn: this.projectSn,
      };
      getLifterListApi(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result;
        }
      });
    },

    //新增 按钮
    addLifterBtn() {
      this.lifterCraneDialog = true;
      this.lifterTitle = this.$t('message.lifter.newElevator'); // 新增升降机
      this.editType = false;
      this.lifterForm = {
        devName: "",
        devSn: "",
        registNo: "",
        maxHeight: "",
        maxLoad: "",
        driverList: "",
        videoList: "",
        totalFloor: "",
        generalContractorsId: ""
      };
      this.getWorkerInfoList();
      this.getVideoItemList();
      this.getAccountList()
    },

    //获取司机列表
    getWorkerInfoList() {
      let data = {
        projectSn: this.projectSn,
      };
      getWorkerInfoListApi(data).then((res) => {
        if (res.code == 200) {
          this.driverList = res.result;
        }
      });
    },

    //获取摄像机列表
    getVideoItemList() {
      let data = {
        projectSn: this.projectSn,
      };
      getVideoItemListApi(data).then((res) => {
        if (res.code == 200) {
          this.videoList = res.result.list;
          console.log('videoList=========',this.videoList,);
        }
      });
    },


    // 编辑按钮
    editBtn(val) {
      console.log(val)
      this.lifterCraneDialog = true;
      this.lifterTitle= this.$t('message.lifter.editLift'); // 编辑升降机
      this.editType = true;
      this.lifterForm = val;
      this.getWorkerInfoList();
      this.getVideoItemList();
      this.getDetailsData(val.id);
      this.getAccountList()
      // this.lifterTitle.alarmPushWorkerId=val.alarmPushWorkerId .split(',')
      //     .map((item) => String(item))
    },

    //删除
    deleteBtn(val) {
      // promptToDelete此操作将永久删除该数据   tips提示  determine确 定  cancel取 消
      this.$confirm(this.$t('message.lifter.promptToDelete'), this.$t('message.lifter.tips'), {
        confirmButtonText: this.$t('message.lifter.determine'),
        cancelButtonText: this.$t('message.lifter.cancel'),
        type: "warning",
      }).then(() => {
          let data = {
            id: val.id,
          };
          deleteLifterApi(data).then((res) => {
            if(res.code==200){
              this.$message({
                type: "success",
                message: this.$t('message.lifter.deleteSucceeded'),
              });
              // deleteSucceeded 删除成功
              this.getLifterList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t('message.lifter.deletionCancelled'),
          });
          // deletionCancelled 已取消删除
        });
    },

    // 查询设备详情
    getDetailsData(id) {
      let data = {
        id,
      };
      getLifterDetailApi(data).then((res) => {
        if (res.code == 200) {
          this.lifterForm = res.result;
          let workerIdArr = [];
          let videoItemIdArr = [];
          for (let i = 0; i < res.result.driverList.length; i++) {
            workerIdArr.push(res.result.driverList[i].workerId);
          }
          for (let i = 0; i < res.result.videoList.length; i++) {
            videoItemIdArr.push(res.result.videoList[i].videoItemId);
          }
          this.lifterForm.driverList = workerIdArr;
          this.lifterForm.videoList = videoItemIdArr;
        }
      });
    },

    //新增 保存
    saveLifterBtn() {

      this.$refs["lifterForm"].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.lifterForm));
          data.projectSn = this.projectSn;
          let driverArr = [];
          let videoArr = [];
          //循环选中的司机
          for (let i = 0; i < data.driverList.length; i++) {
            let obj = { workerId: data.driverList[i] };
            driverArr.push(obj);
          }
          //循环选中的摄像头
          for (let i = 0; i < data.videoList.length; i++) {
            let obj = { videoItemId: data.videoList[i] };
            videoArr.push(obj);
          }
          data.driverList = driverArr;
          data.videoList = videoArr;
          //新增
          console.log(data)
          if(!this.editType){
            data.alarmPushWorkerId= data.alarmPushWorkerId?data.alarmPushWorkerId.join(','):''
              addLifterApi(data).then((res) => {
                if (res.code == 200) {
                  this.lifterCraneDialog = false;
                  this.getLifterList();
                  this.$message.success(this.$t('message.lifter.successfullyAdded'))
                  // successfullyAdded 新增成功
                }
              });
          }else{
            //编辑
            editLifterApi(data).then(res=>{
                 if (res.code == 200) {
                  this.lifterCraneDialog = false;
                  this.getLifterList();
                  this.$message.success(this.$t('message.lifter.editSucceeded'))
                  // editSucceeded 编辑成功
                }
            })

          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.basicInfo {
  width: 100%;
  height: 100%;
  .title {
    padding: 0 20px;
    padding-top: 17px;
    height: 70px;
    box-sizing: border-box;
  }
  .content {
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 720px;
  }
}
.operationText {
  display: flex;
  align-items: center;
}
.searchBox{
  position: relative;
}
.downloadBtn{
        position: absolute;
        right: 20px;
        top: 30px;
        text-decoration: underline;
        cursor: pointer;
    }
</style>
