<template>
  <div style="padding: 0 20px;">
    <lx-header icon="md-apps" text="付款登记" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
      <div slot="content"></div>
      <slot>
        <span style="padding: 0 6px;word-break: keep-all;">创建日期</span>
        <span>
          <DatePicker :value="selectDate" placeholder="请选择日期" type="date" placement="bottom-start" style="width: 180px"
            @on-change="(e)=>selectDate = e"></DatePicker>
        </span>

        <span style="padding: 0 6px;word-break: keep-all;">关键字</span>
        <span>
          <Input v-model="keyword" placeholder="请输入关键字" style="width: 180px"></Input>
        </span>

        <span style="padding: 0 6px;word-break: keep-all;">预算计划</span>

        <span>
          <Input v-model="select.plan_name" clearable placeholder="请选择预算计划" @on-focus="showPlanForSearch"
            style="width: 200px" @on-clear="clearSelectForSearch" />
        </span>
        <span style="padding: 0 6px;word-break: keep-all;">
          状态
        </span>
        <Select v-model="status" clearable placeholder="请选择" style="width:100px;">
          <Option v-for="item in [{label:'待审核',value:0},{label:'已审核',value:1}]" :key="item.value" :value="item.value">
            {{ item.label }}
          </Option>
        </Select>
        <Button type="primary" style="margin-left: 10px" ghost>重置</Button>
        <Button type="primary" style="margin-left: 10px" @click="doSearch()">查询</Button>
        <Button type="primary" @click="toExport()" style="margin-left: 10px">导出</Button>
      </slot>
    </lx-header>



    <!--  搜索使用 预算计划  -->
    <xy-dialog :is-show.sync="isShowPlanForSearch" title="预算计划" :width="720" @on-ok="planSelectForSearch">
      <template v-slot:normalContent>
        <Input v-model="planSearch.name" search enter-button="搜 索" placeholder="搜索预算计划.." @on-search="searchBudgets" />
        <div style="margin: 10px 0;display: flex;justify-content: space-between;
    align-items: center;">
          <div>已选择：<span style="margin-right:10px">{{select.plan_name}}</span> </div>
          <el-link type="success" @click="clearSelectForSearch">清空选择</el-link>

        </div>
        <xy-table :list="plans" @rowClick="selectPlanForSearch" :show-index="false" :table-item="planTableSearch"
          :height="310" style="margin-top: 10px;" ref="singlePlanTable">
          <template v-slot:btns>
          </template>
        </xy-table>

        <div style="display: flex;justify-content: flex-end;">
          <Page :total="planTotal" show-elevator @on-change="planPageChange" />
        </div>
        <el-tag type="warning">点击行进行选择</el-tag>
      </template>

      <template v-slot:footerContent>
        <Button type="primary" @click="confirmPlanForSearch">确定</Button>
      </template>
    </xy-dialog>

    <xy-table :list="list" :table-item="table">
      <template v-slot:btns>
        <el-table-column label="操作" fixed="right" width="160" header-align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status === 0">
              <Button size="small" type="primary" style="margin-left: 10px;margin-bottom: 4px"
                @click="$refs['examineRegistration'].isShow = true,$refs['examineRegistration'].getRegistration(scope.row.id)">审核确认</Button>
            </template>
            <template v-else>
              <Button size="small" type="error" ghost style="margin-left: 10px;margin-bottom: 4px"
                @click="cancelExamine(scope.row)">审核撤销</Button>
            </template>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="total" show-elevator @on-change="pageChange" />
    </div>

    <examineRegistration ref="examineRegistration" @refresh="getFundLogs"></examineRegistration>
  </div>
</template>

<script>
  import {
    getFundLog,
    delFundLog,
    editorFundLog
  } from "@/api/paymentRegistration/fundLog"
  import {
    getToken
  } from '@/utils/auth'
  import {
    parseTime
  } from "@/utils"
  import {
    Message
  } from "element-ui";
  import {
    getBudget
  } from "@/api/budget/budget"
  import {
    getparameter
  } from "@/api/system/dictionary"
  import examineRegistration from "./components/examineRegistration";
  export default {
    components: {
      examineRegistration
    },
    data() {
      return {
        moneyWay: [],
        plan: [],
        planTableSearch: [{
            label: "分类",
            prop: 'type',
            formatter: (cell, data, value) => {
              let res = this.moneyWay.filter(item => {
                return item.id === value
              })
              return res[0]?.value || '未知'
            },
            width: 120
          },
          {
            label: "年份",
            prop: 'year',
            align: 'center',
            width: 90
          },
          {
            label: "名称",
            prop: 'name',
            align: 'left'
          },
          {
            label: "计划金额",
            prop: 'money',
            align: 'right',
            width: 160
          }
        ],
        plans: [], //预算数据
        planSearch: {
          name: "",
          plan_department_id: ""
        },
        planTotal: 0,
        plansPageIndex: 1,
        isShowPlanForSearch: false,
        status: 0,
        keyword: '',
        select: {
          plan_id: "",
          plan_name: ""
        },
        selectDate: '',
        list: [],
        total: 0,
        pageIndex: 1,
        table: [{
            label: "项目名称",
            minWidth: 300,
            prop: 'contract.name',
            fixed: 'left',
            align: 'left'
          },
          {
            label: "付款申请金额(元)",
            prop: "apply_money",
            align: 'right',
            width: 170,
            formatter: (v1, v2, value) => {
              return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
            }
          },
          {
            label: '实际付款金额(元)',
            prop: "act_money",
            align: 'right',
            width: 170,
            formatter: (v1, v2, value) => {
              return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
            }
          },
          {
            label: "预算计划",
            width: 320,
            align: "left",
            customFn: (row) => {
              {
                if (row.act_plan_link.length > 0) {
                  return row.act_plan_link.map(item => {
                      return ( < div > [{
                          item.plan.year
                        }] - {
                          item.plan.name
                        } < br / > [使用金额] {
                          item.use_money
                        }
                        元 < /div>)
                      })
                  }
                }

              }
            },
            {
              label: "款项类型",
              prop: "type",
              width: 120
            },
            {
              prop: 'status',
              label: '状态',
              width: 100,
              formatter: (cell, data, value) => {
                if (value === 0) return '待审核'
                else return '已审核'
              }
            },
            {
              label: "最后一笔",
              prop: "is_end",
              width: 125,
              formatter: (cell, data, value) => {
                return value == 1 ? "是" : "否"
              }
            },
            {
              label: "经办人",
              minWidth: 120,
              prop: 'admin.name',
              align: 'center'
            },
            {
              label: "业务科室",
              minWidth: 140,
              prop: 'department.name',
              align: 'center'
            },
            {
              label: "备注",
              minWidth: 360,
              prop: 'remark',
              align: 'left'
            },
            {
              label: "创建信息",
              prop: "created_at",
              width: 160,
              formatter: (cell, data, value) => {
                return parseTime(new Date(value), '{y}-{m}-{d}')
              }
            }
          ]
        }
      },
      methods: {

          planPageChange(e) {
            this.plansPageIndex = e
            this.getBudgets()
          },
          //获取资金渠道
          async getMoneyWay() {
            this.moneyWay = (await getparameter({
              number: 'money_way'
            })).detail
          },
          clearSelectForSearch() {
            this.select.plan_id = "";
            this.select.plan_name = "请选择预算计划";

          },
          //计划搜索
          searchBudgets() {
            this.plansPageIndex = 1;
            this.getBudgets();
          },
          doSearch() {
            this.pageIndex = 0;
            this.getFundLogs();
          },
          confirmPlanForSearch() {
            this.isShowPlanForSearch = false;
            this.getFundLogs();
          },

          //默认选择计划
          toggleSelection(plans, type) {

            if (plans) {
              this.plans.filter(plan => {
                if (plans.includes(plan.id)) {
                  plan.useMoney = this.plan[plans.indexOf(plan.id)].value.use_money
                  return true
                }
              }).map(row => {
                this.$refs.planTable.toggleRowSelection(row)
              })
            } else {
              this.$refs.planTable.clearSelection()
            }
          },
          //获取预算计划
          async getBudgets() {
            await getBudget({
              name: this.planSearch.name,
              page_size: 10,
              page: this.plansPageIndex,
              plan_department_id: this.planSearch.plan_department_id
            }).then(res => {


              this.plans = res.list.data

              this.planTotal = res.list.total;

              this.toggleSelection(this.plan.map(item => {
                return item.value.plan_id
              }), 1)
            })

          },
          async showPlanForSearch() {
            this.isShowPlanForSearch = true
            await this.getBudgets();
          },
          //选择计划 搜索
          selectPlanForSearch(sel) {
            console.log(sel)
            if (sel) {
              this.select.plan_id = sel.id;
              this.select.plan_name = "[" + sel.year + "]-" + sel.name;
            } else {
              this.select.plan_id = "";
              this.select.plan_name = "";
            }
          },
          //确认计划选择搜索
          planSelectForSearch() {
            if (this.select.plan_id == "") {
              Message({
                type: 'warning',
                message: '选择计划不能为空'
              })
              return
            }
            this.isShowPlanForSearch = false
          },
          pageChange(e) {
            this.pageIndex = e
            this.getFundLogs()
          },
          toExport() {
            this.is_export = 1;
            this.getFundLogs(true);
          },
          async getFundLogs(is_export) {
            await getFundLog({
              page_size: 10,
              page: this.pageIndex,
              keyword: this.keyword,
              date: this.selectDate,
              status: this.status,
              act_plan_link_id: this.select.plan_id
            }).then(res => {
              let tokens = getToken();
              if (is_export) {
                var url = "/api/admin/fund_log/index?token=" + tokens
                if (this.selectDate)
                  url += "&date=" + this.selectDate;
                if (this.keyword)
                  url += "&keyword=" + this.keyword;
                if (typeof(this.status) != "undefined")
                  url += "&status=" + this.status;
                if (this.select.plan_id)
                  url += "&act_plan_link_id=" + this.select.plan_id;
                url += "&is_export=" + this.is_export;
                url = location.host + url;
                console.log(url)
                window.open("http://" + url, '_blank')
                this.select.is_export = 0
                return;
              }
              this.list = res.data
              this.total = res.total
            })
          },

          deleteFundLog(row) {
            delFundLog({
              id: row.id
            }).then(res => {
              Message({
                type: 'success',
                message: '操作成功'
              })
              this.getFundLogs()
            })
          },

          cancelExamine(row) {
            editorFundLog({
              id: row.id,
              contract_id: row.contract_id,
              status: 0
            }).then(res => {
              this.getFundLogs()
              Message({
                type: "success",
                message: "操作成功"
              })
            })
          }
        },
        mounted() {
          this.getMoneyWay();
          this.getFundLogs()
        }
    }
</script>

<style scoped lang="scss">
</style>
