<template>
  <div class="run-mod-box">
    <EMSTableNew
      ref="failureTableDatas"
      :server="server"
      action="QueryFailureTableDatas"
      :params="formSearch"
      :columnsFn="failureMonitorColumns"
      :highlight-row="true"
    >
      <Form
        ref="formSearch"
        slot="search-bar"
        :model="formSearch"
        :label-width="120"
      >
        <Row>
          <Col span="6">
          <Form-item
            prop="claimNo"
            label="报账单号"
          >
            <Input
              v-model="formSearch.claimNo"
              class=""
              type="text"
              maxlength="30"
              clearable
            ></Input>
          </Form-item>
          </Col>

          <Col span="6">
          <Form-item
            prop="invoiceNo"
            label="发票编号"
          >
            <Input
              v-model="formSearch.invoiceNo"
              class=""
              type="text"
              maxlength="30"
              clearable
            ></Input>
          </Form-item>
          </Col>

          <Col
            span="12"
          >
          <div class="search_btns ivu-form-item">
            <!-- <a @click="changeShowMore">{{ $t('查看更多') }}</a> -->
            <Button
              type="warning"
              class="ems-btn-medium ems-btn-type1"
              style="padding: 0 18px;"
              @click.native="search"
            >
              {{ $t("查询") }}
            </Button>
            <Button
              class="ems-btn-medium ems-btn-type3"
              style="padding: 0 18px;"
              @click.native="reset"
            >
              {{ $t("重置") }}
            </Button>
          </div>
          </Col>
        </Row>
      </Form>
      <!-- <div slot="handle-bar">
        <Button
          type="warning"
          icon="search"
          @click.native="search"
        >
          {{ $t('查询') }}
        </Button>
        <Button
          type="info"
          icon="loop"
          @click.native="reset"
        >
          {{ $t('重置') }}
        </Button>
      </div> -->
    </EMSTableNew>
  </div>
</template>
<script>
import Server from './server.js';
import util from '@paymentPlatformSrc/tools/util.js';
const server = new Server();
export default {
  components: {
  },
  directives: {},
  data() {
    return {
      server: server,
      formSearch: {
        claimNo: '', // 付款申请号
        invoiceNo: '' // 发票编号
      }
    };
  },
  computed: {
  },
  watch: {
  },
  created: function() {},
  updated: function() {},
  beforeMount: function() {},
  mounted: function() {
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    // changeShowMore() {
    //   this.showMore = !this.showMore;
    //   this.$refs.failureTableDatas.showMore();
    // },
    // 表头字段定义
    failureMonitorColumns() {
      return [
        {
          title: '报账单号',
          width: 220,
          align: 'left',
          key: 'claimNo',
          sortable: 'custom',
          render: (h, params) => {
            return h('RowTools', {
              props: {
                data: [
                  {
                    text: params.row.claimNo,
                    handle: () => {
                      this.openPayBatch(params.row);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: '发票编号',
          align: 'left',
          key: 'invoiceNo',
          // sortable: "custom",
          minWidth: 160,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.invoiceNo
                }
              },
              params.row.invoiceNo
            );
          }
        },
        {
          title: '失败次数',
          align: 'left',
          key: 'failCount',
          // sortable: "custom",
          minWidth: 120,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.failCount
                }
              },
              params.row.failCount
            );
          }
        },
        {
          title: '最后一次失败原因',
          align: 'left',
          key: 'createdByName',
          // sortable: "content",
          minWidth: 200,
          render: (h, params) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                                        'ivu-table-cell-ellipsis',
                  title: params.row.content
                }
              },
              params.row.content
            );
          }
        }
      ];
    },
    openPayBatch(data) {
      this.server.queryProcessInfoByClaimNo({
        claimNo: data.claimNo
      }).then(response => {
        console.log('queryProcessInfoByClaimNo', response);
        if (response.status != 200) {
          return this.$Message.error(response.msg || '无法找到单号相应关联信息');
        } else {
          const dataResult = response.data && response.data.list && response.data.list.length > 0 && response.data.list[0];
          if (!dataResult) {
            return this.$Message.info(response.msg || '无法找到单号相应关联信息');
          }
          util.startProcess({
            source: 'manager',
            actionType: 'done',
            claimNo: dataResult.claimNo,
            claimId: dataResult.claimId,
            procInstId: dataResult.procesInstanceID,
            categoryCode: dataResult.catalogyCode,
            categoryName: dataResult.categoryName
          });
        }
      });
    },
    // 搜索
    search(page) {
      const formSearch = this.formSearch;
      this.$refs.failureTableDatas.load(formSearch, page);
    },
    // 重置
    reset() {
      const formSearch = this.formSearch;
      Object.keys(formSearch).map(key => {
        formSearch[key] = '';
      });
      this.$refs.formSearch.resetFields();
      this.search(1);
    }
  }
};
</script>
