<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="88px"
    >
      <el-form-item
        label="四向车编号"
        prop="devName"
      >
        <el-input
          v-model="queryParams.carId"
          placeholder="输入四向车编号查询"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>
    <div class="opt-box">
      <div class="opt-box-left">
        <el-button
          type="primary"
          @click="handleAdd"
        >新增</el-button>
      </div>
    </div>
    <div
      class="layout-full"
      style="margin-top: 50px;"
    >
      <heavy-table
        class="heavy-table tablem"
        highlight-current-row
        :data="moldList"
        :loading="loading"
        :paging="paging"
        :config="tableConfig"
        ref="multipleTable"
        :tableProps="tableProps"
        @selection-change="handleSelectionChange"
        @current-change="handleCurrentChange"
        @handleUpdate="handleUpdate"
        @handleRestore="handleRestore"
      >
        <template v-slot:switchChange="scope">
          <el-switch
            @change="switchChange(scope.row)"
            v-model="scope.row.isStatus"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </template>
      </heavy-table>
    </div>

    <!-- 添加或修改区域对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="700px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        style="width: 700px;"
        label-width="95px"
      >
        <el-form-item label="四向车编号">
          <el-input
            style="width: 80%;"
            v-model="form.carId"
            placeholder="请输入四向车编号"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="起始层">
          <el-select
            v-model="form.startLayer"
            placeholder="请选择"
            style="width: 80%;"
            clearable
          >
            <el-option
              v-for="item in dict.type.change_term_dict"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标层">
          <el-select
            v-model="form.targerLayer"
            placeholder="请选择"
            style="width: 80%;"
            clearable
          >
            <el-option
              v-for="item in dict.type.change_term_dict"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="主提升机"
          prop="type"
        >
          <el-select
            v-model="form.hoister"
            placeholder="请输入"
            style="width: 80%;"
            clearable
          >
            <el-option
              v-for="item in liftList"
              :key="item.id"
              :label="item.devName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { getCarrierInfo, getDeviceList, rcsLayerChanges, rcsRestore } from '@/api/wms/setMold/materialVehicleBind.js'
import { areahoisterList, areahoisterInfo, areahoisterAdd, areahoisterEdit, areahoisterDel, queryBaseAreaList, switchStatus, gettAllDeviceList } from '@/api/wms/setMold/areahoister'
import JsBarcode from 'jsbarcode'
import * as XLSX from 'xlsx'
export default {
  name: 'Configuration',
  dicts: ['change_term_dict'],

  data() {
    const _that = this
    return {
      paging: {
        page: 1, // 当前页
        size: 10, // 页面大小
        total: 0
      },
      uploadFiles: [],
      tableConfig: [
        {
          label: '序号',
          type: 'index',
          istrue: true
        },
        // {
        //   label: '开关',
        //   prop: 'isStatus',
        //   type: 'slot',
        //   istrue: true,
        //   name: 'switchChange'
        // },
        {
          label: '四向车编号',
          prop: 'carId',
          istrue: true,
          width: 150
        },
        {
          label: '电量百分比',
          prop: 'elecQuantityLabel',
          istrue: true
          // width: 150
        },
        {
          label: '是否自动',
          prop: 'controlState',
          istrue: true,
          // width: 150,
          filter(row) {
            if (row.controlState == '1') {
              return '是'
            } else if (row.controlState == '2') {
              return '否'
            } else {
              return '--'
            }
          }
        },
        {
          label: '是否有货',
          prop: 'goodsStatus',
          istrue: true,
          // width: 150,
          filter(row) {
            if (row.goodsStatus == '0') {
              return '否'
            } else if (row.goodsStatus == '1') {
              return '是'
            } else {
              return '--'
            }
          }
        },
        {
          label: '当前任务号',
          prop: 'taskGuid',
          istrue: true,
          width: 310
        },
        {
          label: '所在楼层',
          prop: 'layerLabel',
          istrue: true
          // width: 150
        },

        {
          label: '操作',
          prop: 'operating',
          istrue: true,
          type: 'button',
          width: 180,
          fixed: 'right',
          buttons: [
            {
              name: '换层',
              event: 'handleUpdate'
            },
            {
              name: '恢复',
              event: 'handleRestore'
            }
          ]
        }
      ],

      tableProps: {
        'max-height': 700
      },

      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      //多选
      selectList: [],
      printBarcodeList: [],
      // 弹出层标题
      title: '',
      moldList: [],
      // 是否显示弹出层
      open: false,
      //批量打印弹出框
      batchPrint: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        devName: null
      },
      // 用来放导入的数据用的
      tableData: [],
      currentPage: 1,
      //提升机列表
      liftList: [],
      //库区编号列表
      baseAreaList: [],
      //存放设备数组
      devNameArr: [],
      //base64图片
      baseResult: '',
      // 表单参数
      form: {},
      dialogVisible: false,
      // 表单校验
      rules: {
        moldNo: [{ required: true, trigger: 'blur', message: '请输入模具编号' }],
        moldName: [{ required: true, trigger: 'blur', message: '请输入模具名称' }],
        model: [{ required: true, trigger: 'blur', message: '请输入模具型号' }],
        Type: [{ required: true, trigger: 'change', message: '请选择模具类型' }],
        height: [{ required: true, trigger: 'blur', message: '请输入高' }],
        width: [{ required: true, trigger: 'blur', message: '请输入宽' }],
        length: [{ required: true, trigger: 'blur', message: '请输入长' }],
        serviceInterval: [{ required: true, trigger: 'blur', message: '请输入保养周期' }],
        serviceLife: [{ required: true, trigger: 'blur', message: '请输入寿命' }],
        isActivity: [{ required: true, trigger: 'change', message: '请输入状态' }]
      }
    }
  },
  created() {
    this.getList()
    // gettAllDeviceList().then((res) => {
    //   this.liftList = res.data
    // })

    getDeviceList().then((res) => {
      // console.log(res)
      this.liftList = res.rows
    })
    queryBaseAreaList().then((res) => {
      // console.log(res)
      this.baseAreaList = res.rows
    })
    // getCarrierInfo().then((res) => {
    //   console.log(res)
    // })
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      if (Object.prototype.toString.call(val) === '[object Object]') {
        this.queryParams.pageSize = val.size
        this.paging.size = val.size
        this.getList()
      } else {
        this.paging.page = val
        this.queryParams.pageNum = val
        this.getList()
      }
    },

    /** 查询区域列表 */
    getList() {
      this.loading = true
      getCarrierInfo(this.queryParams).then((response) => {
        console.log(response)
        response.data.forEach((item) => {
          item.layerLabel = item.layer + '层'
          item.elecQuantityLabel = item.elecQuantity + '%'
          item.id = item.carId
        })
        this.moldList = response.data
        this.paging.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        devName: null,
        equipmentStatus: null
      }
      this.resetForm('form')
    },
    //
    handleSelectionChange(value) {
      console.log(value)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    //复位
    handleReset(row) {
      console.log(row)
      this.$confirm('是否复位?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let nextData = {
          plcFactory: row.plcFactory,
          plcIp: row.plcIp,
          plcType: row.plcType,
          port: row.port,
          resetPoint: row.resetPoint
        }
        PlcPropertyResetBo(JSON.stringify(nextData)).then((res) => {
          console.log(res)
        })
      })
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form.carId = row.carId
      this.form.startLayer = row.layer
      // this.reset()
      // console.log(this.form)
      this.open = true
      this.title = '编辑'
    },
    /** 恢复按钮操作 */
    handleRestore(row) {
      this.$confirm('是否恢复?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let nextData = {
          carId: row.carId
        }
        rcsRestore(nextData).then((res) => {
          debugger
        })
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.tableData = []
      this.open = true
      this.title = '新增'
    },

    submitForm() {
      console.log(JSON.stringify(this.form))
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.title === '编辑') {
            console.log(this.form)
            rcsLayerChanges(this.form).then((response) => {
              this.$modal.msgSuccess('换层任务下发成功')
              this.open = false
              this.getList()
            })
          } else {
            areahoisterAdd(this.form).then((response) => {
              // console.log(response)
              this.$modal.msgSuccess('添加成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    // 开关
    switchChange(row) {
      let str = ''
      let title = ''
      if (row.isStatus === '0') {
        title = '停用确认'
        str = '确定要关闭该提升机与区域绑定吗？！'
      } else {
        title = '启用确认'
        str = '确定要启用提升机与区域绑定吗？'
      }
      this.$confirm(str, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let obj = {
            id: row.id,
            isuse: row.isStatus
          }
          switchStatus(obj).then((res) => {
            if (res.code === 200) {
              this.$message.success('确认成功')
            }
          })
        })
        .catch(() => {
          this.$message.warning('操作未生效')
        })
    }
  },
  computed: {
    computedTableData() {
      return this.tableData.slice((this.currentPage - 1) * 10, this.currentPage * 10)
    }
    // computeVolume() {
    //   if (this.form.height && this.form.width && this.form.length) {
    //     return this.form.volume || (this.form.volume = this.form.height * this.form.width * this.form.length)
    //   }
    // }
  }
}
</script>
