<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
    <el-form ref="dataForm" :rules="rules" :model="deviceForm" label-well-code="right" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备编号" prop="devCode">
            <el-input v-model.trim="deviceForm.devCode" :disabled="!isCreate" type="text" placeholder="必填"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开孔机编号" prop="kkjCode">
            <el-input v-model.trim="deviceForm.kkjCode" :disabled="!isEditMode" type="text" placeholder="必填" @change="getKkjByCode"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="开孔机名称" prop="kkjName">
            <el-input v-model.trim="deviceForm.kkjName" disabled type="text" placeholder="必填"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开孔机规格" prop="kkjModel">
            <el-input v-model.trim="deviceForm.kkjModel" disabled type="text" placeholder="必填"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="权属单位" prop="companyId">
            <dept-single v-model="deviceForm.companyId" :dept-show="true" disabled tips="company" dept-type="03" placeholder="选择权属单位" @change="companyChange"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用单位" prop="deptId">
            <el-select v-model="deviceForm.deptId" disabled placeholder="选择使用单位">
              <el-option
                v-for="item in deptList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备厂商" prop="manufacture">
            <el-select v-model="deviceForm.manufacture" :disabled="!isEditMode" placeholder="请选择设备厂商">
              <el-option
                v-for="item in manufactureList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="isEditMode" type="primary" @click="saveData">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { toTreeList } from '@/utils/structure'
import SelectTree from '@/components/SelectTree/singleSelect'
import { getDeptTreeList } from '@/api/system/dept'
import DeptSingle from '@/components/DeptSelect/DeptSingle'
import { addDeviceKkj, updateDeviceKkj, getKkjDetail, getManufacturerListPage } from '@/api/device/device'
import DeptSelect from '@/components/DeptSelect'
export default {
  name: 'EditDeviceKkj',
  components: { DeptSingle, SelectTree, DeptSelect },
  data() {
    const validateKkjCode = (rule, value, callback) => {
      // this.fetchSecondDeptTree()
      if (value !== '') {
        if (!this.isSaving) {
          getKkjDetail(value).then(response => {
            if (response.code === 200) {
              if (response.data !== '') {
                this.deviceForm.kkjName = response.data.kkjName
                this.deviceForm.kkjModel = response.data.kkjModel
                this.deviceForm.companyId = response.data.companyId
                this.companyChange()
                this.deviceForm.deptId = response.data.deptId
              } else {
                callback(new Error('不存在该开孔机编号'))
              }
            } else {
              callback(new Error('服务器异常'))
            }
          })
        } else {
          callback()
        }
      } else {
        callback(new Error('开孔机编号不能为空'))
      }
    }
    return {
      dialogFormVisible: false, // 对话框是否显示
      historyShow: false,
      dialogStatus: '',
      isSaving: false,
      deviceForm: {
        id: '',
        devCode: '',
        kkjCode: '',
        kkjName: '',
        kkjModel: '',
        companyId: '',
        deptId: '',
        manufacture: ''
      }, // 表单
      textMap: {
        update: '编辑',
        create: '新增',
        detail: '详情'
      }, // 表头显示标题
      listQuery: {
        keywords: '',
        offset: 1,
        limit: 50,
        sort: '',
        order: ''
      }, // 筛选条件
      manufactureList: null, // 设备型号列表
      deptList: null,
      showDeviceType: true, // 是否显示设备类型选项
      showModelType: true, // 是否显示型号选项
      rules: {
        devCode: [{ required: true, message: '设备编号不能为空', trigger: ['blur', 'change'] }],
        kkjCode: [{ required: true, trigger: ['blur'], validator: validateKkjCode }],
        kkjName: [{ required: true, message: '开孔机名称不能为空', trigger: ['blur', 'change'] }],
        kkjModel: [{ required: true, message: '开孔机规格', trigger: ['blur', 'change'] }],
        companyId: [{ required: true, message: '权属单位必选', trigger: ['blur', 'change'] }],
        deptId: [{ required: true, message: '使用单位必选', trigger: ['blur', 'change'] }],
        manufacture: [{ required: true, message: '设备厂商必选', trigger: ['blur', 'change'] }]
      }, // 前端校验规则
      isEditMode: false, // 编辑模式
      isCreate: false, // 详情模式
      deptTreeList: null, // 组织树列表数据
      secondDeptTreeList: null // 二级组织树列表
    }
  },
  computed: {
    // showResponseDept() {
    //   if (this.deviceForm.deptId === '') {
    //     return true
    //   } else {
    //     if (this.secondDeptTreeList && this.secondDeptTreeList.length >= 1) {
    //       return false
    //     } else {
    //       return true
    //     }
    //   }
    // },
    // firstDept() { // 获取权属单位
    //   // return this.deviceForm.deptId
    // }
  },
  watch: {
    // firstDept(val, oldVal) { // 监控权属单位变化
    //   if (oldVal !== '') {
    //     if (val !== '') {
    //       this.fetchSecondDeptTree()
    //     }
    //   } else {
    //     if (val !== '') {
    //       this.fetchSecondDeptTree()
    //     }
    //   }
    // }
  },
  mounted() {},
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
      debugger
      this.isSaving = false
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = dialogFormVisible
      // this.fetchSecondDeptTree()
      if (dialogStatus === 'create') { // 如果是新增，清除验证
        this.resetForm()
        this.isEditMode = true
        this.isCreate = true
      } else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
        this.deviceForm = {
          id: row.id,
          devCode: row.devcode,
          kkjCode: row.kkjCode,
          kkjName: row.kkjName,
          kkjModel: row.kkjModel,
          companyId: row.companyId,
          deptId: row.deptId,
          manufacture: row.manufacture
        }
        this.isEditMode = true
        this.isCreate = false
        this.companyChange()
        this.deviceForm.deptId = row.deptId
      } else {
        this.deviceForm = {
          id: row.id,
          devCode: row.devcode,
          kkjCode: row.kkjCode,
          kkjName: row.kkjName,
          kkjModel: row.kkjModel,
          companyId: row.companyId,
          deptId: row.deptId,
          manufacture: row.manufacture
        }
        this.isEditMode = false
        this.isCreate = false
        this.companyChange()
        this.deviceForm.deptId = row.deptId
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      // 获取厂商列表
      getManufacturerListPage(this.listQuery).then(response => {
        this.manufactureList = response.data.rows
        for (var i = 0; i < this.manufactureList.length; i++) {
          var manu = (this.manufactureList)[i]
          if (manu.name === this.deviceForm.manufacture) {
            this.deviceForm.manufacture = manu.id
          }
        }
      })
    },
    companyChange() {
      let listQuery = {}
      listQuery = {
        deptType: '03',
        tips: 'dept',
        pid: this.deviceForm.companyId
      }
      getDeptTreeList(listQuery).then(response => {
        const list = response.data.list
        if (list) {
          this.deptList = list
        }
      })
    },
    dataHistory(devCode) {
      // const params = { devcode: devcode, deviceType: row.deviceType }
      this.dialogFormVisible = true
      this.historyShow = true
      this.$refs.historyloc.initDialog(this.dialogFormVisible, devCode)
    },
    // 加载组织机构树形下拉菜单
    fetchSecondDeptTree: function() {
      // const listQuery = {
      //   pid: this.deviceForm.deptId,
      //   deptType: '04'
      // }
      // getDeptTreeList(listQuery).then(response => {
      //   console.log(response.data)
      //   if (response.data.list) {
      //     this.secondDeptTreeList = toTreeList(response.data.list, this.deviceForm.deptId)
      //   }
      // })
    },
    // 重置表单
    resetForm() {
      this.deviceForm = {
        id: '',
        devCode: '',
        kkjCode: '',
        kkjName: '',
        kkjModel: '',
        companyId: '',
        deptId: '',
        manufacture: ''
      }
    },
    // 保存数据
    saveData: function() {
      this.isSaving = true
      if (this.dialogStatus === 'update') {
        this.updateData()
      } else if (this.dialogStatus === 'create') {
        this.createData()
      }
    },
    // 根据开孔机编号查询开孔机信息
    getKkjByCode: function() {

    },
    // 新增数据
    createData: function() {
      this.$refs['dataForm'].validate((valid) => {
        console.log(this.deviceForm)
        if (valid) {
          addDeviceKkj(this.deviceForm).then(response => {
            if (response.code === 200) {
              this.$confirm('新增成功，是否继续新增?', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'info'
              }).then(() => {
                this.resetForm()
                this.$nextTick(() => {
                  this.$refs['dataForm'].clearValidate()
                })
              }).catch(() => {
                this.$emit('watchChild')
                this.dialogFormVisible = false
              })
            }
          })
        } else {
          this.isSaving = false
        }
      })
    },
    // 修改数据
    updateData: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateDeviceKkj(this.deviceForm).then(response => {
            if (response.code === 200) {
              this.$message.success('修改成功')
              this.$emit('watchChild')
              this.dialogFormVisible = false
            }
          })
        } else {
          this.isSaving = false
        }
      })
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
</style>