<template>
  <!--LED点阵屏-->
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">设备协议：</span>
      </div>

      <el-row>
        <el-col :span="12">
          OpcServer:
          <el-select
            v-model="opc_id"
            placeholder="无"
            clearable
            filterable
            @change="changeOpc"
          >
            <el-option
              v-for="item in dataOpcservers"
              :key="item.opc_id"
              :label="item.opc_name"
              :value="item.opc_id"
            />
          </el-select>
        </el-col>
        <el-col :span="12">
          PLC:
          <el-select
            v-model="plc_id"
            placeholder="无"
            clearable
            @change="changePlc"
          >
            <el-option
              v-for="item in dataOpcPlcs"
              :key="item.plc_id"
              :label="item.plc_name"
              :value="item.plc_id"
            />
          </el-select>
        </el-col>
      </el-row>

    </el-card>

    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">输送系统：</span>
      </div>
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="电气调度号" label-width="150px">
              <el-input v-model="form.OPCServer" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">指令相关：</span>
      </div>
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="78px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="关联设备" prop="device_code">
              <el-select
                v-model="form.link_device_code"
                filterable
                multiple
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.device_code"
                  :label="item.device_name"
                  :value="item.device_code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span" />
        <el-button
          :loading="false"
          icon="el-icon-check"
          size="mini"
          style="float: right; padding: 6px 9px"
          type="primary"
          @click="doSubmit"
        >保存
        </el-button>
      </div>
    </el-card>

  </div>
</template>

<script>
import {
  queryDriverConfig,
  updateConfig,
  testRead,
  testwrite
} from '@/api/acs/device/driverConfig'
import { selectOpcList } from '@/api/acs/device/opc'
import { selectPlcList } from '@/api/acs/device/opcPlc'
import { selectListByOpcID } from '@/api/acs/device/opcPlc'

import crud from '@/mixins/crud'
import deviceCrud from '@/api/acs/device/device'

export default {
  name: 'LedScreen',
  mixins: [crud],
  props: {
    parentForm: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      device_code: '',
      device_id: '',
      plc_id: '',
      plc_code: '',
      opc_id: '',
      opc_code: '',
      load_device_code: '',
      configLoading: false,
      dataOpcservers: [],
      dataOpcPlcs: [],
      deviceList: [],
      data1: [],
      data2: [],
      form: {
        inspect_in_stocck: true,
        ignore_pickup_check: true,
        ignore_release_check: true,
        apply_task: true,
        link_three_lamp: '',
        manual_create_task: true,
        is_pickup: true,
        is_release: true,
        link_device_code: [],
        get_device_code: [],
        put_device_code: []
      },
      rules: {}
    }
  },
  created() {
    this.$nextTick(() => {
      // 从父表单获取设备编码
      this.device_id = this.$props.parentForm.device_id
      this.device_code = this.$props.parentForm.device_code
      queryDriverConfig(this.device_id, this.$props.parentForm.driver_code).then(data => {
        // 给表单赋值，并且属性不能为空
        if (data.form) {
          const arr = Object.keys(data.form)
          // 不为空
          if (arr.length > 0) {
            this.form = data.form
          }
        }

        // 给表单赋值，并且属性不能为空
        if (data.parentForm) {
          const arr = Object.keys(data.parentForm)
          // 不为空
          if (arr.length > 0) {
            this.opc_code = data.parentForm.opc_code
            this.plc_code = data.parentForm.plc_code
          }
        }
        this.data1 = data.rs
        this.data2 = data.ws
        this.sliceItem()
      })
      selectPlcList().then(data => {
        this.dataOpcPlcs = data
        this.plc_id = this.$props.parentForm.opc_plc_id
      })
      selectOpcList().then(data => {
        this.dataOpcservers = data
        this.opc_id = this.$props.parentForm.opc_server_id
      })
      deviceCrud.selectDeviceList().then(data => {
        this.deviceList = data
      })
    })
  },
  methods: {
    finishReadEdit(data) {
      // 编辑的是code列,并且值包含mode
      if (data.code.indexOf('mode') !== -1) {
        debugger
        const dbValue = data.db
        // .之前的字符串
        // const beforeStr = dbValue.match(/(\S*)\./)[1]
        // .之后的字符串
        const afterStr = dbValue.match(/\.(\S*)/)[1]
        // 取最后数字
        const endNumber = afterStr.substring(1)
        // 最后为非数字
        if (isNaN(parseInt(endNumber))) {
          return
        }
        // for (const val in this.data1) {
        //   if (this.data1[val].code.indexOf('move') !== -1) {
        //     this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 1)
        //   }
        //   if (this.data1[val].code.indexOf('error') !== -1) {
        //     this.data1[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 5)
        //   }
        //   if (this.data1[val].code.indexOf('task') !== -1) {
        //     this.data1[val].db = beforeStr + '.' + 'D' + (parseInt(endNumber) + 7)
        //   }
        // }
      }
    },
    finishWriteEdit(data) {
      // 编辑的是code列,并且值包含mode
      if (data.code.indexOf('to_command') !== -1) {
        const dbValue = data.db
        // .之前的字符串
        // const beforeStr = dbValue.match(/(\S*)\./)[1]
        // .之后的字符串
        const afterStr = dbValue.match(/\.(\S*)/)[1]
        // 取最后数字
        const endNumber = afterStr.substring(1)
        // 最后为非数字
        if (isNaN(parseInt(endNumber))) {
          return
        }
        // for (const val in this.data2) {
        //   if (this.data2[val].code.indexOf('to_target') !== -1) {
        //     this.data2[val].db = beforeStr + '.' + afterStr.substring(0, 1) + (parseInt(endNumber) + 2)
        //   }
        //   if (this.data2[val].code.indexOf('to_task') !== -1) {
        //     this.data2[val].db = beforeStr + '.' + 'D' + (parseInt(endNumber) + 6)
        //   }
        // }
      }
    },
    changeOpc(val) {
      this.dataOpcservers.forEach(item => {
        if (item.opc_id === val) {
          this.opc_code = item.opc_code
        }
      })

      selectListByOpcID(val).then(data => {
        this.dataOpcPlcs = data
        this.plc_id = ''
        this.plc_code = ''
        if (this.dataOpcPlcs && this.dataOpcPlcs.length > 0) {
          this.plc_id = this.dataOpcPlcs[0].plc_id
          this.plc_code = this.dataOpcPlcs[0].plc_code
        }
        this.sliceItem()
      })
    },
    changePlc(val) {
      this.dataOpcPlcs.forEach(item => {
        if (item.plc_id === val) {
          this.plc_code = item.plc_code
          this.sliceItem()
          return
        }
      })
    },
    test_read1() {
      testRead(this.data1, this.opc_id).then(data => {
        this.data1 = data
        this.notify('操作成功!', 'success')
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    test_read2() {
      testRead(this.data2, this.opc_id).then(data => {
        this.data2 = data
        console.log(this.data2)
        this.notify('操作成功!', 'success')
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    test_write1() {
      testwrite(this.data2, this.opc_id).then(data => {
        this.notify('操作成功!', 'success')
      }).catch(err => {
        console.log(err.response.data.message)
      })
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.configLoading = true
          // 根据驱动类型判断是否为路由设备
          const parentForm = this.parentForm
          parentForm.is_route = true
          parentForm.plc_id = this.plc_id
          parentForm.opc_id = this.opc_id
          updateConfig(parentForm, this.form, this.data1, this.data2).then(res => {
            this.notify('保存成功', 'success')
            this.configLoading = false
          }).catch(err => {
            this.configLoading = false
            console.log(err.response.data.message)
          })
        }
      })
    },
    sliceItem() { // 拼接DB的Item值
      this.data1.forEach(item => {
        const str = item.code
        // 是否包含.
        if (str.search('.') !== -1) {
          // 截取最后一位
          item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
        } else {
          item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
        }
      })
      this.data2.forEach(item => {
        const str = item.code
        // 是否包含.
        if (str.search('.') !== -1) {
          // 截取最后一位
          item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + str.slice(str.lastIndexOf('.') + 1)
        } else {
          item.code = this.opc_code + '.' + this.plc_code + '.' + this.device_code + '.' + item.code
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
