<template>
  <at-table
    @load="loadData"
    :data="data"
    :page-result="pageResult"
    ref="AtTable"
    :dialogTitle="dialogTitle"
    :dialogVisible="dialogVisible"
    :default-querys="[
      {
        group: 'defaultQueryGroup',
        operation: 'EQUAL',
        relation: 'AND',
        property: 'project_id_',
        value: $route.params.id,
      },
    ]"
    :default-sorter="[{direction: 'DESC', property: 'pays_date_'}]"
    :cellClassNameFn="cellClassNameFn"
    @select-all="handleSelect"
    @select="handleSelect"
    @handleDialogCancel="handleDialogCancel"
    @handleDialogClose="handleDialogCancel"
    @handleDialogSubmit="handleDialogSubmit"
    @row-dblclick="handleRowDBClick"
  >
    <template v-slot:searchInput>
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="80px"
        class="search-top"
      >
        <el-input
          v-model="searchForm.paysName"
          placeholder="请输入缴费名称"
          clearable
        ></el-input>
        <el-button
          size="small"
          @click="handelSearch"
          type="primary"
          class="el-icon-search search-btn"
          >查询</el-button
        >
        <el-button
          size="small"
          @click="handleReset"
          type="primary"
          plain
          class="el-icon-refresh"
          >重置</el-button
        >
      </el-form>
    </template>
    <template v-slot:operationBtn>
      <el-button
        size="small"
        type="primary"
        @click="handleAdd"
        icon="el-icon-plus"
        >添加</el-button
      >
      <ht-delete-button
        :url="deleteUrl"
        :requestMethod="'POST'"
        :htTable="$refs.AtTable"
        >删除</ht-delete-button
      >
      <!-- <import-file :importData="importData" @load="load"></import-file>
      <el-button
        size="small"
        type="primary"
        @click="handleExport"
        icon="el-icon-download"
        plain
        style="margin-left: 10px"
        :loading="loading2"
        >导出</el-button
      > -->
      <el-button
        class="back"
        @click="handleBack"
        size="small"
        type="primary"
        icon="el-icon-back"
        plain
        >返回</el-button
      >
    </template>
    <template>
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column type="index" label="序号" align="center" width="55">
      </el-table-column>
      <el-table-column
        prop="projectName"
        label="项目名称"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="paysName"
        label="缴费名称"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="paysType"
        label="缴费类型"
        :show-overflow-tooltip="true"
        align="center"
      >
        <template v-slot="{row}">
          <span v-if="row.paysType !== '----'">
            {{ getDictName('xzjf-jflx', row.paysType) }}
          </span>
          <span v-else>----</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="paysValue"
        label="缴费金额（元）"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        sortable
        prop="paysDate"
        label="缴费日期"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        :show-overflow-tooltip="true"
        align="center"
      >
      </el-table-column>
    </template>
    <template v-slot:dialogContent>
      <el-form
        ref="form"
        v-form
        data-vv-scope="form"
        status-icon
        :model="form"
        :rules="rules"
        label-width="120px"
        v-if="dialogVisible"
        v-loading.fullscreen="loading"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="form.projectName"
                placeholder="请选择项目名称"
                @focus="handleFocusProject"
                clearable
                :disabled="true"
              >
                <el-button
                  type="primary"
                  @click="handleFocusProject"
                  slot="append"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费名称" prop="paysName">
              <el-input
                v-model="form.paysName"
                placeholder="请输入缴费名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="缴费类型" prop="paysType">
              <el-input
                v-model="form.paysType"
                placeholder="请输入缴费类型"
                clearable
                v-if="showType"
                @change="changeType"
              ></el-input>
              <dict-select
                v-model="form.paysType"
                dictCode="xzjf-jflx"
                validate="required"
                placeholder="请选择缴费类型"
                :clearable="true"
                @input="changeType"
                v-else
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费金额" prop="paysValue">
              <el-input
                type="number"
                v-model="form.paysValue"
                placeholder="请输入缴费金额"
                clearable
              >
                <i slot="suffix">元</i>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="缴费日期" prop="paysDate">
              <el-date-picker
                v-model="form.paysDate"
                type="date"
                placeholder="请选择缴费日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input
                type="textarea"
                v-model="form.remarks"
                placeholder="请输入备注"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <file-table
          style="margin-top: 20px"
          @handleFile="handleFile"
          :file="form.accessoryInfo"
          :info="'上传相关发票'"
        />
      </el-form>
    </template>
    <template v-slot:showTotalData>
      <span class="show-slected">
        已选中<i>{{ selected.numbers }}</i>
        条数据， 缴费金额合计
        <i>{{ moneyFormatter(selected.money) }} </i>元
      </span>
    </template>
    <project-info-dialog
      ref="project"
      :single="true"
      @select="handleSelectProject"
    ></project-info-dialog>
  </at-table>
</template>
<script>
import ProjectInfoDialog from '@/components/dialog/ProjectInfoDialog.vue'
import utils from '@/utils.js'
import req from '@/request.js'
const BigNumber = require('bignumber.js')
export default {
  name: 'administrativePay',
  components: {
    ProjectInfoDialog,
  },
  data() {
    return {
      total: {
        projectName: '合计',
        paysName: '----',
        paysType: '----',
        paysValue: 0,
        paysDate: '----',
        remarks: '----',
      },
      selected: {
        numbers: 0,
        money: '0',
      },
      showType: false,
      rules: {
        projectName: {
          required: true,
          message: '请选择项目名称',
          trigger: 'blur',
        },
        paysName: {
          required: true,
          message: '请输入缴费名称',
          trigger: 'blur',
        },
        paysType: {
          required: true,
          message: '请选择缴费类型',
          trigger: 'blur',
        },
        paysValue: {
          required: true,
          message: '请输入缴费金额',
          trigger: 'blur',
        },
        paysDate: {
          required: true,
          message: '请输入缴费日期',
          trigger: 'blur',
        },
      },
      form: {
        paysName: '',
        paysValue: '',
        paysType: '',
        paysDate: '',
        remarks: '',
        accessoryInfo: [], //附件信息
      },
      loading: false,
      searchForm: {
        paysName: '',
      },
      dialogTitle: '行政缴费',
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
    }
  },
  computed: {
    deleteUrl: function () {
      return (
        window.context.cqxy + '/biz/contract/administrativePayment/v1/delete'
      )
    },
  },
  methods: {
    changeType(value, obj) {
      if (value == '其它费用') {
        this.showType = true
        this.rules.paysType.message = '请输入缴费类型'
      }
    },
    handleSelectProject(data) {
      this.form.projectName = data.projectName
      this.form.projectId = data.id
    },
    handleFocusProject() {
      this.$refs.project.open()
    },
    loadData(param, cb) {
      let query = []
      let search = {
        pays_name_: this.searchForm.paysName,
      }
      for (let i in search) {
        if (search[i]) {
          query.push({
            group: 'defaultQueryGroup',
            operation: 'LIKE',
            property: 'pays_name_',
            relation: 'AND',
            value: search[i],
          })
        }
      }
      if (param.querys && param.querys.length) {
        param.querys.push(...query)
      } else {
        param.querys = query
      }
      this.$http
        .post('${cqxy}/biz/contract/administrativePayment/v1/query', param)
        .then(
          (resp) => {
            let response = resp.data
            this.selected = {
              numbers: 0,
              money: '0',
            }
            let data = response.rows
            let total = this.calculationTotal(data, 'paysValue')
            this.total.paysValue = total
            if (data.length !== 0) {
              data.push(this.total)
            }
            this.data = data
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
          },
          (error) => {
            reject(error)
          }
        )
        .finally(() => {
          if (cb) {
            cb()
          }
        })
    },
    handleAdd() {
      this.dialogVisible = true
      this.form = {
        projectName: this.$route.params.projectName,
        projectId: this.$route.params.id,
        paysName: '',
        paysValue: '',
        paysDate: '',
        remarks: '',
        accessoryInfo: [],
      }
      this.showType = false
    },
    handleSelect(selection) {
      selection.forEach((item, index) => {
        if (item.projectName === '合计') {
          selection.splice(index, 1)
        }
      })
      this.selected.numbers = selection.length
      let total = this.calculationTotal(selection, 'paysValue')
      this.selected.money = total
    },
    handleDialogCancel() {
      this.dialogVisible = false
    },
    handleDialogSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.accessoryInfo && this.form.accessoryInfo.length > 0) {
            this.form.accessoryInfo.forEach((item) => {
              if (item.id) {
                delete item.id
              }
            })
            let mth = 'post'
            if (this.form.id) {
              mth = 'put'
            } else {
              mth = 'post'
            }
            this.$http[mth](
              '${cqxy}/biz/contract/administrativePayment/v1/',
              this.form
            ).then((res) => {
              if (res.data.state) {
                this.$message.success('保存成功')
                this.dialogVisible = false
                this.$refs.AtTable.load()
              }
            })
          } else {
            this.$message.warning('请上传相关发票')
          }
        }
      })
    },
    handleRowDBClick(data) {
      this.form = data
      this.dialogVisible = true
    },
    handelSearch() {
      this.$refs.AtTable.load()
    },
    handleReset() {
      this.searchForm.paysName = ''
      this.$refs.AtTable.load()
    },
    handleFile(file) {
      this.form.accessoryInfo = file
    },
    handleBack() {
      this.$router.push({
        name: 'ProjectFlowChart',
        params: {
          id: this.$route.params.id,
          alias: 'contractInformation',
        },
      })
    },
    // 计算列表合同金额合计金额
    calculationTotal(data, key) {
      let total = new BigNumber(0)
      if (key && data && data.length !== 0) {
        data.forEach((item) => {
          if (item[key]) {
            total = total.plus(item[key])
          } else {
            total = total.plus(0)
          }
        })
      }
      return this.moneyFormatter(total)
    },
    cellClassNameFn(row) {
      // 列表项目名称为【合计】隐藏复选框
      if (row.row.projectName === '合计') {
        return 'table-column-hidden'
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/common.scss';
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.inputs {
  width: 100%;
}
.show-slected {
  font-size: 18px;
  i {
    font-style: normal;
    font-weight: 700;
    margin: 0 5px;
    color: #f40;
  }
}
/deep/ .table-column-hidden .el-checkbox__input {
  display: none;
}
/deep/ .table-column-hidden .cell > div {
  display: none;
}
</style>
