<template>
  <div class="card-container">
    <a-tabs type="card" @change="tabChange">
      <a-tab-pane key="1" tab="市州（含辖区所有医疗机构）">
        <div class="from-table">
          <a-row>
            <a-col style="text-align:center;">
              <span style="font-size:20pt">{{year}}年度州市医疗行政单位配比</span>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24/colCounts[colCountKey]/2" class="bg-light_blue">
              名额配比数量批量设置:
            </a-col>
            <a-col :span="24/colCounts[colCountKey]/2">
              <a-input-number v-model="batchValueCount" :min="0" :max="1000" />
            </a-col>
            <a-col :span="24/colCounts[colCountKey]/2">
              <a-button type="primary" @click="setBatchUnitCount">批量设置</a-button>
            </a-col>
            <a-col :span="6">
              州市行政机构数:<span style="color:red">{{unitGovCount}}</span>
            </a-col>
            <a-col :span="9">
            </a-col>
          </a-row>
          <a-row>
            <unit-count v-for="unit in unitGovInfo" :key="unit.id" :Unit="unit" :colCount="24/colCounts[colCountKey]" @valueChange="valueChange" />
          </a-row>
          <a-row>
            <a-col style="text-align:center;">
              <a-button type="primary" @click="saveUnitCount">保存</a-button>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="省直属单位名额配比">
        <div class="from-table">
          <a-row>
            <a-col style="text-align:center;">
              <span style="font-size:20pt">{{year}}年度省直医疗机构配比设置</span>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24/colCounts[colCountKey]/2" class="bg-light_blue">
              名额配比数量批量设置:
            </a-col>
            <a-col :span="24/colCounts[colCountKey]/2">
              <a-input-number v-model="batchValueCount" :min="0" :max="1000" />
            </a-col>
            <a-col :span="24/colCounts[colCountKey]/2">
              <a-button type="primary" @click="setBatchUnitCount">批量设置</a-button>
            </a-col>
            <a-col :span="6">
              省直医疗机构数:<span style="color:red">{{unitComCount}}</span>
            </a-col>
            <a-col :span="9">
            </a-col>
          </a-row>
          <a-row>
            <unit-count v-for="unit in unitComInfo" :key="unit.id" :Unit="unit" :colCount="24/colCounts[colCountKey]" />
          </a-row>
          <a-row>
            <a-col style="text-align:center;">
              <a-button type="primary" @click="saveUnitCount">保存</a-button>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
  <!-- <a-row>
    <a-col></a-col>
  </a-row> -->
</template>

<script>
import { isEmptyParams } from "@/views/utils/common"
import UnitCount from "@/views/unit/components/unitCount.vue"
import moment from "moment"

export default {
  name: "projAcountSet",
  components: {
    UnitCount,
  },
  data () {
    const colCounts = {};
    [2, 3, 4, 6, 8, 12].forEach((value, i) => {
      colCounts[i] = value;
    });
    return {
      unitGovInfo: [],
      unitComInfo: [],
      colCounts,
      colCountKey: 1,
      queryType: 1,
      batchValueCount: 0,
      year: moment().format('YYYY'),
      unitGovCount: 0,
      unitComCount: 0,
    };
  },
  created () {
    this.unitCount()
  },
  methods: {
    moment,
    tabChange (key) {
      this.queryType = key
      this.unitCount()
    },
    unitCount () {
      let pars = { queryType: this.queryType }
      let par = {
        ...pars,
      }
      this.$api.systemManage.getUnitProjLimit(par).then(({ data = {} }) => {
        if (data) {
          if (this.queryType == 1) {
            this.unitGovInfo = data
            this.unitGovCount = data.length
          }
          else {
            this.unitComInfo = data
            this.unitComCount = data.length
          }
        }
      })
    },
    valueChange (unit) {
      if (this.queryType == 1) {
        let arr = this.unitGovInfo.filter(p => p.id === unit.id)
        arr[0].projLimit = unit.projLimit
      } else {
        let arr = this.unitComInfo.filter(p => p.id === unit.id)
        arr[0].projLimit = unit.projLimit
      }
    },
    setBatchUnitCount () {
      if (this.queryType == 1)
        this.unitGovInfo.forEach(p => {
          p.projLimit = this.batchValueCount
        })
      else
        this.unitComInfo.forEach(p => {
          p.projLimit = this.batchValueCount
        })
    },
    saveUnitCount () {
      if (this.queryType == 1) {
        let unitGovList = this.unitGovInfo.filter(p => p.projLimit !== null)
        let pars = unitGovList
        this.$api.systemManage.updateUnitProjLimit(pars).then(({ data = {} }) => {
          if (data) {
            this.unitGovInfo = []
            this.$message.info(data)
            this.unitCount()
          }
        })
      } else {
        let unitComList = this.unitComInfo.filter(p => p.projLimit !== null)
        let pars = unitComList
        this.$api.systemManage.updateUnitProjLimit(pars).then(({ data = {} }) => {
          if (data) {
            this.unitComInfo = []
            this.$message.info(data)
            this.unitCount()
          }
        })
      }
    }
  }
};
</script>

<style>
.card-container {
  background: #f5f5f5;
  overflow: hidden;
  padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 100vh;
  margin-top: -16px;
}
.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}
.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}
.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
</style>
