<template>
  <div class="plan-manage">
    <div class="plan-content">
      <div class="left-plan">
        <div class="input-box">
          <el-input placeholder="请输入桥段" suffix-icon="el-icon-search" v-model="input1" size="small" class="plan-search"> </el-input>
          <div class="add-icon">
            <img src="@/assets/images/carPosition/add.png" alt="" />
          </div>
        </div>
        <div class="bridge-section">
          <vue-scroll>
            <div class="section-list">
              <div
                class="section-item"
                v-for="(item, index) in bridgeSectionList"
                :key="item.id"
                :class="{ active: activeBuildIndex == index }"
                @click="changeBuildFn(item, index)"
              >
                <div class="bridge-title">{{ item.name }}</div>
                <div class="bridge-tool">
                  <img @click.stop="editBuildFn(item)" src="@/assets/images/icon-edit.png" style="margin-right:16px" class="icon" />
                  <img @click.stop="deleteBuildFn(item)" src="@/assets/images/icon-delete.png" class="icon" />
                </div>
              </div>
            </div>
          </vue-scroll>
        </div>
        <div class="add-icon"></div>
      </div>
      <div class="right-plan">
        <div class="fullHeight whiteBlock">
          <div style="padding: 15px 15px 0">
            <p class="pageTitle">梁列表</p>
            <el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
              <el-form-item label="梁号">
                <el-input v-model="searchForm.institutionName" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="梁型" style="margin-left:40px">
                <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                  <el-option v-for="(item, index) in beamTypeOption" :key="index" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态" style="margin-left:40px">
                <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                  <el-option v-for="(item, index) in nameOptions" :key="index" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="getList">{{ $t('message.energyManage.waybill.query') }}</el-button>
                <el-button type="warning" plain @click="refresh">{{ $t('message.deviceManage.refresh') }}</el-button>
                <el-button type="primary" size="medium" @click="add">新增</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="table_wrap whiteBlock">
            <el-table class="tables" :data="['', '']">
              <el-table-column type="index" label="序号" align="center" width="60">
                <!-- <template slot-scope="scope">
                  <div>
                    {{scope.row}}
                  </div>
                </template> -->
              </el-table-column>
              <el-table-column prop="institutionalAddress" align="center" label="梁号" width="80"></el-table-column>
              <el-table-column prop="institutionalPhone" align="center" label="所属桥段"></el-table-column>
              <el-table-column prop="remark" align="center" label="梁板类型"></el-table-column>
              <el-table-column prop="remark" align="center" label="制梁状态"></el-table-column>
              <el-table-column prop="remark" align="center" label="计划制梁时间"></el-table-column>
              <el-table-column prop="remark" align="center" label="计划架梁时间"></el-table-column>

              <el-table-column label="操作" align="center" width="470">
                <template slot-scope="scope">
                  <div class="table-btn">
                    <div @click="edit(scope.row)" class="operationText" style="margin-right: 30px">
                      <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                      <span>二维码</span>
                    </div>
                    <div @click="edit(scope.row)" class="operationText" style="margin-right: 30px">
                      <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                      <span>开始生产</span>
                    </div>
                    <div @click="edit(scope.row)" class="operationText" style="margin-right: 30px">
                      <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                      <span>详情</span>
                    </div>
                    <div @click="edit(scope.row)" class="operationText" style="margin-right: 30px">
                      <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
                      <span>编辑</span>
                    </div>
                    <div @click="deleteDev(scope.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="SizeChange"
              @current-change="CurrentChange"
              :current-page="pagInfo.pageNo"
              :page-sizes="$store.state.PAGESIZRS"
              :page-size="pagInfo.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="Number(pagInfo.total)"
              background
            ></el-pagination>
          </div>
          <el-dialog :modal-append-to-body="false" @close="close" :title="title" :visible.sync="dialogShow" width="667px">
            <div class="dialog_content">
              <el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-width="120px" class="dialogFormBox">
                <el-form-item label="梁号" prop="institutionName">
                  <el-input v-model="addEditForm.institutionName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="所属桥段" prop="institutionalAddress">
                  <el-input v-model="addEditForm.institutionalAddress" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="梁板类型" prop="institutionalPhone">
                  <el-input v-model="addEditForm.institutionalPhone" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="制梁状态">
                  <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                    <el-option v-for="(item, index) in beamTypeOption" :key="index" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="计划制梁时间">
                  <el-date-picker
                    v-model="dateSelect"
                    type="datetime"
                    placeholder="请选择时间"
                    :range-separator="$t('message.energyManage.to')"
                    :start-placeholder="$t('message.energyManage.start')"
                    :end-placeholder="$t('message.energyManage.end')"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="计划驾梁时间">
                  <el-date-picker
                    v-model="dateSelect"
                    type="datetime"
                    placeholder="请选择时间"
                    :range-separator="$t('message.energyManage.to')"
                    :start-placeholder="$t('message.energyManage.start')"
                    :end-placeholder="$t('message.energyManage.end')"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="跨" prop="remark">
                  <el-input v-model="addEditForm.remark" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="幅">
                  <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                    <el-option v-for="(item, index) in beamTypeOption" :key="index" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-form-item>
                <div class="dialog-footer">
                  <el-button class="cancleBtn" @click="dialogShow = false" icon="el-icon-circle-close" size="medium"
                    >{{ $t('message.deviceManage.cancel') }}
                  </el-button>
                  <el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium"
                    >生成二维码
                  </el-button>
                </div>
              </el-form>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  addgtMaterialTestingInstitutionApi,
  deletgtMaterialTestingInstitutionApi,
  editgtMaterialTestingInstitutionApi,
  gettgtMaterialTestingInstitutionApi
} from '@/assets/js/api/materialManagement.js'
export default {
  mounted() {
    this.getList()
  },
  data() {
    return {
      dateSelect: '',
      beamTypeOption: [
        {
          label: '梁型1',
          value: 1
        },
        {
          label: '梁型2',
          value: 2
        },
        {
          label: '梁型3',
          value: 3
        }
      ],
      nameOptions: [
        {
          label: '合格',
          value: 1
        },
        {
          label: '不合格',
          value: 2
        },
        {
          label: '未判定',
          value: 3
        }
      ],
      bridgeSectionList: [
        {
          name: '桥段1',
          id: 1
        },
        {
          name: '桥段2',
          id: 2
        },
        {
          name: '桥段3',
          id: 3
        },
        {
          name: '桥段4',
          id: 4
        }
      ],
      input1: '', // 桥段
      currentBridgeInfo: '', //桥段item
      activeBuildIndex: '', //当前选中桥段

      //   梁列表相关 *************
      title: '',
      dialogShow: false,
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      List: [],
      addEditForm: {
        institutionName: '',
        institutionalAddress: '',
        institutionalPhone: '',
        remark: ''
      },
      addEditRules: {
        institutionName: [
          {
            required: true,
            message: '必填',
            trigger: 'blur'
          }
        ]
      },
      searchForm: {
        institutionName: ''
      }
    }
  },
  methods: {
    // 打开新增桥段弹窗
    handle() {
      console.log('打开弹窗')
    },
    changeBuildFn(item, index) {
      this.activeBuildIndex = index
      this.currentBridgeInfo = item
    },
    // 编辑桥段弹窗
    editBuildFn(item) {
      console.log('编辑桥段', item)
    },
    // 删除桥段
    deleteBuildFn(item) {
      console.log('删除桥段', item)
    },

    // 梁列表相关 **************************
    getList() {
      gettgtMaterialTestingInstitutionApi({
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        projectSn: this.$store.state.projectSn,
        institutionName: this.searchForm.institutionName
      }).then(result => {
        if (result.success) {
          this.List = result.result.records
          this.pagInfo.total = result.result.total
        }
      })
    },

    add() {
      this.title = '新增梁'
      this.dialogShow = true
      this.close()
    },

    edit(obj) {
      this.title = '编辑机构'
      this.dialogShow = true
      this.addEditForm = JSON.parse(JSON.stringify(obj))
    },
    submit() {
      let params = JSON.parse(JSON.stringify(this.addEditForm))
      params.projectSn = this.$store.state.projectSn
      this.$refs.addEditForm.validate(valid => {
        if (valid) {
          if (this.title == '新增梁') {
            addgtMaterialTestingInstitutionApi(params).then(result => {
              if (result.success) {
                this.$message.success(result.message)
                this.getList()
              }
            })
          } else if (this.title === '编辑机构') {
            editgtMaterialTestingInstitutionApi(params).then(result => {
              if (result.success) {
                this.$message.success(result.message)
                this.getList()
              }
            })
          }
          this.dialogShow = false
        } else {
          return false
        }
      })
    },
    deleteDev(obj) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deletgtMaterialTestingInstitutionApi({ id: obj.id }).then(res => {
            if (res.success) {
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    close() {
      this.addEditForm = {}
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate()
      })
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getList()
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getList()
    },
    refresh() {
      this.searchForm = {}
      this.pagInfo.pageNo = 1 //页数
      this.pagInfo.pageSize = 10 //条数
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.plan-manage {
  width: 100%;
  height: 100%;
  .plan-content {
    display: flex;
    width: 100%;
    height: 100%;
    .left-plan {
      width: 17%;
      margin-right: 1%;
      background: #fff;
      .input-box {
        display: flex;
        margin: 20px 0 0px 20px;
        .plan-search {
          width: 80%;
          margin-right: 5%;
        }
        .add-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          cursor: pointer;
          border: 1px solid #c7d4f8;
          img {
            width: 75%;
            height: 75%;
          }
        }
      }
      .bridge-section {
        width: 100%;
        height: 75%;
        .section-list {
          width: 100%;
          margin-top: 5%;
          .section-item {
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            &.active {
              background: #c7d4f8;
              color: #5181f6;
              border-left: 4px solid #5181f6;
              .bridge-title {
                margin-left: 0px;
              }
            }
            .bridge-title {
              font-size: 14px;
              margin-left: 4px;
            }
            .bridge-tool {
              display: flex;
              .icon {
                width: 15px;
                height: 15px;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .right-plan {
      width: 82%;
      background: #fff;
    }
  }
}
.table-btn {
  display: flex;
  justify-content: center;
}
</style>
