<template>
  <div class="content">
    <div class="search-box">
      <el-button type="primary" size="medium" @click="addTunnel">新增隧道</el-button>
      <!-- <el-button type="warning" plain size="medium" @click="refresh">刷新</el-button> -->
    </div>
    <div class="table-box">
      <el-table :data="tableData" class="tables" height="560" style="width: 100%">
        <el-table-column align="center" label="隧道名称" prop="tunnelName"></el-table-column>
        <el-table-column align="center" label="隧道方向" prop="direction">
          <template slot-scope="scoped">{{ scoped.row.direction == 1 ? '从左到右' : '从右到左' }}</template>
        </el-table-column>
        <el-table-column align="center" label="隧道ID" prop="tunnelId"> </el-table-column>
        <el-table-column align="center" label="隧道长度（m）" prop="tunnelLength"> </el-table-column>
        <el-table-column align="center" label="施工进度（m）" prop="constructionProgressBegin">
          <template slot-scope="scoped">{{ scoped.row.constructionProgressBegin }}/{{ scoped.row.constructionProgressEnd }}</template>
        </el-table-column>
        <el-table-column align="center" label="隧道图" prop="createTime">
          <template slot-scope="scoped">
            <img
              v-if="scoped.row.planarGraph"
              :src="$store.state.FILEURL + JSON.parse(scoped.row.planarGraph)[0].url"
              :preview="$store.state.FILEURL + JSON.parse(scoped.row.planarGraph)[0].url"
              class="tunnel-img"
            />
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scoped">
            <!-- <el-button type="text" @click="editTunnel(scoped.row)">编辑</el-button>
            <el-button type="text" @click="deleteTunnel(scoped.row)">删除</el-button> -->
            <div class="tableBtns">
              <div @click="editTunnel(scoped.row)" class="operationText">
                <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                <span>编辑</span>
              </div>
              <div @click="deleteTunnel(scoped.row)" class="operationText">
                <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
                <span>删除</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="Number(total)"
        background
      ></el-pagination>
    </div>

    <!-- 新增隧道弹框 -->
    <el-dialog :modal-append-to-body="false" @close="close" :title="title" :visible.sync="tunnelDialog" width="667px">
      <div class="dialog_content">
        <el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-width="90px" class="dialogFormBox">
          <el-form-item label="隧道名称" prop="tunnelName">
            <el-input v-model="addEditForm.tunnelName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="隧道方向" prop="direction">
            <el-radio-group v-model="addEditForm.direction">
              <el-radio :label="1">从左到右</el-radio>
              <el-radio :label="2">从右到左</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="隧道ID" prop="tunnelId">
            <el-input v-model="addEditForm.tunnelId" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label-width="115px" label="隧道长度（m）" prop="tunnelLength" style="margin-left: -15px">
            <el-input style="margin-left: -10px" v-model="addEditForm.tunnelLength" placeholder="请输入" type="number"></el-input>
          </el-form-item>
          <el-form-item label-width="115px" label="施工进度（m）" prop="constructionProgressBegin" style="margin-left: -15px">
            <el-input class="smallInput1" type="number" v-model="addEditForm.constructionProgressBegin"></el-input>/
            <el-input class="smallInput2" type="number" v-model="addEditForm.constructionProgressEnd"></el-input>
          </el-form-item>
          <el-form-item class="labeInput" label="Y值随机范围（px）" prop="yvalueRandomRangeStart" style="margin-left: -10px">
            <el-input
              style="margin-left: -10px"
              class="smallInput1"
              v-model="addEditForm.yvalueRandomRangeStart"
              @change="inputNumber"
              type="number"
            ></el-input>
            -
            <el-input class="smallInput2" v-model="addEditForm.yvalueRandomRangeEnd" @change="inputNumber2" type="number"></el-input>
          </el-form-item>
          <el-form-item label-width="155px" label="矫正人员图标x方向" prop="correctorIconXDirection" style="margin-left: -55px">
            <el-input
              oninput="if(value<=0)value=''"
              style="margin-left: -10px"
              v-model="addEditForm.correctorIconXDirection"
              placeholder="请输入"
              type="number"
            ></el-input>
          </el-form-item>
          <el-form-item label="比例尺" prop="scale">
            <el-input v-model="addEditForm.scale" placeholder="请输入" type="number"></el-input>
          </el-form-item>
          <!-- 隧道图 -->
          <el-form-item label="隧道图" prop="tunnelGraph">
            <el-upload
              :action="$store.state.UPLOADURL"
              :show-file-list="false"
              :limit="1"
              name="files"
              :file-list="fileList"
              :on-success="handleSuccess"
            >
              <div class="tunnel-img-box" v-if="fileList.length > 0">
                <img :src="$store.state.FILEURL + fileList[0].url" class="tunnel-img" />
                <i class="el-icon-circle-close close-img" @click.stop="handleRemove"></i>
              </div>
              <el-button v-else type="primary" size="medium">上传隧道图</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="addEditForm.remark" placeholder="请输入" clearable=""></el-input>
          </el-form-item>

          <div class="dialog-footer">
            <el-button class="cancleBtn" @click="tunnelDialog = false" icon="el-icon-circle-close" size="medium">取消 </el-button>
            <el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium">确定 </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addLocationTunnelApi, //隧道列表
  deleteLocationTunnelApi,
  editLocationTunnelApi,
  getLocationTunnelPageApi,
  getRealTimeLocationWorkerApi, //查询实时定位人数
  getcountRealTimeLocationWorkerApi //查询实时定位班组人员
} from '@/assets/js/api/tunnelPositioning'
export default {
  data() {
    return {
      projectSn: '',
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tunnelDialog: false,
      addEditForm: {
        tunnelName: '',
        direction: 1,
        tunnelId: '',
        tunnelLength: '',
        constructionProgressBegin: '',
        constructionProgressEnd: '',
        yvalueRandomRangeStart: null,
        yvalueRandomRangeEnd: null,
        remark: '',
        planarGraph: '',
        id: '',
        correctorIconXDirection: '',
        scale: undefined
      },
      addEditRules: {
        tunnelName: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ],
        direction: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ],
        correctorIconXDirection: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ],
        scale: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ],
        tunnelId: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ],
        tunnelLength: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ],
        constructionProgressBegin: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ],
        yvalueRandomRangeStart: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ]
      },
      title: '',
      fileList: []
    }
  },
  created() {
    this.projectSn = this.$store.state.projectSn
    this.getTunnrlData()
  },

  methods: {
    quertData() {
      this.pageNo = 1
      this.pageSize = 10
      this.getTunnrlData()
    },
    refresh() {
      this.pageNo = 1
      this.pageSize = 10
      this.total = 0
      this.getTunnrlData()
    },
    getTunnrlData() {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        projectSn: this.projectSn
      }
      getLocationTunnelPageApi(data).then(res => {
        console.log(res)
        if (res.code == 200 && res.result) {
          this.tableData = res.result.records
          console.log(this.tableData)
          this.total = res.result.total
        }
      })
    },
    addTunnel() {
      this.title = '新增隧道'
      this.tunnelDialog = true
      this.fileList = []
      this.addEditForm = {
        tunnelName: '',
        direction: 1,
        tunnelId: '',
        tunnelLength: '',
        constructionProgressBegin: '',
        constructionProgressEnd: '',
        yvalueRandomRangeStart: '',
        yvalueRandomRangeEnd: '',
        remark: '',
        planarGraph: '',
        id: ''
      }
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate()
      })
    },
    //编辑隧道
    editTunnel(obj) {
      this.tunnelDialog = true
      this.title = '编辑隧道'
      this.addEditForm = JSON.parse(JSON.stringify(obj))
      this.fileList = this.addEditForm.planarGraph ? JSON.parse(this.addEditForm.planarGraph) : []
    },
    deleteTunnel(obj) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteLocationTunnelApi({ id: obj.id }).then(result => {
            if (result.success) {
              this.$message.success(result.message)
              this.addEditForm.id = ''
              this.refresh()
            }
          })
        })
        .catch(() => {})
    },
    //新增/编辑
    submit() {
      let params = JSON.parse(JSON.stringify(this.addEditForm))
      params.projectSn = this.projectSn
      this.$refs.addEditForm.validate(valid => {
        if (valid) {
          if (this.title == '新增隧道') {
            addLocationTunnelApi(params).then(result => {
              if (result.success) {
                this.$message.success(result.message)
                this.refresh()
              }
            })
          } else if (this.title == '编辑隧道') {
            editLocationTunnelApi(params).then(result => {
              if (result.success) {
                this.$message.success(result.message)
                this.refresh()
              }
            })
          }
          this.tunnelDialog = false
        } else {
          return false
        }
      })
    },
    handleSuccess(response, file, fileList) {
      this.addEditForm.planarGraph = []
      fileList.map(item => {
        if (!item.response) {
          this.addEditForm.planarGraph.push(item)
          // console.log('符合的结构', item)
        } else if (item.response) {
          // console.log('不符合的结构', item)
          this.addEditForm.planarGraph.push({
            name: item.response.data[0].filename,
            url: item.response.data[0].imageUrl
          })
        }
      })
      this.fileList = this.addEditForm.planarGraph
      this.addEditForm.planarGraph = JSON.stringify(this.addEditForm.planarGraph)
    },
    handleRemove() {
      this.fileList = []
      this.addEditForm.planarGraph = ''
    },
    close() {
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate()
      })
    },
    inputNumber(value) {
      console.log('输入框的值---', value, this.addEditForm.yvalueRandomRangeEnd)
      // if (value >= 310 && value <= 530) {
      //   this.addEditForm.yvalueRandomRangeStart = value;
      // } else {
      //   this.$message.error('请输入符合范围内的数值:310-530')
      //   this.addEditForm.yvalueRandomRangeStart = ''
      // }
      if (this.addEditForm.yvalueRandomRangeEnd == '' || value < this.addEditForm.yvalueRandomRangeEnd) {
        this.addEditForm.yvalueRandomRangeStart = value
      } else {
        this.$message.error('请输入正确的范围数值')
        this.addEditForm.yvalueRandomRangeStart = ''
      }
    },
    inputNumber2(value) {
      if (value > this.addEditForm.yvalueRandomRangeStart) {
        this.addEditForm.yvalueRandomRangeEnd = value
      } else {
        this.$message.error('请输入正确的范围数值')
        this.addEditForm.yvalueRandomRangeEnd = ''
      }
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getTunnrlData()
    },
    handleCurrentChange(value) {
      this.pageNo = value
      this.getTunnrlData()
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100%;

  .search-box {
    background: #fff;
    padding: 25px;
    margin-bottom: 14px;

    .search-item {
      display: inline-block;
      margin-right: 26px;
    }
  }

  .table-box {
    flex: 1;
    background: #fff;

    /deep/.el-table {
      td {
        vertical-align: top;
      }

      .cell {
        padding-left: 44px;
      }
    }

    .f-2 {
      display: flex;
      flex-wrap: wrap;

      .table-item {
        width: 50%;
      }
    }
  }
}

.smallInput1 {
  width: 110px !important;
  margin-left: -10px;
  /deep/.el-input__inner {
    width: 100%;
    display: inline-block;
  }
}
.smallInput2 {
  width: 195px !important;
  /deep/.el-input__inner {
    width: 100%;
    display: inline-block;
  }
}
.labeInput {
  /deep/.el-form-item__label {
    width: 150px !important;
    margin-left: -40px;
  }
}
::v-deep .el-input__inner {
  line-height: 1px !important;
}
::v-deep .el-upload .el-upload-list__item {
  display: none;
}
.tunnel-img-box {
  position: relative;
}
.tunnel-img {
  width: auto;
  height: 60px;
  cursor: pointer;
}
.close-img {
  position: absolute;
  right: -8px;
  top: -8px;
  font-size: 16px;
  color: red;
  cursor: pointer;
}
</style>
