<template>
  <div class="page-byh-service">
    <block-header title="搜索"/>
    <div class="page-search">
      <el-form size="small" label-suffix=":" :inline="true" label-width="80px" ref="refForm" :model="form"
               class="demo-form-inline">
        <el-form-item prop="loanNo" label="借款编号">
          <el-input
              style="width: 260px"
              clearable
              v-model.trim="form.loanNo"
              @keyup.enter.native="onSubmit"
              placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset('refForm')">清空</el-button>
        </el-form-item>
      </el-form>
    </div>

    <block-header title="借款记录"></block-header>
    <div class="block-box">
      <el-table
          border
          size="mini"
          :highlight-current-row="true"
          :header-row-class-name="headerStyle"
          :data="data" stripe style="width: 100%;">
        <el-table-column align="center" width="140" prop="loanNo" label="借款编号"></el-table-column>
        <el-table-column align="center" prop="gmtCreated" label="申请日期" :formatter="dateFormats"></el-table-column>
        <el-table-column align="center" prop="startDate" label="放款日期" :formatter="dateFormats"></el-table-column>
        <el-table-column align="center" prop="raiseAmt" label="放款本金"></el-table-column>
        <el-table-column align="center" prop="productNameStr" label="产品名称"></el-table-column>

        <el-table-column align="center" prop="capitalCodeStr" label="放款资方"
        ></el-table-column>
        <el-table-column align="center" prop="serviceThemeName" label="服务费主体"
        ></el-table-column>
        <el-table-column align="center" prop="status" label="借款单状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==='AUDITED'" size="small">{{ loanStatusFormat(scope.row) }}
            </el-tag>
            <el-tag v-else-if="scope.row.status==='SETTLED'" size="small">{{ loanStatusFormat(scope.row) }}</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status==='OVERDUED'" size="small">
              {{ loanStatusFormat(scope.row) }}
            </el-tag>
            <el-tag type="warning" v-else-if="scope.row.status==='SUBMITED'" size="small">
              {{ loanStatusFormat(scope.row) }}
            </el-tag>
            <el-tag type="warning" v-else-if="scope.row.status==='BACKING'" size="small">
              {{ loanStatusFormat(scope.row) }}
            </el-tag>
            <el-tag type="info" v-else size="small">{{ loanStatusFormat(scope.row) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="settlePlanIndex" label="限制提前结清期数"></el-table-column>
        <el-table-column align="center" prop="cancelMemo" label="备注"></el-table-column>
        <el-table-column align="center" label="查看详情">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!--借款详情-->
    <template v-if="visible">
      <loan-detail
          @handleClose="visible=false"
          type="outsource"
          :title="title"
          :params="items"
          :dialogVisible="visible"/>
    </template>

  </div>
</template>

<script>

import LoanDetail from "#/byh/componments/LoanDetail";
import SettleReport from "#/byh/componments/SettleReport";
import GenerateSettleReport from "#/byh/componments/GenerateSettleReport";
import * as moment from "moment";

export default {
  name: "OrderSearch",
  components: {
    LoanDetail,
    SettleReport,
    GenerateSettleReport
  },
  data() {
    return {

      form: {
        loanNo: ""
      },

      visible: false,
      activeComponents: "BaseInfo",
      title: "基本信息",
      items: {},
      mcDialogVisible: false,
      mcItems: null,
      mcTitle: "",
      ActiveCom: "",
      zyItem:"",
      data: []
    }
  },
  created() {

  },

  methods: {
    /** 表格样式 */
    headerStyle() {
      return "tableHeaderStyle";
    },

    /** 初始化订单列表 **/
    async init() {
      try {
        const params = this.form
        const form = Object.assign({}, params)
        const res = await this.$$post('/outsourcing/query', {...form})
        if (res.status === 200 && res.data.success) {
          this.data = [{...res.data.result}];
        } else {
          this.$message.error(res.data.message);
        }
      } catch (err) {
        this.$Message.error(err || '系统异常');
        console.log(err, '初始化协议列表错误')
      }
    },

    /** 初始化协议枚举列表*/
    async initAgreementEnum() {
      try {
        const res = await this.$$get('/protocol/selectProtocolEnumList')
        if (res.status === 200 && res.data.success) {
          this.EnumList = res.data.result;
        } else {
          this.$message.error(res.data.message);
        }
      } catch (err) {
        this.$message.error(res || '初始化协议枚举列表报错');
      }
    },
    /** 协议作废 */
    async handleCancel(row) {
      // 加个确认弹框
      this.$confirm("是否确认作废协议?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "primary",
      }).then(async () => {
        try {
          const {clientNo, loanNo,id} = row
          const params = {clientNo, loanNo,id}
          const res = await this.$$post('/protocol/cancelProtocol', {...params})
          if (res.status === 200 && res.data.success) {
            this.$message.success('操作成功！');
            await this.init()
          } else {
            this.$message.error(res.data.message);
          }
        } catch (err) {
          this.$message.error(res || '初始化协议枚举列表报错');
        }
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消",
        });
      });
    },

    /** 延期弹框 */
    handleDelay(row) {
      const {loanNo, clientNo, protocolType,id} = row;
      this.delayForm.loanNo = loanNo;
      this.delayForm.clientNo = clientNo;
      this.delayForm.protocolType = protocolType;
      this.delayForm.id = id;
      this.delayVisible = true;
    },
    /** 延期提交 */
    async delaySubmit() {
      try {
        const form = this.delayForm
        const res = await this.$$post('/protocol/urlDelayed', {...form})
        if (res.status === 200 && res.data.success) {
          this.$message.success('操作成功！');
          await this.init()
          this.delayVisible = false;
        } else {
          this.$message.error(res.data.message);
        }
      } catch (err) {
        this.$message.error(res || '延期失败');
      }
    },
    /** 搜索提交 */
    onSubmit() {
      this.init()
    },

    handleCurrentChange(e) {
      this.form.current = e;
      this.init();
    },
    handleSizeChange(e) {
      this.form.size = e;
      this.form.current = 1;
      this.init();
    },

    /** 预览大图 */
    handlePreview(item, list) {
      const cache = []
      list.forEach(item => {
        console.log(item, '==')
        if (item.indexOf('mp4') === -1) {
          cache.push(item)
        }
      })
    },

    /** 视频预览 */
    handlePreviewVideo(item) {
      console.log(item, 'nasha')
      this.showvideoplay = true;
      this.videourl = item;
    },

    /*日期*/
    dateFormats: function (row, column) {
      let date = row[column.property]
      if (date === undefined) return '';
      return moment(date).format("YYYY-MM-DD")
    },
    //借款单状态
    loanStatusFormat: function (row) {
      let status = row['status'];
      return this.$enumUtils.toMsg('LoanStatuEnums', status);
    },
    capitalCodeFormat: function (row, column) {
      let capitalCodeStr = row['capitalCodeStr'];
      return this.$enumUtils.toMsg('CapitalEnums', capitalCodeStr);
    },
    // 切换选项卡
    handleClick(row) {
      console.log(row, '一行信息');
      this.visible = true;
      this.title = '借款详情';
      this.items = {
        ...this.params,
        ...row
      };
    }

  }
}


</script>

<style scoped>
.link-active, .link-null {
  text-decoration: none;
}

.link-active {
  color: #155bd4;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-table {
  margin-bottom: 20px;
}

.pages {
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
