<!--
  @description: 系统设置->平台运营费率
  @author:hdk
  @routerPath: /systemManagement/procurementOperatingExpenses
  @date:  2020/9/29 17:19
-->
<template>
  <div>
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />运营费维护
    </div>
    <div class="wrap_i">
      <div class="left-tree">
        <div class="tree-container">
          <organizationTree
            ref="organizationTree"
            :search-params="searchParams"
            :height="organizationTreeData.height"
            :highlight-current="organizationTreeData.highlightCurrent"
            :on-click-node="organizationTreeData.onClickNode"
            @nodeClickData="treeNodeClick"
          />
        </div>
      </div>
      <div class="app-container calendar-list-container" style="width:77%">
        <section class="p0-16" style="margin: auto; width: 75%;">
          <div class="organization-search">
            <el-input v-model="organizationSearch" class="search-name-input" placeholder="请输入机构名称" />
            <el-button class="search-btn" type="primary" @click="searchOrganization">
              搜索
            </el-button>
          </div>
          <el-form ref="form" :model="OperatingExpensesData" :rules="rules" :inline-message="true">
            <table class="from_table" style="margin:60px 0 25px">
              <tr>
                <td>
                  <el-form-item label="组织机构" prop="departName" />
                </td>
                <td colspan="3">
                  {{ OperatingExpensesData.departName }}
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="运营费率" prop="feeRate" />
                </td>
                <td colspan="3">
                  <el-input v-model="OperatingExpensesData.feeRate" placeholder="请输入运营费率，保留两位小数，不能超过100" @blur="formatData('feeRate', '运营费率')" />
                </td>
              </tr>
              <!-- v-if="OperatingExpensesData.transmit === '01'" -->
              <tr>
                <td>
                  <el-form-item label="代理服务费率（%）" prop="agentFeeRate" />
                </td>
                <td colspan="3">
                  <el-input v-model="OperatingExpensesData.agentFeeRate" placeholder="请输入代理服务费率，保留两位小数，不能超过100" @blur="formatData('agentFeeRate', '代理服务费率')" />
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="运营费率（是否对下级有效）" prop="transmit" />
                </td>
                <td colspan="3">
                  <el-radio
                    v-for="item in transmitList"
                    :key="item.typecode"
                    v-model="OperatingExpensesData.transmit"
                    :label="item.typecode"
                  >
                    {{ item.typename }}
                  </el-radio>
                </td>
              </tr>
            </table>
          </el-form>
          <div style="text-align:center">
            <el-button type="primary" size="medium" @click="takeEffect">
              生效
            </el-button>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
// 接口
import { queryFeeRate, feeRateConfigure } from '@/api/procurement/procurementOperatingExpenses'
// 公共文件
import { ListMixin } from '@/mixins/ListMixin'
import { operatingRateMixin } from './mixins/operatingRateMixins'
/* 公用方法*/
import organizationTree from '@/views/common/user/organizationTree/organizationTree.vue'
export default {
  name: 'ProcurementOperatingRateList',
  components: { organizationTree },
  mixins: [ListMixin, operatingRateMixin],
  data() {
    return {
      organizationSearch: '', // 搜索框
      organizationTreeData: {
        height: '100%', // 树容器高度
        highlightCurrent: true, // 选中高亮
        onClickNode: true // 点击结点
      },
      searchParams: {
        departName: ''
      },
      rules: {
        feeRate: [
          { required: true, message: '请选择', trigger: 'blur' }
        ] // 采购组织形式
      },
      OperatingExpensesData: { // 运营费维护参数
        departId: '',
        departName: '',
        feeRate: '',
        transmit: '',
        agentFeeRate: '',
        feeRateStatus: '01'
      }
    }
  },
  created() {
    this.getQueryFeeRateInitInfo()
  },
  methods: {
    formatData(key, promptText) {
      if (this.OperatingExpensesData[key] > 100) {
        this.$message({
          message: promptText + '不能大于100',
          type: 'warning'
        })
        return false
      }
      if (this.OperatingExpensesData[key] <= 100) {
        this.OperatingExpensesData[key] = Number(this.OperatingExpensesData[key]).toFixed(2)
      }
      return true
    },
    // 树节点点击
    treeNodeClick(data) {
      this.OperatingExpensesData.departId = data.id
      this.OperatingExpensesData.departName = data.departname
      this.getData()
    },
    // 列表接口
    getData() {
      const params = {
        departId: this.OperatingExpensesData.departId
      }
      queryFeeRate(params).then(response => { // 查询运营费
        if (response.data === null) {
          this.OperatingExpensesData.feeRate = ''
          this.OperatingExpensesData.transmit = ''
          this.OperatingExpensesData.agentFeeRate = ''
        } else {
          this.OperatingExpensesData.feeRate = response.data.feeRate
          this.OperatingExpensesData.transmit = response.data.transmit
          this.OperatingExpensesData.agentFeeRate = response.data.agentFeeRate
        }
      })
    },
    // 生效按钮事件
    takeEffect() {
      // 必填校验
      if (this.OperatingExpensesData.departId === '') {
        this.$message({
          message: '请选择组织机构',
          type: 'warning'
        })
        return
      } else if (this.OperatingExpensesData.feeRate === '') {
        this.$message({
          message: '请填写运营费率',
          type: 'warning'
        })
        return
      }
      if (!this.formatData('feeRate', '运营费率')) {
        return
      }
      // if (this.OperatingExpensesData.transmit === '00') {
      //   this.OperatingExpensesData.agentFeeRate = ''
      // } else {
      if (!this.formatData('agentFeeRate', '代理服务费率')) {
        return
      }
      // }
      feeRateConfigure(this.OperatingExpensesData).then(response => { // 运营费配置
        this.$message({
          message: response.header.msg,
          type: 'success'
        })
      })
    },
    searchOrganization() {
      this.searchParams.departName = this.organizationSearch
    }
  }
}
</script>
<style lang="less" scoped>
  .left-tree {
    width: 23%;
    margin-top: 1px;
    float: left;
    border-right: 1px solid #eeeeee;
    height: calc(100vh - 40px - 60px);

    .tree-container {
      overflow: auto;
      height: 100%;
    }

    .tree {
      width: 5000px;
    }
  }
  .wrap_i {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .organization-search{
    margin-top: 15px;
    overflow: hidden;
    .search-name-input{
      float: left;width: 80%;
    }
    .search-btn{
      float: left;
      margin-left: 15px;
    }
  }
</style>

