<template>
  <div class="animated fadeInRight">
    <el-row :gutter="20">
      <el-col :span="3">
        <div class="border-radius">
          <div class="margin-xs-r treeview">
            <ul class="list-group text-center border-radius">
              <li v-for="(item, index) in feeTypeCds" :key="index" @click="swatchFeeTypeCd(item)"
                :class="{ 'vc-node-selected': conditions.feeTypeCd == item.statusCd }" class="list-group-item node-orgTree">
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="21">
        <el-card class="ibox">
          <div slot="header" class="flex justify-between">
            <span>{{ $t('feeConfigManage.queryCondition') }}</span>
            <el-button type="text" style="float: right;" @click="_moreCondition()">
              {{ moreCondition ? $t('feeConfigManage.hide') : $t('feeConfigManage.more') }}
            </el-button>
          </div>
          <el-form :model="conditions" label-width="0">
            <el-row :gutter="20">
              <el-col :span="4">
                <el-form-item>
                  <el-input v-model="conditions.configId" :placeholder="$t('feeConfigManage.enterFeeItemId')" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-input v-model="conditions.feeName" :placeholder="$t('feeConfigManage.enterFeeItem')" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-select v-model="conditions.feeFlag" :placeholder="$t('feeConfigManage.selectFeeFlag')" clearable>
                    <el-option v-for="item in feeFlags" :key="item.statusCd" :label="item.name" :value="item.statusCd" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-select v-model="conditions.paymentCd" :placeholder="$t('feeConfigManage.selectPaymentType')"
                    clearable>
                    <el-option v-for="item in paymentCds" :key="item.statusCd" :label="item.name"
                      :value="item.statusCd" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-select v-model="conditions.deductFrom" :placeholder="$t('feeConfigManage.selectAccountDeduction')"
                    clearable>
                    <el-option label="是" value="Y" />
                    <el-option label="否" value="N" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item>
                  <el-button type="primary" @click="_queryFeeConfigMethod">
                    {{ $t('common.query') }}
                  </el-button>
                  <el-button @click="_resetFeeConfigMethod" style="margin-left: 10px;">
                    {{ $t('common.reset') }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-show="moreCondition" :gutter="20">
              <el-col :span="4">
                <el-form-item>
                  <el-select v-model="conditions.isDefault" :placeholder="$t('feeConfigManage.selectDefaultFee')"
                    clearable>
                    <el-option v-for="item in isDefaults" :key="item.statusCd" :label="item.name"
                      :value="item.statusCd" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card class="ibox">
          <div slot="header" class="flex justify-between">
            <span>{{ $t('feeConfigManage.feeItems') }}</span>
            <div style="float: right;">
              <el-button type="primary" size="small" icon="el-icon-document" @click="showMarkdown">
                {{ $t('common.document') }}
              </el-button>
              <el-button v-if="hasPrivilege('502022022571930560')" type="primary" size="small"
                @click="_openAddFeeConfigModal">
                {{ $t('common.add') }}
              </el-button>
            </div>
          </div>

          <el-table :data="feeConfigs" border style="width: 100%">
            <el-table-column prop="configId" :label="$t('feeConfigManage.number')" align="center" />
            <el-table-column prop="feeTypeCdName" :label="$t('feeConfigManage.feeType')" align="center" />
            <el-table-column prop="feeName" :label="$t('feeConfigManage.feeItem')" align="center" />
            <el-table-column prop="feeFlagName" :label="$t('feeConfigManage.feeFlag')" align="center" />
            <el-table-column :label="$t('feeConfigManage.paymentType')" align="center">
              <template slot-scope="scope">
                {{ scope.row.paymentCd == '1200' ? $t('feeConfigManage.prepaid') : $t('feeConfigManage.postpaid') }}
              </template>
            </el-table-column>
            <el-table-column prop="paymentCycle" :label="$t('feeConfigManage.paymentCycle')" align="center" />
            <el-table-column prop="computingFormulaName" :label="$t('feeConfigManage.formula')" align="center" />
            <el-table-column :label="$t('feeConfigManage.unitPrice')" align="center">
              <template slot-scope="scope">
                {{ scope.row.computingFormula == '2002' ? '-' : scope.row.squarePrice }}
              </template>
            </el-table-column>
            <el-table-column prop="additionalAmount" :label="$t('feeConfigManage.additionalFee')" align="center" />
            <el-table-column :label="$t('feeConfigManage.accountDeduction')" align="center">
              <template slot-scope="scope">
                {{ scope.row.deductFrom == 'Y' ? $t('common.yes') : $t('common.no') }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('common.status')" align="center">
              <template slot-scope="scope">
                {{ scope.row.state == 'Y' ? $t('common.enabled') : $t('common.disabled') }}
              </template>
            </el-table-column>
            <el-table-column :label="$t('common.operation')" align="center" width="280">
              <template slot-scope="scope">
                <el-button v-if="hasPrivilege('502022022549630561')" type="text"
                  @click="_openEditFeeConfigModel(scope.row)">
                  {{ $t('common.edit') }}
                </el-button>
                <el-button type="text" @click="_settingConfigDiscount(scope.row)">
                  {{ $t('feeConfigManage.discount') }}
                </el-button>
                <el-button v-if="scope.row.isDefault == 'F' && hasPrivilege('502022022586400562')" type="text"
                  @click="_openDeleteFeeConfigModel(scope.row)">
                  {{ $t('common.delete') }}
                </el-button>
                <el-button type="text" @click="_openFeeConfigDetail(scope.row)">
                  {{ $t('common.detail') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-row :gutter="20" style="margin-top: 15px;">
            <el-col :span="18" class="text-left">
              <div>
                <p>{{ $t('feeConfigManage.feeFlagTip') }}</p>
                <p>{{ $t('feeConfigManage.paymentTypeTip') }}</p>
                <p>{{ $t('feeConfigManage.accountDeductionTip') }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <el-pagination :current-page.sync="curPage" :page-size="pageSize" :total="total"
                layout="total, prev, pager, next" @current-change="handlePageChange" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <add-fee-config ref="addFeeConfig" @success="handleSuccess" />
    <edit-fee-config ref="editFeeConfig" @success="handleSuccess" />
    <delete-fee-config ref="deleteFeeConfig" @success="handleSuccess" />
  </div>
</template>

<script>
import { listFeeConfigs } from '@/api/fee/feeConfigManageApi'
import AddFeeConfig from '@/components/fee/addFeeConfig'
import EditFeeConfig from '@/components/fee/editFeeConfig'
import DeleteFeeConfig from '@/components/fee/deleteFeeConfig'
import {getDict} from '@/api/community/communityApi'

export default {
  name: 'FeeConfigManageList',
  components: {
    AddFeeConfig,
    EditFeeConfig,
    DeleteFeeConfig
  },
  data() {
    return {
      feeTypeCds: [],
      feeFlags: [],
      paymentCds: [],
      isDefaults: [],
      feeConfigs: [],
      total: 0,
      curPage: 1,
      pageSize: 10,
      moreCondition: false,
      conditions: {
        configId: '',
        feeFlag: '',
        feeName: '',
        feeTypeCd: '',
        isDefault: 'F',
        paymentCd: '',
        deductFrom: ''
      }
    }
  },
  created() {
    this._listFeeConfigs()
    this.loadDicts()
  },
  methods: {
    async loadDicts() {

     const data = await getDict('pay_fee_config', 'fee_type_cd')
     this.feeTypeCds = data
    },

    async _listFeeConfigs() {
      try {
        const params = {
          ...this.conditions,
          page: this.curPage,
          row: this.pageSize,
          communityId: this.getCommunityId()
        }

        const { feeConfigs, total } = await listFeeConfigs(params)
        this.feeConfigs = feeConfigs
        this.total = total
      } catch (error) {
        this.$message.error(this.$t('common.loadFail'))
      }
    },

    _queryFeeConfigMethod() {
      this.curPage = 1
      this._listFeeConfigs()
    },

    _resetFeeConfigMethod() {
      this.conditions = {
        configId: '',
        feeFlag: '',
        feeName: '',
        feeTypeCd: '',
        isDefault: 'F',
        paymentCd: '',
        deductFrom: ''
      }
      this.curPage = 1
      this._listFeeConfigs()
    },

    _moreCondition() {
      this.moreCondition = !this.moreCondition
    },

    swatchFeeTypeCd(item) {
      this.conditions.feeTypeCd = item.statusCd
      this._listFeeConfigs()
    },

    _openAddFeeConfigModal() {
      this.$refs.addFeeConfig.open()
    },

    _openEditFeeConfigModel(feeConfig) {
      this.$refs.editFeeConfig.open(feeConfig)
    },

    _openDeleteFeeConfigModel(feeConfig) {
      this.$refs.deleteFeeConfig.open(feeConfig)
    },

    _settingConfigDiscount(feeConfig) {
      this.$router.push({
        path: '/fee/payFeeConfigDiscountManage',
        query: {
          configId: feeConfig.configId,
          feeName: feeConfig.feeName
        }
      })
    },

    _openFeeConfigDetail(feeConfig) {
      window.open(`/#/fee/feeConfigDetail?configId=${feeConfig.configId}`)
    },

    handlePageChange(page) {
      this.curPage = page
      this._listFeeConfigs()
    },

    handleSuccess() {
      this._listFeeConfigs()
    },

    showMarkdown() {
      // 显示文档的实现
    }
  }
}
</script>

<style scoped>
.border-radius {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background: #fff;
}

.list-group {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-group-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #ebeef5;
}

.list-group-item:hover {
  background-color: #f5f7fa;
}

.vc-node-selected {
  background-color: #ecf5ff;
  color: #409eff;
  font-weight: bold;
}

.margin-xs-r {
  margin-right: 5px;
}

.ibox {
  margin-bottom: 20px;
}
</style>