<template>
  <div class="container">
    <div class="banner">
      <section class="table-text">
        <span>共有项目化字典类型：{{allCount}}</span>
        <span>需从物理世界补全“继承”规则的：{{filterCount}}</span>
        <el-button
            type="primary"
            @click="resetTransformation"
            :disabled="isDisabled"
        >重新转换
        </el-button>
        <span
            class="iconfont icon-guizeyingyong"
            @click="dataTable"
        ></span>
        <span>需补充转换规则的：{{replenishCount}}</span>
      </section>
    </div>
    <el-row :gutter="24">
      <el-col :span="12">
        <p class="border-left-8">标准数字化交付数据（数据中心）→（物理世界）项目实际数据</p>
        <el-table
            :data="margeData(dataCenter)"
            stripe
            style="width: 100%"
            :header-cell-style="{background:'#d9d9d9',color:'#606266'}"
        >
          <el-table-column
              prop="title"
              label="标准字典类型"
              align="center"
          />
          <el-table-column
              prop="Count"
              label="不能项目化的实例数量"
              align="center"
          />
        </el-table>
      </el-col>
      <el-col :span="12" style="padding-left: 0">
        <p class="border-left-8">项目实际数据（物理世界）→（数据中心）标准数字化交付数据</p>
        <el-table
            :data="margeData(dataPlatForm)"
            stripe
            style="width: 100%"
            :header-cell-style="{background:'#d9d9d9',color:'#606266'}"
        >
          <el-table-column
              prop="title"
              align="center"
              label="项目化字典类型"
          />
          <el-table-column
              prop="Count"
              align="center"
              label="不能标准化的实例数量"
          />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {createEquip, dictCount, dictDataCenter, dictDataPlatFrom, dictSwitchCount} from '../../../api/relation/api'
  import {mapActions, mapGetters, mapState} from 'vuex'

  export default {
    name: "index",
    data() {
      return {
        allCount: '',
        filterCount: '',
        replenishCount: '',
        dataCenter: [],
        dataPlatForm: [],
        isDisabled: true,
      }
    },
    computed: {
      ...mapGetters('layout', ['projectId']),
      ...mapState('layout', ['rowEdit'])

    },
    watch: {
      projectId() {
        this.init();
      }
    },
    created() {
      this.init()
    },
    methods: {
      ...mapActions('layout', ['setRowEdit']),
      init() {
        //  统计数量
        let count = {
          projectId: this.projectId
        }
        dictCount(count, res => {
          this.allCount = res.Count
        })
        //需要转换数量
        dictSwitchCount(count, res => {
          this.replenishCount = res.Count
          if (res.Count === 0) {
            this.isDisabled = true
            return
          }
        })
        //数据中心-物理世界数据转换
        dictDataCenter(count, res => {
          this.dataCenter = res.Content
        })
        // 物理世界-数据中心数据转换
        dictDataPlatFrom(count, res => {
          this.dataPlatForm = res.Content
        })
        //条件查询数量
        let filterCount = {
          projectId: this.projectId,
          "Filters": "type!=1;dcCategory isnull"
        }
        dictCount(filterCount, res => {
          this.filterCount = res.Count
        })
        this.diss()
      },
      diss() {
        this.isDisabled = this.rowEdit ? false : true
      },
      dataTable() {
        this.$router.push({
          path: "datatable",
          // query: {
          //   id: 1,
          //   qq: 2
          // }
        })
      },

      margeData(arr) {
        if (arr.length) {
          let arrList = arr.map(item => {
            let title = item.CategoryName ? item.CategoryName : '未知'
            item = {
              ...item,
              title: `${title}（编码${item.Category}）`
            }
            return item
          })
          arrList.sort((a, b) => a.title.localeCompare(b.title))
          return arrList
        } else {
          return []
        }
      },
      resetTransformation() {
        this.isDisabled = true
        this.setRowEdit(false)
        let param = {
          projectId: this.projectId
        }
        createEquip(param, res => {
        })
      }
    },

  }
</script>

<style scoped lang="less">
  .container {
    overflow-x: hidden;
    .border-left-8 {
      border-left: 8px solid black;
      margin: 10px 0;
      font-weight: 600;
      text-indent: 10px;
    }

    .banner {
      border: 1px solid #dfe6ec;
      background: #fff;

      .table-text {
        height: 30px;
        line-height: 30px;
        margin: 8px;
        font-weight: 600;
        cursor: default;

        span:nth-child(2) {
          margin-left: 40px;
        }

        span:nth-child(4), span:nth-child(5), button {
          float: right;
          margin-left: 20px;
        }

        span:nth-child(4) {
          font-size: 25px;
          cursor: pointer;
        }
      }
    }
  }

</style>