
import { isBlank } from '../../common/common.js'
import axios from 'axios'
export default {
  name: 'project',
  components: {

  },
  data() {
    return {
      titleMap: {
        addEquipment: '新增項目配置', // 根据自己内容定义名字
        editEquipment: '编辑項目配置' // 根据自己内容定义名字
      },
      // 新增和编辑弹框标题
      dialogStatus: '',
      dialogVisible: false,
      holder: '请选择颜色',
      deleteRowSn: '',
      projectType: '',
      fixedProject: '全部',
      currentPage: 1,
      pageSize: 15,
      search: '',
      tableDataLen: 0,
      tableData: [],
      projectTypeList: '',
      dialogFormVisible: false,
      form: {
        projectType: '',
        projectName: '',
        projectCode: '',
        projectSN: '',
        projectDisplay: '',
        ordinal: '',
        enabled: false,
        projectFixed: '',
        colorHex: ''
      },
      formLabelWidth: '114px'
    }
  },
  /** computed: {
     
    },**/
  watch: {
    colorPicker: function() {
      console.log(122222)
      console.log(this.colorPicker)
    }
  },
  mounted() {
    let _this = this 
    axios.get('/api/projectTypeList').then(function(res){
      console.log(res)
      _this.projectTypeList = res.data.data
      console.log(_this.projectTypeList)
      _this.projectType = _this.projectTypeList[0].typeDesc
      _this.requestProjectConData(_this)
    })
  },
  methods: {
    requestProjectConData(_this) {
      axios.get('/api/projectTableList').then(function(res){
        _this.tableData = res.data.data.plProjectList
          _this.tableDataLen = res.data.data.totalCount
          _this.table_data()
          console.log(_this.tableData)
          console.log(res)
      })
    },
    table_data() {
      const search = this.search
      console.log(search)
      const type = this.projectType
      const fixed = this.fixedProject
      console.log(type)
      console.log(this.tableData)
      const typeDatas = this.tableData.filter(data => !type || data.projectType.includes(type))
      let datas
      if (fixed === '全部') {
        datas = typeDatas.filter(data => !fixed || data.projectFixed.includes('Y') || data.projectFixed.includes('N'))
      } else {
        let fixedType
        if(fixed === "是"){
          fixedType = "Y" 
        }else if(fixed === "否"){ 
          fixedType = "N" 
        }
        datas = typeDatas.filter(data => !fixed || data.projectFixed.includes(fixedType))
      }
      console.log(datas)
      // 搜索功能
      if (search) {
        const list = datas.filter(data => !search || data.projectName.toLowerCase().includes(search.toLowerCase()) || data.projectDisplay.toLowerCase().includes(search.toLowerCase()))
        const fenye = list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        this.tableDataLen = fenye.length
        // 获取查询的结果，把数组长度赋值给 分页组件中的total
        // this.tableData_length = fenye.length
        return fenye
      } else {
      // 分页功能
      // 所有数据的长度  赋值给分页组件中的total
        // this.tableData_length = this.tableData.length
        const fenye = datas.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        this.tableDataLen = datas.length
        return fenye
      }
    },
    setProjectTypeClass(key) {
      return key.typeCode
    },
    setProjectValueClass(key) {
      return key.typeDesc
    },
    changeColor() {
      console.log('9898989752345678')
      $('.select_color').attr('placeholder', '')
    },
    formatter(row, column) {
      return row.address
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.table_data()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.table_data()
      console.log(`每页 ${val} 条`)
    },
    handleClick(row) {
      this.dialogFormVisible = true // 开启弹出层
      // 对弹出层中的表单赋值
      console.log(row)
      this.dialogStatus = 'editEquipment'
      this.form.projectSN = row.projectSN
      this.form.projectType = row.projectType
      this.form.projectName = row.projectName
      this.form.projectCode = row.projectCode
      this.form.projectDisplay = row.projectDisplay
      this.form.ordinal = row.ordinal
      this.form.projectFixed = row.projectFixed === 'Y' ? '是' : '否'
      this.form.colorHex = row.colorHex
      this.form.enabled = row.enabled === 'Y'
    },
    addHandleClick() {
      this.dialogFormVisible = true // 开启弹出层
      this.dialogStatus = 'addEquipment'
      this.form.projectSN = ''
      this.form.projectType = ''
      this.form.projectName = ''
      this.form.projectCode = ''
      this.form.projectDisplay = ''
      this.form.ordinal = ''
      this.form.projectFixed = '否'
      this.form.colorHex = ''
      this.form.enabled = false
    },
    selectProjectType(data) {
      console.log(data)
      if (typeof data === 'object') {
        return
      }
      this.projectType = data
      let selectTypeClass
      $.each(this.projectTypeList, function(i, item) {
        if (item.typeDesc === this.projectType) {
          selectTypeClass = item.typeCode
        }
      })
      $('.el-dropdown-menu__item.' + selectTypeClass).attr('selected', '')
      $('.el-dropdown-menu__item.' + selectTypeClass).siblings().removeAttr('selected')
      this.table_data()
    },
    selectFixedProject(data) {
      if (typeof data === 'object') {
        return
      }
      this.fixedProject = data
      console.log(data)
      let fixedClass
      switch (data) {
        case '全部':
          fixedClass = 'all'
          break
        case '是':
          fixedClass = 'is_fixed'
          break
        case '否':
          fixedClass = 'no_fixed'
          break
      }
      $('.el-dropdown-menu__item.' + fixedClass).attr('selected', '')
      $('.el-dropdown-menu__item.' + fixedClass).siblings().removeAttr('selected')
      this.table_data()
    },
    retrievalBtnEvent() {
      this.table_data()
    },
    addFromSureBtn(row) {
      const _this = this
      if (isBlank(this.form.projectType) || isBlank(this.form.projectSN) || isBlank(this.form.projectName) || isBlank(this.form.projectCode) || isBlank(this.form.projectDisplay) || isBlank(this.form.ordinal) || isBlank(this.form.projectFixed)) {
        _this.$alert('请填写完必填项', {
          confirmButtonText: '确定',
          callback: action => {
            $('.el-message-box__wrapper').remove()
          }
        })
      } else {
        console.log(this.form)
        this.form.enabled = this.form.enabled === true ? 'Y' : 'N'
        this.form.projectFixed = this.form.projectFixed === '是' ? 'Y' : 'N'
        console.log(this.form)
        if (this.dialogStatus === 'addEquipment') {
          this.tableData.splice(0,0,this.form)
        }else{
          console.log(row)
          $.each(this.tableData,function(i,item){
            if(item.projectSN == _this.form.projectSN){
              console.log("11111111")
              _this.tableData[i] = _this.form
            }
          })
          console.log(this.tableData)
        }   
        this.table_data()  
        this.dialogFormVisible = false
       /** this.form.enabled = this.form.enabled === true ? 'Y' : 'N'
        let projectTypeNam
        $.each(this.projectTypeList, function(i, item) {
          if (item.typeDesc === _this.form.projectType) {
            projectTypeNam = item.typeCode
          }
        })
        this.form.projectType = projectTypeNam
        this.form.projectFixed = this.form.projectFixed === '是' ? 'Y' : 'N'
        this.dialogFormVisible = false
        const result = JSON.stringify(this.form)
        console.log(this.dialogStatus === 'addEquipment')
        console.log(this.dialogStatus)
        if (this.dialogStatus === 'addEquipment') {
          _this.$axios.post('/ws/pc/mgr/action/addProject', result, { headers: { 'Content-Type': 'application/json;charset=utf-8' }}).then(response => {
            if (response.data) {
              if (response.data.statusCode == 1) {
                _this.$alert('新增成功', {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
                })
                this.requestProjectConData(this)
              } else {
                console.log(response.data.message)
                _this.$alert(response.data.message, {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
                })
              }
            }
          }).catch(err => {
            console.log(err)
            alert('请求失败')
          })
        } else {
          _this.$axios.post('/ws/pc/mgr/action/updatePlProject', result, { headers: { 'Content-Type': 'application/json;charset=utf-8' }}).then(response => {
            if (response.data) {
              if (response.data.statusCode == 1) {
                _this.$alert('修改成功', {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
                })
                this.requestProjectConData(this)
              } else {
                console.log(response.data.message)
                _this.$alert(response.data.message, {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
                })
              }
            }
          }).catch(err => {
            console.log(err)
            alert('请求失败')
          })
        }**/
      }
    },
    projectTableDelete(row) {
      this.dialogVisible = true
      this.deleteRowSn = row.projectSN
    },
    projectDeleteSureBtn() {
      this.dialogVisible = false
      const _this = this
      console.log(this.deleteRowSn)
      $.each(this.tableData,function(i,item){
        console.log(item.projectSN)
        if(item.projectSN == _this.deleteRowSn){
          _this.tableData.splice(i,1)
          return false
        }
      })
      this.table_data()
    }
  }
}
