<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item label="设备名称" prop="devName">
          <el-input
            v-model="searchForm.devName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="基站编号" prop="stationNo">
            <el-input v-model="searchForm.stationNo" placeholder="请输入" clearable></el-input>
        </el-form-item> -->
        <!-- <el-form-item> -->
        <el-button type="primary" plain @click="getListData(1)">查询</el-button>
        <!-- <el-button type="warning" plain @click="resetForm">刷新</el-button> -->
        <el-button type="primary" @click="addFn" size="medium">
          <!-- {{$t('message.personnelPosition.cardManage.new_base_station')}} -->
          新增设备
        </el-button>
        <!-- </el-form-item> -->
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="tableData">
        <el-table-column
          type="index"
          width="50"
          align="center"
          :label="$t('message.personnelPosition.cardManage.table.index')"
        ></el-table-column>
        <el-table-column
          prop="concreteTab"
          :label="'设备名称'"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="buildName"
          :label="'设备ID'"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="floorName"
          :label="'设备位置'"
          align="center"
        ></el-table-column>
        <el-table-column
          :label="$t('message.personnelPosition.cardManage.table.operation')"
          align="center"
        >
          <template slot-scope="scope">
            <div class="tableBtns">
              <div @click="editFn(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t('message.personnelPosition.cardManage.table.edit')
                }}</span>
              </div>

              <div @click="deleteFn(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-delete.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t('message.personnelPosition.cardManage.table.delete')
                }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <div slot="empty">{{$t('message.personnelPosition.empty')}}</div> -->
      </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"
      :title="dialogTitle"
      :visible.sync="editDialog"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          class="dialogFormBox"
          size="medium"
          label-width="120px"
          :model="editForm"
          ref="editForm"
          :rules="editFormRules"
        >
          <el-form-item :label="'设备名称'" prop="concreteTab">
            <el-input
              v-model="editForm.concreteTab"
              :placeholder="
                $t(
                  'message.personnelPosition.cardManage.dialog_edit.placeholder'
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item :label="'设备ID'" prop="buildId">
            <el-input
              v-model="editForm.concreteTab"
              :placeholder="
                $t(
                  'message.personnelPosition.cardManage.dialog_edit.placeholder'
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item :label="'设备位置'" prop="floorId">
            <el-input
              v-model="editForm.concreteTab"
              :placeholder="
                $t(
                  'message.personnelPosition.cardManage.dialog_edit.placeholder'
                )
              "
            ></el-input>
          </el-form-item>

          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="editDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{
                $t('message.personnelPosition.cardManage.dialog_edit.cancel')
              }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="saveFn"
              size="medium"
            >
              {{
                $t('message.personnelPosition.cardManage.dialog_edit.determine')
              }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getElectronPourOrderListApi,
  addElectronPourOrderApi,
  deleteElectronPourOrderApi,
  editElectronPourOrderApi,
  getPositionBuildListApi
} from '@/assets/js/api/quality.js'

export default {
  name: 'registerAudit',
  data() {
    return {
      activeIndex: 1,
      typeList: [
        {
          name: '已通过',
          id: 1
        },
        {
          name: '待审核',
          id: 2
        },
        {
          name: '已驳回',
          id: 3
        }
      ],
      searchForm: {
        devName: ''
      },
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      authorizedDialog: false,
      detail: {},
      fileList: [],
      editForm: {
        projectSn: this.$store.state.projectSn,
        buildId: '',
        concreteTab: '',
        floorId: '',
        mixingPlant: '',
        planVolume: '',
        pourTime: '',
        subpackage: '',
        designStrength: []
      },
      editDialog: false,
      editFormRules: {
        concreteTab: [
          {
            required: true,
            message: this.$t(
              'message.personnelPosition.cardManage.dialog_edit.required'
            ),
            trigger: 'blur'
          }
        ],
        buildId: [
          {
            required: true,
            message: this.$t(
              'message.personnelPosition.cardManage.dialog_edit.required'
            ),
            trigger: 'blur'
          }
        ],
        floorId: [
          {
            required: true,
            message: this.$t(
              'message.personnelPosition.cardManage.dialog_edit.required'
            ),
            trigger: 'blur'
          }
        ]
      },
      dialogTitle: this.$t(
        'message.personnelPosition.cardManage.dialog_edit.addText'
      ), //新增基站
      isAdd: false,
      buildList: [],
      floorList: [],
      optionList2: [
        // {
        // 		name: 'C7.5',
        // 		value: 'C7.5'
        // 	},
        // 	{
        // 		name: 'C10',
        // 		value: 'C10'
        // 	},
        {
          name: 'C15',
          value: 'C15'
        },
        {
          name: 'C20',
          value: 'C20'
        },
        {
          name: 'C25',
          value: 'C25'
        },
        {
          name: 'C30',
          value: 'C30'
        },
        {
          name: 'C35',
          value: 'C35'
        },
        {
          name: 'C40',
          value: 'C40'
        },
        {
          name: 'C45',
          value: 'C45'
        },
        {
          name: 'C50',
          value: 'C50'
        },
        {
          name: 'C55',
          value: 'C55'
        },
        {
          name: 'C60',
          value: 'C60'
        }
      ]
    }
  },
  created() {
    this.loadBuildData()
    this.getListData()
  },
  methods: {
    changNav(val) {
      this.activeIndex = val
    },
    changeBuild() {
      this.buildList.forEach((element) => {
        if (element.id == this.editForm.buildId) {
          this.floorList = element.floorList
          this.editForm.floorId = ''
          return
        }
      })
    },
    loadBuildData() {
      getPositionBuildListApi({
        projectSn: this.$store.state.projectSn
      }).then((res) => {
        this.buildList = res.result
        // this.activeBuildIndex = 0;
        // this.canAddRoom = false;
        // if (this.buildList.length > 0) {
        //     this.floorList = this.buildList[0];
        //     this.canAddRoom = true;
        //     this.loadFloorData();
        // }
      })
    },
    addFn() {
      this.isAdd = true
      // this.dialogTitle = this.$t(
      //   "message.personnelPosition.cardManage.dialog_edit.addText"
      // ); //新增基站
      this.dialogTitle = '新增'
      this.editDialog = true
      this.$nextTick(() => {
        this.$refs['editForm'].resetFields()
      })
    },
    deleteFn(item) {
      this.$confirm(
        this.$t(
          'message.personnelPosition.cardManage.dialog_edit.confirmText'
        ) +
          '【' +
          item.concreteTab +
          '】?',
        this.$t('message.personnelPosition.cardManage.dialog_edit.Tips'),
        {
          confirmButtonText: this.$t(
            'message.personnelPosition.cardManage.dialog_edit.confirmButtonText'
          ),
          cancelButtonText: this.$t(
            'message.personnelPosition.cardManage.dialog_edit.cancelButtonText'
          ),
          type: 'warning'
        }
      ).then(() => {
        // deleteElectronPourOrderApi({ id: item.id }).then((res) => {
        //   this.getListData();
        //   this.$message.success(
        //     this.$t(
        //       "message.personnelPosition.cardManage.dialog_edit.delete_success"
        //     )
        //   ); //删除成功!
        // });
      })
    },
    editFn(item) {
      this.editDialog = true
      this.isAdd = false
      // this.dialogTitle = this.$t(
      //   "message.personnelPosition.cardManage.dialog_edit.editText"
      // ); //编辑基站
      this.dialogTitle = '编辑'
      this.editForm = JSON.parse(JSON.stringify(item))
      this.editForm.floorId = parseInt(this.editForm.floorId)
      this.buildList.forEach((element) => {
        if (element.id == this.editForm.buildId) {
          this.floorList = element.floorList
          // this.editForm.floorId = "";
          return
        }
      })
      if (item.designStrength) {
        if (item.designStrength.indexOf(',')) {
          this.editForm.designStrength = item.designStrength.split(',')
        } else {
          this.editForm.designStrength = [item.designStrength]
        }
      }
    },
    saveFn() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          var json = JSON.parse(JSON.stringify(this.editForm))
          console.log(this.editForm)
          json.designStrength = this.editForm.designStrength.join(',')
          if (this.isAdd) {
            // addElectronPourOrderApi(json).then((res) => {
            //   this.editDialog = false;
            //   this.getListData();
            //   this.$message.success(
            //     this.$t(
            //       "message.personnelPosition.cardManage.dialog_edit.add_success"
            //     )
            //   ); //添加成功！
            // });
          } else {
            // editElectronPourOrderApi(json).then((res) => {
            //   this.editDialog = false;
            //   this.getListData();
            //   this.$message.success(
            //     this.$t(
            //       "message.personnelPosition.cardManage.dialog_edit.edit_success"
            //     )
            //   ); //编辑成功！
            // });
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //获取列表数据
    getListData(val) {
      // if(val && val == 1){
      //     this.pageNo = 1
      // }
      let data = this.searchForm
      data.pageNo = this.pageNo
      data.pageSize = this.pageSize
      data.projectSn = this.$store.state.projectSn
      getElectronPourOrderListApi(data).then((res) => {
        // console.log(res);
        this.tableData = res.result.records
        this.total = res.result.total
      })
    },
    resetForm() {
      this.$refs['searchForm'].resetFields()
      this.getListData()
    },

    //查看条数
    handleSizeChange(val) {
      this.pageSize = val
      this.getListData()
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val
      this.getListData()
    }
  }
}
</script>
<style lang="less" scoped>
.searchBox {
  //   justify-content: space-between;
  align-items: center;
}

.rightBox {
  margin-right: 20px;

  p {
    display: inline-flex;

    span {
      color: @--color-primary;
      font-size: 23px;
      font-weight: 500;
    }

    &:first-child {
      margin-right: 100px;
    }
  }
}
.serchNav_box {
  display: flex;
  align-items: center;
  margin-right: 40px;
  .serch_label {
    margin-right: 12px;
    line-height: 24px;
  }
  .nav_list {
    display: flex;
    align-items: center;
    .nav_item {
      padding: 0 8px;
      border-radius: 5px;
      height: 24px;
      line-height: 24px;
      background: rgba(81, 129, 246, 0.2);
      margin-right: 23px;
      cursor: pointer;
    }
    .nav_active {
      color: #fff;
      background: rgba(81, 129, 246, 1);
    }
  }
}
.tableBtns {
  justify-content: center;
}
</style>