<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom: 10px">
          <el-input size="mini" v-model="search.orderCode" placeholder="订单编号" style="width: 200px;" class="filter-item" />
          <el-input size="mini" v-model="search.guarantorPerson" placeholder="担保人姓名" style="width: 200px;" class="filter-item" />
          <el-input size="mini" v-model="search.clientName" placeholder="客户名称" style="width: 200px;" class="filter-item" />
          <el-date-picker
            size="mini"
            v-model="searchTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
      <el-select size="mini" v-model="search.guarantorCheckFlag">
        <el-option label="未审核" value="0"></el-option>
        <el-option label="已审核" value="1"></el-option>
        <el-option label="全部" value="-1"></el-option>
      </el-select>
          <el-input size="mini" v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
        <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
          搜索
        </el-button>
      <el-checkbox size="small" @change="checkLock" v-model="LockBtn" label="只查欠款" border></el-checkbox>
      <el-button size="mini" class="filter-item" type="green"  @click="guarantorCheck">
          审核
        </el-button>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getListInfo"/>
        </el-tooltip>
      </div>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      size="mini"
      border
      @selection-change="handleSelectionChange"
      default-expand-all>
      <el-table-column
        type="selection"
        fixed="left"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        fixed
        width="200"
        align="center"
        label="操作">
        <template slot-scope="{row}">
          <el-button
            v-if="row.guarantorCheckFlag == 0"
            @click.stop="backBtn(row)"
            size="mini"
            type="primary">
            退回
          </el-button>
          <el-button
          v-if="row.guarantorCheckFlag == 1 && row.applyFlag == 0"
          @click.stop="cancelCheck(row)"
          size="mini"
          type="danger">
          取消审核
        </el-button>
          <el-button
            v-if="row.guarantorCheckFlag == 1 && row.applyFlag == 0"
            @click.stop="handleAccountApply(row)"
            size="mini"
            type="primary">
            认款申请
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="guarantorPerson"
        label="担保人">
      </el-table-column>
      <el-table-column
        prop="guarantorCheckFlag"
        label="审核状态">
        <template slot-scope="{row}">
          <el-tag v-if="row.guarantorCheckFlag == 0" type="warning">未审核</el-tag>
          <el-tag v-else-if="row.guarantorCheckFlag == 1" type="success">已审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        prop="applyFlag"
        label="认款申请状态">
        <template slot-scope="{row}">
          <el-tag v-if="row.applyFlag == 1" type="warning">待财务确认</el-tag>
          <el-tag v-else-if="row.applyFlag == 2" type="success">财务确认完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderCode"
        width="100"
        label="订单编码">
        <template slot-scope="{row}">
          <a href="javascript:;" style="color: #20a0ff" @click="getOrderStep(row)">{{ row.orderCode }}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderName"
        width="100"
        show-overflow-tooltip
        label="订单名称">
        <template slot-scope="{row}">
          <a href="javascript:;" style="color: #20a0ff" @click="openDetail(row.idOrder)">{{ row.orderName }}</a>
        </template>
      </el-table-column>
        <el-table-column
          prop="clientName"
          width="100"
          show-overflow-tooltip
          label="客户名称">
        </el-table-column>
      <el-table-column
        prop="orderMoneyTotal"
        label="订单金额">
      </el-table-column>
      <el-table-column
        prop="chargeMoney"
        label="应收金额">
      </el-table-column>
      <el-table-column
        prop="guarantorMoney"
        label="担保金额">
      </el-table-column>
      <el-table-column
        prop="orderCreateTime"
        label="制单日期"
        width="160">
        <template slot-scope="{row}">
          <span v-if="row.orderCreateTime"> {{ row.orderCreateTime | getTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderCreateMan"
        label="制单人">
      </el-table-column>
      <el-table-column
        prop="feedBackDate"
        label="发货反馈时间"
      width="160">
        <template slot-scope="{row}">
          <span v-if="row.feedBackDate"> {{ row.feedBackDate | getTime }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="actSendDate"-->
<!--        label="订单交货日期"-->
<!--        width="160">-->
<!--        <template slot-scope="{row}">-->
<!--          <span v-if="row.actSendDate"> {{ row.actSendDate | getTime }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="orderMemo"
        show-overflow-tooltip
        label="订单备注">
      </el-table-column>
    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getListInfo" />


    <el-dialog title="退回审核" :close-on-click-modal="false" :visible.sync="backDialog" width="600px">
      <el-form label-width="80px" label-position="right">
        <el-form-item label="退回备注">
          <el-input type="textarea" v-model="backInfo.guarantorReturnMemo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="backDialog = false">取 消</el-button>
        <el-button type="primary" @click="checkBack">确 定</el-button>
      </div>
    </el-dialog>
    <order-step ref="orderStep"></order-step>
    <el-dialog title="订单详情" :close-on-click-modal="false" class="orderDetailDialog" :visible.sync="detailVisible" top="10px" width="1200px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <el-dialog title="认款申请" width="580px" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="认款说明" label-width="120">
          <el-input
            type="textarea"
            :rows="3"
            placeholder=""
            v-model="memo">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="disabledBtn" type="primary" @click="applyBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrderGuarantorInfoList,
  orderGuarantorCheck,
  orderGuarantorCheckBack,
  guarantorAccountApply
} from '@/api/financial/guarantorReview'
import OrderStep from "@/components/orderStep/orderStep";
import OrderDetail from "@/components/orderDetail/orderDetail";
import Cancledialog from "@/components/Dialog/Cancledialog";
import {addOrderReceivableMemo} from "@/api/orderCharge/orderCollection";
export default {
  name: 'guarantorReview',
  components: {Cancledialog, OrderDetail,OrderStep},
  props: {
    isChoose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      LockBtn:true,
      rowId:"",
      disabledBtn:false,
      dialogFormVisible:false,
      webType: true,
      search: {
        beginTime: '',
        endTime: '',
        guarantorCheckFlag: '0',
        orderCode: '',
        clientName: '',
        guarantorPerson: '',
        keyWord: '',
        onlyCharge:1,
      },
      searchTime: [],
      form: {},
      options: [],

      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },

      listLoading: false,
      tableData: [],
      chooseList: [],
      backDialog: false,
      memo:"",
      backInfo: {
        id: '',
        guarantorReturnMemo: ''
      },

      detailVisible: false

    }
  },
  mounted() {
    this.search.guarantorPerson = this.$store.state.user.name
    this.getListInfo()
    if (this.$route.query.type === undefined) {
      this.webType = true
    } else {
      this.webType = false
    }
  },
  methods: {
    checkLock(val){
      this.listData.page = 1
      this.getListInfo()
    },
    applyBtn(){
      var _that = this;
      if (!_that.memo) {
        _that.$message.warning('请填写认款说明')
        return
      }
      _that.disabledBtn = true;
      var data = {
        id:_that.rowId,
        memo:_that.memo
      }
      guarantorAccountApply(data).then(response => {
        _that.dialogFormVisible = false;
        _that.disabledBtn = false;
        _that.$message.success("申请成功");
        _that.getListInfo();
      }).catch(err => {
        _that.dialogFormVisible = false;
        _that.disabledBtn = false;
        _that.$message.error(err)
      })
    },
    handleAccountApply(row){
      var _that = this;
      _that.dialogFormVisible = true;
      _that.rowId = row.id;
      _that.memo = "";
      // this.$prompt('', '认款申请', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   inputPattern: /\S/,
      //   inputErrorMessage: '认款申请不能为空'
      // }).then(({ value }) => {
      //
      // }).catch(() => {
      // });
    },
    // 获取列表
    getListInfo() {
      const _that = this
      _that.listLoading = true
      if (_that.searchTime == null || _that.searchTime < 0) {
        _that.search.beginTime = ''
        _that.search.endTime = ''
      } else {
        _that.search.beginTime = _that.searchTime[0]
        _that.search.endTime = _that.searchTime[1]
      }
      if(_that.LockBtn){
        _that.search.onlyCharge = 1;
      }else {
        _that.search.onlyCharge = 0;
      }
      var params = _that.search
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      // console.log(data);
      getOrderGuarantorInfoList(data).then(response => {
        console.log(response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    // 刷新变革
    tableRefresh() {
      this.getListInfo()
    },
    // 搜索
    searchData() {
      this.listData.page = 1
      this.getListInfo()
    },

    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.$refs.orderStep.idOrder = row.idOrder
      _that.$refs.orderStep.getOrderStep()
    },

    // 订单详情
    openDetail(id) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = id
        _that.$refs.orderDetail.getInfo()
      })
    },
    handleSelectionChange(val) {
      // console.log(val)
      this.chooseList = val
    },
    // 审核
    guarantorCheck() {
      var _that = this
      var idArr = []
      if (_that.chooseList.length <= 0) {
        _that.$message.warning('请选择担保人')
        return
      }
      _that.chooseList.forEach(item => {
        idArr.push(item.id)
      })
      var data = {
        'ids': idArr.join(',')
      }
      // console.log(data);
      // return
      orderGuarantorCheck(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.$message.success('审核成功')
          _that.tableRefresh()
        }
      })
    },
    backBtn(row) {
      var _that = this
      _that.backDialog = true;
      _that.backInfo.id = row.id
    },
    checkBack() {
      var _that = this
      var data = {
        orderGuarantorInfo: _that.backInfo
      }
      orderGuarantorCheckBack(data).then(response => {
        console.log(response)
        if (response.httpCode == 200) {
          _that.backDialog = false
          _that.$message({
            message: '退回成功',
            type: 'success'
          })
          _that.tableRefresh()
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    cancelCheck(row) {
      var _that = this
      var printerTypeInfo = {
        id: row.id
      }
      var url = '/delivery/orderGuarantorCheckCancel'
      _that.$refs.confirmDialog.updataClick(printerTypeInfo, url)
    },
    // 弹窗内选择操作
    chooseThis(row) {
      // console.log('点击选择');
      this.$emit('choosePaper', row)
    },
    ERPChoose(row) {
      // this.$message.error(row)
      dyERP.sendJson(JSON.stringify(row))
    }
  }
}
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
</style>
