<template>
  <div class="data-table">
    <div style="margin-top: 20px">
      <el-button
          style="padding: 10px"
          icon="el-icon-back"
          @click="back"
      />
      <label>维护对象类型：</label>
<!--      <el-select-->
<!--          v-model="value"-->
<!--          clearable-->
<!--          placeholder="请选择"-->
<!--          @change="changOptions"-->

<!--      >-->
<!--        <el-option-->
<!--            v-for="(item,index) in options"-->
<!--            :key=index-->
<!--            :label="item.label"-->
<!--            :value="item.value"-->
<!--        />-->
        <el-select disabled v-model="deviceCls">
        <el-option :value="deviceCls"/>
      </el-select>
    </div>
    <el-table
        :data="tableList"
        style="width: 100%;margin-top: 30px"
        v-loading="loading"
    >
      <el-table-column
          label="L1（专业）"
          align="center"
      >
        <el-table-column
            prop="major"
            label="编码"
            width="120"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="majorName"
            label="名称"
            width="120"
            align="center"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
          label="L2（系统）"
          align="center"
      >
        <el-table-column
            prop="sys"
            label="编码"
            width="120"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="sysName"
            label="名称"
            width="120"
            align="center"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
          label="L3（设备）"
          align="center"
      >
        <el-table-column
            prop="device"
            label="编码"
            width="120"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="deviceName"
            label="名称"
            width="120"
            align="center"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
          label="L4（部件）"
          align="center"
      >
        <el-table-column
            prop="unit"
            label="编码"
            width="120"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="unitName"
            label="名称"
            width="120"
            align="center"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
          label="继承标准设备类"
          align="center"
      >
        <el-table-column
            prop="dc"
            label="编码"
            width="120"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="dcName"
            label="名称"
            width="120"
            align="center"
        >
        </el-table-column>

      </el-table-column>
      <el-table-column
          label="手动维护转换规则"
          align="center"
      >
        <el-table-column
            label="数据中心转物理世界"
            align="center"
        >
          <template slot-scope="scope">
            <el-input
                v-model="scope.row.SwitchRule"
                :disabled="scope.row.type != 1"
                @change="dataAndGlobal(scope.$index,scope.row,1)"
            ></el-input>

          </template>
        </el-table-column>
        <el-table-column
            label="物理世界转数据中心"
            align="center"
        >
          <template slot-scope="scope">
            <el-input
                v-model="scope.row.SwitchRuleDataplatform"
                :disabled="scope.row.type != 1"
                @change="dataAndGlobal(scope.$index,scope.row,2)"
            ></el-input>
          </template>
        </el-table-column>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {dectInfo, dictUpdate} from '../../../api/relation/api'
  import {mapActions, mapGetters, mapState} from 'vuex'

  export default {
    name: "index",
    data() {
      return {
        deviceCls:'项目设备类',
        value: '',
        loading: false,
        dataValue: '',
        tableList: []
      }
    },
    created() {
      this.$store.dispatch('setBreadcrumb', [{
        label: '项目数据转换',
        path: '/relation/data'
      }, {
        label: '项目数据转换',
        path: '/relation/data'
      }, {
        label: '手动维护转换规则'
      }])
      //    获取表单数据
      let param = {
          projectId: this.projectId,
          "Filters": "DatacenterSign = 1",
          "Orders": "dcCategory",
          "PageNumber": 1,
          "PageSize": 1000,
      }
      this.loading = true
      dectInfo(param).then(res=> {
        this.loading = false
        if(res.data.Result === 'success') {
          res.data.Content.length && res.data.Content.forEach(i => {
            this.tableList.push({
              majorName: i.CustomCategoryName,
              major: i.CustomCategory,
              dcName: i.DcCategoryName,
              dc: i.DcCategory,
              SwitchRule: '',
              SwitchRuleDataplatform: '',
              DatacenterSign: '',
              DataplatformSign: '',
            })
            i.Content.length && i.Content.forEach(j => {
              this.tableList.push({
                sysName: j.CustomCategoryName,
                sys: j.CustomCategory,
                dcName: j.DcCategoryName,
                dc: j.DcCategory,
                SwitchRule: '',
                SwitchRuleDataplatform: '',
                DatacenterSign: '',
                DataplatformSign: '',
              })
              j.Content.length && j.Content.forEach(k => {
                this.tableList.push({
                  type: 1,
                  deviceName: k.CustomCategoryName,
                  device: k.CustomCategory,
                  dcName: k.DcCategoryName,
                  dc: k.DcCategory,
                  DatacenterSign: k.DatacenterSign,
                  DataplatformSign: k.DataplatformSign,
                  SwitchRule: k.SwitchRule,
                  SwitchRuleDataplatform: k.SwitchRuleDataplatform,
                  SchemeId: k.SchemeId
                })
                k.Content.length && k.Content.forEach(l => {
                  this.tableList.push({
                    type: 1,
                    unitName: l.CustomCategoryName,
                    Unit: l.CustomCategory,
                    dcName: l.DcCategoryName,
                    dc: l.DcCategory,
                    DatacenterSign: l.DatacenterSign,
                    DataplatformSign: l.DataplatformSign,
                    SwitchRule: l.SwitchRule,
                    SwitchRuleDataplatform: l.SwitchRuleDataplatform,
                    SchemeId: l.SchemeId
                  })
                })
              })
            })
          })
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
          this.back()
        }
      })
    },
    computed: {
      ...mapGetters('layout', ['projectId']),
      ...mapState('layout', ['rowEdit'])
    },
    methods: {
      ...mapActions('layout', ['setRowEdit']),
      back() {
        this.$router.go(-1)
      },
      changOptions(val) {
        console.log(val)
      },
      dataAndGlobal(index, val, type) {
        let param = []
        if (type === 1) {
          param.push({
            projectId: this.projectId,
            SchemeId: val.SchemeId,
            CustomCategory: val.device,
            SwitchRule: val.SwitchRule
          })
        }
        if (type === 2) {
          param.push({
            projectId: this.projectId,
            SchemeId: val.SchemeId,
            CustomCategory: val.device,
            SwitchRuleDataplatform: val.SwitchRuleDataplatform
          })
        }
        dictUpdate(param, res => {
          this.setRowEdit(true)
        })
      }
    },

  }
</script>

<style scoped lang="less">
  .data-table {


    .danger-color {
      /deep/ .el-input__inner {
        border-color: #f56c6c !important;
      }
    }
    label {
      margin-left: 20px;
    }
  }
</style>